zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Lücke zwischen zwei <div>'s und strecken des <div>-Container's

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.03.2012, 21:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.03.2012
Beiträge: 1
Surras befindet sich auf einem aufstrebenden Ast
Standard Lücke zwischen zwei <div>'s und strecken des <div>-Container's

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.
Angehängte Grafiken
Dateityp: png Unbenannt.PNG (19,8 KB, 7x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.03.2012, 05:44
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 28.01.2011
Beiträge: 338
Webcoder sorgt für eine eindrucksvolle AtmosphäreWebcoder sorgt für eine eindrucksvolle Atmosphäre
Standard

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
__________________
Websites erstellen ist ein Hobby von mir.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.03.2012, 19:25
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.821
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Code:
#komlett{
 height:100%;
}
Es gibt auf deiner Seite kein Element mit der ID komlett, da fehlt wohl ein Buchstabe.
__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:24 Uhr.