• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Box-Model klappt nicht

Status
Für weitere Antworten geschlossen.
C

Code_Gear

Neues Mitglied
Hi,

ich möchte ein websitedesign machen,aber es klappt nicht, #container soll so groß sein wie sein inhalt, also #main, und und dieses soll sich nach #inhalt und #navi richten, je nachdem was größer ist... leider klappt das nicht..

hoffe mir kann jemand helfen, hier mal meine dateien:

index.html:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>.::TEST::.</title>
        <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div id=container>
    <div id=banner>
    </div>
    <div id=main>
        <div id=inhalt>
        test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />
        </div>
        <div id=navi>
        test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />
        </div>
    </div>
</div>

</body>

</html>
und style.css:
Code: 
html, body {
    margin: 0, auto;
    background-color: black; 
    font-family: Verdana;
}
    
#container {
    margin-left: auto; margin-right: auto;
    width: 800px;
    height: auto;
    padding: 10px;
    background-color: darkgrey;
    border: 2px double lightgrey;
}
#banner {
    margin-left: auto; margin-right: auto; margin-bottom: 20px;
    width: 780px;
    height: 120px;
    background-color: white;
    border: 1px double black; 
}

#main {
    margin-left: auto; margin-right: auto; 
    width: 760px;
    height: 100%;
    padding: 10px;
    background-color: lightgrey;
    border: 1px double black; 
}

#navi {
    float: right;
    width: 160px;
    height: auto;
    padding: 10px;
    background-color: darkgrey;
    border: 1px groove black; 
}

#inhalt {
    margin: 0, auto;
    float: left;
    width: 540px;
    height: auto;
    padding: 10px;
    background-color: green;
    border: 1px groove black; 
}
 
nein, hast du ueberhaupt gelesen was das Problem ist, das Design wird schon angezeigt, aber halt ist container und main net solang wie inhhalt und navi...
 
öhm...
ist trotzdem falsch^^
wenn du willst dass sich die container anpassen, dann lass einfach die höhen und breiten weg
hast du auch nen link???
mfg
 
wie währs, wenn du es mal hochladen würdest damit wir uns nicht die mühe machen müssen es zu kopieren und so...
denn du musst ja davon ausgehen, das wir genau so faul sind wie du...
 
aber wenn du höhen und breiten rein machst dann sagts du doch wie groß die divs sein sollen^^
zum beispiel hast du dem browser gesagt, dass er die divs 300px breit und hoch machen soll, aber du willst dass da ein div reinkommt der 200X400px groß ist???
das ist einfach unlogisch!!!
mfg
 
Code_Gear schrieb:
nein, hast du ueberhaupt gelesen was das Problem ist, das Design wird schon angezeigt, aber halt ist container und main net solang wie inhhalt und navi...
Zum Vergrößern anklicken....
Natürlich nicht. #navi floatet ja, ist somit aus dem Textfluss genommen und beeinflusst nicht mehr die Größe seines Elternelements.

Informiere Dich über die Wirkungsweise von float, und wie man es wieder aufhebt.

Gruß,
-Efchen
 
Efchen schrieb:
Natürlich nicht. #navi floatet ja, ist somit aus dem Textfluss genommen und beeinflusst nicht mehr die Größe seines Elternelements.
Zum Vergrößern anklicken....
Jo,
#main enthält nur geflotete Elemente (#navi und #inhalt). Gefloatete Boxen beienflussen die Höhe des Elternelementes (#main) nicht.
#navi und #inhalt schweben nur unter der Oberkante von #main.
Um das zu ändern muss der float vor schließen des Elternelementes beendet werden (style="clear : both;").
Am Einfachsten geht das mit einem zusätzlichen Element im html (<br />):
Code: 
<div id=container>
    <div id=banner>
    </div>
    <div id=main>
        <div id=inhalt>
        <p>Lorem</p>
        </div>
        <div id=navi>
        <p>Ipsum</p>
        </div>
<br class="clearer" />
    </div>
</div>
css
Code: 
.clearer {
clear: both;
}
Damit wird #main auf die Höhe des jeweils höheren Kinderelemtes "aufgespannt".
Gleich hoch sind #nav und #inhalt deswegen aber nicht.
Optisch kann man aber gleich hohe "Spalten" mit einem background-image für #main simulieren.

Es gibt noch elegantere Möglichkeiten (ohne zusätzliches Element) zum clearen:
Einschließen von Floats ohne zusätzliches Markup - easyclear
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben