Hallo zusammen. Ich bin neu im Forum (ein ein ziemlicher noob), hab auch schon ein paar interessante posts gelesen. Aber ich habe ein konkretes Problem und möchte gleich mal zur Sache kommen.
Ich möchte ein Seitenlayout erstellen mit divContainern. Es soll oben ein Logo hin, dann eine Linkleiste, anschließend eine Trennlinie. Darunter ein Container für Flashinhalt. Darunter wiederum container für den Seitencontent, Text, Bilder etc.
Und am Ende der Seite nen Footer. Das klappt soweit auch ganz wunderbar, wenn ich die Container einfach untereinander positioniere.
Aber ich möchte das unter diesen Elementen liegend am linken Rand, über die ganze Seitenlänge ein 150px breiter Container für ein Designelement liegt. Das funktioniert aber nur wenn ich die anderen Container auf absolute setze. Dann kann ich aber den Footer nicht am Seitenende platzieren. Außerdem läuft der linke Rand nicht über 100% weil ja eigentlich kein Inhalt drin ist. Und die oberen Elemente krieg ich nicht zentriert wenn die Position auf absolute ist anderenfalls sehe ich aber den Linken Rand nicht. :???: Ich hoffe mir kann geholfen werden! :)
Hier hab ich mal meine stylesheet und den seitencode:
STYLESHEET:
/* CSS Document */
/*BODY*/
body {
margin:0px;
font-family: Verdana,sansserif;
}
/*container*/
#linkerrand {
float:left;
height:800px;
width:150px;
background-color:#CC0000;
}
#logo {
position:absolute;
height:40px;
width:60%;
background-color: #00FF00;
top:10px;
left:150px;
}
#link {
position:absolute;
height:46px;
width:60%;
background-color:#999966;
top:50px;
left:150px;
}
#line {
position:absolute;
height:4px;
width:100%;
background-color:#333399;
top:96px;
}
#querstrebe {
position:absolute;
height:300px;
width:100%;
background-color:#000000;
top:100px;
}
#footer {
position:absolute;
width:100%;
height:30px;
background-color:#FF0000;
bottom:0px;
}
------------------
HTML-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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<link href="stile.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Stil1 {color: #FFFFFF}
-->
</style>
</head>
<body>
<div id="logo">
<div align="center">hier soll ein logo rein </div>
</div>
<div id="link">
<div align="center">hier kommen die buttons </div>
</div>
<div id="line"></div>
<div id="linkerrand">container für designelement über die ganze seitenlänge bis zum footer</div>
<div class="Stil1" id="querstrebe">
<div align="center">hier soll ein flash inhalt hinein</div>
</div>
<div id="footer">footer mit impressumslink </div>
</body>
</html>
Ich möchte ein Seitenlayout erstellen mit divContainern. Es soll oben ein Logo hin, dann eine Linkleiste, anschließend eine Trennlinie. Darunter ein Container für Flashinhalt. Darunter wiederum container für den Seitencontent, Text, Bilder etc.
Und am Ende der Seite nen Footer. Das klappt soweit auch ganz wunderbar, wenn ich die Container einfach untereinander positioniere.
Aber ich möchte das unter diesen Elementen liegend am linken Rand, über die ganze Seitenlänge ein 150px breiter Container für ein Designelement liegt. Das funktioniert aber nur wenn ich die anderen Container auf absolute setze. Dann kann ich aber den Footer nicht am Seitenende platzieren. Außerdem läuft der linke Rand nicht über 100% weil ja eigentlich kein Inhalt drin ist. Und die oberen Elemente krieg ich nicht zentriert wenn die Position auf absolute ist anderenfalls sehe ich aber den Linken Rand nicht. :???: Ich hoffe mir kann geholfen werden! :)
Hier hab ich mal meine stylesheet und den seitencode:
STYLESHEET:
/* CSS Document */
/*BODY*/
body {
margin:0px;
font-family: Verdana,sansserif;
}
/*container*/
#linkerrand {
float:left;
height:800px;
width:150px;
background-color:#CC0000;
}
#logo {
position:absolute;
height:40px;
width:60%;
background-color: #00FF00;
top:10px;
left:150px;
}
#link {
position:absolute;
height:46px;
width:60%;
background-color:#999966;
top:50px;
left:150px;
}
#line {
position:absolute;
height:4px;
width:100%;
background-color:#333399;
top:96px;
}
#querstrebe {
position:absolute;
height:300px;
width:100%;
background-color:#000000;
top:100px;
}
#footer {
position:absolute;
width:100%;
height:30px;
background-color:#FF0000;
bottom:0px;
}
------------------
HTML-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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<link href="stile.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Stil1 {color: #FFFFFF}
-->
</style>
</head>
<body>
<div id="logo">
<div align="center">hier soll ein logo rein </div>
</div>
<div id="link">
<div align="center">hier kommen die buttons </div>
</div>
<div id="line"></div>
<div id="linkerrand">container für designelement über die ganze seitenlänge bis zum footer</div>
<div class="Stil1" id="querstrebe">
<div align="center">hier soll ein flash inhalt hinein</div>
</div>
<div id="footer">footer mit impressumslink </div>
</body>
</html>
