Homepage Layout
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
arbeiten
auto
code
eigenschaft
eintragen
einwand
funktionieren
http
layout
machen
mitte
position
probier
problem
rechts code
relative code
tabelle
test
trage
url
-
Habe eben versucht mir ein CSS Div Layout zu machen aber irgendwie bekomm ich des nicht so gebacken wie ich es will.
http://website-of-as.lima-city.de/layout.jpg
Das menue2 soll so neben dem Contet stehen wie das menue1. Halt auf der rechten Seite (also es müsste nur hoch).
Hier mein Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>test</title> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /> <style type="text/css"> <!-- * { margin: 0px; padding: 0px; width: 100%; } body { background-color: #000000; color: #ffffff; text-align: center; width: 100%; } #div1 { background-image: url(hintergrund.png); background-repeat: no-repeat; width: 940px; text-align: center; border: solid 1px red; } #div2 { background-image: url(logo.png); width: 940px; height: 207px; } #links { margin: 0px 50px 0px 0px; width: 150px; height: 200px; float: left; border: solid 1px green; } #mitte { margin: 0px 50px 0px 0px; width: 590px; height: 250px; border: solid 1px blue; overflow: auto; } #rechts { margin: 0px 0px 0px 0px; width: 100px; height: 200px; float:right; } #div6 { width: 940px; height: 50px; border: solid 1px yellow; float: none; } //--> </style> </head> <body> <center> <div id="div2"></div> <div id="div1"> <div id="links">menue1</div> <div id="mitte">contet </div> <div id="div6">fußzeile </div> <div id="rechts">menue2</div> </div> </center> </body> </html>
Beitrag zuletzt geändert: 22.10.2009 2:05:26 von website-of-as -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Das kann aus 2 Gründen (die ich bisher gefunden habe) nicht wirklich funktionieren
1. Das div für menue2 muss eine Zeile höher
<div id="div2"></div> <div id="div1"> <div id="links">menue1</div> <div id="mitte">contet </div> <div id="div6">fußzeile </div> ---> hier menue2 <div id="rechts">menue2</div> ---> und erst hier die Fußzeile
2. Du musst bei div6 clear: both; verwenden und nicht float: none;
Beitrag zuletzt geändert: 22.10.2009 2:30:05 von fseplnixx -
fseplnixx hat recht! somit sollte es eigentlich einwand frei gehn!
Dennoch würde ich einiges anderst machen:
<center> kann man vollkommen wegnemen, trage einfach in dein DIV1
margin: auto; margin-top:0;
So wie ich das jetzt seh hast die 2 menüs, da bietet es sich an mit positions zu arbeiten um den content dennoch frei zu gestalten.
einfach in div1
position:relative;
mit eintragen und nun in die divs links / rechts folgendes rein:
Links:
position:absolute; top:0; left: 0;
Rechts:
position:absolute; top:0; right:0;
fals du auch später mit border arbeitest empfehele ich mal mit
border-collapse:collapse;
zuarbeiten kommt ab und an sehr gut !
einfach mal hier Lesen -
Ich habe das jetzt alles so geamcht wie ihr es geschrieben hat.
Mein Code sieht jetzt so aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>test</title> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> <!-- * { margin: 0px; padding: 0px; width: 100%; } body { background-color: #000000; color: #ffffff; text-align: center; width: 100%; } #div1 { background-image: url(hintergrund.png); background-repeat: no-repeat; width: 940px; text-align: center; border: solid 1px red; margin: auto; margin-top:0; position:relative; border-collapse:collapse; } #div2 { background-image: url(logo.png); width: 940px; height: 207px; } #links { margin: 0px 50px 0px 0px; width: 150px; height: 200px; float: left; border: solid 1px green; position:absolute; top:0; left: 0; } #mitte { margin: 0px 50px 0px 0px; width: 590px; height: 250px; border: solid 1px blue; overflow: auto; } #rechts { margin: 0px 0px 0px 0px; width: 100px; height: 200px; float:right; position:absolute; top:0; right:0; } #div6 { width: 940px; height: 50px; border: solid 1px yellow; clear: both; } //--> </style> </head> <body> <div id="div2"></div> <div id="div1"> <div id="links">menue1</div> <div id="mitte">contet </div> <div id="rechts">menue2</div> <div id="div6">fußzeile </div> </div> </body> </html>
Aber irgendwie macht des trotzdem immer noch nicht wie ich das will.
http://website-of-as.lima-city.de/layout2.jpg -
Der ganze Contet hat sich ganz in das menue1 verschoben. Dabei soll das in der mitte von menue 1 und 2 sein und danz ganau in der mitte liegen
-
probier es mal damit
#mitte { margin: 0px 50px 0px 150px; width: 590px; height: 250px; border: solid 1px blue; overflow: auto; }
also den letzten wert für margin auf 150px (oder etwas mehr wenn du da eine Lücke haben willst) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
