nicht angemeldet
postition:absolut vs. position:relative
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
-
Yerf!
Ich will folgendes Layout erstellen:
Header
Navigation - Content - Related Content
FooterHeader, 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...
Mittels position? Garnicht. Benutze float/clear oder display:inline-block um das Layout zu realisieren. Nur so kannst du den Footer unterhalb des Inhalts platzieren, ohne die Länge des Contents zu kennen.
Wer kann mir helfen?
http://de.selfhtml.org/css/layouts/mehrspaltige.htm#kopf_fuss@title=SelfHTML kann.
Gruß,
Harlequin
--
<!--[if lt IE 8]>This page is best viewed with a webbrowser. Get one today!<![endif]--> -
Zuviel absolute Positionierung ist ohnehin schlecht - besonders, wenn Inhalte in der Höhe variieren können. Es empfielt sich, bei Bedarf mit gefloateten Elementen arbeiten und ansonsten dem Browser den Textfluß zu überlassen.
Gruß, LX
--
RFC 1925, Satz 3: Mit ausreichendem Schub fliegen Schweine wunderbar. (...) -
Ich glaube du suchst das: http://forum.de.selfhtml.org/archiv/2008/2/t167230/#m1090641
-
Danke vielmals für Euren schnellen Input!!
Das hilft schon mal weiter. Problem nur: Ich positioniere im Header 3 Layers übereinander:- Hintergrundbild, welches randommässig wechselt
- Logo, welches gleich bleibt
- Page Titel, welcher pro page wechselt
wie positioniere ich das und kann danach trotzdem mit relative weiterfahren?
THX!!
-
Yerf!
Das hilft schon mal weiter. Problem nur: Ich positioniere im Header 3 Layers übereinander:
Bedeutet "übereinander" in diesem fall sich überlappend?
- Hintergrundbild, welches randommässig wechselt
Als Hintergrund eines Divs mit der ID header
- Logo, welches gleich bleibt
Als Hintergrund der <H1>
- Page Titel, welcher pro page wechselt
Als Text in der <H1>
...so als Beispiel, man könnte das Logo auch als <img> einbinden und versuchen die Überlappung mittels negativer Margins zu erreichen.
wie positioniere ich das und kann danach trotzdem mit relative weiterfahren?
Es ist auch möglich, die absolute Positionierung nur innerhalb eines Blocks zu verwenden und zwar wenn dieser eine Positionierung abweichend von static hat (z.B. dem Header-Div ein position:relative geben). Dann beziehen sich die absoluten Positionsangeben der Kindelemente auf den umgebenden Container.
Gruß,
Harlequin
--
<!--[if lt IE 8]>This page is best viewed with a webbrowser. Get one today!<![endif]-->