zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Eltern-div wächst nicht mit

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.04.2011, 22:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.04.2011
Beiträge: 4
linus95 befindet sich auf einem aufstrebenden Ast
Frage Eltern-div wächst nicht mit

Hallo,
Ich bin gerade dabei html/css zu erlernen. Dabei stoße ich gerade auf vollgendes Problem:
Ich habe einen container(contencontainer) der 2 weiter div-boxen und einen weitern container(content) mit 2 div-boxen(bread und inhalt) enthält. Ich habe die Boxen einfach mal mit Buchstaben gefüllt. Da es im späteren Template wahrscheinlich ist das die boxen nicht gemeinsam abschließen, soll der Hintergrund vom container(contentcontainer) angezeigt werden. Aber ich weis nicht warum der Container nicht mitwächst.
index.html:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
   xml:lang="" >
<head>

<link rel="stylesheet" href="css/template.css" type="text/css" />




</head>
<body id="bg">
<div id="container">
    <div id="header">
    </div>
    <div id="banner">
    </div>
    <div id="topmenue">
    </div>
    <div id="contentcontainer">
        <div id="left">asdasdasd
          
        wejasdhkjasd kjkjasfdh akjasdjkd asdjkdjkasd asdjkasdjkgasd dkjasd dasdjkgasdkjggaskjd asdkjasdjkasdh asdkhasd asdjhasdk dkjasdhd
        </div>
        
        <div id="right">sdsfsdf
          asdasd + ashd dhasgdhjgasd asdhgasdh dhgasdhjasd asdhgasdhjgd asdhgasdhjd asdhgasdjgd asdhgasdhjd asdhgaShdgas d
          </div>
        
        
        <div id="content">
             <div id="bread">asdasdasdasdasdm,asd jsdksajdgh dashgkd  asfddjhsdahjs dasjgdhjhsgd asdgasjh asd<br />
      
              </div>
            <div id="inhalt">asfdsdfsdf
            sdf
             asdfasd dgsdj asdfask djgasdfasg dfasdfasdgas dasdgfasgdfasd asgfdghasdf
            </div>
            
        </div>
      
    </div>
</div>

</body>
</html>
template.css
Code:
* {
margin:0px;
padding:0px;
}
#container {
    width: 920px;
    margin: auto;
    background-color: #969;
    
}
#header {
    background-color: #000;
    height: 100px;
    width: 920px;
}
#banner {
    height: 250px;
    width: 920px;
    background-color: #0F0;
}
#topmenue {
    height: 50px;
    width: 920px;
    background-color: #03F;
}
#contentcontainer {
    width: 920px;
    background-color: #666;
    height: auto;
}
    
#left {
    float: left;
    height: auto;
    width: 250px;
    
}
#right {
    float: right;
    height: auto;
    width: 250px;
    
}
#inhalt {
    height: auto;
    width: 420px;
    
}
#bread {
    height: auto;
    width: 420px;
}
#content {
    float: left;
    width: 420px;
    height: auto;
    
}
Vielen Dank schoneinmal

Geändert von linus95 (05.04.2011 um 22:14 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.04.2011, 22:07
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Weil du floatest, aber nicht clearst... Das
HTML-Code:
        </div><br/>
      
    </div>
ist mir auch noch ein Rätsel Was hat der Zeilenumbruch dort verloren?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.04.2011, 22:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.04.2011
Beiträge: 4
linus95 befindet sich auf einem aufstrebenden Ast
Standard

Br ist raus ok muss irgendwie reingerutscht sein
Hast du vllt. einen Link wo das mit dem clear Anfängerfreundlich erklärt wird weil bei Selfhtml blick ich desn Sinn nicht ganz
Danke Schonmal
Mit Zitat antworten
  #4 (permalink)  
Alt 05.04.2011, 22:25
Neuer Benutzer
neuer user
 
Registriert seit: 05.04.2011
Beiträge: 4
stolle befindet sich auf einem aufstrebenden Ast
Standard

Bitte:
CSS FLoat

Wenn du das googelst wirst du aber auch noch jede Menge Ergebnisse finden. Clear setzt eigentlich alle float's die es zuvor gab zurück bzw. unterbricht Sie.
Du stellst damit sicher, dass sich das Element, dass das clear beeinhaltet, unter den gefloateten Bereichen steht und nicht daneben.

Gruß
Mit Zitat antworten
  #5 (permalink)  
Alt 05.04.2011, 22:28
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Da Verweise ich dich mal auf die Seite eines Forenmitglieds float und clear | Webdesign mit XHTML und CSS
Mit Zitat antworten
  #6 (permalink)  
Alt 05.04.2011, 22:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.04.2011
Beiträge: 4
linus95 befindet sich auf einem aufstrebenden Ast
Standard

Habe ich das dan richtig verstanden das ich einmal beim container(content) clear auf both setzen muss und bei contentcontainer ?

Geändert von linus95 (05.04.2011 um 22:33 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 05.04.2011, 22:38
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von stolle Beitrag anzeigen
Bitte:
CSS FLoat
W3Fools

SCNR,
take
Mit Zitat antworten
  #8 (permalink)  
Alt 05.04.2011, 22:42
Neuer Benutzer
neuer user
 
Registriert seit: 05.04.2011
Beiträge: 4
stolle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von linus95 Beitrag anzeigen
Habe ich das dan richtig verstanden das ich einmal beim container(content) clear auf both setzen muss und bei contentcontainer ?
Im Prinzip würde es schon reichen folgendes einzufügen, bevor du den contentcontainer schließt:
Code:
<div style="clear: both"></div>
Sofern ich dein Problem korrekt verstanden habe.
Mit Zitat antworten
  #9 (permalink)  
Alt 05.04.2011, 22:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.04.2011
Beiträge: 4
linus95 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cebito Beitrag anzeigen
Da Verweise ich dich mal auf die Seite eines Forenmitglieds float und clear | Webdesign mit XHTML und CSS
Sry hab deinen Beitrag erst gerade gelesen obwohl er vor meinen war vielen dank jetzt funktioniert es. Habe wie auf der Homepage beschrieben einfach <div style="clear:both;">&nbsp;</div> eingefügt
lg Linus
Mit Zitat antworten
Sponsored Links
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
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 20:29
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 17:53
Header entfernen tripple CSS 17 15.06.2010 16:41
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 11:59
CSS Text nebeinander? carstiee09 CSS 13 13.11.2009 20:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:11 Uhr.