MN. S.: Div Container bis zum Seitenfuß

Beitrag lesen

SELF-Forum

Div Container bis zum Seitenfuß

MN. S.
– Informationen zu den Bewertungsregeln

Hallo,

ich bin nun am recherchieren und suchen aber komme leider zu keiner Lösung. Ich möchte gerne eine Spalte an der gesamten Seite bis zum untersten Ende, nicht Bildschirmende, sondern auch bis zum gescrollten Ende durchlaufen lassen.

Diese Spalte soll ganz oben anfangen mit einer Textur anfangen, am Fusse eine andere Textur die eben dort enden soll, und zwischen diesen beiden Texturen eine 1px hohe Textur die das sich von oben bis unten wiederholt.

Klingt ziemlich konfus aber hat schon Sinn für mein Vorhaben. Hier ist mein Ansatzpunkt:

  
  
<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >  
<head>  
 <jdoc:include type="head" />  
 <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/dow_de/css/template.css" type="text/css" />  
</head>  
<body>  
<div id="all">  
 <div id="left">  
  <div id="left_bg_top">  
    <img src="<?php echo $this->baseurl ?>/templates/dow_de/images/left_bg_top.jpg">  
  </div>  
  <div id="left_bg_bottom">  
    <img src="<?php echo $this->baseurl ?>/templates/dow_de/images/left_bg_bottom.jpg">  
  </div>  
 </div>  
 <div id="center">  
  <div id="main">  
   <div id="logo">  
    <div id="logo_left">  
     <img src="<?php echo $this->baseurl ?>/templates/dow_de/images/logo.jpg">  
    </div>  
    <div id="logo_right">  
     <img src="<?php echo $this->baseurl ?>/templates/dow_de/images/logo_right.jpg">  
    </div>  
   </div>  
   </div>  
   <div id="logo_bottom">  
    <img src="<?php echo $this->baseurl ?>/templates/dow_de/images/logo_bottom.jpg">  
   </div>  
   <div id="top">  
    <img src="<?php echo $this->baseurl ?>/templates/dow_de/images/bg_top.jpg">  
   </div>  
   <div id="advert">  
    <img src="<?php echo $this->baseurl ?>/templates/dow_de/images/advert.jpg">  
   </div>  
   <div id="main_top">  
    <img src="<?php echo $this->baseurl ?>/templates/dow_de/images/main_top.jpg">  
   </div>  
   <div id="main_bg">  
    <img src="<?php echo $this->baseurl ?>/templates/dow_de/images/main_bg.jpg">  
   </div>  
   <div id="main_bg">  
   </div>  
   <div id="main_bottom">  
    <img src="<?php echo $this->baseurl ?>/templates/dow_de/images/main_bottom.jpg">  
   </div>  
   <div id="footer_top">  
    <img src="<?php echo $this->baseurl ?>/templates/dow_de/images/footer_top.jpg">  
   </div>  
   <div id="footer_bottom">  
    <img src="<?php echo $this->baseurl ?>/templates/dow_de/images/footer_bottom.jpg">  
   </div>  
  </div>  
 </div>  
</div>

Folgende CSS:

  
html, body {  
     height: 100%; /* wichtig */  
  min-height: 100%;  
  overflow-y: auto;  
}  
  
body {  
 margin: 0px;  
 padding: 0px;  
 background-color:#000000;  
}  
  
#all {  
 height: 100%;  
 min-height: 100%;  
 posotion:relative;  
}  
  
  
#center {  
 margin-left: 21px;  
 height: 100%;  
 min-height: 100%;  
}  
  
#main {  
 margin: 0px;  
 padding: 0px;  
 text-align: center;  
}  
  
#left {  
 float:left;  
}  
  
#left_bg_top {  
 left: 0;  
 top: 0;  
}  
  
#left_bg_middle {  
 background: #fff url(../images/left_bg.jpg) repeat-y;  
 min-height: 100%;  
}  
  
#left_bg_bottom {  
 position:static;  
 bottom:0;  
}  
  
#logo {  
}  
  
#logo_left {  
 float: left;  
}  
  
#logo_right {  
 float: left;  
 padding: 0px;  
 }  
  
#logo_bottom {  
 margin: 0px;  
 padding: 0px;  
}  
  
#top {  
}  
  
#advert {  
}  
  
#main_top {  
}  
  
#main_bg {  
 height: 400px;  
 background: #fff url(../images/main_bg.jpg) repeat-y;  
}  
  
#footer_top {  
}

Ich weis, ich machs mir aktuell etwas leicht und ist klar, dass es so nicht klappt. Aber ich habe auch bereits jede Menge andere Experimente gemacht und sie haben leider nicht zum gewünschten Ergebnis geführt.

Danke schon mal für eure Hilfe.

Beitrag melden
–
Informationen zu den Bewertungsregeln