[CSS] div layout

Dieses Thema im Forum "Webdesign" wurde erstellt von litux, 2. März 2011 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 2. März 2011
    div layout

    hey leute...
    ich habe folgende div layout zusammen gestellt.
    habe dazu eine frage.
    Also hier der layout:

    <div class="Container">
    <div class="HeaderContainer">
    <div class="HeaderLogo1"></div>
    <div class="HeaderLogo2"></div>
    </div> <!-- HeaderContainer Ende -->

    <div class="Cleaner"></div>

    <div class="MainContainer">
    <div class="NavLeft">
    <ul>
    <li><a href=''>bla</li>
    </ul>
    </div> <!-- NavLeft Ende -->

    <div class="Main">
    irgendein inhalt das included wird
    </div> <!-- Main Ende -->

    <div class="NavRight">
    </div> <!-- NavRight Ende -->

    </div> <!-- MainContainer Ende -->

    <div class="Cleaner"></div>

    <div class="Footer">
    </div> <!-- Footer Ende -->

    </div> <!-- Container Ende -->


    Und hier ist der dazu gehörige CSS:

    .Container{
    background-color:#707070;
    width:1000px;
    height:710px;
    margin: 0 auto;
    text-align:left;
    display:block;
    position:relative;
    }

    .HeaderContainer{
    margin-left:5px;
    margin-bottom:5px;
    width:990px;
    height:100px;
    display:block;
    position:relative;
    }

    .HeaderLogo1{
    width:93px;
    height:100px;
    margin-top:5px;
    margin-left:10px;
    margin-bottom:5px;
    background-image:url('../pics/logoklein.png');
    float:left;
    display:block;
    position:relative;
    }

    .HeaderLogo2{
    width:550px;
    height:100px;
    margin-top:5px;
    margin-left:167px;
    background-image:url('../pics/top.png');
    float:left;
    display:block;
    position:relative;
    }

    .MainContainer{
    background-color:#e0e0e0;
    width:990px;
    height:520px;
    margin-left:5px;
    display:block;
    position:relative;

    }

    .NavLeft{
    background-color:#e0e0e0;
    border: solid 0px #e6e6e6;
    width:140px;
    margin-top:5px;
    margin-right:5px;
    float:left;
    display:block;
    position:relative;
    }

    .Main{
    background-color:#505050;
    width:695px;
    height:500px;
    padding-top:10px;
    margin-top:5px;
    margin-right:5px;
    float:left;
    display:block;
    position:relative;
    }

    .NavRight{
    background-color:#e0e0e0;
    margin-top:5px;
    width:145px;
    float:left;
    display:block;
    position:relative;
    }

    .Cleaner{
    clear:both;
    }

    .Footer{
    width:990px;
    margin-top:5px;
    margin-left:5px;
    float:left;
    display:block;
    position:relative;
    }


    So nun endlich mal zum Problem:
    Ich möchte dass der inhalt den man in .Main zusehen bekommt, sich so verhält, dass wenn der Inhalt länger als der height der .Main ist, der Footer sich nach Untenbewegt, zwar soviel wie die länge der Inhalt ist...

    Danke schon mal für die Hilfe.
     
  3. 2. März 2011
    AW: div layout

    habe das problem gefunden.
    es lag dadran dass der .main bereich eine höhe besitzt.
    da muss man einfach height raus nehmen dann wird es dynamisch
    am besten in container das height auch raus nehmen
     
  4. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.