Forum PHP.pl

Mam problem z wyświetlaniem obrazka jako tło DIV'a. Ma to być niepowtarzający się motyw, leciutki gradient który schodzi w dół do jednolitego koloru. Tło wyświetla mi się jedynie wtedy, kiedy w środku DIV'a jest jakaś zawartość.

Jeśli jest jedna linia tekstu, tło wyświetla się tylko pod nią. Problem uwidacznia się w momencie, kiedy na stronie mam dwie kolumny:
- po lewej menu
- po prawej treść

Jeśli wrzucę background-image oddzielnie dla tła, oddzielnie dla treści i treść jest "wyższa" od menu, to treść wygląda OK a menu ma tło tylko do wysokości batonów.

Co powinienem zmienić żeby obrazek w tle wyświetlał się niezależnie od tego czy w bieżącym lub podrzędnym DIV'ie jest jakaś zawartość? Próbowałem wstawiać tło dla DIV'a middle, ale wtedy w ogóle się nie wyświetla poniewać w podrzędne DIV'y (menu i content) są puste a dopiero w hierarchicznie niższych (menu_inside i content_inside) jest osadzana treść lub grafika.

Będę wdzięczny za jakieś wskazówki.

Pomijając kontenery i inne elementy, wrzucam samo sedno sprawy, wycinek html'a oraz styli.
middle to środkowa część stronki, między headerem a dolnym paskiem.

[HTML] pobierz, plaintext 
<div id="middle">
   <div id="menu">
      <div id="menu_inside">
 
         tu będą batony
 
      </div>
   </div>
 
   <div id="content">
      <div id="content_inside">
 
           tu będzie tekst
 
      </div>
   </div>
</div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
#middle
	{
	width:880px;
	position:relative;top:0px;left:0px;
	background: f2ebca;
	clear: both;
	}
 
#menu
	{
	width:260px;
	position:relative;top:0px;left:0px;
	background-image:url('gfx/bg_menu.gif');
	background-repeat:no-repeat;
	float:left;
	}
 
#menu_inside
	{
	width:240px;
	position:relative;top:0px;left:10px;
	font-family:Verdana, Helvetica, Arial, sans-serif;
	}
 
#content
	{
	width:620px;
	position:relative;top:0px;left:0px;
	background-image:url('gfx/bg_content.gif');
	background-repeat:no-repeat;
	text-align:left;
	float:right;
	}
 
#content_inside
	{
	width:600px;
	position:relative;top:0px;left:0px;
	text-align:left;
	float:left;
	}
[HTML] pobierz, plaintext 

Jesli widze ten sam problem co ty:

divy - 'menu' - 'content' sa niezalezne tak jak i ich wysokosci
proponuje umiescic je w trzecim divie
i dla tego trzeciego div nadac tlo ktore ma sie rozciagac w pionie
bedzie wtedy tak wysokie jak jeden albo drugi div

cbagov:

dzięki za sugestię. tło jednak nie ma być rozciągane a jedynie wyświetlone raz od góry DIV'a. to leciutki gradient, który schodzi do jednolitego koloru tła.

próbowałem podpinać tło do zbiorczego DIV'a ale nie śmiga, bo DIV'y podrzędne zawierają jeszcze po jednym w sobie a dopiero tam treść/obrazki.

Mialem na mysli, ze rozciagnie sie DIV a skoro ma tlo to i ono bedzie bardziej odsloniete.
Slij na prv.

Jeśli problem nadal nie jest rozwiązany...

Wstaw do styli elementu middle overflow: hidden;

Spowoduje to, że element middle będzie miał taką wysokość, jak wyższy z elementów menu i content. Następnie możesz ustawić mu bez problemów tło.

Jeśli natomiast dalej będzie problem z tym, że element jest zbyt krótki i tło nie wyświetla się w całości możesz nadać mu styl min-height: XXpx; Nie działa on co prawda w IE (na pewno 6), jednak od biedy można się posiłkować expressions.

Cytat

Próbowałem wstawiać tło dla DIV'a middle, ale wtedy w ogóle się nie wyświetla poniewać w podrzędne DIV'y (menu i content) są puste a dopiero w hierarchicznie niższych (menu_inside i content_inside) jest osadzana treść lub grafika.

To nie ma żadnegno znaczenie. Element menu nie ma wysokości dlatego, że jego podrzędne elementy się opływają i tym samym mają zmienną wysokość (element nadrzędny nie może ustawić sobie wysokości, bo "nie ma pojęcia" jaką ustawić) - radą na to jest właśnie ustawienie mu stylu overflow.

Ten post edytował Shili 12.05.2008, 11:08:05