[HTML][CSS] 3 elementowy okrągły button Opcje

[owned]

Witam! Jak zrobić okrągły button składający się z 3 elementów ?
Mam na myśli lewa strona, powtarzający się środek i prawa strona.
Całość musi być linkiem jednak użycie elementów 'div' w 'a' nie jest poprawne.
W grę również nie wchodzi :before i :after.

[HTML] pobierz, plaintext 
<a href="#">
 <div class="menu_left"></div>
  <div class="menu_bg">
   <p>
    Strona Główna
   </p>
  </div>
 <div class="menu_right"></div>
</a>
[HTML] pobierz, plaintext 

Proszę o pomysły, pomoc

Ten post edytował owned 27.09.2009, 21:22:36

[!*!]

To zależy co chcesz uzyskać.

[HTML] pobierz, plaintext 
<div id="bottom">
<div id="left"><div>
<div id="right"><div>
 
 
<a>link<a/>
</div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
#bottom{width:20px}
#bottom a{width:20px}
 
#left{float:left}
#right{float:right}
[CSS] pobierz, plaintext 

Ten post edytował !*! 27.09.2009, 22:20:20

[sadistic_son]

To co kolega wyżej przedstawił nie będzie przyciskiem tylko grafiką 'oplatającą' linka.
Nie wiem dlaczego sądzisz, że wkładanie diva w linka jest nie poprawne. Ja bym to zrobił tak:

[HTML] pobierz, plaintext 
<a href=wp.pl>
<img class="left" src="left.jpg" />
<div class="link">tekst linku</div>
<img class="right" src="right.jpg" />
</a>
[HTML] pobierz, plaintext 

I style:

[HTML] pobierz, plaintext 
a img{
border:0;}
.left{
float:left;}
.right{
float:left;}
.link{
background-image:url(inside.jpg);
background-repeat:repeat-x;
float:left;
height:10px;
text-align:center;}
[HTML] pobierz, plaintext 

Zakładając, że przycisk ma mieć 10px wysokości.
Wszycho bangla jak należy, cała grafika jest linkiem, dopasowuje się do długości tekstu, można dodać efekt hover itp. Działa na wszystkich przeglądkach.

Ten post edytował sadistic_son 28.09.2009, 05:08:29

[owned]

podobno validator wskazuje bledy jesli umiescimy div w a

[cojack]

To zależy od doctype, ale ja już Wam przedstawiłem że a robi się na display block, podaje mu się width i height inherit po div, i gra muzyka teścia biją, ludzie no! Ileż można jedno i to samo w kółko wałkować?

[owned]

To zależy od doctype, ale ja już Wam przedstawiłem że a robi się na display block, podaje mu się width i height inherit po div, i gra muzyka teścia biją, ludzie no! Ileż można jedno i to samo w kółko wałkować?

moglbys pokazac na jakims przykladzie ?

[cojack]

[HTML] pobierz, plaintext 
div#someDiv {
      width: 300px;
      height: 200px;
      background: red;
    }
    div#someDiv > a {
      display: block;
      width: inherit;
      height: inherit;
    }
 
    div#someDiv:hover {
      background: yellow;
    }
 
    <div id="someDiv">
      <a href="#" title="Some href">Some href</a>
    </div>
[HTML] pobierz, plaintext 

Ten post edytował cojack 28.09.2009, 13:17:53

[owned]

[HTML] pobierz, plaintext

1. div#someDiv {
2. width: 300px;
3. height: 200px;
4. background: red;
5. }
6. div#someDiv > a {
7. display: block;
8. width: inherit;
9. height: inherit;
10. }
12. div#someDiv:hover {
13. background: yellow;
14. }
16. <div id="someDiv">
17. <a href="#" title="Some href">Some href</a>
18. </div>

[HTML] pobierz, plaintext

No dobra ale w IE nie zadziała hover dla elementu div

[cojack]

Zadziała, Poczytaj tutaj: IE kompatybilne z w3c

@edit
btw ten znak > też nie zadziała pod ie ;]

Ten post edytował cojack 28.09.2009, 13:58:55

[owned]

elementy to obrazki wiec hovera podepne pod js.
dziekuje za pomoc