Forum PHP.pl > [HTML][CSS] Brak powtarzalnego tła w <div>

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS] Brak powtarzalnego tła w <div>

sadistic_son

14.07.2009, 03:11:41

Słuchajcie mam stornke wyświetlającą newsy. Każdy news pojawia się jako odzielny blok z zaokrąglonymi rogami i gradientem. Każdy news znajduje sie w <div class=news>. Zasada jest taka, że wnętrze składa się z 3 <div>: góry, środka i dołu. Góra i dół są po to aby narożniki były zaokrąglone. W górze jest img z floatem do lewej i drugi do prawej a pomiędzy nimi wypełnienie backgroundem repeat-x. Tak samo w dolnym divie. Wgląda to tak:

[HTML] pobierz, plaintext 
<div class=news>
 
<!--Gorna ramka-->
<div class="top"><img class="top_left" src="top_left.bmp"><img class="top_right" src="top_right.bmp"></div>		
 
<div class="inside">
Treść newsa
</div>
 
<!-- Dolna ramka-->
<div class="bottom"><img class="bottom_left" src="bottom_left.bmp"><img class="bottom_right" src="bottom_right.bmp"></div>
 
</div>
[HTML] pobierz, plaintext

A w CCSie tak:

Kod

.top{
padding-top:0px;
background-image:url(top.bmp);
background-repeat:repeat-x;
}

.inside{
background-image:url(inside.bmp);
background-repeat:repeat-y;
padding:0;
margin:0;
}

.bottom{
height:13px;
background-image:url(bottom.bmp);
background-repeat:repeat-x;
border:0;
}

.top .top_left{
float:left;
}

.top .top_right{
float:right;
}

.bottom .bottom_left{
float:left;
}

.bottom .bottom_right{
float:right;
}

Wytłumaczcie mi proszę czemu górny lewy i górny prawy obrazek wyświetlają się ok ale tło między nimi jest 'przykryte' wypełnieniem z <div class=inside>, który jest poniżej <div class=top> w htmlu ?!?!?! . Dzieje się tak i w IE i w FF.

.

EDIT: Już wyczaiłem czemu tak się dzieje. Wystarczy dodać w CCSie w klasie .top wysokość taką jaką mają narożniki czyli 13px i wszystko śmiga.

athei

14.07.2009, 07:27:54

Przepraszam, że się czepiam, ale chyba nie wrzucasz obrazków .bmp na stronę?

sadistic_son

14.07.2009, 23:22:42

Nie nie, mam je tylko tak chwilowo puki strona jest w budowie. Ciagle edytuje te obrazki dlatego na razie tak jest. Ale nawet gdyby to one maja 13px na 13px wiec jpg by sporej roznicy nie zrobilo w rozmiarze pliku.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.