Zur Navigation

Positionierung mit CSS

1 Halvor (Gast)

Hallo!
Nachdem mir hier zu einer Website bereit hervorragend geholfen wurde, brauche ich nun ein paar Tipps zu einer anderen Website.

Die soll so aussehen:
www.ole-brumm.de/website.jpg
Ich hab das im Firefox auch schon ganz gut hinbekommen, aber leider funktioniert das im IE überhaupt nicht. Oben und unten sollen Bilder als Links mit gleichbleibendem Abstand zum Fensterrand (top/bottom) sein. Dazwischen eine weiße Box mit 750px Breite, in die der Inhalt soll. Und das Ganze solle dann zentriert werden.
Ich habe das jetzt in folgende divs gelegt:

1. Eine Box, in der alles andere drin liegt, damit dass alles zentriert wird:
width: 750px;
top: 0px;
margin: auto;
2. Die weiße Box mit den Maßen, wie auf dem Bild zu sehen ist:
background-color: #FFFFFF;
width: 750px;
position: absolute;
overflow: visible;
bottom: 70px;
top: 50px;
3. Die vier oberen Linksbilder mit folgenden Attributen (jeweils andere Werte) versehen in die weiße Box:
left: 15px;
top: -45px;
position: absolute;
height: 73px;
width: 150px;
4. Die vier unteren Linkbilder in die weiße Box:
left: 15px;
position: absolute;
height: 73px;
width: 150px;
bottom: -45px;
5. Eine zweite weiße Box, die nicht in der anderen liegt und etwas kleiner ist als die erste, damit der Inhalt nicht unter die Bilder gerät:
width: 750px;
top: 90px;
position: absolute;
overflow: auto;
bottom: 120px;
background-color: #FFFFFF;
Body und html auf 100% height eingestellt und body noch grau.

Und nun bitte ich um einen Tipp, ob ich auf dem richtigen Weg bin oder ob das anders viel besser geht. Im IE ziehen sich die unteren Linkbilder über die oberen, also nix mit bottom...

Danke im Vorraus!
Halvor

09.11.2006 23:35

2 Jörg

Im IE ziehen sich die unteren Linkbilder über die oberen, also nix mit bottom...

Im Internet Explorer 6 - der 7er hat damit keine Probleme

Der IE 6 bräuchte bei der Positionierung mittels der bottom-Angabe zusätzlich eine height-Angabe des absolut positionierten Elternelementes, also der weißen Box, um die Höhe der Bilder zu berechnen

#box {
background-color: #FFFFFF;
width: 750px;
position: absolute;
overflow: visible;
bottom: 70px;
top: 50px;
height:500px;
}

Aber damit würde sich die Höhe der Box natürlich nicht mehr an das Fenster anpassen. Ein Lösung oder Workaround für den IE 6 fällt mir spontan nicht ein, aber vielleicht weiß da jemand anders etwas..

10.11.2006 00:14 | geändert: 10.11.2006 00:15

3 Jörg

Nachtrag:

vielleicht eine Möglichkeit: du bringst die Bilder in einem extra div unter, welches mit der bottom-Angabe am unteren Rand ausgerichtet ist und über eine feste Höhe verfügt

10.11.2006 01:05

Beitrag schreiben (als Gast)





[BBCode-Hilfe]