PDA

View Full Version : my links text to be positioned on bottom?



jarv
Dec 23rd, 2008, 03:39 PM
hi, on my site: here (http://www.animalwelfareplatform.eu/home.asp)

the links on the left are all vertically aligned to the top by default, any way of moving them down so they sit next to the icon on the left?

BoldUlysses
Dec 23rd, 2008, 05:24 PM
Hi jarv. You have a lot of redundant or vestigial code. Try this.

CSS:


/*/// navigation ///*/
.bicons { position:relative; background-position: 0% 50%; height:36px; border-top:#999 1px dotted; width:158px; padding-left:30px; background-repeat:no-repeat; }
.subicons { background-position: 5% 50%; height:20px; width:170px; padding:5px 0px 0px 35px; background-repeat:no-repeat; }
#subicon1 { background-image:url(images/arrow.png);}

#icon1 { background-image:url(images/icon-orange-1.png);}

#icon2 { background-image:url(images/icon-orange-2.png);}

#icon3 { background-image:url(images/icon-orange-3.png);}

#icon4 { background-image:url(images/icon-orange-4.png);}


.icons a{ height:30px; width:170px; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; color:#98bf0d;}

#bicon1 { background-image:url(images/icon-blue-1.png);}

#bicon2 { background-image:url(images/icon-blue-2.png);}

#bicon3 { background-image:url(images/icon-blue-3.png);}

#bicon4 { background-image:url(images/icon-blue-4.png);}

#bicon5 { background-image:url(images/icon-blue-5.png);}

#bicon6 { background-image:url(images/icon-orange-login.png);}

.bicons a{ position:absolute; bottom:5px; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; color:#98bf0d;}
.subicons a{ height:20px; width:170px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#98bf0d; text-decoration:none;}

.icons a:hover{ background-color:#EFEFEF;}
.bicons a:hover{ background-color:#EFEFEF;}
.subicons a:hover{ text-decoration:underline;}

HTML:


<div id="leftcolumn">
<ul>
<li id="bicon1" class="bicons"><a href="#">About EAWP</a></li>
<li id="bicon2" class="bicons"><a href="#">Project Overview</a></li>
<li id="bicon3" class="bicons"><a href="#">Best Practice</a></li>
<li id="bicon4" class="bicons"><a href="#">News</a></li>
<li id="bicon5" class="bicons"><a href="#">Links</a></li>
<li id="bicon6" class="bicons"><a href="boards/login_user.asp">Members Section</a></li>
</ul>
</div>

Adjust the value for bottom:5px to space the text more or less off the bottom.

abduraooft
Dec 24th, 2008, 11:29 AM
Have a try by

.bicons a {/*test.css (line 147)*/
color:#98BF0D;
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
font-weight:bold;
height:30px;
line-height:36px;/*value equals to the height of li */
width:170px;
}