zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Dynamische Höhe im Content und DIV immer unten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.12.2006, 17:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2006
Beiträge: 5
keaton befindet sich auf einem aufstrebenden Ast
Lächeln Dynamische Höhe im Content und DIV immer unten

Hallo,

nun brauch ich als nicht html'er eure hilfe

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.12.2006, 17:53
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

FAQ Punkt 4.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.12.2006, 17:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2006
Beiträge: 5
keaton befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 13.12.2006, 18:03
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Du kannst es allenfalls an #wrapper ausrichten, dessen Höhe sich dem Content anpaßt.
Mit Zitat antworten
  #5 (permalink)  
Alt 13.12.2006, 18:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2006
Beiträge: 5
keaton befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 13.12.2006, 18:15
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 13.12.2006, 18:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2006
Beiträge: 5
keaton befindet sich auf einem aufstrebenden Ast
Standard

vielen dank... funktioniert... und zusätzlich sogar noch was gelernt
Mit Zitat antworten
  #8 (permalink)  
Alt 13.12.2006, 19:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2006
Beiträge: 5
keaton befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #9 (permalink)  
Alt 13.12.2006, 19:19
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 20:29
div, dynamische höhe aber nix faux ... emmis CSS 1 11.12.2010 18:37
Tabellen als Div Container SpecialFighter (X)HTML 7 12.10.2010 18:40
Header entfernen tripple CSS 17 15.06.2010 16:41
Problem mit einem 3D-Effekt moep0710 CSS 12 12.06.2010 15:30


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:23 Uhr.