PDA

View Full Version : want to use border-left but not working



Genie1
Jan 21st, 2009, 12:08 AM
Hi Team,

Currently this is how it looks

http://img158.imageshack.us/img158/3880/linkscc9.gif

As you can see the second link is not the same space (it is but not look wise) of where i have a | .

my CSS code.



body {
text-align: center;
margin:0 auto;
}
#container{
width: 900px ;
margin-left: auto ;
margin-right: auto ;

}
#logolink{
width:165px;
height:219px;
background-image:url(./images/logolink.jpg);
float:left;
}

#fulllogo{
width:735px;
height:219px;
background-image:url(./images/fulllogo.jpg);
float:left;

}

#links{
width:900px;
height:53px;
background-image:url(./images/bglink.jpg);
float:left;
}

ul{
text-align: center;
margin:0 auto;

}

li{
color:#FFFFFF;
font-weight:bold;
font-size:20px;
font-family:Tahoma;
line-height:14pt;
list-style-type:none;
margin:17px 0px 0px 0px;
text-align:center;
width:100px;
float:left;
border-right:solid 1px #FFFFFF;
}

li a{
color:#FFFFFF;
display:block;
text-decoration:none;
}

li:hover{
background-color:#9CBDDE;
}

li:hover a{
background-color:#9CBDDE;
}


I want this to be aligned correctly |, for example

Home | About us | Contact us | Extra | Extra

Thank you

_Aerospace_Eng_
Jan 21st, 2009, 12:20 AM
li{
color:#FFFFFF;
font-weight:bold;
font-size:20px;
font-family:Tahoma;
line-height:14pt;
list-style-type:none;
margin:17px 0px 0px 0px;
text-align:center;
float:left;
border-right:solid 1px #FFFFFF;
}
li.last {
border-right:0;
}
li a{
color:#FFFFFF;
display:block;
text-decoration:none;
}

li a:hover{
background-color:#9CBDDE;
}
Then add class="last" to the last li in your html for you menu.

Genie1
Jan 21st, 2009, 11:03 PM
Hi,

Thanks for reply, got what you did, and it works just slightly changed it, but got the idea.

Only problem is i am not able to align the text(button) to center.

Thank you again

body {
text-align: center;
margin:0 auto;
}
#container{
width: 900px ;
margin-left: auto ;
margin-right: auto ;

}
#logolink{
width:165px;
height:219px;
background-image:url(./images/logolink.jpg);
float:left;
}

#fulllogo{
width:735px;
height:219px;
background-image:url(./images/fulllogo.jpg);
float:left;

}

#links{
width:900px;
height:53px;
background-image:url(./images/bglink.jpg);
float:left;
text-align:center;
}

ul{
text-align: center;
margin:0 auto;

}

li{
color:#FFFFFF;
font-weight:bold;
font-size:20px;
font-family:Tahoma;
line-height:14pt;
list-style-type:none;
margin:16px 0px 0px 0px;
text-align:center;
float:left;
border-right:solid 1px #FFFFFF;
padding-right:10px;
padding-left:10px;
}
li.last {
border-right:0;
}

li a{
color:#FFFFFF;
display:block;
text-decoration:none;
}

li a:hover{
background-color:#9CBDDE;
}

_Aerospace_Eng_
Jan 22nd, 2009, 08:07 AM
Using float left its not going to be easy without setting a width to the li elements. Please post a link to your page.

Genie1
Jan 22nd, 2009, 11:51 PM
Hi My html code is





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>pic</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="container">
<div id="logolink">

</div><!--endlogolink-->

<div id="fulllogo">

</div><!--endfulllogo-->
<div id="links">
<ul>
<li>Homepage</li>
<li>About Us</li>
<li>Gallery</li>

<li class="last">Contact Us</li>
</ul>
</div><!--endlinks-->
<div id="content">
<center><img src="./images/pic.jpg" title="pic" alt="pic" id="pic" /></center><br />
<div id="gallery">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare. Duis id nisl. Curabitur eget enim sed sem fermentum congue. Maecenas sollicitudin tincidunt lacus. Pellentesque dui diam, aliquam id, posuere ac, ullamcorper vitae, arcu. Donec laoreet. Aenean lacinia tortor non mauris. Ut fringilla, mauris quis bibendum venenatis, leo diam pharetra metus, eu rhoncus justo dui quis velit. In sodales, velit a lobortis condimentum, purus ligula vehicula quam, sed lobortis mauris odio pharetra odio. Nunc turpis. Ut vehicula, ipsum eu aliquet porta, justo nisl varius felis, eu cursus urna nisi convallis lectus. Nullam ultricies, nulla at dignissim tempor, mi metus viverra sapien, ut volutpat odio neque ac lectus. Nulla varius arcu sed erat. Vivamus placerat dictum justo. Sed vel augue quis enim condimentum malesuada.<br />
</div><!--endgallery-->

</div><!--endcontent-->
</div><!--endcontainer-->
</body>
</html>



Iv been playing around but cant seem to get it working but thanks for helping out