Positionierungsfrage

[Laechleviel]

Hallo zusammen,

folgende Problemstellung:

Ein Layer soll innerhalb seines Eltern-Layers stets in der unteren linken Ecke angezeigt werden. Hierbei soll die Unterkante dieses Layers stets mit der Unterkante des Eltern-Layers bündig sein.

bottom: 0px; führt zu einer Positionierung, bei der die Oberkante des Layers an der Unterkante des Eltern-Layers anschließt. Eine Positionierung über top: Xpx; oder bottom: -Xpx; scheidet aus, da sich die Höhe der Inhalte des Layers (Navigation in Listenform) - z. B. bei einer Erhöhung der Schriftgröße über das Browser-Menü - ändern kann.

Ist wahrscheinlich ganz einfach aber irgendwie stehe ich bei diesem Punkt auf dem Schlauch.

Gruß und Danke :o)

Olaf

[Laus]

Vertical-alignsollte dir Helfen.

[Laechleviel]

Hallo,

habe das Problem mittlerweile fast gelöst.

Es geht um die Seite http://www.stephani-druecker.de/stephani_neu

Das große Bild oben befindet sich in dem Layer "thepicture":

#thepicture {
width: auto;
height: auto;
background-color: transparent;
margin: 0;
border-top: 6px solid #7F8266;
border-right: 1px solid #7F8266;
border-left: 1px solid #7F8266;
border-bottom: 1px solid #7F8266;
padding: 0;
position: relative;
}

Die Listen-Navigation befindet sich ebenfalls im Layer "thepicture":

#thepicture ul {
padding: 0;
margin: 0;
background-color: transparent;
float: left;
width: auto;
bottom: 0px;
left: 0px;
position: absolute;
}

li.page_item { display: inline; }

li.page_item a {
padding: 0.2em 1em;
background-color: #8BA6D5;
color: #FFFFFF;
text-decoration: none;
float: left;
border-right: 1px solid #5B7397;
border-top: 1px solid #5B7397;
border-bottom: none;
border-left: none;
font-family: verdana,lucida,sans-serif;
font-size: 10px;
}

li.page_item a:hover {
background-color: #7F8266;
color: white;
}

li.current_page_item a {
background-color: #5B7397;
}

In Opera und Mozilla wird alles korrekt angezeigt, im MS IE 6.0 befindet sich die Listennavigation am unteren Bildschirmrand.

Woran liegt´s?

Gruß

Olaf

[Laus]

Füge

Code: Alles auswählen

* html #thepicture ul { position: relative; bottom:18px;}


deinem Style hinzu dann klappts auch im IE6

Gruß Xaver

[Laechleviel]

Hallo Xaver,

ist schon klar, dass es dann funzen würde. Aber: Wenn ein Besucher über das Browsermenü die Schriftgröße verändert, würde es mit den 18px nicht mehr hinhauen.

Gruß

Olaf

[Laus]

Also mir ist es beim bestem willen nicht möglich im IE egal welcher Version die Schriftgröße zu verändern Nur im FF und Opera funktioniert das einwandfrei.

[Laechleviel]

Stimmt natürlich. Na dann geh ich mal froh ans Werk :o)

Gruß und Danke :o)

Olaf

[Laechleviel]

Hallo,

wenn mir irgendwann mal die Programmierer von MS über den Weg laufen...

Sieht nun auch im MS IE ganz passabel aus. Woher kommt aber verdammt nochmal der 3-Pixel-Rand unter dem Header-Image???

Habe den Layer "the picture" mit der Hintergrundfarbe grün versehen, um das Problem zu verdeutlichen. Hacks mit padding-bottom: -3px etc. bringen nichts. Das Bild als Hintergrund-Bild zu verwenden kommt nicht in Frage, da ich den Zufalls-Bild-Wechsel per php sonst nur recht aufwendig realisieren könnte.

Wat nu?

Gruß und Danke :o)

Olaf

[Laus]

Ein

Code: Alles auswählen

img {display: block;}

hilft hier weiter nachzulesen -->hier<--

[Laechleviel]

Rand ist weg - wunderbar :o)

Gruß und Danke

Olaf