10 replies [Last post]
henweez
henweez's picture
Offline
newbie
Last seen: 10 years 12 weeks ago
Timezone: GMT+3
Joined: 2012-08-26
Posts: 6
Points: 8

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]

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 6 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi henweez, You can use

Hi henweez,
You can use border on either the left or right of the LI or A

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 8 years 16 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Tony wrote: Hi henweez, You

Tony wrote:

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

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

henweez
henweez's picture
Offline
newbie
Last seen: 10 years 12 weeks ago
Timezone: GMT+3
Joined: 2012-08-26
Posts: 6
Points: 8

mihirc wrote: Tony wrote: Hi

mihirc wrote:
Tony wrote:

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.navigation bar.jpg

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 8 years 16 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

henweez wrote: mihirc

henweez wrote:
mihirc wrote:
Tony wrote:

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.navigation bar.jpg

Hello,

Do you have a live site up? We can take a look at that and suggest the changes.

Regards,
Mihir.

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

henweez
henweez's picture
Offline
newbie
Last seen: 10 years 12 weeks ago
Timezone: GMT+3
Joined: 2012-08-26
Posts: 6
Points: 8

mihirc wrote:henweez

mihirc wrote:
henweez wrote:
mihirc wrote:
Tony wrote:

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.navigation bar.jpg

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:

navigation bar_edit.jpg

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

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 8 years 16 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

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.

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

henweez
henweez's picture
Offline
newbie
Last seen: 10 years 12 weeks ago
Timezone: GMT+3
Joined: 2012-08-26
Posts: 6
Points: 8

Thank you for this tip... I

Thank you for this tip... I did try it, but it did not work... any other suggestions?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 38 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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>
Notice that :hover and :focus have the same rules.That's so visitors who navigate via the keyboard have the same visual cues as those using a mouse or other pointer. This is a serious accessibility issue and should never be ignored.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

henweez
henweez's picture
Offline
newbie
Last seen: 10 years 12 weeks ago
Timezone: GMT+3
Joined: 2012-08-26
Posts: 6
Points: 8

gary.turner wrote: <!DOCTYPE

gary.turner wrote:

<!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>
Notice that :hover and :focus have the same rules.That's so visitors who navigate via the keyboard have the same visual cues as those using a mouse or other pointer. This is a serious accessibility issue and should never be ignored.

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 38 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.