XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Dynamische Höhe im Content und DIV immer unten (http://xhtmlforum.de/showthread.php?t=43429)

keaton 13.12.2006 17:15

Dynamische Höhe im Content und DIV immer unten
 
Hallo,

nun brauch ich als nicht html'er eure hilfe :lol:

Das folgende Layout hab ich hinbekommen. Nun hab ich das Problem, dass die SUBNAV im linken bereich immer unten hängen soll. die höhe der content-spalte ist aber dynamisch. von meinem verständnis her müsste das funktionieren, wenn ich der linken spalte eine höhe von 100% gebe und der subnav bottom:0px. geht aber nicht. hat das schonmall jemand gemacht?

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="en" lang="en" >
<head>
<title>Template</title>
<style>
html, body{
    margin:0;
    padding:0;
    padding-top:41px;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
}
 
#pagewidth{
    width:829px;
    text-align:left; 
    margin-left:auto;
    margin-right:auto; 
}
 
#header{
    position:relative;
    height:40px;
    background-color:#fff;
    width:100%;
    margin-bottom:40px;
}
#logo{
    background-color:#eee;
    width:204px;
    height:40px;
    background-image:url(/logo.jpg);
    margin-right:52px;
    float:left;
}
#topnavi{
    background-color:#aaa;
    height:14px;
    padding-top:26px;
}

#leftcol{
    background-color:#abc;
    padding-right:52px;
    width:204px;
    height:100%;
    float:left;
    position:relative;
}

#lefttop{
    background-color:#cba;
    position:absolute;
    bottom:0px;
}
#leftbottom{
    position:absolute;
    top:0px;
    background-color:#bca;
}
#maincol{
    background-color:#abc;
    padding-right:74px; 
    float:right;
    display:inline;
    position:relative;
    width:499px;
}
 
#footer{
    background-color:#ddd;
    margin-top:21px;
    height:22px;
    width:829px;
    background-image:url(/footer.gif);
    color:#fff;
    clear:both;
    font-size:9pt;
}
#aktiv{
    margin-top:4px;
    padding-left:22px;
    text-transform:uppercase;
    width:234px;
    height:22px;
    float:left;
}
#klickpfad{
    color:#000;
    margin-top:4px;
    width:499px;
    height:22px;
    float:left;
}
#sprache{
    margin-top:4px;
    padding-left:5px;
    text-transform:uppercase;
    width:69px;
    height:22px;
    float:left;
}

.clearfix:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
 
.clearfix{display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height:1%;}
.clearfix{display:block;}
/* End hide from IE-mac */ 
 
/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}
</style>
</head>
<body>
<div id="pagewidth">
        <div id="header">
        <div id="logo"></div>
        <div id="topnavi">NAVI</div>
    </div>
        <div id="wrapper" class="clearfix">
                <div id="maincol">CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT</div>
        <div id="leftcol">
            <div id="lefttop">TEASER</div>
            <div id="leftbottom">SUBNAV</div>
        </div>
    </div>
        <div id="footer">
        <div id="aktiv">lorem</div>
        <div id="klickpfad">footer</div>
        <div id="sprache">ipsum</div>
    </div>
</div> 
</body>
</html>

bin für jede hilfe dankbar...

gruss,

keaton

heiko_rs 13.12.2006 17:53

FAQ Punkt 4.

keaton 13.12.2006 17:56

soweit bin ich schon. nur sollen ja in der linken spalte 2 divs untergebracht werden. einer soll immer oben sein, der andere immer über dem footer kleben. da komm ich nicht weiter.

heiko_rs 13.12.2006 18:03

Du kannst es allenfalls an #wrapper ausrichten, dessen Höhe sich dem Content anpaßt.

keaton 13.12.2006 18:09

ok... wenn du mir noch nen tipp gibts, wie ich den div an einem anderen div ausrichten kann?

wie gesagt, ich spreche (noch) kein html/css :)

heiko_rs 13.12.2006 18:15

Absolut positionierte Elemente richten sich immer am nächsten übergeordneten positionierten Element aus. Das ist momentan noch #leftcol durch position:relative; - entferne diese Eigenschaft und weise sie stattdessen #wrapper zu.

keaton 13.12.2006 18:56

vielen dank... funktioniert... und zusätzlich sogar noch was gelernt :)

keaton 13.12.2006 19:04

hmpf...

eine sache noch...

momentan ist es ja so, dass #leftbottom unten hängt und #lefttop oben. die höhe wird von der contentspalte angegeben. ist es nun möglich, das die beiden divs in der linken spalte die höhe vorgeben. soll heissen: wenn der inhalte von leftbottom und lefttop so lang wird, das die beiden divs aneinanderstossen würden, verdecken sich die divs momentan. es wäre aber gut, wenn die beiden divs aneinander stossen und die höhe des #wrapper-divs erhöhen.

heiko_rs 13.12.2006 19:19

Das kannst Du durch padding-bottom für #leftcol oder #lefttop erreichen. Der Wert sollte der Höhe der Subnavi entsprechen, und wird daher am besten in em angegeben, damit er sich bei Textvergrößerung entsprechend erhöht. Da mußt Du also etwas herumpobieren.

Viel besser geht's nicht, da absolut positionierte Elemente aus dem Dokumentfluß genommen sind und daher keinen Einfluß mehr auf die übrigen Elemente nehmen.


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:46 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020