ugrás a tartalomhoz

CSS - háttér

simisoma · 2010. Dec. 15. (Sze), 01.22
Sziasztok,

milyen megoldást tudnátok javasolni nekem...

Van egy oldalam ami a háttérrel együtt 1600px széles,

a tartalom rész 1024px széles

a fejléc mögött a lap tetején kéne a háttér legyen, de
a lábléc mögött is kéne egy háttér.

A hátterek szélessége 1600px és a fejléccel - lábléccel összekapcsolódik, azonban azt szeretném, hogy az oldalt 1600px-nél kisebb felbontásban nézik vagy a böngésző szélességét kicsinyítik,mozgatják akkor is a tartalom rész legyen a böngésző közepén.

egybe nem tudom betenni a hátteret, mert a fejléc és lábléc közötti rész magassága oldalanként dinamikusan változik.

egy weblapon belül a BODY részre nem lehet két hátteret tenni egyiket TOP a másikat BOTTOM elrendezéssel, vagy valami hasonló megoldással?

Vagy mi más olyan lehetőség van ahol a tartalom részem (1024px széles)lesz a böngészők számára a fix, és a méretezésénél, előbb a háttereket (1600px széles)takarja ki....???

Húúú remélem érthetően írtam ezt le... :-)

Köszönöm előre is a segítséget...
‹ Bugos képbetöltés háttérkép lentebbről indítása ›
 ■
1

Ilyesmi

Poetro · 2010. Dec. 15. (Sze), 03.27
Ilyesmi:
  1. <!DOCTYPE HTML>  
  2. <html lang="en-US">  
  3. <head>  
  4.   <meta charset="UTF-8">  
  5.   <title>Title</title>  
  6.   <style type="text/css">  
  7.     html {  
  8.       height: 100%;  
  9.     }  
  10.     body {  
  11.       height: 100%;  
  12.       margin: 0;  
  13.       position: relative;  
  14.       background: red url(http://www.artppt.com/images/red-gradient.jpg) top center repeat-x;  
  15.     }  
  16.     #main {  
  17.       background: blue url(http://www.artppt.com/images/blue-gradient.jpg) bottom center repeat-x;  
  18.       position: relative;  
  19.     }  
  20.     .content {  
  21.       width: 1024px;  
  22.       margin: 0 auto;  
  23.     }  
  24.     header, footer {  
  25.       display: block;  
  26.     }  
  27.     footer {  
  28.       height: 100px;  
  29.     }  
  30.     h1 {  
  31.       margin: 0;  
  32.       padding: 1em 0;  
  33.     }  
  34.   </style>  
  35. </head>  
  36. <body>  
  37.   <div id="main">  
  38.     <header>  
  39.       <div class="content"><h1>Title</h1></div>  
  40.     </header>  
  41.     <div id="content">  
  42.       <div class="content">  
  43.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
  44.            Phasellus velit lorem, sodales vel dictum et, mattis in  
  45.            urna. Nam in metus vel lacus ornare tincidunt.   
  46.            Curabitur molestie suscipit rhoncus. Pellentesque   
  47.            tempus, sem in posuere suscipit, massa velit cursus   
  48.            nisi, quis malesuada nibh lectus eget nunc. Nulla a   
  49.            arcu nec mauris varius faucibus. Pellentesque euismod   
  50.            pretium sapien ut hendrerit. Fusce in mi ac orci aliquam  
  51.            facilisis. Donec dictum egestas ipsum ultrices tempus.   
  52.            Praesent aliquet tellus id ante tincidunt vel commodo   
  53.            mauris auctor. Aenean eget erat leo, nec dapibus velit.   
  54.            Quisque vitae lorem nisi.</p>  
  55.       </div>  
  56.     </div>  
  57.   </div>  
  58.   <footer>  
  59.     <div class="content"><ul>  
  60.       <li><a href="#">X</a></li>  
  61.       <li><a href="#">y</a></li>  
  62.       <li><a href="#">z</a></li>  
  63.     </ul></div>  
  64.   </footer>  
  65. </body>  
  66. </html>  
2

Köszönöm!

simisoma · 2010. Dec. 15. (Sze), 07.49
Köszönöm, hogy ez nem jutott eszembe... :-) nagyon köszönöm!!!