kostenloser Webspace werbefrei: lima-city

Unerklärliche Verschiebung in div-Blöcken

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   mein-wunschname

   mein-wunschname hat kostenlosen Webspace.

   21:10, 21.11.2014

   Ich bastele gerade an einem CMS-Template, bin noch ganz am tag/anfang">Anfang. Die div-Struktur ist
   
   

   wrapper
   --banner
   --mitte
   ----content
   ----navigation
   --fuss

   
   
   content und navigation befinden sich nebeneinander. Sie sollen immer gleich hoch sein. Dafür nutze ich display:table und display:table-row und display:table-cell.
   
   Das ist soweit auch alles unproblematisch. Wenn ich nun aber in content ganz am Anfang eine Grafik mit img-Tag einfüge oder einen div mit festgelegter Höhe und Breite oder einen Werbeblock, dann verschiebt sich in navigation der Inhalt nach unten.
   
   Sehe kann man das hier (der grün gefärbte Bereich):
   http://jsfiddle.net/bpgs/ttogccoq/1/
   
   Wenn so ein Element aber weiter unten in content eingefügt wird, nach einem oder mehreren p-Absätzen, dann findet diese seltsame Verschiebung nicht statt. Zu sehen hier
   http://jsfiddle.net/bpgs/p44fy6p4/2/
   
   
   Hat jemand dafür eine Erklärung? Wie kann ich die Verschiebung im ersten Beispiel verhindern/beseitigen?
   

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. cannadesign

   

   cannadesign hat kostenlosen Webspace.

   21:22, 21.11.2014

   Dies liegt daran, dass der eingefügte IMG Tag entweder ausserhalb des Content Bereichs liegt (Demnach kein float: left o.ä. hat). Ne andere Ursache kann ich gerade auf Anhieb auch nicht feststellen.
   Sprich der Div "Werbung" müsste auch einen float: left; erhalten.

4. hechma

   

   hechma hat kostenlosen Webspace.

   10:06, 22.11.2014

   hi mein-wunschname,
   
   
   das liegt anscheinend daran das das vertical-align für die table-cells nicht standartmässig auf "top" sondern vielleicht "baseline" ist...
   
   setzte für das als table-cell ausgewiesene element die eigenschaft vertical-align:top und es funzt wies soll
   
   
   lg hechma
5. Autor dieses Themas

   mein-wunschname

   mein-wunschname hat kostenlosen Webspace.

   12:41, 22.11.2014

   @hechma & @cannadesign:
   Danke für eure Hinweise. Komischerweise tritt dieser eigenartige Effekt nicht auf, wenn das div-Element ein wenig Textinhalt hat bzw. wenn man an Stelle von <div > <p> verwendet.
   
   Tatsächlich aber bringt aber
   

   vertical-align:top

   
   die Lösung.
   Danke
   
   

6. hechma

   

   hechma hat kostenlosen Webspace.

   15:41, 22.11.2014

   hallo mein-wunschname,
   
   
   das verhalten ist schon genau wies sein soll, denn wenn du textinhalt ins div packst oder aus dem div ein p machst rutscht die "baseline" bzw die stelle von "text-top" des vertical-align ja nach oben...
   
   
   lg hechma

7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?