[CSS] position absolute unter position relaitve

JPS · 20.02.2011

Hallo,
ich habe einen Seitenaufbau bei dem ich einen StickyFooter nutzen will.
Zur Info, das Konstrukt: http://www.cssstickyfooter.com/using-sticky-footer-code.html

Das bedeutet, dass das Hauptkonstrukt relative positioniert ist und es auch sein muss. Soweit so gut
Jetzt habe ich nur ein Problem bei der Sache und zwar der Header.
Ich will den "Background" (immer volle Breite) unter dem Headerpic bzw dem gesammten eigentlichen Seitenkonstrukt (980px) legen.

CSS Definition des Headerbackgrounds:

Code:

#hdback {position:absolute; top:0; left:0; z-index:1; width:100%; height:265px}

Problem ist halt, dass das gute Teil immer oben drüber liegt.....bzw sich den "relativen Rest" nicht unterordnet.

HTML:

<div id="hdback">
<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
  <td background="images/bg_l_o.jpg" width="50%"><img src="images/spacer.gif" width="1" height="265" /></td>
  <td background="images/bg_r_0.jpg" width="50%"><img src="images/spacer.gif" width="1" height="265" /></td>
  </tr>
</table></div>

rockscientist01 · 20.02.2011

AW: [CSS] position absolute unter position relaitve

hi,

Du mischst hier css mit html-tables... Lass das lieber, und lerne richtig, wie man mit css stylt.
hast du einen Link zu deiner site?
Deine code-schnipsel helfen mir nicht weiter, ich würde gerne mal den gesamten Quelltext sehen.

Gruß
AO

http://little-boxes.de/

JPS · 20.02.2011

AW: [CSS] position absolute unter position relaitve

Hier die Seite

HTML:

<!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=utf-8" />
<title></title>
<link href="style.css" media="all" rel="stylesheet" type="text/css" />
<!--[if !IE 7]>
  <style type="text/css">
   #wrap {height:100%;display:table}
  </style>
 <![endif]-->
</head>
<body>
<div id="hdback">
<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
  <td background="images/bg_l_o.jpg" width="50%"><img src="images/spacer.gif" width="1" height="265" /></td>
  <td background="images/bg_r_0.jpg" width="50%"><img src="images/spacer.gif" width="1" height="265" /></td>
  </tr>
</table></div>
 
<div id="wrap"> 
<div id="content">
 <div id="home"><div id="logoframe"><div id="logo"><img src="images/header_1.jpg" width="980" height="265" /></div></div>
    </div>
 </div>
</div>
<div id="footer">
<div id="footframe">
<div id="foot"></div>
</div>
</div>
</body>
</html>

Hier das CSS

Code:

@charset "utf-8";
/* CSS Document */
* {margin:0;padding:0;}
html, body {height: 100%;}
#hdback {position:absolute; top:0; left:0; z-index:1; width:100%; height:265px;}
#wrap {min-height: 100%;
z-index:2;}
#main, #home {
 overflow:auto;
 padding-bottom: 61px;} 
#footer {position: relative;
 margin-top: -61px;
 height: 60px;
 clear:both;} 
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
#foot {height: 60px;
 background-image:url(../images/foot_bg.jpg);
 background-repeat: no-repeat;
}
#footframe 
{background-color:#c88c4c; height:60px;}
#logoframe 
{background-color:#c88c4c; height:265px;}
#logo {width:980px; margin:0 auto;} 
#content {width:980px; margin:0 auto;}
#foot{width:980px; margin:0 auto;}
#content {
 background-image:url(../images/bg_main.jpg);
 background-repeat: repeat-y;
 min-height: 100%;
}

Also das eigentlich Problem ist auch dieses DIV mit dem TABLE. Es soll halt rechts und links vom HEADER BILD (zentriert) ein anderer Background sein soll, der sich je nach Fensterbreite erweitert. Deswegen habe ich auch das TABLE erst da eingebaut. Wenn es eleganter geht, gerne.

Ausserdem liegt das absolut positionierte DIV auch über den Rest was ja auch nicht sinn der Übung ist.

rockscientist01 · 21.02.2011

AW: [CSS] position absolute unter position relaitve

hehe sei mir nich böse, aber Dein code is murks. Ich versteh nicht, wie du es gerne hättest, auch aus Ermangelung an Bildern. Kannste ein bisschen Photoshop? Dann zeichne mal Dein layout da grob vor (aber mit Bildern!). Zeig mir dann hier die Skizze, und ich mach Dir ein layout in html/css.

Gruß
AO