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"> Code:
body{ |
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"> Also lerne die Grundlagen und mache es gleich richtig. ;) Gruß Webcoder |
Code:
#komlett{ |
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