webForumDet fria alternativet

Göra text-länk till en större knapp

HTML & CSS

9 svar · 829 visningar · startad av EmmaW

Medlem sedan apr. 2008152 inlägg
Frågan#1

Hej :)

Jag har text länkar i en meny. Men jag tycker det blir för litet ställe att klicka på om man måste träffa exakt rätt på texten.

Jag har sett många sidor som har text länkar men det räcker med att man klicka nära texten så funkar det.

Hur går det här att fixa på bästa sätt? Går det t ex att fixa så man kan klicka var som helst på själva "raden" eller liknande?

Medlem sedan aug. 20002 272 inlägg
#2

EmmaW skrev:

Hej :)

Jag har text länkar i en meny. Men jag tycker det blir för litet ställe att klicka på om man måste träffa exakt rätt på texten.

Jag har sett många sidor som har text länkar men det räcker med att man klicka nära texten så funkar det.

Hur går det här att fixa på bästa sätt? Går det t ex att fixa så man kan klicka var som helst på själva "raden" eller liknande?

Med CSS:

<style type="text/css">
#container a {
     padding:10px;
}
</style>

<div id="container">
     <a href="#">Testlänk</a>
</div>
Medlem sedan aug. 20068 090 inlägg
#3

JAreMANNEN skrev:

Med CSS:

<style type="text/css">
#container a {
     padding:10px;
}
</style>

<div id="container">
     <a href="#">Testlänk</a>
</div>

Njae.... man ska nog lägga till display:block för att det ska funka till 100%:

#container a {
padding:10px;
display:block;
}

...sen kan man laborera med olika paddings.

Medlem sedan apr. 2008152 inlägg
#4

Jo utan "display:block;" blev det lite problem.

Men nu funkar allt fint, tack för hjälpen! :)

Medlem sedan maj 20007 492 inlägg
#5

Danne V skrev:

Njae.... man ska nog lägga till display:block för att det ska funka till 100%:

Med display:block så gör du om ditt inline-element (länken) till ett blockat element, vilket kommer göra att länken kommer uppta så mycket horisontellt utrymme som föräldern tillåter. Display:block behövs inte för att lägga till padding på något element. Är det margin du tänker på Danne V?

Medlem sedan apr. 2008152 inlägg
#6

Oj, vänta nu, det här verkar inte alls funka när jag testar i firefox (funkar fint i internet explorer bara). Vad kan det bero på :q

Medlem sedan aug. 20068 090 inlägg
#7

EmmaW skrev:

Oj, vänta nu, det här verkar inte alls funka när jag testar i firefox (funkar fint i internet explorer bara). Vad kan det bero på :q

Du måste nog visa ALL kod (och CSS) eftersom det är troligt att det är något vi inte känner till som orsakar problemen.

(Gärna ladda upp ALLT och ge oss en länk....)

Medlem sedan aug. 20068 090 inlägg
#8

Okkido skrev:

Med display:block så gör du om ditt inline-element (länken) till ett blockat element, vilket kommer göra att länken kommer uppta så mycket horisontellt utrymme som föräldern tillåter. Display:block behövs inte för att lägga till padding på något element. Är det margin du tänker på Danne V?

Nej, inte direkt. Men jag antog, kanske felaktigt, att man oftast vill ha en knappliknande länk i t.ex. menyer eller andra ställen där man har en förälder. Och då kan man ju lägga till paddings (och marginaler) som man vill. Huvudsaken är ju att display:block finns där.
Men jag kanske tog saker och ting för givet. Om Emma visar all kod så blir det nog lättare.....

Medlem sedan apr. 2008152 inlägg
#9

Först fick jag tre helt olika resultat i IE, Firefox och Opera. Jag fick ta bort "display:block;" och trixa massor, vet inte riktigt allt jag gjorde.. Men tillslut så verkar det som jag fått allt att funka i alla fall :)

Dock så tycker jag alltid det är hemskt jobbigt med alla dessa skillnader i olika webläsare, det borde förbjudas :(

Medlem sedan okt. 20005 273 inlägg
#10

Stora skillnader kan bero på quirksmode, vad använder du för DOCTYPE?

mv icaaq

281 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
138 ms — deklarationer (db)
0 ms — hämta statistik (cache)
140 ms — hämta tråd, inlägg och bilagor (db)
136 ms — ändringar (db)