Hallo liebe Community,
ich versuche gerade meine erste eigene Webseite zu entwickeln und habe mir im Vorfeld ein entsprechendes Layout überlegt. Ich habe Euch das Layout mal in den Anhang gehauen, um meine folgendes Problem etwas besser zu schildern.
Mein Layout soll wie folgt sein, ganz oben ein Header, darunter ein zweiter Header, links ein Menü. Der Rest der Seite (sprich unter dem zweiten Header und rechts vom Menü) soll für den Content sein.
Ich stehe jetzt vor zwei Problem mit meinem Code, und ich habe echt keine Ahnung wie ich das lösen soll. :)
Problem 1: Der Header 2 sitzt im Grunde schon richtig, er ist zentriert und verläuft zum Header 1 parallel. Der Header 1 soll aber ein Stück kürzer sein das der Header 1 und bei dem Menu links quasi anfangen. Habe hier auch nochmal ein entsprechendes Bild hochgeladen. Das kleine Stück auf dem Bild was ich markiert habe soll weg, aber sonst soll alles genau so zentral sein. Das kleine Rote Stück soll zum Menü in Grau werden.
Problem 2: Das Menü Links soll immer so lang sein wie die Seite ist. Dazu habe die height: 100% gesetzt. Das klappt auch soweit, aber nur solange im Content Feld nicht viel drin steht. Wenn ich mal viel Text rein haue, dann hört das Menu irgendwann auf und der Text verschiebt sich nach links unter das Menü - siehe auch hier Anhang.
Hier mein HTML-Code:
Und hier der CSS-Code:
Freue mich auf Antworten!
Danke und Gruß aus Bremen :)
ich versuche gerade meine erste eigene Webseite zu entwickeln und habe mir im Vorfeld ein entsprechendes Layout überlegt. Ich habe Euch das Layout mal in den Anhang gehauen, um meine folgendes Problem etwas besser zu schildern.
Mein Layout soll wie folgt sein, ganz oben ein Header, darunter ein zweiter Header, links ein Menü. Der Rest der Seite (sprich unter dem zweiten Header und rechts vom Menü) soll für den Content sein.
Ich stehe jetzt vor zwei Problem mit meinem Code, und ich habe echt keine Ahnung wie ich das lösen soll. :)
Problem 1: Der Header 2 sitzt im Grunde schon richtig, er ist zentriert und verläuft zum Header 1 parallel. Der Header 1 soll aber ein Stück kürzer sein das der Header 1 und bei dem Menu links quasi anfangen. Habe hier auch nochmal ein entsprechendes Bild hochgeladen. Das kleine Stück auf dem Bild was ich markiert habe soll weg, aber sonst soll alles genau so zentral sein. Das kleine Rote Stück soll zum Menü in Grau werden.
Problem 2: Das Menü Links soll immer so lang sein wie die Seite ist. Dazu habe die height: 100% gesetzt. Das klappt auch soweit, aber nur solange im Content Feld nicht viel drin steht. Wenn ich mal viel Text rein haue, dann hört das Menu irgendwann auf und der Text verschiebt sich nach links unter das Menü - siehe auch hier Anhang.
Hier mein HTML-Code:
HTML:
<html>
<head>
<title>Own Try</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header">
<h1>My website</h1>
</div>
<div id="header1">
<h2>Second Header</h2>
</div>
<div id="left">
<ul>
<li>Hallo</li>
<li>Hallo</li>
<li>Hallo</li>
</ul>
</div>
<div id="main">
<h2>Home page</h2>
<p>
Hier steht mal Text.
</p>
</div>
</div>
</body>
</html>Und hier der CSS-Code:
CSS:
*{
margin: 0;
padding: 0;
}
body {
background-color: #EEEEEE;
height: 100%;
}
#header {
background-color: #66CCFF;
color: white;
text-align: center;
}
#header1 {
background-color: brown;
color: white;
text-align: center;
width: auto;
}
#left {
background-color: #212121;
color: white;
width: 180px;
height: 100%;
float: left;
}
#main {
background-color: darkgreen;
color: white;
width: auto;
}Freue mich auf Antworten!
Danke und Gruß aus Bremen :)
