WN - v aligna bilden med texten?

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - v aligna bilden med texten? (https://www.wn.se/forum/showthread.php?t=35310)

Chidori

2009-02-22 19:38

Här är kodstycket. Ni ser felet i bilden. Problemet är att nederkanten hamnar i samma höjd som nederkanten på texten, på så sätt trycker ner texten för att kunna få plats i utrymmet. Hur kan jag göra så att mitten på bilden hamnar i mitten av textsträngen? (pil bilden).

Kod:

<div id="topTag"><a href="#">Products</a> <img src="images/folderarrow.jpg" /> <a href="home.html">Product 2</a> <img src="images/folderarrow.jpg" /> Main Description</div>



#topTag {

padding:0px 0px 0px 9px; 

line-height:25px;

text-align:left;

width:770px;

}

http://img515.imageshack.us/img515/4128/bild.jpg

KarlRoos

2009-02-22 20:06

Kod:

<ul id="topTag">

<li><a href="#">Products</a></li>

<li><a href="#">Product 2</a></li>

<li>Main Description</li>

</ul>

Kod:

#topTag li

{

display: inline;

}



#topTag li a

{

padding: 5px;

display: block;

background: url(images/folderarrow.jpg) center right no-repeat;

}

;)

Chidori

2009-02-23 00:28

Nepp, inte det. Den bryter raden för varje "block". Testar jag ta bort block så kommer inte bakgrunden dit men allt annat ser okej ut.

Cosma

2009-02-23 10:29

Har du nån Float element innan dess. Kanske måste bryta floaten med <div class="clear"></div> eller lägga till float.

KarlRoos

2009-02-23 18:04

http://karlroos.se/blandat/valign/

Hoppas det funkar för dig!

Chidori

2009-02-24 16:28

Hej och tack, men...

.clear
{clear: both;}

Ser inte att du sätter in detta någonstans?

Ska testa koden nu.

Chidori

2009-02-24 17:33

Nä nu får det vara nog, löste det med floats och divs.

Cosma

2009-02-24 18:02

Hur löste du det? Var det med float och göra?

Jag tänkte mer att du skulle..

Kod:

<ul id="topTag">

<li><a href="#">Products</a></li>

<li><a href="#">Product 2</a></li>

<li>Main Description</li>

</ul>



<div class="clear"></div>

Chidori

2009-02-24 20:18

Kod:

<div id="topTag">

<div id="folderbar"><a href="#">Category 1</a></div>

<div id="folderbar"><a href="#">Sub Category 2</a></div>

Flexible LED strip

</div>



#topTag {

        padding:0px 0px 0px 9px;

        line-height:25px;

        text-align:left;

        width:770px;

}

#folderbar {

        background-image:url(../images/folderarrow.jpg); 

        line-height:25px; 

        background-position:right; 

        background-repeat:no-repeat; 

        float:left; 

        padding-right:15px; 

        margin-right:5px;

}

Alla tider är GMT +2. Klockan är nu 07:07.