XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Lücke zwischen zwei <div>'s und strecken des <div>-Container's (http://xhtmlforum.de/showthread.php?t=67067)

Surras 12.03.2012 21:47

Lücke zwischen zwei <div>'s und strecken des <div>-Container's
 
Liste der Anhänge anzeigen (Anzahl: 1)
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 13.03.2012 05: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 13.03.2012 19:25

Code:

#komlett{
 height:100%;
}

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


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:51 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023