(DIV,CSS) Opcje

[Spriter]

Witam mam problem z "rozciąganiem" obrazka w divie. Mam strone w układzie 3-kolumnowym.Lewa strona-menu, środek- treść, prawa - jakieś opcjonalne rzeczy. Chciałbym żeby w miare przybywania treści w środkowej kolumnie obrazek (lub tło) lewej i prawej kolumny wydłużał się. W tym temacie http://forum.php.pl/index.php?showtopic=191949 zauważyłem ciekawe rozwiązanie, niestety obrazek wydłużył się i przeciął stopkę strony. Po lewej i prawej stronie tłem nie musi być obrazek bo może być normalny kolor,bo obrazek to zwykły prostokąt w określonym kolorze, ale to też próbowałem i też bezskutecznie. Tak wyglądają divy:

[HTML] pobierz, plaintext 
 <div id="main">
        <div id="header"><img src="templates/tenisowo2/images/logo.png"></div>
        <div id="menu">
      </div>
        <div id="middle">
            <div id="left"></div>
          <div id="cent">
            </div>
          <div id="right">
            </div>
        </div>
        <div id="footer">
        </div>
    </div>
[HTML] pobierz, plaintext 

a tak szablon css

[HTML] pobierz, plaintext 
A:link, A:visited { text-decoration: none; color:#000000 }
A:hover { text-decoration: underline; text-shadow: ff9900; animation:cubic-bezier()  }
body {
    margin: 0;
    padding: 0;
    font: 14px Arial, Helvetica, sans-serif;
    text-align: center;
    color: #000000;
    background: #ffff99;
}
p {
	margin: 0;
	padding: 0;
	text-align: justify;;
	border:none;
	margin-left:auto;
}
p_menu {
	text-shadow:ff9900;
	text-emphasis:before;
	text-align:center;
	font-size:16px;
	font:Arial, Helvetica, sans-serif;
	}
 
#main {
	margin: 0 auto;
	padding: 0;
	width: 980px;
	text-align: left;
	font-size: 14px;
}
#header {
    height: 150px;
	width:980px;
}
#menu {
    height: 55px;
   	text-align:center;
    background-image:url(../images/menu.png)
}
middle {
	background-color: #ffcc00;    padding-bottom:10000px;
    margin-bottom:-10000px;
}
#left {
	text-align:left;
	line-height:35px;
    float: left;
    width: 149px;
	background-image:url(../images/left.png);
	padding-bottom:0px;
	}
ul{
	margin-left:15px;
	padding:0;
}
#cent {
	float: left;
	width: 680px;	
	padding: 0 10px 0 10px;
	height:100%;
}
#right {
	text-align:center;
	line-height:35px;
	float: right;
	width: 130px;
	background-image:url(../images/right.png); 
	padding-bottom:0px;
	 }
#footer {
    clear: both;
    height: 90px;
    line-height: 15px;
    text-align: left;
   	padding: 0;
	width: 980px;
	background-image:url(../images/footer.png)
}
[HTML] pobierz, plaintext 

Wszystkie polecenia typu background-repeat: repeat z innymi opcjami nie pomagają. Na stronie po prostu w lewej i prawej kolumnie obrazek wydłuża się tylko do treści zawartej w danej kolumnie. Proszę o pomoc

[lukesh]

Wszystkie polecenia typu background-repeat: repeat z innymi opcjami nie pomagają. Na stronie po prostu w lewej i prawej kolumnie obrazek wydłuża się tylko do treści zawartej w danej kolumnie.

Dzieje się tak, ponieważ lewa, środkowa i prawa kolumna nie wydłużają się równomiernie. To nie jest tabela, gdzie wszystkie kolumny mają taką samą wysokość.
Jednym rozwiązaniem może być ustawienie trzech obrazków jako tło dla div#middle i wtedy wszystko Ci się będzie rozciągać tak, jak chcesz.
Musisz tylko ustawić odpowiednią pozycję dla każdego z obrazków.
Druga opcja - możesz skorzystać z JS i zmieniać wysokość poszczególnych divów, kiedy wysokość jednego z nich powiększy się.
Pierwsze rozwiązanie jest ciekawe, ale w IE działa tylko od wersji 9.0.

Ten post edytował lukesh 16.04.2012, 10:10:18