ugrás a tartalomhoz

Display BLOCK tulajdonságu <a> tag?

gtoma · 2007. Aug. 3. (P), 11.55
Sziasztok!

Ismét egy CSS problémám van (nem vagyok nagyon otthon benne).

Egy menüt úgy szeretnék megcsinálni, hogy a "gomb" <a> tag legyen. Azonban "gomb" szerüen szeretném megcsinálni. Meg is oldódik a probléma első fele, mert csinálok mondjuk egy div-et, és backgroundba beteszem a képet és megadom hogy 300 pixel széles (pl). Így gomb szerü. Akarok rá onmouseover efectet, ami szintén nem problémás.

Azonban. Ha a linkre teszek onmouseover efectet, akkor az csak akkor aktivizálódik, ha a - mondjuk: - 3 betüs link fölé viszem a kurzort. de ugye a hátterem 300 pixeles. igy fura az eredmény, mert a gomb "maradék" részére hiába viszem az egeret.

Aztán tehetem az onmouseovert a div-re is. Annak hátránya, hogy az ember már klikkelne is pedig nincs ott a link, így nem tud klikkelni, hiába nyomkodja szorgosan.

Egyébként találtam egy oldalt, ahol nagyon úgy müködött ahogy kellene, de nem jöttem rá, hogy hogyan oldották meg azt, hogy a link a div TELJES SZÉLESSÉGÉBEN aktivizálódjon.

(igazából már azt sem tudom hol van az oldal, mert elfelejtettem feljegyezni melyik volt az)
‹ Css problema CSS - ":first-letter" és az "a href" ›
 ■
1

css kell neked :)

ksgy · 2007. Aug. 3. (P), 12.32
a css:
  1. a.gombom {  
  2.     display: block;  
  3.     width: 300px;  
  4.     height: 60px;  
  5.     background: url(images/akarmi.gif) no-repeat;  
  6. }  
  7. a.gombom:hover {  
  8.     background: url(images/akarmi-mouseoveresen.gif) no-repeat;  
  9. }  
a html:
  1. <a href="valami.html" class="gombom"></a>  
nagyjabol ennyi az egesz :)
2

talán segít

sUTy · 2007. Aug. 3. (P), 13.13
szerintem ez segíthet:
CSS-be:
  1. .a_div{  
  2.     width:300px;  
  3.     height:20px;  
  4.     text-align:center;  
  5.     background:#BBBBBB;  
  6.     font-family: Arial, Helvetica, sans-serif;  
  7.     font-size: 11px;  
  8.     font-weight: 700;  
  9.     color: #444444;  
  10.     text-decoration: none;  
  11.     cursor: pointer;  
  12.     border: 2px outset #BBBBBB;  
  13. }  
utána a DIV-et csak be kell tenned a <a></a> tagek közé:
  1. <a href="#" title="ebben a div-ben teljes területen a link van">  
  2. <div class="a_div">  
  3. ez az első gomb  
  4. </div>  
  5. </a>  
  6. <br>  
  7. <a href="#">  
  8. <div class="a_div" title="ebben a div-ben teljes területen a link van">  
  9. ez a második gomb  
  10. </div>  
  11. </a>  
3

Ne ajánljunk hülye megoldást!

Jano · 2007. Aug. 3. (P), 13.21
Ez egy nem szabányos kódot eredményező megoldás! Az A elembe nem szabad DIV elemet tenni!
4

de minek is?

ksgy · 2007. Aug. 3. (P), 16.49
...divet beletenni, ha az A, block element, es annak is lehet margint es paddingot adni, onnantol meg ugyanugy mukodik, mint egy div :)
5

OFF: téma cím átírása

vbence · 2007. Aug. 4. (Szo), 14.51
Már majdnem írtam, hogy "Hol itt a kérdés, hiszen a témacímben megadtad a megoldást!", mire rájöttem, biztos utólagos változtatáson esett át. Kicsit zavararó. Nem nagyon, kicsit.
6

SIKER

gtoma · 2007. Aug. 6. (H), 11.22
Sziasztok!

Sajnos a cím tényleg a megoldás. de nekem elsőre nem sikerült. valami elszúrhattam, mert próbáltam, de nem ment. Szerintem a width tulajdonságot hagytam ki belőle.

Olyanná akartam tenni mint egy DIV alapesetben, azaz kitölti a sort magától. Azonban az első megoldás, - azaz a display és width együttes használata - teljesen rendben van. a width helyett mondjuk min-width-et használok, így ha nagyobb a söveg, nincs baj.

Köszönöm nektek a tanácsokat!