WordPress.org

1. eliteuser
   Member
   Posted 2 years ago #

   Hey everyone,

   I have a navigation bar on my website: http://sitedemonstration.hostei.com/

   On the navigation bar as you can see, I just need to have more spacing between the lines for the 'about' and 'contact' pages. I want the spacing to look like this: http://i44.tinypic.com/2w4jud1.png

   Also, when I click on 'about' and 'contact' it should have the white tab on it like when you click on 'home' but they don't. I need to know how to make 'about' and 'contact' have the white tab over them when I click on them. Thank you SO much!!! :P

   Here is my code:

   /* navigation bar */
   
   #navigation {
           width: 819px;
           height: 34px;
           float: left;
           position: relative;
           top: 50px;
           left: 20px;
           }
   
   #navigation_left {
           width: 11px;
           height: 34px;
           float: left;
           padding: 6px 0 0 11px;
           text-align: right;
           }
   #navigation_center {
           width: 654px;
           height: 34px;
           float: left;
           background-position: bottom left;
           background-image: url(http://thanksgoogle.com/wordpress/images/nav-rept.jpg);
           background-repeat: repeat-x;
           padding: 0;
           }
   
   #navigation_center ul {
           list-style: none;
           margin: 0px;
           padding: 0px;
           }
   
   #navigation_center ul li {
           float: left;
           line-height: 34px;
           }
   
   #navigation_center ul li a {
           display: block;
           font-family: Arial, Helvetica, sans-serif;
           font-size: 13px;
           color: #FFFFFF;
           text-decoration: none;
           font-weight: bold;
           padding: 0px 0 3px 10px;
           background-image: url(http://thanksgoogle.com/wordpress/images/navline.jpg);
           background-position: right center;
           background-repeat: no-repeat;
           line-height: 39px;
           margin-right: -4px;
           }
   
   #navigation_center ul li a span {
           color: #FFFFFF;
           display: block;
           padding: 0px 18px 0 8px;
           }
   
   #navigation_center ul li a:hover {
           font-family: Arial, Helvetica, sans-serif;
           font-size: 13px;
           color: #ffffff;
           text-decoration: none;
           font-weight: bold;
           display: block;
           padding: 0 0 3px 10px;
           }
   
   #navigation_center ul li a:hover span {
           color: #ffffff;
           display: block;
           padding: 0px 18px 0 8px;
           font-family: Arial, Helvetica, sans-serif;
           font-size: 13px;
           text-decoration: none;
           font-weight: bold;
           }
   
   #navigation_center ul li a.active {
           font-family: Arial, Helvetica, sans-serif;
           font-size: 13px;
           color: #000000;
           text-decoration: none;
           font-weight: bold;
           background-image: url(http://thanksgoogle.com/wordpress/images/leftnav.png);
           background-repeat: no-repeat;
           background-position: left top;
           display: block;
           padding: 0px 0px 0 10px;
           }
   
   #navigation_center ul li a.active span {
           color: #000000;
           background-image: url(http://thanksgoogle.com/wordpress/images/rightnav.png);
           background-repeat: no-repeat;
           background-position: right top;
           display: block;
           padding: 0px 18px 0 8px;
           font-family: Arial, Helvetica, sans-serif;
           font-size: 13px;
           color: #000000;
           text-decoration: none;
           font-weight: bold;
           }
   
   #navigation_right {
           width: 141px;
           height: 28px;
           float: left;
           padding: 6px 0 0 0;
           }

2. Christian Schenk
   Member
   Posted 2 years ago #

   Have a look at the margin/padding of the selector "#navigation_center ul li a" - removing the line with "margin-right" and setting the padding to "0 10px 3px" looks much better. Repeat this for the corresponding stanza with a:hover.

   Once you've clicked on, say, "About" the li element contains a CSS class current_page_item. Adding ", #navigation_center ul li a.current_page_item" after "#navigation_center ul li a.active" should help you here.

   BTW: No need to spam the forum.

3. eliteuser
   Member
   Posted 2 years ago #

   Hey,

   Thanks for the reply! I will try it out and see if it works!

   PS: Sorry for posting twice, (spamming) but I have been stuck on this for a number of days!

   Thank you!!!! :P

4. eliteuser
   Member
   Posted 2 years ago #

   Sorry for double posting...but I couldn't really understand what you meant by the '0 10px 3px' since their are 4 characters eg. 0px 0px 0px 0px.

   Um...sorry for wasting your time but would you be able to copy the code I pasted above, then add in what you just told me? So then I could just copy and paste it in, to make it easier.

   Thx!

5. Christian Schenk
   Member
   Posted 2 years ago #

   since their are 4 characters

   You can have one value (all the same), two values (first value: top, bottom; second value: right, left), three values (first value: top; second one: right, left; third: bottom) and, yes, up to four values (top, right, bottom, left) after margin/padding. So you can either write "0px 10px 3px" or "0px 10px 3px 10px" which is the same.

   Anyway, here (diff only) you go.

Topic Closed

This topic has been closed to new replies.