Ergebnis 1 bis 6 von 6

Thema: Frage / Problem mit dem 960er-Grid und Layout-Builder

  1. #1
    Contao-Nutzer
    Registriert seit
    16.01.2012.
    Beiträge
    91

    Standard Frage / Problem mit dem 960er-Grid und Layout-Builder

    Hallo Zusammen,

    ich versuche mich zum ersten Mail an RWD.
    Für meine Webseite, die ich erstelle ich im Seitenlayout eingestellt:
    CSS-Framework:
    • CSS-Reset
    • 12-Spalten-Grid
    • Layout-Builder


    Die linke-Spalte aktiviert mit einer Breite von 240px (müsste ja dann grid3 sein)

    Wenn ihr mal diese Seite aufruft: http://neu.praxis-drs-heise.de/index...ertretung.html
    dann seht ihr mein Problem.

    Für den Artikel BEREITSCHAFTSDIENST habe ich die Klasse grid4 eingestellt
    Für den Artikel TEST die Klasse grid5
    das müsste doch jetzt alles zusammen 12 Spalten ergeben.
    Warum stehen die nicht nebeneinander?
    Ändere ich TEST auf grid4 passt ... aber dann ist ja noch Platz ...

    Hängt das mit dem Layout-Builder zusammen?
    Wenn ich mir das DIV main anschaue, dann ist das nur 718px breit!

    .... ich habe mich für den Layout-Builder entschieden, damit ich nicht für jede Seite das Menü bzw. "left" mit aufnehmen muss.


    Noch 2 Fragen am Rande:
    (a) Das Stethoskop oben rechts ist als absolutes DIV positioniert. Wenn ich die Seite nun z.B. am iPhone aufrufe, wird die Größe des Bildes nicht wirklich skaliert.
    Wie muss ich vorgehen, damit das Bild dem Viewport entsprechend verkleinert wird.
    (b) ich versuche jetzt fast alles (geht nicht überall) mit em zu definieren. Also auch margin, padding, ... in der Hoffnung, dass dann alles im Verhältnis zum Viewport sich anpasst ?!?!

    Viele Grüße

  2. #2
    Contao-Fan Avatar von kos
    Registriert seit
    22.06.2009.
    Ort
    Westerwald
    Beiträge
    888

    Standard

    Da Du dem container einen Rand von einem Pixel mitgibst, reicht die verbleibende Breite für #main(=718px) nicht aus, um darin dann eine Element mit grid4 (=320px) und ein Element mit grid5 (=400px) unterzubringen.

    Eine einfache Möglichkeit wäre hier, den #wrapper 962px breit zu machen (2 mal Rand hinzu).

    Das Stethoskop-Bild packst Du besser in ein eigenes <div>, dass dann wie gewünscht positioniert wird.
    Beispiel
    Code:
    .stethoskop {
        position: absolute;
        right: 0;
        top: 0;
        width: 22%;
        z-index: 10;
    }
    Die CSS-Angaben des Bildes img.stethoskop-oben wären dann zu löschen.

  3. #3
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    #container hat bei dir einen border von 1px und ist daher statt 960px innen nur 958px groß. Daher fehlen zwei Pixel, damit sich #left (240px) + #bereitschaftsdienst-kopie (320px) + #im-aktuellen-notfall-kopie (400px) ausgeht.

    // edit: zu langsam
    Geändert von Spooky (09.07.2013 um 08:50 Uhr)

  4. #4
    Contao-Nutzer Avatar von Lego2013
    Registriert seit
    26.01.2013.
    Ort
    Niedersachsen
    Beiträge
    155

    Standard

    Schau Dir dazu mal den Vortrag von Peter Müller und Thomas Weitzel von der diesjährigen Contao-Konferenz an: http://ck2013.think-contao.de/

    Da wird das Zusammenspiel der Komponenten sehr gut erklärt. Wenn Du dazu Fragen hast, beantworten Thomas und Peter die bestimmt auch gern direkt.
    Beste Grüße, Leo

    Gotta get up and try try try

  5. #5
    Buchautor 'Websites erstellen mit Contao' Avatar von pmmueller
    Registriert seit
    19.06.2009.
    Ort
    Groningen (NL)
    Beiträge
    1.523

    Standard

    Zitat Zitat von CKern Beitrag anzeigen
    ich versuche mich zum ersten Mail an RWD.
    Das kannst du auch ohne das 12-Spalten-Grid. Das ist nur eine Option.

  6. #6
    Contao-Nutzer
    Registriert seit
    16.01.2012.
    Beiträge
    91

    Daumen hoch

    Vielen Dank an alle !

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •