Forum PHP.pl > [css] menu z okragłymi brzegami

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [css] menu z okragłymi brzegami

gosienkami

19.03.2009, 10:13:08

mecze sie z umieszczeniem okragłych, dolnych krawedzi w menu moze ktos mi pomoc przerobić kod. i zeby pasek. jpg był wycentrowany miedzy menu1 a menu 2 itd....

[HTML] pobierz, plaintext 
<style>
ul.menu{
 display: block;
 list-style: none;
 margin: 0;
 padding: 0;
 text-align: center;
}
ul.menu li{
 float:left;
 width: 100px;
 background-color: #BDD9EE;
 
 height: 25px;
}
.dlewyokragly {
 width: 350px;
 background-color: #BCD8EE;
 background-image: url(menulewe.jpg);
 background-repeat: no-repeat;
 background-position: 0 100%;
}
.dprawyokragly {
 background-image: url(menuprawe.jpg);
 background-repeat: no-repeat;
 background-position: 100% 100%;
}
</style>
<body>
<ul class="menu">
<li> menu1 </li>
<li> <img src="pasek.jpg"/> menu 1</li>
<li> <img src="pasek.jpg"/> menu 2</li>
<li> <img src="pasek.jpg" /> menu 3</li>
<li> <img src="pasek.jpg" align="/>menu 4</li>
<li> <img src="pasek.jpg"/> menu 5</li>
<li> <img src="pasek.jpg"/> menu 6 </li>
</ul>
</body>
[HTML] pobierz, plaintext

pi_wo

19.03.2009, 11:07:41

[HTML] pobierz, plaintext 
<style>
ul.menu li{
 float:left;
 width: 100px;
 background-color: #BDD9EE;
 background: url(pasek.jpg) 0 0 no-repeat;
background-position: bottom center;
 height: 25px;
}
</style>
[HTML] pobierz, plaintext

Nie wiem czy dobrze zrozumiałem.

gosienkami

19.03.2009, 12:05:42

mam cos takiego i jak zamalować biała przestrezen miedzy dolnymi rogami
http://www.fotosik.pl/pokaz_obrazek/2d94d6d66b14c56e.html

<ul class="menu">
<li> menu1 <img src="menulewe.jpg" align="left"></li>
<li> <img src="pasek.jpg" align="left" a/> menu 2</li>
<li> <img src="pasek.jpg" align="left"/> menu 2</li>
<li> <img src="pasek.jpg" align="left"/> menu 3</li>
<li> <img src="pasek.jpg" align="left"/>menu 4</li>
<li> <img src="pasek.jpg" align="left"/> menu 5</li>
<li> <img src="pasek.jpg" align="left"/> menu 6
<img src="menuprawe.jpg" align="right"/></li>
</ul>

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.