[CSS] Przerwa w tle Opcje

[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 ]

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>...

Ten post edytował sowiq 25.08.2008, 19:27:29

[snovvy]

Hmm... eee... nie wiem co powiedzieć... 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).

Ten post edytował barthpl 25.08.2008, 19:37:10

[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
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 ;-)

Ten post edytował snovvy 25.08.2008, 19:47:03