Witam serdecznie, podczas tworzenia strony dla mojej szkoły natrafiłem na mały problem związany z menu, którego nie mogę od dłuższego czasu rozwiązać. Otóż mam box o zaokrąglonych bokach, który jest podzielony na trzy divy. Pierwszy oraz trzeci div zawiera pasek w formacie png, który jest zaokrąglony w rogach, natomiast w divie numer dwa mieści się menu. Problem w tym, że jest ono wyświetlane poza tymi trzema divami, a nie tak jak powinno, czyli w obrębie divu drugiego. Kod html przedstawia się nastepująca:

[HTML] pobierz, plaintext 
<div style="float: left">
<div id="colLeft">
<div id="colLeftUp"></div>
<div id="colLeftCenter">
<ul>
<span>Rekrutacja</span>
<li>Oferta szkoły</li>
<li>Zasady rekrutacji</li>
<li>Formularz rekrutacyjny</li>
<li>Wyniki rekrutacji 2010</li>
</ul>
</div>
 <div id="colLeftDown"></div>
</div>
</div>
[HTML] pobierz, plaintext 

A CSS:

[CSS] pobierz, plaintext 
#colLeft { float: left; width: 196px; margin-top: 10px; margin-right: 10px; }
#colLeftUp { height: 6px; background-image: url(images/menu-top.png);  }
#colLeftCenter { width: 190px; background-color: #f8f6f4; border-left: 1px solid #cac3b6; border-right: 1px solid #cac3b6; padding: 0 2px;}
#colLeftDown { height: 6px; background-image: url(images/menu-bottom.png); }
#colLeftCenter ul { width: 178px; height: 19px; padding-top: 6px; padding-left: 12px; list-style-type: none; background-image: url(images/menu-ul.png); }
#colLeftCenter span { color: #ffffff; font-weight: bold; text-shadow: 1px 1px 1px #8faa14; }
#colLeftCenter li { margin: 12px; list-style-type: none; }
[CSS] pobierz, plaintext 

Z powyższego kodu uzyskuje taki efekt:


Jednakże bardzo zależy mi na tym, aby ów box wyglądał tak:


Liczę na duże zainteresowanie moim problemem i szybką pomoc. W zamian mogę zaoferować małe projekty graficzne. Pozdrawiam

A nie możesz gdzieś tego wystawić? Firebug jest nie tylko Twoim przyjacielem. [;

Rozumiem, także już wrzucam. Problem przedstawia się następująco:

Menu

Odnośnie Firebug'a nie umiem się nim posługiwać. Jeśli problem zostanie rozwiązany na pewno się odwdzięczę. Pozdrawiam

Zlikwiduj height z elementu UL. Poza tym lepiej by było jakbyś to tło powiązał z elementem LI a nie UL - masz wtedy większą kontrolę nad jego rozmieszczeniem.

Dziękuje za wskazówkę. Problem został rozwiązany. Dla ciekawskich poprzez usunięcie height oraz:

[HTML] pobierz, plaintext 
    		<div id="colLeftCenter">
    			<ul><span>Rekrutacja</span></ul>
				<ol>
    				<li>Oferta szkoły</li>
    				<li>Zasada rekrutacji</li>
    				<li>Rekrutacja</li>
    				<li>Wyniki rekrutacji 2010</li>
    			</ol>
    		</div>
[HTML] pobierz, plaintext