Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Przerwa w tle
Forum PHP.pl > Forum > Przedszkole
snovvy
Witam serdecznie wszystkich koderów :-)

Przejdę od razu do rzeczy. Mam taki kod w index.html:

Kod

<div id="menu_left">
<img src="img/menu_l_up.jpg" border="0" alt="obrazek">
<ul>
<li><p> link
<li><p> link
<li><p> link
<li><p> link
<li><p> link
<li><p> link
<li><p> link
<li><p> link
</ul>
</div>


Sprawa wyglada identycznie w przypadku menu prawego.

Oraz plik style.css:

Kod
#menu_left {
width: 200px;
height: 100%;
float: left;
background-image: url(img/bg_menu_left.jpg);
background-repeat: repeat-y;
display: inline;
}


To samo w menu prawym. [różnicą jest jedynie grafika]

I mam taki problem:



I moje pytanie brzmi: What the heck is wrong, i dlaczego robi się taka przerwa(Zaznaczona strzałkami)? [w każdej przeglądarce tongue.gif]

Pozdrawiam i proszę o pilną pomoc! :-)
sowiq
A słyszałeś może o zamykaniu tagów?
Kod
<div id="menu_left">
<img src="img/menu_l_up.jpg" border="0" alt="obrazek">
<ul>
<li><p> link</p></li>
<li><p> link</p></li>
<li><p> link</p></li>
<li><p> link</p></li>
<li><p> link</p></li>
<li><p> link</p></li>
<li><p> link</p></li>
<li><p> link</p></li>
</ul>
</div>
<div style="clear: both"></div>


Kod
#menu_left {
width: 200px;
float: left;
background-image: url(img/bg_menu_left.jpg);
background-repeat: repeat-y;
display: inline;
}


Mniejsza o to, że nie widzę sensu wstawiania <p> w <li> i nadawania 'display: inline' dla elementu <div>...
snovvy
Hmm... eee... nie wiem co powiedzieć... ohmy.gif już zamknąłem...
Ale problemu to mojego niestety nie rozwiązuje :C
sowiq
Bo po takim kawałku kodu nie da się wiele wywnioskować. IMO wina nie leży po stronie tego menu. Po ostatnim <div> z 'float:left' (prawe menu?) daj
Kod
<div style="clear: both"></div>
barthpl
Nie jestem pewien ale wydaje mi się że problem jest w height: 100%;. Dla tagu div działa to jedynie jeżeli jest sprecyzowana wysokość elementu nadrzędnego. Pokaż cały kod strony.

Tak na szybko to radził bym tło wpakować do elementy zawierającego te trzy kolumny (menu lewe, prawe i środek). Obrazek byłby połączeniem niebieskiego paska lewego (lewe menu), białego (tło środkowego elementu) i ponownie niebielskiego (prawe menu).


p.s.: Do zabawy z layout'ami (sprawdzanie czemu i co jest jest nie tak) proponuje użyć Firebug'a (jest to plugin dla FF, do pobrania tutaj).
snovvy
Zrobiłem tak jak poradziłeś :-) W sumie efekt dokładnie taki jak chciałem :-) A i stronka na wadze straci :-) Zobaczymy jeszcze co na temat stronki powie walidator tongue.gif
W tym temacie dziękuje za pomoc chyba, że macie jakieś inne pomysły? Ale wyjdę mi się, że ten jest całkiem niezły ;-)
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.