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:

a.gombom {
    display: block;
    width: 300px;
    height: 60px;
    background: url(images/akarmi.gif) no-repeat;
}
a.gombom:hover {
    background: url(images/akarmi-mouseoveresen.gif) no-repeat;
}
a html:

<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:

.a_div{
	width:300px;
	height:20px;
	text-align:center;
	background:#BBBBBB;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: 700;
	color: #444444;
	text-decoration: none;
	cursor: pointer;
	border: 2px outset #BBBBBB;
}
utána a DIV-et csak be kell tenned a <a></a> tagek közé:

<a href="#" title="ebben a div-ben teljes területen a link van">
<div class="a_div">
ez az első gomb
</div>
</a>
<br>
<a href="#">
<div class="a_div" title="ebben a div-ben teljes területen a link van">
ez a második gomb
</div>
</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!