Witam mam 3 obrazki i chce za ich pomoca stworzyc takie menu.



Wycialem sobie lewy obrazek zaokraglenie srodek i prawy i teraz mam problem z ulozeniem tego w spójną całość.
Tekst chce nakladać sobie dowolny. Czy może lepiej wziąść całe te elementy i ukladać jakos w DIVie?? proszę o pomoc bo z opcjami repeat-x itd i tworzeniem class dla menu mam problem i nie dziala to tak jakbym chcial bo pojawiają sie jakies marginesy nieoczekiwane... pomiędzy divami.

Probowalem to zrobic tak niestety nie bardzo funkcjonuje:

div#menu {
clear: both;
display:block;
padding : 0 0 0 0;
margin: 0 auto 0 auto;
width: 800px;
background: yellow;
height: 41px;
padding: 0 0 0 0;
}

div#menu .lewa {
background: url("menu_left.jpg");
float:left;
height: 41px;
width: 10px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

div#menu .link {
background: url("menu_repeat.jpg") repeat-x;
float:left;
width:100px;
height:41px;
margin: 0 0 0 0;
padding: 0 0 0 10px;
}

div#menu .prawa {
background: url("menu_right.jpg");
float:left;
height: 41px;
width: 10px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

HTML:

<div id="menu">
<div class="lewa"></div>
<div class="link"> Strona glowna </div>
<div class="prawa"></div>
</div>


a jak probowalem ostylowac listy tymi obrazkami to mimo ustawienia height: na wysokosc tych wycinkow moich zawsze zostawala wysokosc tekstu tylko.

umieszczam male obrazki jakby ktos dal rade zrobic div z id="menu" i ustawic to w jednej lini jak powyzej

-lewa czesc

 -srodek

 - prawa czesc

proponowalbym zrobic normalny guzik w calosci


<ul id="nawigacja">
<li> pierwszy guzik</li>
<li>nastepny </li>
<li>kolejny</li>

</ul>


w stylach ustawiasz wysokosc i dlugosc elementu li oraz jego bgr img i padding do textu


a w ul ustawiasz display inline i zerujesz marginy i paddingi


jak wrzucisz obrazek caly to moge ci to zrobic

Dzięki w sumie niezły pomysł. Ja probowalem nie na calym obrazku lecz na kawalkach to zlaczyć. Nie wyszlo mi. Za to mam inny ciekawy problem zwiazany z CSS.
Jakbyś miał jakis przyklad to byłbym wdzięczny. załóżmy masz ramke kwadratowa z zaokraglonymi brzegami wycinasz gorny pasek i dolny pasek i z boku prawego fragment i jak uzyc repeata zeby w takim ukladzie diva zmontowac ramke:

<div id="box">
<h3><span> naglowek </span></h3>
<p class="p1"><span>Tutaj jakis tekst ktory jest wewnatrz boxa</span></p>
</div>

taka jest struktura csszengarden.com ale probuje na ich sposob nasladowac i zrobic ramke ale im wychodzi a umnie az dziwne ze nie...

Z tamtym problemem poradzilem sobie wrzucajac img do diva i tworzac mape linkow i bylo po wszystkim w 20 min a z CSSem sie meczylem caly dzien i nie osiagnalem zamierzonego efektu.

Panowie proszę o dodanie bbcode.

Zeby height dzialalo tag MUSi miec display:BLOCK

A jeden ze sposobow na skladanie z tych 3 obrazkow i regularne buttony:

<div class="middle">
<div class="left">
<div class="right">
TEKST BUTTONA
</div></div></div>

Wtedy obrazkom dla kazdego diva nadajesz w klasie stylu
background: url(...) top left repeat-x
background: url(...) top left
background: url(...) top right


Oczywiscie w zaleznosci od funkcjonalnosci czesto lepiej zamiast 3x div miec od razu np LI, P czy SPAN