Auf Thema antworten 2026

Beitrag

<blockquote data-quote="blizzart88" data-source="post: 1698164">Hallo Leute,ich brauche mal eure Hilfe. Ich möchte das Layout einer Website komplett&nbsp; in CSS schreiben. Soweit sogut. Ich habe einen Bereich (alos div) für&nbsp; den Header, ein div für die Navigationsleiste unter dem Header und einen&nbsp; Container für den Inhalt und eine vertikale Navigation darunter.Den Inhalt möchte ich mit float nebeneinander setzen. Leider scheint das&nbsp; nicht zu funktionieren, denn die divs für die vertikale Navi und den&nbsp; Inhalt werden nicht angezeigt. Außerdem kann ich, wenn ich einfach in&nbsp; den divbereich reinschreibe (z.B. den div für die Navi) einfach über den&nbsp; Rand hinaus weiterschreiben.Ich habe hier mal den CSS-Code und den Seitenquelltext eingefügt:[CODE]body{background-color:#004f2f}/* Seitenlogo */#top{position:relative;&nbsp; &nbsp;&nbsp; width:960px; height:200px;&nbsp; &nbsp;&nbsp; margin: 0px auto;&nbsp; &nbsp;&nbsp; bottom-margin: 0px;&nbsp; &nbsp;&nbsp; border: none;&nbsp; &nbsp;&nbsp; background-color:#545454;&nbsp; &nbsp;&nbsp; background-image:url(grafik/borderbackgr.jpg);&nbsp; &nbsp;&nbsp; background-repeat:no-repeat;&nbsp; &nbsp;&nbsp; background-position: top left;&nbsp; &nbsp;&nbsp; background-attachment:fixed;}/* Navigation unterhalb des Logos */#topnavi{position:relative;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; width:960px; height:50px;&nbsp; &nbsp;&nbsp; margin: 0px auto;&nbsp; &nbsp;&nbsp; border: none;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; background-color:black;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; background-image:url(grafik/back001.jpg);&nbsp; &nbsp;&nbsp; background-position: top left;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; background-repeat:repeat-x;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; background-attachment:fixed;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; overflow:hidden;}/* Container für Seiteninhalt */#inhalt-container{position:relative;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; width:960px; height:900px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0px auto;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; border: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; background-color:#545454;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; background-image:url(&#039;grafik/borderbackgr.jpg&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; background-repeat:no-repeat;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; background-position: top left;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; background-attachment:fixed;}#vertnavicontainer {float: left;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 200px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; heigth: 900px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0px auto;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; background-color:red;}#content {float: right;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 760px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; heigth: 900px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0px auto;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; background-color:black;}#clearboth {clear: both}[/CODE][CODE]&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&lt;head&gt;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;&lt;title&gt;XXXXXX&lt;/title&gt;&lt;link href=&quot;css/css.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /&gt;&lt;link href=&quot;css/navi.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /&gt;&lt;/head&gt;&lt;body&gt;&lt;div id=&quot;top&quot;&gt;&lt;/div&gt;&lt;div id=&quot;topnavi&quot;&gt;&lt;/div&gt;&lt;div id=&quot;inhalt-container&quot;&gt;&nbsp; &nbsp; &lt;div id=&quot;vertnavicontainer&quot;&gt;&lt;/div&gt;&nbsp; &nbsp; &lt;div id=&quot;content&quot;&gt;&lt;/div&gt;&nbsp; &nbsp; &lt;div id=&quot;clearboth&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;[/CODE]Ich hoffe ich habe mich einigermaßen verständlich ausgedrückt und danke euch schonmal im Voraus.</blockquote>

[QUOTE="blizzart88, post: 1698164"] Hallo Leute, ich brauche mal eure Hilfe. Ich möchte das Layout einer Website komplett in CSS schreiben. Soweit sogut. Ich habe einen Bereich (alos div) für den Header, ein div für die Navigationsleiste unter dem Header und einen Container für den Inhalt und eine vertikale Navigation darunter. Den Inhalt möchte ich mit float nebeneinander setzen. Leider scheint das nicht zu funktionieren, denn die divs für die vertikale Navi und den Inhalt werden nicht angezeigt. Außerdem kann ich, wenn ich einfach in den divbereich reinschreibe (z.B. den div für die Navi) einfach über den Rand hinaus weiterschreiben. Ich habe hier mal den CSS-Code und den Seitenquelltext eingefügt: [CODE] body{background-color:#004f2f} /* Seitenlogo */ #top{position:relative; width:960px; height:200px; margin: 0px auto; bottom-margin: 0px; border: none; background-color:#545454; background-image:url(grafik/borderbackgr.jpg); background-repeat:no-repeat; background-position: top left; background-attachment:fixed; } /* Navigation unterhalb des Logos */ #topnavi{position:relative; width:960px; height:50px; margin: 0px auto; border: none; background-color:black; background-image:url(grafik/back001.jpg); background-position: top left; background-repeat:repeat-x; background-attachment:fixed; overflow:hidden; } /* Container für Seiteninhalt */ #inhalt-container{position:relative; width:960px; height:900px; margin: 0px auto; border: none; background-color:#545454; background-image:url('grafik/borderbackgr.jpg'); background-repeat:no-repeat; background-position: top left; background-attachment:fixed; } #vertnavicontainer {float: left; width: 200px; heigth: 900px; margin: 0px auto; border: none; background-color:red; } #content {float: right; width: 760px; heigth: 900px; margin: 0px auto; border: none; background-color:black; } #clearboth {clear: both} [/CODE][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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>XXXXXX</title> <link href="css/css.css" rel="stylesheet" type="text/css" media="screen" /> <link href="css/navi.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="top"></div> <div id="topnavi"></div> <div id="inhalt-container"> <div id="vertnavicontainer"></div> <div id="content"></div> <div id="clearboth"></div> </div> </body> </html> [/CODE]Ich hoffe ich habe mich einigermaßen verständlich ausgedrückt und danke euch schonmal im Voraus. [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 7, ▼ = 3, ◇ = 2 und die Summe von ▲ und ▼ durch ◇ geteilt wird, was ist das Ergebnis?