Hallo zusammen.
Ich habe mal wieder ein Css Problem und würde mich freuen wenn mir jemand helfen kann.
Ich habe eine Seite in der über Divs mehrere Dateien includet sind.
Nun hätte ich gerne das der Hauptcontainer (welcher die Hintergrundfarbe vorgibt) immer über die gesamte Seitenhöhe geht.
Hab schon alles Mögliche ausprobiert:
Height: auto, height: 100%, min-height max-height varianten, usw.
Hier mal der Grobe "Stammbaum"
AUSSENCONTAINER
#wrap
position: relative;
--HEADER--
#header
position: relative;
--CONTENT--
#content
position: relative;
--FOOTER--
#footer
position: static;
Ich habe mir nun überlegt das es ja eventuell gehen würde wenn ich den Header und den Content Container auch mit static positionieren würde und die untercontainer dann mittels position: absolute top: -0815; left: - 0815 ausrichte, aber es muss doch auch eine Möglichkeit geben das Layout jetzt nicht wieder völlig zu zerschroten und den Hauptcontainer generell von ganz oben bis ganz unten zu ziehen, bzw. zu erreichen das sich die Höhe des Hauptcontainers am Footer orientiert.
Hier nochmal bissel Quelltext:
DIE CSS DATEI
und noch die adresse
MagdeburgPunx-Fanzine
Vielen dank für eure Hilfe und liebe Grüße :icon7:
Ich habe mal wieder ein Css Problem und würde mich freuen wenn mir jemand helfen kann.
Ich habe eine Seite in der über Divs mehrere Dateien includet sind.
Nun hätte ich gerne das der Hauptcontainer (welcher die Hintergrundfarbe vorgibt) immer über die gesamte Seitenhöhe geht.
Hab schon alles Mögliche ausprobiert:
Height: auto, height: 100%, min-height max-height varianten, usw.
Hier mal der Grobe "Stammbaum"
AUSSENCONTAINER
#wrap
position: relative;
--HEADER--
#header
position: relative;
--CONTENT--
#content
position: relative;
--FOOTER--
#footer
position: static;
Ich habe mir nun überlegt das es ja eventuell gehen würde wenn ich den Header und den Content Container auch mit static positionieren würde und die untercontainer dann mittels position: absolute top: -0815; left: - 0815 ausrichte, aber es muss doch auch eine Möglichkeit geben das Layout jetzt nicht wieder völlig zu zerschroten und den Hauptcontainer generell von ganz oben bis ganz unten zu ziehen, bzw. zu erreichen das sich die Höhe des Hauptcontainers am Footer orientiert.
Hier nochmal bissel Quelltext:
PHP:
INDEX.PHP
<!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" />
<link href="http://www.mw.losehost.com/mdpunx/css/style.css" rel="stylesheet" type="text/css" />
<link href="http://www.mw.losehost.com/mdpunx/candylog/templates/greenfuzz/greenfuzz.css" rel="stylesheet" type="text/css" media="screen">
<link href="http://www.mw.losehost.com/mdpunx/B4YFormmailer2/templates/default/style_include.css" rel="stylesheet" type="text/css" media="screen" />
<title>MAGDEBURGPUNX-FANZINE</title>
</head>
<body>
<div id="wrap">
<div id="header">
<?php include ("header.php"); ?>
</div>
<div id="content">
<?php
// standard seite
$default_page = "news";
// wenn kein parameter gesetzt ist, wird
// dieser automatisch auf die "$default_page"
// gesetzt. (oben definiert)
if( empty($_GET["site"]) ){
$_GET["site"] = $default_page;
}
// einbinden der gewuenschten seite
switch( $_GET["site"] )
{
case "news":
include_once("candylog/templates/greenfuzz/greenfuzz.php");
break;
case "kontakt":
include("B4YFormmailer2/include.php");
break;
default:
echo "Die angeforderte Seite existiert nicht.";
}
?>
</div>
<div id="footer">
<?php include ("footer.php"); ?>
</div>
</div>DIE CSS DATEI
Code:
/*_____________________________________________________________________
===========================ALLGEMEIN=====================================
_____________________________________________________________________*/
* {
margin: 0;
padding: 0;
}
html {
height:100%;
}
body
{
height:100%;
background-color: #e5664c;
font-family:Times, Sans-serif, serif;
text-align: center;
}
/*_____________________________________________________________________
===========================WRAP======================================
_____________________________________________________________________*/
#wrap {
position: relative;
top : 0px;
width: 1009px;
margin: 0 auto;
text-align: center;
background-color: #c0c0c0;
height:100%;
}
/*____________________________________________________________________
===========================HEADER======================================
_____________________________________________________________________*/
#header {
z-index: 4;
position: relative;
width: 1009px;
background-color:#c0c0c0;
}
#headerleft {
position: absolute;
top: 0px;
left: 0px;
background-image: url(http://www.mw.losehost.com/mdpunx/grafiken/headerleft.png);
width: 196px;
height: 280px;
z-index: 3;
background-color:#c0c0c0;
}
#headerfont {
position: absolute;
background-image: url(http://www.mw.losehost.com/mdpunx/grafiken/headerfont.png);
width: 553px;
height: 77px;
z-index:1;
top: 0px;
margin: 0 50%;
left: -260px;
}
#headerright {
position: absolute;
top: 0px;
right: 0px;
background-image: url(http://www.mw.losehost.com/mdpunx/grafiken/headerright.png);
width: 145px;
height: 340px;
z-index:1;
}
#menue {
position: absolute;
top: 74px;
left: 196px;
border-right: solid 1px #000000;
border-top: solid 1px #000000;
border-bottom: solid 1px #000000;
border-left: 0px ;
background-color: #ffffff;
z-index:2;
font-weight: bold;
}
#menue ul{
}
#menue li{
display: inline;
}
#menue li a, #headermenue li a:link {
text-decoration: none;
font-size: 25px;
color: #000000;
}
#menue li a:hover, #headermenue li a:focus, #headermenue li a:active {
text-decoration: none;
font-size: 25px;
color: #ffffff;
background-color:#000000;
}
/*____________________________________________________________________
===========================CONTENT======================================
_____________________________________________________________________*/
#content {
position: relative;
z-index: 22;
width: 1009px;
top: 110px;
left:0px;
height:100%;
}
/*____________________________________________________________________
===========================WEBLOG======================================
_____________________________________________________________________*/
#blogeintraege {/* Position der Eintraege */
position: relative;
float: right;
z-index: 1;
padding-right:205px;
padding-top: 0px;
}
#blogmenue {/* Div für die Menüleiste ( Kalender, Kommentare, usw.) */
position: relative;
z-index: 20;
float: left;
width: 172px;
padding-left:20px;
padding-top:125px;
}
/*____________________________________________________________________
===========================FOOTER======================================
_____________________________________________________________________*/
#footer {
bottom: 0px;
background-color:#ff0000;
text-align:center;
padding:10px;
}und noch die adresse
MagdeburgPunx-Fanzine
Vielen dank für eure Hilfe und liebe Grüße :icon7:
