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

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.

#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 ;)

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.

Zitat:

---

Zitat von CKern

ich versuche mich zum ersten Mail an RWD.

---

Das kannst du auch ohne das 12-Spalten-Grid. Das ist nur eine Option.

Vielen Dank an alle !