bikerider: postition:absolut vs. position:relative

Beitrag lesen

SELF-Forum

postition:absolut vs. position:relative

bikerider
– Informationen zu den Bewertungsregeln

Hallo zusammen,

Nun sitze ich schon zu lange hier und versuch's im Forum. Das Problem wurde zwar an manchen Orten angesprochen, aber einer Lösung wurde ich nicht fündig.

Ich will folgendes Layout erstellen:
Header
Navigation - Content - Related Content
Footer

Header, Navigatin und die beiden Contents kann ich problemlos mittels position:absolut platzieren. Aber wie bringen ich nun den Footer an die richtige Stelle? Zumal die Länge des Contents natürlich ändern kann...

HIER DAS HTML:

<body>
<div class="main">

<div class="banner">

<?php RandomImage ('/media/header'); ?>
        <div class="bannerbox">
          <div class="bannertext"><h1><?php page_content(3); ?> </h1>
          </div>
       </div>
    </div>

<div class="menu">
<?php show_menu();?>
</div>

<div class="content">  
	<?php page\_content(1); ?>  
</div>

<div class="relcontent">
<?php page_content(2); ?>
</div>

</div>

<div class="footer">
<?php page_footer(); ?>
</div>

</body>
</html>
-----------------------------------------------------------

UND HIER DAS CSS:
[code lang=css].main {
position: relative;
top:0px;
left:0px;
width: 1000px;
height:auto;
background-color: #FFFFFF;
}

.banner {
position:absolute;
top:0px;
left:0px;
width:1000px;
height: 200px;
}

.bannerbox {
position:absolute;
top:0px;
left:0px;
width: 1000px;
height: 200px;
background-image: url(bannertext2.png);
}

.bannertext {
position:absolute;
top:0px;
left:0px;
padding-left: 820px;
padding-top: 30px;
font-size:24px;
}

.bannertext H1 {
color:#FFFFFF;
}

.menu {
position: absolute;
top: 220px;
left: 0px;
width: 180px;
padding-left:10px;
}
.menu ul, .menu li {
margin: 0px;
padding: 00px;
list-style: none;}
.menu ul ul {
padding-left: 8px;}
.menu a:link, .menu a:visited, .menu a:active, .menu a:hover {
display: block;
padding: 2px;
}
.menu_default a:link, .menu_default a:visited, .menu_default a:active {
border-bottom:none;
}
.menu_default a:hover {
background-color:#007050;
color:#ffffff;
}
.menu_current  {
border-bottom: none;
font-weight:bold;
}

.content {
position:absolute;
top:220px;
left:200px;
width:558px;
text-align:left;
padding-left:20px;
padding-right:20px;
padding-top:0px;
border-left:1px;
border-right:1px;
border-left-style:solid;
border-right-style:solid;
border-color:#cccccc;
}

.relcontent {
position:absolute;
top: 220px;
left: 800px;
padding: 0;
width:160px;
text-align:left;
padding-left:20px;
padding-right:0px;
padding-top:0px;
}

.footer {
clear:both;
  position:relative;
top:inherit;
left:0px;
width:1000px;
border-top:solid 1px;
border-color:#cccccc;
background-color: #FFFFFF;
clear: both;
height: 20px;
font-size: 10px;
color: #007050;
text-align: right;
line-height: 18px;
}

Wer kann mir helfen?

Vorschau: www.dihr.ch/sprich

Beitrag melden
–
Informationen zu den Bewertungsregeln