webForumDet fria alternativet

Problem med vertical-align

6 svar · 608 visningar · startad av saw

sawMedlem sedan mars 20011 880 inlägg
#1

Så här ser det ut:
Jag har först en liten bild(med en pil på) därefter kommer en länk (detta
upprepar sig sju ggr).
Problemet är att jag inte kan få länken i gämnhöjd med pilen.

<div style=" margin-top:0; text-align:left; font-size:12px; font-weight:bold;
 vertical-align: top;" ><img src="bilder/pilen.gif" alt="" /><a href="index.aspx?
index=1">Hemservice</a></div>

Se bifogad bild.
Tacksam för hjälp.

pilar.GIF
MickeA.comMedlem sedan feb. 20034 441 inlägg
#2

Det är alltid lite meck med att få till det där.
I ditt fall har jag använt en ul / li lista för menyn:

<ul>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
</ul>

Och sen använt list-style-item eller list-style-image för att få med pilen.
Mer info finns här: http://www.devguru.com/Technologies/css/quickref/css_liststyleimage.html

sawMedlem sedan mars 20011 880 inlägg
#3

Tack för svar det är ju en bit på vägen men jag kan inte ladda bilden ifrån css

ul.out { list-style-position: outside; 
	list-style-image: url("bilder/pilen.gif"); }

Det brukar alltid tetas för mig det...

Danne VMedlem sedan aug. 20068 090 inlägg
#4

Du ska nog inte ha URL:en inom citationstecken tror jag. Men du kan lika gärna prova sätta in bilden i a-taggen, t.ex.:

a {
padding-left:15px;
background: url (bilder/pilen.gif) left middle;}
a:hover {
background: url(bilder/pilen2.gif) left middle;}

typ....

"left" är bildens horisontella placering, "middle" är dess vertikala placering (du kan testa top och bottom också).

sawMedlem sedan mars 20011 880 inlägg
#5

Nej jag får ingen bild med mig, annars så ser det ju snyggt ut.

TroxyMedlem sedan mars 20041 505 inlägg
#6

Det är vanligt att man missförstår egenskapen "vertical-align".
Någon annan sitter säkert på en bra förklaring för hur det fungerar, men här är en snabblänk jag hittade:
http://phrogz.net/CSS/vertical-align/index.html

Du kan använda din ursprungliga kod men behöver bara ändra en detalj:

<div style=" margin-top:0; text-align:left; font-size:12px; font-weight:bold;" ><img src="bilder/pilen.gif" alt="" style="vertical-align: middle;" /><a href="index.aspx?
index=1">Hemservice</a></div>
sawMedlem sedan mars 20011 880 inlägg
#7

Detta tackar jag för, det blev kanonbra.

126 ms totalt · 3 externa anrop · v20260731065814-full.3ab8d573
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
124 ms — hämta tråd, inlägg och bilagor (db)