kostenloser Webspace werbefrei: lima-city


Unerklärliche Verschiebung in div-Blöcken

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    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. c*********n

    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. 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.

    @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. 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?

Über lima-city

Login zum Webhosting ohne Werbung!