Menüleiste genau so hoch wie Content
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angabe
code
container
datei
einstellen
element
farbe
http
leiste
modell
muster
opus
position
safari
schlauch
text
trick
url
verzeichnis
webseite
-
Hallo,
Ich erstelle mir zurzeit eine "Musterschablone" aus der ich dann verschiedene Webseiten erstellen kann.
Das ganze ist mit CSS und DIV's umgesetzt.
Wie bekomme ich es hin, dass die linke Menüleiste exakt genau so lang ist wie der Content? (Die Höhe muss relativ sein)
Ich stehe gerade auf dem Schlauch und hoffe ihr könnt mir helfen.
http://zerojan.bplaced.net/muster -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
die höhe der leiste einfach mit height: einstellen..
is mir aber schon passiert das das nicht geht, dann prober man das div mit einem rahmen der gleichen farbe und 1px zu umranden..
fällt nicht auf und hin und wieder greift dann die angabe der height
weis auch nicht warum das so ist, ist aber oft so ^^ -
Ich habe die title-div, die left-div und die content-div in einen DIV-Container gepackt, der auf die Seite zentriert ist.
Nur aus irgendeinem Grund funktioniert das nicht.
Übrigens: Wer sich die CSS-Datei anschauen will - sie liegt im selben verzeichnis und heißt style.css -
also wenn die höhe fix sein darf, geht das:
http://topperharley.lima-city.de/style.css
ich weis du hast geschrieben die höhe muss relativ sein, da fällt mir aber auf die schnelle nichts ein -
Hi,
ich war mal so frei und habe es etwas umgeschrieben. Hinzugekommen ist ein div-Element "main" in dem sowohl das Menü als auch der Content liegen. Dieses div-Element hat die Farbe von deinem Menü. Somit fällt nicht auf, wenn das Menü nicht 100% hoch ist, da der Hintergrund vom übergeordneten Element kommt.
Damit dieser Trick funktioniert, habe ich außerdem noch ein div-Element am Ende nach dem Content eingefügt, dass "clear: both;" enthält.
Funktioniert mit FF3.0.5, Safari für Win, Opera und IE6.
Hier der Quelltext der html-Datei:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="New%20Document-Dateien/style.css"> <title>New Document</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body> <div id="body"> <div id="title"> Titel </div> <div id="main"> <div id="left"> Menüleiste<br><br><br> </div> <div id="content"> <h1>Webseite</h1><br><br> <h2>Muster-Modell für Webseiten</h2><br><br><br> Ein Muster-Modell für eine Webseite.<br><br><br> </div> <div style="clear: both;"></div> </div> </div> </body> </html>
Und von der css-Datei:
body { font-family:Arial; font-size:12px; background-color:#F1F5FC; text-align:center; margin-top:7px; } div#body { border:1px solid #000000; margin: 0px auto; width: 760px; text-align: left; padding: 0px; } div#title { padding:5px; background-color:#6591DC; margin-bottom:0px; position:relative; border:0px none #000000; height:34px; } div#left { padding:3px; background-color:#B0C6EB; width:139px; float:left; position:relative; border:0px none #000000; margin:0px; } div#content { padding:5px; width:605px; float:right; background-color:#A6B7D5; position: relative; border:0px none #000000; margin:0px; } div#main { background-color:#B0C6EB; }
Beitrag zuletzt geändert: 27.1.2009 5:35:26 von karlja -
@ karlja
Das sieht perfekt aus.
Vielen Dank.
Habe das Layout für mein Projekt übernommen - der Trick ist genial.
Beitrag zuletzt geändert: 26.1.2009 22:10:13 von zerojan -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
