nicht angemeldet
Hallo erstmal. Bin neu hier, aber nicht unbedingt ein Neuling was (X)HTML und CSS angeht.
Jedoch stehe ich derzeit irgendwie total auf einem riesigen Schlauch.
Folgendes Problem:
2 DIVs sollen übereinander liegen. Der erste DIV enthält nur ein Bild welches ich wiederrum per CSS mit em-Größe angebe, damit es auch im FF < 3.0 und IE < 7 entsprechend skaliert wird, wenn man die Schriftgröße verändert.
Der darüberliegende DIV enthält eine Liste mit Links.
Rechts daneben soll dann der Content-DIV erscheinen.
(Randbemerkung : Mit floats hab ich das alles wunderbar geschafft, aber musste nun zu position-Angaben wechseln wegen den 2 übereinanderliegenen DIVs welche ich wiederrum brauche für die Skalierung.)
Hier mein xhtml-Aufbau:
<div class="navwrapper">
<img src="grafiken/nav_bg2.gif" />
</div><!-- navwrapper -->
<div class="nav">
<ul>
<li><a href="">Startseite</a></li>
<li><a href="">weitere Links</a></li>
</ul>
</div><!-- nav -->
<div class="content">
Mein ganzer Inhalt
</div>
Dazu folgende relevanten CSS-Definitionen:
.navwrapper {
position: absolute;
float: left;
height: 40em;
}
.navwrapper img { /* Zier-/Hintergrundgrafik links*/
width: 11.0em;
height: 39.85em;
}
.nav {
position: relative;
min-height: 40.625em;
width: 11.0625em;
}
.content {
position: relative;
left: 16.875em;
/*top: -40.625em;*/
width: 40em;
min-height: 40em;
}
Derzeit schaut es so aus:
Beide Divs übereinander und passt auch alles ... der Knackpunkt ist der content-DIV. Derzeit liegt fängt der erst am Ende vom navwrapper&nav-DIV an.
Gebe ich dem Content nun eine negative top-Angabe (derzeit auskommentiert) schaut auch alles schön aus, aber dafür habe ich am ende der Seite den Teil, den ich oben als neg. top angegeben habe als leeren bereich. Mein gesamter Seitenwrapper wird einfach um 40.625em vergrößert, was ich nicht verstehe.
Hoffe es ist alles klar geworden und ich hab das Problem nicht allzu verwirrend beschrieben.
Vielen Dank schonmal im voraus