Sun, 2012-08-26 22:18
Hi all... I'm new to CSS and have a question. How do I ad divider lines between menue bars.
eg. home | about | service | contact
this is my html:
<div id="topnav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About Us</a></li> <li><a href="services.html">Our Services</a></li> <li><a href="publications.html">Our Publications</a></li> <li><a href="careers.html">Careers</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </div>
this is my css
#topnav {background-color:#6B8BB3; clear:both; } #topnav ul {width:100%; float:left; margin: 0px; background-color:#6B8BB3;} #topnav ul li {display:inline;} #topnav ul li a {float:left; padding:10px 20px; font-size:14px} #topnav a:link {color:#ffffff; } #topnav a:visited {color:#ffffff; } #topnav a:active {color:#ffffff; } #topnav a:hover {color:#ffffff;background-color:#033A57; } #topnav a:focus {color:#ffffff; }
your help will be much appreciated.
Thank you.
[Use code tags]
Sun, 2012-08-26 22:29
#1
Hi henweez, You can use
Hi henweez,
You can use border on either the left or right of the LI or A
Mon, 2012-08-27 08:28
#2
Tony wrote: Hi henweez, You
Hi henweez,
You can use border on either the left or right of the LI or A
To further describe Tony,
#topnav ul li {display:inline; margin:10px; border-left: 1px solid #333;}
that should do it.
Regards,
Mihir
Mon, 2012-08-27 14:52
#3
mihirc wrote: Tony wrote: Hi
Hi henweez,
You can use border on either the left or right of the LI or A
To further describe Tony,
#topnav ul li {display:inline; margin:10px; border-left: 1px solid #333;}
that should do it.
Regards,
Mihir
Hi Mihir,
Thank you for this, the lines did appear however not at the right place, below is a printscreen of how it looks... any ideas how this can be fixed?
Many thanks.
Mon, 2012-08-27 19:23
#4
henweez wrote: mihirc
Hi henweez,
You can use border on either the left or right of the LI or A
To further describe Tony,
#topnav ul li {display:inline; margin:10px; border-left: 1px solid #333;}
that should do it.
Regards,
Mihir
Hi Mihir,
Thank you for this, the lines did appear however not at the right place, below is a printscreen of how it looks... any ideas how this can be fixed?
Many thanks.
Hello,
Do you have a live site up? We can take a look at that and suggest the changes.
Regards,
Mihir.
Mon, 2012-08-27 20:28
#5
mihirc wrote:henweez
Hi henweez,
You can use border on either the left or right of the LI or A
To further describe Tony,
#topnav ul li {display:inline; margin:10px; border-left: 1px solid #333;}
that should do it.
Regards,
Mihir
Hi Mihir,
Thank you for this, the lines did appear however not at the right place, below is a printscreen of how it looks... any ideas how this can be fixed?
Many thanks.
Hello,
Do you have a live site up? We can take a look at that and suggest the changes.
Regards,
Mihir.
Hi Mihir,
No I don't have a live site up yet... however I fixed the borders by adding {float:left;} however, the issue now is the last line after the "contact us" menu.. Is there a way I can remove that border only?
Here is a printscreen of how it looks now and the codes I used are pasted below:
CSS Code
#topnav {float: left; background-color:#6B8BB3; clear:both; } #topnav ul {width:100%; float:left; margin: 0px; background-color:#6B8BB3;} #topnav ul li {display:inline;} #topnav ul li a {float:left; padding:10px 20px; font-size:14px} #topnav ul li {float:left; display:inline; margin:0px; border-right: 1px solid #ffffff;} #topnav a:link {color:#ffffff; } #topnav a:visited {color:#ffffff; } #topnav a:active {color:#ffffff; } #topnav a:hover {color:#ffffff;background-color:#034569;} #topnav a:focus {color:#ffffff; }
Html Code
<div id="topnav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About Us</a></li> <li><a href="services.html">Our Services</a></li> <li><a href="publications.html">Our Publications</a></li> <li><a href="careers.html">Careers</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </div>
Kind Regards
Mon, 2012-08-27 20:45
#6
Hello, To solve that problem
Hello,
To solve that problem you can create a small class for your last link. and then style it. for example
html part:
<li> <a class="lastlink">Contact Us</a> </li>
css part:
a.lastlink{border:0px;}
This will override the border-right command and remove the border only for the element which has the lastlink class given to it.
Regards,
Mihir.
Mon, 2012-08-27 21:18
#7
Thank you for this tip... I
Thank you for this tip... I did try it, but it did not work... any other suggestions?
Tue, 2012-08-28 03:55
#8
Try this
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Test</title> <style type="text/css"> #topnav { background-color: #6b8bb3; display: table; /*delete this line if you want full width*/ } #topnav ul { background-color:#6b8bb3; list-style: none; margin: 0px; padding: 0; } #topnav ul li { display: inline-block; border-right: 1px solid #ffffff; } * + html #topnav li { /* for a stupid browser, IE7 */ display: inline; } #topnav ul li::last-child { border-right: none; } #topnav ul li a { display: block; padding: 10px 20px; font-size:14px } #topnav a:link, #topnav a:visited, #topnav a:active { color: white; } #topnav a:focus, /*see note below*/ #topnav a:hover { color: white; background-color: #034569; } </style> </head> <body> <div id="topnav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About Us</a></li> <li><a href="services.html">Our Services</a></li> <li><a href="publications.html">Our Publications</a></li> <li><a href="careers.html">Careers</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </div> </body> </html>
cheers,
gary
Tue, 2012-08-28 23:30
#9
gary.turner wrote: <!DOCTYPE
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Test</title> <style type="text/css"> #topnav { background-color: #6b8bb3; display: table; /*delete this line if you want full width*/ } #topnav ul { background-color:#6b8bb3; list-style: none; margin: 0px; padding: 0; } #topnav ul li { display: inline-block; border-right: 1px solid #ffffff; } * + html #topnav li { /* for a stupid browser, IE7 */ display: inline; } #topnav ul li::last-child { border-right: none; } #topnav ul li a { display: block; padding: 10px 20px; font-size:14px } #topnav a:link, #topnav a:visited, #topnav a:active { color: white; } #topnav a:focus, /*see note below*/ #topnav a:hover { color: white; background-color: #034569; } </style> </head> <body> <div id="topnav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About Us</a></li> <li><a href="services.html">Our Services</a></li> <li><a href="publications.html">Our Publications</a></li> <li><a href="careers.html">Careers</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </div> </body> </html>
cheers,
gary
Gary,
Thank you for this, It worked on a new html file... However when I paste the code to my existing html, it won't over-ride what I already have, so the line on the right side remained and did not get deleted.
I will play around with it until I figure it out, but any further tips would be much appreciated.
Thank you
Wed, 2012-08-29 05:27
#10
When a rule is being ignored,
When a rule is being ignored, and you know it is valid, assume there is another selector that applies to the element and has more weight, or specificity. If weights are the same, then the ruling property follows the one being quashed.
In Firefox, open firebug and select the last list item. You will see the rule-set that is overriding the one you want.
cheers,
gary