nicht angemeldet
höhe von div passt nicht
ich versuche gerade mein Design zu vollenden, nur will dieses letzte Problem nicht verschwinden.
http://www.feringa-radau.de/beta
Die rechte DIV will einfach nicht, wenn nicht genügend Content vorhanden ist, bis ganz nach unten gehen. Wenn der Content länger ist als 100% ist alles wunderbar.
<? include_once './pages/includes/config.inc.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>
<title>Faschingsgesellschaft Feringa e.V.</title>
<link rel="shortcut icon" href="./favicon.ico" />
<link href="./css/main.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<style type="text/css" media="screen">
#wrapper {
word-wrap:break-word;
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"></div>
<div id="skyline"></div>
<div id="menu_left_top"></div>
<div id="menu_right_top"></div>
<div id="top_left"></div>
<div id="top_right"></div>
<div id="horizontal_top"></div>
</div>
<div id="contentfloatholder">
<div id="center">
<div id="centerpad"><? include_once './content.php'; ?></div>
</div>
<div id="right"></div>
<div id="left"><? include_once 'menu.php'; ?></div>
</div>
<div id="footer">
<div id="horizontal_bottom">
<div id="text"></div>
</div>
<div id="bottom_left"></div>
<div id="bottom_right"></div>
<div id="menu_left_bottom">
<!--<div style="position:relative; margin:5px 14px 0 0; width:157px; text-align:right; font-size:9px; font-family:Verdana, Arial, Helvetica, sans-serif;">Aktueller Stand: 11.06.2009</div>-->
</div>
<div id="menu_right_bottom"></div>
<div></div>
</div>
</div>
</body>
</html>
@charset "utf-8";
* {
margin:0;
padding:0;
border:0;
}
* html #wrapper {
height:100%;
}
html, body {
height:100%; /* wichtig */
}
body {
text-align:center;
background:#ffffff;
color:#000000;
min-width:980px;
min-height:768px;
}
#wrapper {
background:url(../images/structure/left.png) repeat-y 0 123px;
text-align:left;
width:100%;
margin:0;
border:0;
min-height:100%;
height:auto !important;
position: relative;
z-index: 500;
}
#header, #footer {
clear:both;
width:100%;
}
#header {
height:123px;
padding:0;
}
#footer {
height:105px;
}
#footer div {
padding:0;
}
#contentfloatholder {
background:url(../images/structure/right.png) repeat-y 100% 100%;
float:left;
width:100%;
}
#contentfloatholder:after {
/* für NN6 clear floats */
content:".";
display:block;
height:0px;
clear:both;
visibility:hidden;
}
#centerpad {
margin:0 200px;
padding:15px 5px 15px 5px;
}
#center {
float:left;
width:100%;
margin-right:-95%;
/* this needs to be less than 100% for Moz/Mac which thinks it's empty otherwise. The difference is made up by putting a negative left margin on the left float: Note IE/Mac doesn't like this method ~ it wants the 100% so it can be fed in using IE only CSS below becasue IE/Win also works with the 100% method.*/
}
#left {
float:left;
width: 200px;
margin-left:-5%;
padding:35px;
}
#right {
float:right;
width:200px;
}
#top_left{
position:absolute;
top:0px;
left:0px;
height:74px;
width:50%;
background-position:left;
background-image:url(../images/structure/big_bg_left.png);
background-repeat:repeat;
z-index:2;
}
#top_right{
position:absolute;
top:0px;
right:0px;
height:74px;
width:50%;
background-image:url(../images/structure/big_bg_right.png);
background-position:right;
background-repeat:repeat;
z-index:2;
}
#horizontal_top{
position:absolute;
top:72px;
height:51px;
width:100%;
background-image:url(../images/structure/horizontal_top.png);
background-repeat:repeat-x;
z-index:1;
}
#horizontal_bottom{
position:absolute;
bottom:62px;
height:43px;
width:100%;
background-image:url(../images/structure/horizontal_bottom.png);
background-repeat:repeat-x;
}
#text{
position:relative;
bottom:0px;
top:0px;
height:43px;
width:100%;
background-image:url(../images/structure/text.png);
background-position:center;
background-repeat:no-repeat;
}
#menu_left_bottom{
position:absolute;
left:0;
bottom:1px;
height:104px;
width:200px;
background-image:url(../images/structure/bottom_left.png);
background-repeat: no-repeat;
display:inline;
}
#menu_right_bottom{
position:absolute;
right:0;
bottom:1px;
height:104px;
width:200px;
background-image:url(../images/structure/bottom_right.png);
background-repeat:no-repeat;
}
#bottom_left{
position:absolute;
bottom:0px;
left:0px;
height:63px;
width:50%;
background-position:left;
background-image:url(../images/structure/big_bg_right.png);
background-repeat:repeat;
}
#bottom_right{
position:absolute;
bottom:0px;
right:0px;
height:63px;
width:50%;
background-position:right;
background-image:url(../images/structure/big_bg_left.png);
background-repeat:repeat;
}
#menu_left_top{
position:absolute;
left:0;
top:0;
height:123px;
width:200px;
background-image:url(../images/structure/top_left.png);
background-repeat: no-repeat;
z-index:5;
}
#menu_right_top{
position:absolute;
right:0;
top:0;
height:123px;
width:200px;
background-image:url(../images/structure/top_right.png);
background-repeat: no-repeat;
z-index:5;
}
#skyline{
position:absolute;
top:18px;
height:105px;
width:100%;
background-position:center;
background-image:url(../images/structure/skyline.png);
background-repeat:no-repeat;
z-index:3;
}
#logo{
position:absolute;
top:13px;
height:122px;
width:100%;
background-position:center;
background-image:url(../images/structure/logo.png);
background-repeat:no-repeat;
z-index:4;
}
#menu {
margin:0 0 0 20px;
padding:0px 0px 0px 5px;
position:absolute;
background:transparent;
z-index:100;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:normal;
color:#3d3c3c;
}
#menu li {
border:0;
padding:0;
margin:0;
position:relative;
z-index:100;
list-style-image:url(../images/structure/arrow_red_right.png);
}
#menu li a, #menu li a:link, #menu li a:visited {
display:block;
text-decoration:none;
color:#3d3c3c;
}
#menu li a:hover {
text-decoration:none;
color:#c42525;
}
#menu li dd {
display:none;
}
#menu li .open dd{
display:block;
}
#menu dl {
margin: 0;
}
#menu dt {
margin:0 0 0 -15px;
padding:0 0 0 15px;
background:url(../images/structure/arrow_red_down.png) left no-repeat;
}
* html #menu dt{
padding-left:10px;
}
#menu dd {
margin:0;
padding:0 0 0 15px;
text-align:left;
background:url(../images/structure/arrow_red_right.png) left no-repeat;
}
* html #menu dd{
padding: 0 0 0 25px;
}
/*********************************************************
submenu
**********************************************************/
.sub dt a, .sub dt a:link, .sub dt a:visited {
font-family:Arial, Helvetica, sans-serif;
color:#c42525;
text-decoration:none;
margin:0;
padding:0px;
background:transparent;
height:17px;
}
.sub dd a, .sub dd a:link, .sub dd a:visited {
color:#000;
text-decoration:none;
margin:0;
padding:0px;
background:transparent;
}
.sub dd a:hover {
color:#c42525;
}
* html .sub dd a, * html .sub dd a:visited {
/*height:1em;*/
}
/************* For IE Mac **************/
* html div#center {
margin-right:-100%;
}
* html div#left {
margin-left:0;
}
.headline{
text-align:center;
font-size: large;
font-family: "Tahoma";
font-weight: bold;
color: #018232;
text-decoration: underline;
}
Wer kann mir den entscheidenden Tip geben?
-
hei,
leg deine #wrapper noch in einem div, zB #wrapper-inner und schreibe da background der rechten sidebar/column.
und in google kannst du clumns mit height:100% mit keywords 'faux method' finden.
Inita
-
hei,
und in google kannst du clumns mit height:100% mit keywords 'faux method' finden.
sorry 'Faux Columns'
:) Inita
-
hei,
»» und in google kannst du clumns mit height:100% mit keywords 'faux method' finden.
sorry 'Faux Columns'
:) Inita
damit zieht er aber den Footer wieder weg vom unteren Rand und das wollte ich ja auch nicht. Möchte das der Footer bei zu "kleinem" Content ganz unten klebt und beide seitlichen DIV's bis zum Footer reichen und ansonsten sich je nach Content nach unten verschiebt.
-
hallo,
Da ist ein Beispiel mit footer, der immer unten ist, und wenn content hoeher ist, dann footer geht nach unten.
< http://ryanfait.com/sticky-footer/>nu du must die beide solutions nutzen, also sticky footer un faux columns
LG,
Inita
-
-
-