Abstände zwischen Spalten einfügen

    Hallo zusammen und erstmal Grüße an ein tolles Forum :)


    Ich bin im Begriff mit Joomla 3.5 die Homepage unserer Feuerwehr zu erstellen.
    Da ich ein paar Vorkenntnisse habe und ein relativ einfaches Template gewünscht ist, wollte ich das Template selbst erstellen.
    Dazu habe ich mir "Joomla 3! Das umfassende Handbuch" gekauft und sofort losgelegt.
    Durch einige Tutorials und YT Videos bin ich auch relativ schnell zu einem Ergebnis gekommen.
    Jedoch ist mein aktuelles Problem, dass die Abstände der einzelnen "Boxen" (ich nenns einfach mal so) untereinander zwar passen, das CMS mir allerdings die seitlichen Abstände nicht zulässt und wenn ich sie über CSS mit margin-left und margin-right einbinde er mir den rechten Teil nach unten schiebt :(


    Am Desktop-PC Browser Fenster sieht man es relativ schön, wobei es am Smartphone garnicht so schlecht aussehen würde.
    Wie gesagt, alles grade im Aufbau und der Inhalt erstmal Nebensache, geht nur mal um die Optik.
    Liegt aktuell auf ner Test Domain:


    http://www.handywerkstatt-weyerts.de


    Und vorab mit PS erstellt soll mein endgültiges Design in etwa so aussehen wie im Anhang.


    P.S.: braucht ihr die einzelnen Code Dateien?


    Mit vielen lieben Grüßen

    Hallo,


    Zitat von codeblack

    ... Ich bin im Begriff mit Joomla 3.5 die Homepage unserer Feuerwehr zu erstellen ...


    Das ist nicht gut. Nimm bitte die aktuelle Version 3.6.5:


    https://github.com/joomla/joomla-cms/releases/tag/3.6.5


    Zitat von codeblack

    ... Da ich ein paar Vorkenntnisse habe und ein relativ einfaches Template gewünscht ist, wollte ich das Template selbst erstellen ...


    Ich habe keine Ahnung von Template erstellen. Aber gerade in Bezug auf responsive Darstellung würde ICH vielleicht dieses Template nehmen:


    http://www.sinci.at/free-templates/joomla/feuerwehr-j

    Dein Problem ist das du die eigentlichen Cols' mit CSS formatiert hast. Das solltest du nicht tun. Verwende lieber so ein Markup, dann hast du auch wieder Abstände:


    Code
    <div class="row">
  <div class="col-md-3">
    <div class="sidebar">
      ...
    </div>
  </div>
</div>


    Und style dann die Klasse Sidebar. Und PS: die Schriftart passt nicht, bei mir gibt es einen Fallback auf eine Serifenschrift.

    @Elwood´Danke für die Empfehlung für ein wirklich hübsches Template, mich hat allerdings der Ehrgeiz gepackt und solange ich noch irgendwie voran komme werd ich's weiter versuchen :) Und Version 3.6.5 hab ich. Danke :)


    @WS-Theme Danke für das Markup, hab ich eingefügt und jeweils dazwischen module und component eingebunden, allerdings hab ich jetzt alles untereinander...
    Ich befürchte ich stell mich enorm dumm, aber ich steh auf dem Schlauch...

    Ich bewundere dich dass du das Template selbst bauen willst.
    Habe aber den Eindruck, dass dir nicht ganz klar ist wie Bootstrap grids gebaut sind. Du verwendest ausserdem Bootstrap Version 3, was wieder anders ist als das in Joomla standardmäßig vorhandene.


    Mein Rat ist:
    Nimm dir das protostar von Joomla vor, mach eine Kopie davon. Dann studiere es genau, bis du es verstanden hast. Schmeiss dann alles raus was du nicht willst und bau dann darin dein Template auf.
    Dann hast du genau den Dreispalter - auch mit den gewünschten Abständen.
    Ausser du machst das grid kaputt .. ;)

    Ich befürchte das es darauf rauslaufen wird :D
    Ich hab inzwischen noch ein CSS Handbuch gekauft und nun bin ich wirklich so weit es selbst zu basteln.
    Aber vermutlich hast du Recht mit deinem Rat.
    Ich werd das versuchen und hoffentlich am Ende zu dem Template kommen das ich haben möchte. :)


    Grüße

    Dumm geht anders.


    Zitat von codeblack

    allerdings hab ich jetzt alles untereinander...


    Du hast den Fehler gemacht, dass du überall ein div mit class=row drumrum gesetzt hast.


    row ist eine Reihe, eine Zeile und auf die verteilst du die "magischen zwölf Einheiten/Spalten".


    row-anfang
    col-md-3 (3 Spalten) + col-md-6 (6 Spalten) + col-md-3 (3 Spalten)
    row-ende


    Für Bootstrap 2 gibt es hier ein Tutorial, falls du firstlady's Tipp aufgreifen willst. In Bootstrap 2 sind die Grid-Klassen noch nicht so umfangreich. Vielleicht ein Vorteil.

    Ich benutz jetzt einfach diesen Thread hier, in der Hoffnung ihr könnt mir nochmal helfen.


    Ich hab das Protostar Template nun abgewandelt und meiner Ansicht nach hab ich noch 2 Probleme:


    1. Mit dem Mobil Menü, was kann ich tun um das .nav-child von Mobilgeräten aus bedienen zu können?
    Hab ne Anleitung gefunden mit so "+" Symbolen hinter den Parent Menüpunkten, aber das bring ich irgendwie nicht auf die Reihe. :D
    Irgendwelche Ideen?


    2. Meine HP ladet seit gestern mega langsam, liegt das nun am Hoster oder an nem Fehler in der Page?
    Hab eigentlich nichts mehr verändert seit 3 Tagen und als ich heute weiter machen wollte ist mir das aufgefallen.
    Kann man da was sagen?


    Vielen lieben Dank :)

    Wenn du ladeprobleme hast dann gib einen link zur Seite und die Profis können dir helfen bzw analysieren ob und was schief läuft bzw lädt.. .
    Edit: seh gerade, geht um die Seite in deinem ersten Beitrag oder?

    ... bis zum Spiel!
    Gruss Marco L.

    Einmal editiert, zuletzt von eumel1602 ()

    Hallo,


    ich nochmal:
    das mit dem Menü hab ich hinbekommen.


    Zur Ladezeit: Vergangene Nacht alles wunderbar gewesen und jetzt die selben Probleme wieder, laut GTMetrix Report 1min Waiting time auf die HP...
    Liegt das am Hoster? Wäre so nebenbei Strato...
    Deren Kundendienst sagt zwar es sei alles i.O ich solle optimieren, jedoch müssen die das ja sagen.


    Grüße