Lücke zwischen zwei <div>'s und strecken des <div>-Container's

Surras · #1 (**permalink**) 12.03.2012, 20:47

Hi Forum!

Ich denke, dieses Thema wurde zuhauf schon besprochen, allerdings habe ich mir schon mehrere Threads hier durchgelesen und auch die verschiedensten Quellcodes angeschaut, doch komme ich einfach nicht drauf wo mein Fehler liegt.

Was ich möchte ist, das ein <div>-Container bis zum Seitenende gestreckt wird. Es wurde oft geschrieben das man dies mit "height:100%;" erreichen soll, jedoch ist das bei mir ohne Erfolg. Im Endeffekt soll es ähnlich dem Layout aussehen: CSS 4 You - The Finest in Stylesheets: Workshop Layouten ohne Tabellen

Das zweite Problem, welches vorliegt ist, das ich zwischen zwei <div>-Elementen eine Lücke habe (siehe Screenshot). Normal sollte oben Logo mit Überschrift sein und darunter eben gleich das Menü mit dem Inhalt nebenan. Doch genau zischen Kopf und Body ist diese Lücke. Wie könnte ich die weg bekommen?

Hier einmal mein Code:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <title>Test</title>
  <head>
        <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
 <div id="komplett">
  <div class="logo">Logo</div>
    <div class="headline">Überschrift</div>
  <div class="menubar">Link<br>link<br>link<br></div>
  <div class="content">Inhalt</div>
  <br style="clear:both;">
 </div>

  </body>
</html>

und hier die css:

Code:

body{
 height:100%;
 background-color:grey;
 width:800px;
 margin:0px auto;
}

.logo{
 width:350px;
 height:100px;
 float:left;
 background-color:#FFFFFF;
}

#komlett{
 height:100%;
}

.menubar{
 padding:10px;
 color:red;
 background-color:blue;
 float:left;
 height:100%;
}

.content{
 background-color:#FFFFCC;
 height:100%;
}

.headline{
 padding-bottom:100px;
}

Ich habe das ganze auf ein Minimum reduziert und von meinem eigentlichen Layout nachgebaut. Angehängt ist auch der Screenshot für die Lücke zwischen den beiden Elementen.

Webcoder · #2 (**permalink**) 13.03.2012, 04:44

Hi Surras

erst zu deinem Code und deinen Problemen.

Um eine höhe von 100% zu erreichen, musst du auch dem Element "html" eine Höhe von 100% zuordnen. Des Weiteren denke ich, dass sich Menü und Inhalt direkt an headline anschließen. Dass würdest du auch sehen, wenn du headline eine Hintergrundfarbe gibst. Denn dort hast du ein padding-bottom von 100px, zu diesem kommt die Schriftzeile hinzu, also ist die Höhe von headline (100px + Schriftzeile). Dein Logo ist jedoch nur 100px hoch. Somit entsteht zwischen Logo und dem Menü und Content genau 1 Schriftzeilenhöhe Abstand.

Wenn das "CSS 4 You" Beispiel deinen Vorstellungen entspricht, dann dürftest du es auch so benutzen denke ich.

Ich denke jedoch, du solltest dir erst noch einmal die Grundlagen aneignen (z.B. auf Little Boxes) und dann noch mal beginnen. Denn eigentlich sollten die Inhalte dein Layout bestimmen, so sind deine 2 Divs für logo und headline völlig überflüssig. Eigentlich müsste das Ganze so wie im folgenden Beispiel aussehen.

HTML-Code:

<div id="header">
   <img src="Pfad/datei.endung" alt="logo">
   <h1>Überschrift</h1>
</div>

Wenn du wolltest, könntest du das Logo auch noch in einen Link zur Startseite packen. Alle weiteren Formatierungen werden im CSS vorgenommen, z.B. ein float:left für das Logo.

Also lerne die Grundlagen und mache es gleich richtig.

Gruß
Webcoder

gato · #3 (**permalink**) 13.03.2012, 18:25

Code:

#komlett{
 height:100%;
}

Es gibt auf deiner Seite kein Element mit der ID komlett, da fehlt wohl ein Buchstabe.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bild wird am Rand des Containers abgeschnitten	david_b	CSS	6	08.09.2011 14:16
Fieldset außerhalb des Containers	sandemann	CSS	3	23.08.2010 16:52
IE7 Floating DIV und Background des Containers	SXP	CSS	3	04.03.2010 13:45
Listen-Punkte liegen außerhalb des DIV Containers ?	mp3fritz	CSS	5	01.07.2007 19:21
Volle Höhe (100%) innerhalb eines variablen Containers <div> im ie	MrLight	CSS	14	06.12.2006 01:12