Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] zaokrąglone rogi diva z 3 obrazków :/
Forum PHP.pl > Forum > Przedszkole
Lejto
Chce osiągnąć takie coś:
http://img152.imageshack.us/img152/5869/14991241tl9.gif - jak co to powiększcie bo trochę małe
(nie sugerujcie się niebieskim tłem)
do tej pory maiłem to zrobione na tabelkach ;/, ale chce to zrobić w standardach z użyciem css i diva w skład tego nagłówka wchodzą 2 obrazki lewy i prawy i środkowy, szukałem w necie o tym znalazłem ale nie do końca to co chciałem otóż znalazłem poradniki jak zrobić boxy zaokrąglone http://art.webesteem.pl/16/wstd_rounded_co...s_example_2.php ale nie takie jak ja chce. Tu pokazane jest jak tylko wstawić obrazek na lewo i na prawo a nie ma już na środku na środku jest sam kolor potem znalazłem już na 3 obrazki tak jak ja chce ale tekst jest pod obrazkami a nie na samej górze. Sam próbowałem to zrobić miałem obrazek po lewej i prawej i było ok ale za to obrazek po środku a na nim tekst był nie wymiarowy ;/
piotrooo89
może to Ci pomoże: http://olaszewski.freehostia.com/?p=13
Lejto
ok dzięki ale to co podałeś wykorzystuje js, a ja chce to normalnie zrobić w css, czy może trochę niejasno się wyraziłem? bo już sam nie wiem
lewy róg, środek (normalny napis html) i lewy róg
coś takiego:
  1. <div>
  2. <img style="float:left;" src="images/lewo.gif" alt="" />
  3. <span style="background:url(images/srodek.gif); height:20px;">Lorem ipsum dolor sit amet</span>
  4. <img src="images/prawo.gif" alt="" />
  5. </div>

tylko kod zły jakoś to dopracować trzeba czego użyć, bawiłem się trochę z tym wysokość, marginesy itp ale nic

zrobiłem! ale głupi jestem smile.gif

  1. .le{background: url('images/lewo.gif');background-repeat: no-repeat;width: 15px;height: 23px;float: left;}
  2. .sr{background: url('images/srodek.gif'); background-repeat:repeat; width:160px; height:23px; float:left;}
  3. .sr{font-size:12px; font-weight:bold; vertical-align:bottom}
  4. .pr{background: url('images/prawo.gif'); background-repeat: no-repeat; width:15px; height:23px; float: right;}
  5.  
  6. <div style="width:190px;">
  7. <span class="le"></span>
  8. <span class="sr"> &raquo; Menu </span>
  9. <span class="pr">&nbsp;</span>
  10. </div>


kod jest optymalny? muszę jeszcze dopracować górny margines "Menu" żeby nie było u góry tylko tak po środku tła
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.