WordPress.org

Ready to get started?Download WordPress

Forums

Willing to give $5 PayPal to whoever can fix this problem for me!!! Thank you! (9 posts)

  1. eliteuser
    Member
    Posted 5 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. Basically, the spacing should 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.

    NOTE: WHEN I CLICK ON 'ABOUT' OR 'CONTACT' NOTICE HOW THE 'HOME' TAB LENGTHENS, GOES LONGER, IT IS NOT SUPPOSED TO DO THAT. It should stay the SAME length.

    If you manage to get it right, send me your PayPal ID and I will deposit $5 in your account as a small reward, since I have been stuck on this for over a week! Thank you SO much!!! :P

    Here is my code:

    /* navigation bar */
    
    #navigation {
            width: 819px;
            height: 34px;
            float: left;
            position: relative;
            top: 0px;
            left: 0px;
            }
    
    #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 10px 3px;
            background-image: url(http://thanksgoogle.com/wordpress/images/navline.jpg);
            background-position: right center;
            background-repeat: no-repeat;
            line-height: 39px;
            }
    
    #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 10px 3px;
            }
    
    #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, #navigation_center ul li a.current_page_item {
            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. rolanddeschain
    Member
    Posted 5 years ago #

    Easy one :) Frustrating though I know, it's great to have a fresh pair of eyes looking at the problem.

    By changing the padding inside

    #navigation_center ul li a {

    Change it to something like this:

    padding:0 35px 3px;

    Looks more like what you're after. :) As for the paypal (my username is ebay@chrisgray.me) we'll be even if you can solve my css problem!

    http://wordpress.org/support/topic/284686?replies=1

  3. eliteuser
    Member
    Posted 5 years ago #

    Hello,

    Thanks for replying. I will try it out, and reply shortly with the outcome. I will reply here again saying if it works. Do you know how to also make the white navigation tab appear when I click on the 'about' and 'contact' links?

    Thx!!

  4. rolanddeschain
    Member
    Posted 5 years ago #

    That's a tad more complicated, you'll have to get it to use these for the selected page:

    #navigation_center ul li a.active, #navigation_center ul li a.current_page_item {
    #navigation_center ul li a.active span {

    If I wasn't trying to get this project up and running I'd give you more of a hand. :)

  5. eliteuser
    Member
    Posted 5 years ago #

    Hey,

    Thanks for your reply, um...I don't quite understand really. Would u have time to use the code I provided and replace/add your code to it?

    Does anyone know how to also make the white navigation tab appear when I click on the 'about' and 'contact' links? Thx!!!

  6. eliteuser
    Member
    Posted 5 years ago #

    Hey rolanddeschain,

    I tried what you said before with the padding:0 35px 3px, but look at the site now LOL: http://sitedemonstration.hostei.com/

    Hover on the navigation bar lol. The padding goes smaller when hovering on the 'about' or 'contact' pages. But click on either 'about' or 'contact' see that the spacing is HUGE lol.

    Also Any other ideas?

  7. rolanddeschain
    Member
    Posted 5 years ago #

    Hehe now it dances :)

    It's a similar fix, if you change the padding on the hover css it'll act the same as the new code. If it looks huge just reduce the number. :)

  8. eliteuser
    Member
    Posted 5 years ago #

    Hey again,

    Yea I know, I done that before, but their was one problem. The 'HOME' button goes longer again when you click on either the 'contact' or 'about page. Look at the site now, I have just updated it!

    You will see what I mean. Just click on either the 'contact' or 'about' page and then look how long the 'HOME' tab is.

  9. eliteuser
    Member
    Posted 5 years ago #

    Hey everyone,

    Can anyone help me out? The 'HOME' button goes longer again when you click on either the 'contact' or 'about page. Look at the site now and see for yourself.

    You will see what I mean. Just click on either the 'contact' or 'about' page and then look how long the 'HOME' tab is.

    Please I REALLY need some help on this, $5 via PayPal as a small reward. Thx!!!!!

Topic Closed

This topic has been closed to new replies.

About this Topic