Теме: Web развој

Кликабилно ХТМЛ дугме без дугмета (HTML+CSS)

Скраћена веза: http://pedja.supurovic.net/veza/6880

Желите да на страни направите поља која личе на дугмад а када корисник кликне на поље да се отвори нова страна као да је кликнут линк, али вам не успева? Само садржај поља је линк али не и цело поље? Ево како се то у ствари ради:

ХТМЛ код треба да изгледа овако:
<div class="dugme">
<a href="http://nekilink.com">
<span class="pravo_dugme">
Неки текст
</span>
</a>
</div>

<div> садржи дугме али није део дугмета. Дугме у ствари чини <span> и сав његов садржај који се налазе у оквиру <а> линка. Врло је важно да се овде употреби <span> јер <div> неће радити посао.

Међутим овај ХТМЛ и даље не ради како треба, још увек је само текстуални садржај линк а остали (празан) простор у дугмету се не може кликунути. Потребно је и мало ЦСС-а:

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

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

Тек сада поље цело постаје кликабилно.


Поделите овај чланак са пријатељима


2 comments to Кликабилно ХТМЛ дугме без дугмета (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=""> <s> <strike> <strong>

Попуните израз тако да буде тачан: *