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

Problem mit CSS: Dynamischer Inhalt und Footer

K

Kryolith

Neues Mitglied
Hallo!

Ich bin momentan dabei eine Seite für einen Freund zu entwerfen und bin dabei an meine CSS-Grenzen gestoßen. Den größten Teil des Layouts habe ich bereits umgesetzt und es funktioniert auch alles Prima, bis auf eine Sache.
Zunächst erstmal ein Bild von dem gewünschten Layout:
layout_skizze.jpg

Der ganze Bildschirm des nutzers ist das Bild (weißer Hintergrund). Die Arbeitsfläche ist grau hinterlegt. Sie soll sich immer dem Inhalt der Seite anpassen, aber mindestens die Höhe von 100% haben. Die schwarzen Kästen beherbergen dann im Prinzip den eigentlichen Inhalt.
Mein Problem ist nun folgendes:
Der Footer soll nun immer ganz unten von der Seite plaziert werden. Sollten nun Menu (1) oder Inhalt (2) länger werden, als der Bildschirm platz bietet, soll auch der Footer nach unten verschoben werden. Und genau das fettgedruckte "oder" bekomme ich nicht hin. Ich habe es bis jetzt geschafft, dass sich der Footer nur nach eins von beiden richtet. Aber da der Inhalt bei beidem von Seite zu Seite unterschiedlich sein kann sollte der Footer auf beides Rücksicht nehmen.

Nun noch ein bischen Quellcode:
CSS:
Code: 
.main
{
    position:absolute;
    width:1024px;
    left:50%;
    min-height:100%;
    margin-left:-512px;
    background-image:url(img/main.png);
}
.menu
{
    position:absolute;
    top:320px;
    left:50%;
    margin-left:-480px;
    width:300px;
    min-height:450px;
    background-image:url(img/menu.png);
    background-repeat:no-repeat;
    background-position:298px 0px;    
}
.content
{
    position:relative;
    width:600px;
    min-height:400px;
    margin-left:-140px;
    margin-bottom:150px;
    left:50%;
    top:260px;
    background-image:url(img/content.png);
    background-repeat:no-repeat;    
}
.footer
{
    position:absolute;
    width:1000px;
    height:100px;
    bottom:0px;
    left:50%;
    margin-left:-500px;
    background-image:url(img/footer.png);
    background-repeat:no-repeat;
}
HTML:
HTML: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LAYOUT</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body onLoad="diashow();">
    <div class="main">
        <div class="head">
            Überschrift
        </div>
        <div class="content">
        </div> 
        <div class="menu">
            <img src="img/menu_nav.png" alt="" />
            <div class="mnormal">
                <a href="#">Home</a>
                <a href="#">Home</a>
                <a href="#">Home</a>
            </div>
            <img src="img/menu_second.png" alt="" />
            <div class="mnormal">
                <a href="#">Home</a>
                <a href="#">Home</a>
                <a href="#">Home</a>
            </div>
            <img src="img/menu_partner.png" alt="" />
            <div class="mimage">
                <a href="#"><img src="img/logo.jpg" alt="http://exte.rn/" target=\"blank\" /></a>
            </div>
        </div> 
        <div class="footer">
        </div>
    </div>
    <div class="bar_top">
    </div>
    <div class="shape">
    </div> 
    <div class="diashow">
        <img src="1.jpg" id="fimg1" style="opacity:1; filter:alpha(opacity=100); zIndex:1001;" />
        <img src="2.jpg" id="fimg2" style="opacity:0; filter:alpha(opacity=0); zIndex:1000;" />
    </div> 
    <div class="logo">
    </div> 
</body>
</html>
Ich hoffe ihr könnt mir helfen und ich bedanke mich schon einmal im Vorraus für konstruktive Beiträge!
Danke!
 
Danke, für den Tipp, ich schaue mir das morgen einmal in Ruhe an, aber von der Beschreibung her klingt das schon sehr vielversprechend. Da ich nicht so viel mit CSS bis jetzt gemacht habe: Mein restlicher "Stil" geht in Ordnung?
 
Footer immer unten anordnen
Zum restlichen Stil:
Verzichte auf alle absoluten Positionierungen. die heißen so, weil sie meist absolut unnötig sind. Ihr Nachteil:
Je nach Konstruktion und viewportgröße können INhalte aus dem Bildschirmfenster verschwinden und sind somit für den Benutzer nicht erkennbar.
Wenn du horizontal zentrieren willst, dann mach es so: Horizontale Zentrierung mit CSS
Ansonsten verwende zur Postionierung möglichst ausschließlich float und margin Angaben.
 
So ich habe nun angefangen, das ganze neu umzusetzen, nach den von euch gegeben Beispielen und Ratschlägen.

Herausgekommen ist das:
CSS:
Code: 
* {
    margin: 0;
    padding: 0;
}
html
{
    height:100%;
}
body
{
    padding:0;
    margin:0;
    width:100%;
    height:100%;
    background-color:#622;
    font-family:Arial, Helvetica, sans-serif;
}
#main
{
    position:relative;
    width: 1024px;
    margin: 0px auto;
    min-height: 100%;
    background-image:url(img/main.png);
}
#footer
{
    position: absolute;
    bottom: 0;
    left:50%;
    margin-left:-500px;
    width:1000px;
    height:100px;
    background-image:url(img/footer.png);
    background-repeat:no-repeat;
}
* html #main
{
    height: 100%;
} 
#main2
{
    padding-bottom:100px;
}
#menu
{
    width:300px;
    min-height:450px;
    background-image:url(img/menu.png);
    background-repeat:no-repeat;
    background-position:298px 0px;
    float:left;
    margin-left:30px;    
    /*margin-top:320px;*/
}
#content
{
    width:600px;
    min-height:400px;
    /*margin-top:260px;*/
    background-image:url(img/content.png);
    background-repeat:no-repeat;
    float:right;    
    margin-right:50px;
}

HTML - Inhalt des Body-Tags:
HTML: 
    <div id="main">
        <div id="main2">
            <div id="menu">
               <!-- INHALT MENU -->
            </div>
            <div id="content">
               <!-- INHALT CONTENT -->
            </div>
        </div>
        <div id="footer">
        </div>
    </div>

Nun sind die absoluten Positionierungen raus, aber ich habe wieder mein gleiches Problem von vorher: Gebe ich menu und/oder content das float Attribut, beeinflussen diese wiederrum nicht mehr die Höhe von main2 und Inhalt geht gegebenfalls über den Hintergrund von main1 hinaus.

Gibt es da einen Trick? Positionieren ohne Float? Wenn ja wie geht das?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben