Forum Moderators: not2easy
how it (doesn't) work - preview <>
CSS:
html {height:100%;}
body {margin: 0px; padding: 0px; background-image:url(../images/pozadi.png); background-repeat:repeat-x; background-color: #1774C6;height:100%}
#top {padding-top: 50px; background-image:url(../images/top.png); background-repeat:no-repeat; background-position:center}
#obalka {width: 794px; margin: 0px auto; background-image:url(../images/okraje.png); background-repeat:repeat-y}
#leva_cast {float: left; padding-left:10px; width: 195px; height: 100%}
#logo {background-image:url(../images/pozadi_levo_top.png); background-repeat:no-repeat; height: 148px; background-position:center}
#menu {height: auto; background: url(../images/pozadi_levo.png) repeat-y}
#obsah {float: right; padding-right:10px; width:579px}
#top_image {width: 579px; height: 228px; background-image:url(../images/top_image.png); background-repeat:no-repeat}
#clanek {width: 579px; height: 413px; background-image:url(../images/clanek_bg.png); background-repeat:no-repeat}
#clanek_oddelit {width: 579px; height: 65px; background-image:url(../images/clanek_oddel.png); background-repeat:no-repeat}
#akce_klubu {width: 579px; height: 298px; background-image:url(../images/akce_bg.png); background-repeat:no-repeat}
#akce_oddelit {width: 579px; height: 72px; background-image:url(../images/akce_oddel.png); background-repeat:no-repeat}
#paticka {clear:both; width: 774px; height:30px; margin:0px auto; background-color: #FFFFFF}
#paticka_image {padding-bottom: 20px; width: 774px; height:7px; margin:0px auto; background-image:url(../images/paticka.png); background-repeat:no-repeat; background-position: top}
stranka:
kód:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Junioraerobic</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="./css/screen.css" type="text/css" media="screen" />
</head>
<body>
<div id="top"></div>
<div id="obalka">
<div id="leva_cast">
<div id="logo"></div>
<div id="menu"></div>
</div>
<div id="obsah">
<div id="top_image"></div>
<div id="clanek">
</div>
<div id="clanek_oddelit">
</div>
<div id="akce_klubu">
</div>
<div id="akce_oddelit">
</div>
</div>
<div id="paticka"></div>
</div>
<div id="paticka_image"></div>
</body>
</html>
[edited by: SuzyUK at 5:09 pm (utc) on Aug. 29, 2008]
[edit reason] Please No URI's, see guidelines at top of forum [/edit]
This is a common question as in people always want to know how to get full length columns.. basically you can't do this with floats, your left column does not know how long the right is and vice versa.
BUT you can fake it, and this is what is known as the faux column technique, so instead of trying to slice up the repeating background into left and right columns, join the background images all together again and have it repeat down the background of the container (obalka?)
or looking at your actual graphic you might just be able to repeat your existing image down the the background of the container (not menu div) as the other images you have in place will simply sit over the top of it, though sizing migyht be a bit off for that..
simply put it's the container div that's full length, and that's where "faux column" background images should go as you won't be able to get left menu div to actually be that height
