nicht angemeldet
Problem mit DIV-Gestaltung
Hallo,
ich muss eine Seite gestalten, an deren oberster Stelle ein grafisches, vertikales Menü sitzt. Menü + Content bilden dabei einen Block von genau 950px Breite, der zentriert in der Mitte des Bildschirms erscheint. Die einzelnen Links im Menü besitzen einen Hintergrund, der sich aber, egal wie groß der Bildschirm ist, bis zum jeweils linken und rechten Rand fortsetzen soll.
Ich habe versucht dieses Problem folgendermaßen zu lösen:
Ein absolut positionierter DIV - Layer mit dem gleichen Hintergrund wie die einzelnen Menülinks sitzt hinter dem eigentlichen Menü mit einer Breite von 100%.
Jetzt taucht aber folgendes Problem auf:
Ohne diesen Layer ist die oben beschriebene Contentbox sowohl im FF als auch im IE7 perfekt zentriert. Mit dem Layer passiert aber Folgendes:
Im FF wird alles so dargestellt wie gewünscht.
Im Internet Explorer bekomme ich einen Abstand von der linken Seite und muss erstmal nach rechts scrollen bis ich die Contentbox wieder komplett sehe, dort ist der Inhalt dann allerdings auch zu weit links.
CSS:
#headerback {
position: absolute;
top: 82px;
width: 100%;
height: 36px;
background-image:url(images/nav_verlauf-hintergrund.jpg);
z-index: 0;
}
#root {
position: relative;
width: 950px;
margin: auto;
text-align: left;
}
#header {
position: relative;
width: 750px;
height: 36px;
margin-top: 82px;
float: left;
z-index: 2;
}
#content {
position: relative;
width: 750px;
height: 698px;
float: left;
}
#header_side {
position: relative;
width: 100px;
height: 36px;
margin-top: 82px;
float: left;
background-image:url(images/nav_verlauf-hintergrund.jpg);
}
#side {
position: relative;
width: 100px;
float: left;
}
HTML:
<div id="headerback"> </div>
<div id="root">
<div id="header_side">
</div>
<div id="header">
<ul class="topmenu">
<li class="topmenuentry" style="width: 75px;"><a href="?page_id=1" class="menu_sitemap"> </a></li>
<li class="topmenuentry"><a href="?page_id=0" class="menu_home"> </a></li>
<li class="topmenuentry"><a href="?page_id=6" class="menu_help"> </a></li>
<li class="topmenuentry"><a href="?page_id=8" class="menu_service"> </a></li>
<li class="topmenuentry"><a href="?page_id=10" class="menu_registrieren"> </a></li>
<li class="topmenuentry"><a href="?page_id=12" class="menu_kontakt"> </a></li>
<li class="topmenuentry" style="width: 75px;"><a href="?page_id=1" class="menu_login"> </a></li>
</ul>
</div>
<div id="header_side">
</div>
<div id="side">
</div>
<div id="content">
</div>
<div id="side">
</div>
</div>
</body>
</html>
Die zwei DIVs "header_side" sind ein Überbleibsel eines vorangegangenen Versuchs, hatte versucht den verbleibenden Platz auf diese beiden DIVs anzuwenden, weiß aber nicht wie ich hier eine relative Größe angeben kann, die auch wirklich nur den verbleibenden Platz angibt.
Screenshots sind hier zu finden:
http://img98.imageshack.us/my.php?image=ffao8.jpg
http://img360.imageshack.us/my.php?image=ie7tl7.jpg
Verwendeter Doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Bin jetzt wirklich schon recht lange am Suchen,
hoffentlich weiß hier jemand Rat : )
Besten Dank im Vorraus,
Alex
-
Lieber Alex,
<div id="headerback"> </div>
<div id="root">
<div id="header_side">
</div><div id="header">
warum [DIV-Suppe](http://webstandard.kulando.de/post/2005/11/04/div_wahnsinn_div_suppe_oder_div_chaos_-_wie_kann_man_es_vermeiden)? Übrigens scheint mir Dein Vorhaben ähnlich aufgebaut zu sein, wie unsere [Schulwebsite](http://www.peutinger-gymnasium.de/). Dort ist eine ähnliche visuelle Aufbereitung umgesetzt worden. Vielleicht findest Du dort, was Du suchst? Liebe Grüße, Felix Riesterer. -- ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hallo Felix,
die Überlegung dahinter ist Folgende:
Der root-Container dient zum Zentrieren, er hat ein margin:auto; und somit ist jeder Inhalt innerhalb dieses DIVs vom linken und rechten Rand gleichweit entfernt. Gäbs da eine andere Möglichkeit?Der "header_side"-DIV ist wie gesagt ein Überbleibsel, als ich den absoluten DIV mit dem Hintergrund noch nicht eingebaut hatte, ein margin-left: 100px; für den "header"-DIV führt aber zum gleichen Ergebnis, das stimmt. Ändere ich das, komm ich aber auf die gleiche Darstellung wie bisher, löst mein Problem also auch nicht.
Die Parallele zwischen deiner Schulwebsite und meinem Problem kann ich leider auch nicht sehen - auf der Schulhomepage existiert einfach ein Block mit Inhalt, der immer zentriert ist, das allein wäre ja kein Problem. Ich muss bei mir aber über den Inhalt hinaus den Hintergrund meines Menüs bis zu den Seitenrändern ausdehnen, das seh' ich auf der Schulhomepage irgendwie nicht, vielleicht bin ich aber auch einfach blind.
Danke auf jeden Fall für deine rasche Antwort!
-
Lieber Alex,
ich glaube, Du hast meinen Farbverlauf im Hintergrund der Seite übersehen. Wenn Du nun ein Hintergrundbild (wie ich für <body>) definierst, das den gewünschten visuellen Effekt hat, dann sollte das mit dem "Hintergrundbild bis zum Rand" kein Problem mehr sein. Zumindest muss ich Deine Screenshots so deuten, als ob Du das so vorhättest.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hallo Felix,
stimmt, das hab' ich tatsächlich nicht gesehen, tut mir Leid : )
Das klingt wirklich nach einer brauchbaren Lösung, einfach aber oho!
Vielen, vielen Dank, du hast mir hier echt weitergeholfen : )Alex
-
stimmt, das hab' ich tatsächlich nicht gesehen, tut mir Leid : )
Das klingt wirklich nach einer brauchbaren Lösung, einfach aber oho!
Vielen, vielen Dank, du hast mir hier echt weitergeholfen : )das funktioniert allerdings nicht, wenn du realative angaben für die größe des menüs verwendest - bei einem weitestgehend festgezimmerten pixellayout funktionierts aber
-
-
-
-