Teme: Web razvoj

Klikabilno HTML dugme bez dugmeta (HTML+CSS)

Skraćena veza: http://pedja.supurovic.net/veza/6880

Želite da na strani napravite polja koja liče na dugmad a kada korisnik klikne na polje da se otvori nova strana kao da je kliknut link, ali vam ne uspeva? Samo sadržaj polja je link ali ne i celo polje? Evo kako se to u stvari radi:

HTML kod treba da izgleda ovako:
<div class="dugme">
<a href="http://nekilink.com">
<span class="pravo_dugme">
Neki tekst
</span>
</a>
</div>

<div> sadrži dugme ali nije deo dugmeta. Dugme u stvari čini <span> i sav njegov sadržaj koji se nalaze u okviru <a> linka. Vrlo je važno da se ovde upotrebi <span> jer <div> neće raditi posao.

Međutim ovaj HTML i dalje ne radi kako treba, još uvek je samo tekstualni sadržaj link a ostali (prazan) prostor u dugmetu se ne može klikunuti. Potrebno je i malo CSS-a:

.dugme {
width:100px;
height:100px;
}

.pravo_dugme {
display: inline-block;
width:100%;
height:100%;
}

Tek sada polje celo postaje klikabilno.


Podelite ovaj članak sa prijateljima


2 comments to Klikabilno HTML dugme bez dugmeta (HTML+CSS)

Leave a Reply

 

 

 

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


− 3 = četiri