ugrás a tartalomhoz

div valid linkelés

xeras · 2007. Nov. 15. (Cs), 20.19
sziasztok,

csináltam egy buttont (div-vel),
közepére van igazítva a szöveg,
és szeretném az egész divet linkelni.

1. próba:
<a href="link"><div id="button">szöveg</div></a>
ez jó, működik, de nem valid,
és ha ezt kijavítanám, akkor az egész oldal valid lenne.

2. megoldás:
<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
ezt nem próbáltam ki, valószínű jó, viszont ezzel meg az a bajom hogy JS

mennyi bajom van igaz? :)
hogy lehetne js nélkül VALIDul megírni ezt?

köszönöm
‹ Minimo - "standard layout" mód XML-ben tárolt HTML tartalomhoz keret XSLT-vel ›
 ■
1

js forrás

xeras · 2007. Nov. 15. (Cs), 20.20
ezt lefelejtettem:
http://www.almosteffortless.com/2006/05/25/make-a-div-into-a-link/

innen van a js-es kód
2

Minek a div?

csla · 2007. Nov. 15. (Cs), 20.25
Ha az <A>-t formázod meg, az nem jó?
3

div maga a button

xeras · 2007. Nov. 15. (Cs), 20.35
ne haragudj, félreérthetően írtam le, tehát:

-van maga a gomb (ez a button div)
-ezen belül középen a szöveg

és azt szeretném, hogy ha a button fölé viszem az egeret
(és nem feltétlenül a szövegre, hanem mellé, de a buttonon belül) akkor is 'érzékelje' a linket
(jöjjön ki a kéz)

remélem így szemléltetőbb volt
5

Ha button

zila · 2007. Nov. 15. (Cs), 21.31
akkor miért nem <button> tag-et használsz? kb. ugyanúgy formázhatod mint a div-et, cserébe nem csak valid leszel, de szemantikailag is jól használod az elemeket...
7

nyíl vs kéz

xeras · 2007. Nov. 15. (Cs), 22.41
mert akkor nem kéz jön ki ha rámegyek, hanem nyíl,
és nekem a kéz kell :) (megvan az oka amúgy, de hosszú)
8

css cursor

zila · 2007. Nov. 16. (P), 00.17
Css-sel a kurzor megjelenését is tudod szabályozni.
6

Megoldas?

zmb · 2007. Nov. 15. (Cs), 21.37
Lehet, h felre ertelek, de egy sima a taggel ez tokeletesen kivitelezheto:

<html>
	<style type="text/css">
		body {
			padding: 100px;
		}
		a {
			display: block;
			background-color: gray;
			width: 100px;
			height: 100px;
			line-height: 100px;
			vertical-align: middle;
			text-align: center;
			color: white;
			font-family: sans-serif;
			
		}
	</style>
<body>
	<a href="#">alma</a>
</body>
</html>
4

példa

xeras · 2007. Nov. 15. (Cs), 21.28
sikerült találni egy példát:
http://origo.hu/auto/index.html

ott középen 4 autó egymás mellett, így kezdődik az 1. alatt a szöveg:
"Technikás aszfaltos pályák várják a Rali-vb mezőnyét Írországban"

innentől pedig már csak kézügyesség dolga kimásolni...