Layout verrutscht !

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

x03x

Neues Mitglied
3 Mai 2019
3
0
1
26
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:


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 :)
 

Anhänge

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.352
273
83
66
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.
Der Grund dafür ist, dass Du mit float arbeitest. Das ist häufig ein Grund für Probleme, auch anderer Art. Informiere dich besser über Flexlayout und gestalte deine Seite damit:
 
Reactions: x03x

x03x

Neues Mitglied
3 Mai 2019
3
0
1
26
Der Grund dafür ist, dass Du mit float arbeitest. Das ist häufig ein Grund für Probleme, auch anderer Art. Informiere dich besser über Flexlayout und gestalte deine Seite damit:
Das war schon sehr hilfreich. Damit konnte ich Problem 2 lösen, danke dir!

Problem 1 besteht aber weiterhin. Das die Kopfzeile 2 über die gesamte Länge geht, ich will ja aber das unter Kopfzeile 1 schon das Menü los geht, und Kopfzeile 2 so gesehen etwas einrückt.
 

Anhänge

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.352
273
83
66
Das kannst Du erreichen, indem Du das div#header1 in das div#main verschiebst.
BTW: In HTML5 gibt es zahlreiche semantische Tags wie <header>, <nav> und <main> die sich für solch ein Layout anbieten:
Edit: Ich sehe gerade, dass in deinem HTML der Doctype fehlt - unbedingt hinzu fügen.
 
Zuletzt bearbeitet:
Reactions: x03x
Werbung: