Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts

    Color box around NAV Links/bar

    What is the CSS to get a color background/box behind my navigation links:
    http://jeffreydowellphotography.com

    Im not able to get it to show up no matter what I do.

    I would like to add a 50% transparent color of #B7C3E6, that doesn't change when you hover over it.
    And how do I add the "|" vertical lines as a divider between me Nav links.

  • #2
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    To get your transparent background, you can do something like this this:

    Code:
    #nav li a{
    	background-color:rgba(183,195,230,0.5);
    }
    To add a vertical divider, you can do something as simple as adding a border to the right of each navigation link.
    My signature :)

  • Users who have thanked ttkim for this post:

    jddowell (07-22-2013)

  • #3
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts
    thank you for the help. I got the divider line in there, but it looks jagged at the top, and I am unable to get it vertically centered with the text. I just want it the same height of the text. I tried using positioning css stuff, but it never moved.

    Here is the code:
    #nav a{ border-right:2px solid #b7c3e6; height: 15px;}

    Thank you

  • #4
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    It's because of your padding, add

    line-height:100%; to your .logo-image #topNav nav li a rule.

    HTH
    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • Users who have thanked whizard for this post:

    jddowell (07-22-2013)

  • #5
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts
    awesome, thank you.

    Now can i make it not show up on the right side of the word "About."

    And how can i get the right side of the word "About" to line up with the right side of the home page image? Its slightly pushed to the left.

  • #6
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    You can set it so the last one has no right border.

    Code:
    #nav li:last-child a{
    	border-right:0;
    }
    As for the way it's positioned, I see this in your code:

    Code:
    .header-alignment-left.header-navigation-split #topNav {
    position: absolute;
    right: 45px;
    }
    You might want to fiddle with the 45px value.
    My signature :)

  • Users who have thanked ttkim for this post:

    jddowell (07-22-2013)

  • #7
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts
    you guys are impressive. thank you.

  • #8
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts
    I cant seam to fix my feedburner section. the submit button is centered, and the box is stretched out to the far right of the page. I would like to make this text bold weighted too.

    http://jeffreydowellphotography.com/about/


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •