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

Aüßeres Element soll mitwachsen

Status
Für weitere Antworten geschlossen.
T

Throndorin

Neues Mitglied
Hallo

ich habe 2 Probleme

der Code unten beschreibt wie meine Seite aufgebaut sein soll
nun das Problem
wenn der Content wächst soll der äußere Div (main) auch mit wachsen, aber er tut es nicht, habe auch height:auto versucht.

außerdem soll das ganze im IE 6 und größer laufen, aber der IE 6 bekommt es gar nicht hin :) was mich allerdings wundert, da ich dachte er versteht nur fixed nicht

Hat da jemand eine Idee oder einen Tip?

HTML: 
html {
    font-size:76%; 
    font-family:georgia, palatino linotype, times new roman, serif;
    background-image : url(../images/notes.png);
    background-attachment : fixed;
    background-repeat : repeat;
    }

body { 
    
    padding-bottom:35px;  
    }
div { 
    border:1px solid #888; 
    }
    
#main { 
    position:relative; 
    top:35px; 
    margin:auto;
    width:800px; 
    min-height:800px;
    background-color:#ddf;
    }
    
p {
    text-align:center;
    }
    
.head {
    position:absolute;
    top:0px;
    height:100px;
    width:100%;
    }
    
.menu {
    position:absolute;
    height:100px;
    top:100px;
    width:100%;
    }
    
.content {
    position:absolute;
    top:200px;
    height:auto;
    width:100%;
    }

.foot {
    position:absolute;
    bottom:0px;
    width:100%;
    }
Code: 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Amat&ouml;ne 1te idee</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body>

<div id="main">
    <div class="head" >
      <p style="color:#fff" >Das ist in Weiß</p>
      <p style="color:#000" >Das ist in Schwarz</p>
    </div>
    <div class="menu">
        <p>hier ist das Menu</p>
    </div>
    <div class="content">
        <p>Hier steht der Inhalt</p>
    </div>
    <div class="foot">
        <p style="color:#000" >Das ist die Fußzeile</p>
    </div>
</div>

</body></html>
 
Lass überall die Positionierungen weg, die sind vollkommen unnötig.
Rot=streichen
Grün=ergänzen


#main {
position:relative;
top:35px;
margin: 35px auto;
width:800px;
min-height:800px;
background-color:#ddf;
}

p {
text-align:center;
}

.head {
position:absolute;
top:0px;
height:100px;
width:100%;
}

.menu {
position:absolute;
height:100px;
 top:100px;
width:100%;
}

.content {
position:absolute;
top:200px;
 height:auto;
width:100%;
}

.foot {
position:absolute;
bottom:0px;
width:100%;
}
Zum Vergrößern anklicken....
 
Äußeres Element

Vielen Dank

ich war total auf die Positionen fixiert wegen dem Beispiel der Positionierung bei SelfHTML :)

aber die DIV's positionieren sich ja auch so

*grummel*wenn man es zu Gut machen möchte

Throndorin
 
Eben!
Das sollte man wirklich nur ganz gezielt einsetzen, z.B. wenn sich zwei Div's überlappen sollen.

Normalerweise lassen sich mit Float- und Margin-Angaben die meisten Anordnungen regeln.
 
prm schrieb:
Lass überall die Positionierungen weg, die sind vollkommen unnötig.
Zum Vergrößern anklicken....
Die sind nicht nur unnötig, sondern die verhindern, dass die Elternelemente mitwachsen, da diese Elemente aus dem Textfluss genommen werden.

Gruß,
-Efchen
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben