Gradient .png nav bar css?

Discussion in 'Web Design and Development' started by Rob587, Nov 8, 2009.

  1. Rob587 macrumors 6502a

    Rob587

    Joined:
    Jul 4, 2004
    Location:
    Orlando, FL
    #1
    For some reason I cannot figure out for the life of me how to get my gradient .png image to fit the nav bar of golfsolid.com correctly. It just fits part of it.

    The image is nav_background.png and I put it in #navbar. Can someone please tell me what im doing wrong? Thanks.

    Code:
    /* 
    	Theme Name: Revolution Code Blue
    	Theme URL: http://www.revolutiontwo.com/themes/code-blue
    	Description: Code Blue is a 3-column Widget-ready theme created for WordPress.
    	Author: Brian Gardner
    	Author URI: http://www.briangardner.com
    	Version: 2.0
    	Tags: three columns, fixed width, white, blue, sidebar widgets
    	
    	The CSS, XHTML and design is released under GPL:
    	http://www.opensource.org/licenses/gpl-license.php
    	
    	Changelog:
    		v2.0 - 11.01.08
    		First Release of Revolution Code Blue
    */
    
    body {
    	background: #1A4E88 url(images/bg.gif) repeat-x;
    	color: #202020;
    	font-size: 12px;
    	font-family: Arial, Tahoma, Verdana;
    	margin: 0px auto 0px;
    	padding: 0px;
    	}
    	
    #wrap {
    	background: #e6e5e9;
    	margin: 0px auto 0px;
    	padding: 0px;
    	}
    	
    /************************************************
    *	Hyperlinks									*
    ************************************************/
    
    a, a:visited {
    	color: #2255AA;
    	text-decoration: none;
    	}
    	
    a:hover {
    	color: #7DAE12;
    	text-decoration: underline;
    	}
    	
    a img {
    	border: none;
    	}
    	
    /************************************************
    *	Header  									*
    ************************************************/
    
    #header {
    	width: 960px;
    	height: 150px;
    	color: #FFFFFF;
    	font-size: 16px;
    	font-weight: normal;
    	margin: 0px auto 0px;
    	padding: 0px;
    	overflow: hidden;
    	}
    	
    #header p {
    	padding: 0px 0px 5px 0px;
    	margin: 0px;
    	line-height: 20px;
    	}
    	
    #header h1 {
    	color: #FFFFFF;
    	font-size: 36px;
    	font-family: Times New Roman, Georgia, Trebuchet MS;
    	font-weight: normal;
    	margin: 0px;
    	padding: 20px 0px 0px 0px;
    	text-decoration: none;
    	}
    	
    #header h1 a, #header h1 a:visited {
    	color: #FFFFFF;
    	font-size: 36px;
    	font-family: Times New Roman, Georgia, Trebuchet MS;
    	font-weight: normal;
    	margin: 0px;
    	padding: 20px 0px 0px 0px;
    	text-decoration: none;
            }
    	
    #header h1 a:hover {
    	color: #FFFFFF;
    	text-decoration: none;
            }
    
    .headerleft {
            width: 470px;
    	float: left;
    	margin: 0px;
    	padding: 0px;
    	overflow: hidden;
    	}
    	
    .headerright {
    	width: 480px;
    	float: right;
    	margin: 0px;
    	padding: 38px 0px 0px 0px;
    	text-align: right;
    	}
    	
    .headerright a, .headerright a:visited {
    	color: #FFFFFF;
    	font-size: 11px;
    	text-transform: uppercase;
    	text-decoration: none;
    	padding: 0px 0px 0px 3px;
    	}
    	
    .headerright a:hover {
    	color: #FFFFFF;
    	text-decoration: underline;
    	}
    	
    .headerright a img {
    	border: none;
    	margin: 0px 0px 3px 0px;
    	padding: 0px;
    	}
    	
    /************************************************
    *	Navbar  									*
    ************************************************/
    
    #navbar {
            background-image: url(images/nav_background.png);
            background-repeat: repeat-x;
            width: 960px;
    	height: 30px;
    	margin: 0px auto 0px;
    	padding: 0px 0px 0px 0px;
    	}
    	
    #navbarleft {
            width: 660px;
    	height: 30px;
    	float: left;
    	margin: 0px;
    	padding: 0px;
    	}
    	
    #navbarright {
    	width: 300px;
    	height: 30px;
    	float: right;
    	margin: 0px;
    	padding: 0px;
    	text-align: right;
    	}
    	
    #nav {
    	margin: 0px;
    	padding: 0px;
    	list-style: none;
    	}
    	
    #nav ul {
    	margin: 0px;
    	padding: 0px;
    	list-style: none;
    	}
    
    #nav a {
    	color: #FFFFFF;
    	display: block;
        font-weight: bold;
        margin: 0px 20px 0px 0px;
    	padding: 8px 10px 7px 10px;
    	}
    	
    #nav a:hover {
    	display: block;
    	text-decoration: none;
        margin: 0px 20px 0px 0px;
    	padding: 8px 10px 7px 10px;
    	}
    
    #nav li {
    	float: left;
    	margin: 0px;
    	padding: 0px;
    	}
    	
    #nav li li {
    	float: left;
    	margin: 0px;
    	padding: 0px;
    	width: 140px;
    	}
    	
    #nav li li a, #nav li li a:link, #nav li li a:visited {
            background: #4A7EB8;
            color: #FFFFFF;
    	width: 140px;
    	float: none;
    	margin: 0px;
    	padding: 6px 10px 5px 10px;
    	border-bottom: 1px solid #FFFFFF;
    	border-left: 1px solid #FFFFFF;
    	border-right: 1px solid #FFFFFF;
    	}
    	
    #nav li li a:hover, #nav li li a:active {
    	background: 1A4E88; 
            color: #FFFFFF;
            
    	}
    
    #nav li ul {
    	position: absolute;
    	width: 10em;
    	left: -999em;
    	}
    
    #nav li:hover ul {
    	left: auto;
    	display: block;
    	}
    	
    #nav li:hover ul, #nav li.sfhover ul {
    	left: auto;
    	}
    	
    /************************************************
    *	Content 					     		    * 
    ************************************************/
    
    #content {
    	width: 960px;
    	margin: 0px auto 0px;
    	padding: 0px 0px 0px 0px; 
            }
    
    #content p {
    	padding: 0px 0px 10px 0px;
    	margin: 10px;
    	line-height: 20px;
    	}
    	
    #content h1 {
    	color: #2255AA;
    	font-size: 24px;
    	font-family: Times New Roman, Georgia, Trebuchet MS;
    	font-weight: normal;
    	margin-left: 10px; margin-top: -10px; margin-bottom: 1px;
    	padding: 0px 0px 5px 0px;
    	}
    	
    #content h1 a  {
    	color: #2255AA;
    	text-decoration: none;
    	}
    
    #content h1 a:hover {
    	color: #7DAE12;
    	text-decoration: none;
    	}
    	
    #content h3 {
    	color: #2255AA;
    	font-size: 24px;
    	font-family: Times New Roman, Georgia, Trebuchet MS;
    	font-weight: normal;
    	margin: 0px 0px 0px 0px;
    	padding: 0px 0px 5px 0px;
    	}
    	
    #content h4 {
    	font-size: 12px;
    	font-family: Arial, Tahoma, Verdana;
    	font-weight: bold;
    	margin: 0px 0px 20px 0px;
    	padding: 0px 0px 5px 0px;
    	}
    	
    #content img.wp-smiley {
    	float: none;
    	border: none;
    	padding: 0px;
    	margin: 0px;
    	}
    
    #content img.wp-wink {
    	float: none;
    	border: none;
    	padding: 0px;
    	margin: 0px;
    	}
    	
    #contentleft {
    	background: #FFFFFF;
            float: left;
    	width: 580px;
    	margin: 0px 0px 0px 0px;
    	padding: 20px 30px 20px 0px;
            border:1px solid #aaa; margin-top: 10px; margin-bottom:10px; margin-right: 5px;
            }
    	
    #contentleft ol {
    	margin: 0px 0px 0px 20px;
    	padding: 0px 0px 10px 0px;
    	}
    	
    #contentleft ol li {
    	margin: 0px 0px 0px 20px;
    	padding: 0px 0px 5px 0px;
    	}
    	
    #contentleft ul {
    	list-style-type: square;
    	margin: 0px 0px 0px 20px;
    	padding: 0px 0px 10px 0px;
    	}
    	
    #contentleft ul li {
    	list-style-type: square;
    	margin: 0px 0px 0px 20px;
    	padding: 0px 0px 5px 0px;
    	}
    	
    .date {
    	width: 510px;
            font-size: 11px;
    	font-weight: bold;
    	padding: 0px 0px 10px 0px;
    	margin-left: 10px;
    	border-bottom: 1px solid #999999;
    	}
    	
    .postmeta {
    	width: 510px;
    	font-size: 11px;
    	font-weight: bold;
    	padding:: 0px 0px 40px 0px
    	margin-left: 10px;
    	border-top: 1px solid #999999;
            margin-left: 10px;
    	}
    	
    blockquote {
    	font-style: italic;
    	margin: 0px 25px 15px 25px;
    	padding: 0px 25px 0px 10px;
    	border-left: 2px solid #4A7EB8;
    	}
    	
    #content blockquote p {
    	margin: 0px 0px 0px 0px;
    	padding: 10px 0px 10px 0px;
    	}
    	
    /************************************************
    *	Images  					     		    * 
    ************************************************/
    
    img.centered  {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    	margin-bottom: 10px;
    	padding: 0px;
    	}
    	
    img.alignnone {
    	padding: 0px;
    	margin: 0px 0px 10px 0px;
    	display: inline;
    	}
    
    img.alignright {
    	padding: 0px;
    	margin: 0px 0px 10px 10px;
    	display: inline;
    	}
    
    img.alignleft {
    	padding: 0px;
    	margin: 0px 10px 10px 0px;
    	display: inline;
    	}
    	
    .aligncenter {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    	}
    
    .alignright {
    	float: right;
    	}
    
    .alignleft {
    	float: left;
    	}
    	
    .wp-caption {
    	margin: 0px;
    	padding: 0px;
    	}
    	
    .wp-caption img {
    	margin: 0px 0px 10px 0px;
    	padding: 0px;
    	border: 0px;
    	}
    
    .wp-caption p.wp-caption-text {
    	margin: 0px;
    	padding: 5px 0px 0px 0px;
    	font-size: 10px;
    	font-style: italic;
    	font-weight: bold;
    	line-height: 12px;
    	}
    	
    /************************************************
    *	Sidebar 					     	    * 
    ************************************************/
    	
    #sidebar {
    	float: right;
            width: 330px;
    	margin: 0px 0px 0px 0px;
    	padding: 10px 0px 20px 0px;
    	line-height: 20px;
    	}
    	
    #sidebar h2 {
    	background: #FFFFFF url(images/headline_right.gif);
    	color: #FFFFFF;
    	font-size: 11px;
    	font-family: Arial, Tahoma, Verdana;
    	font-weight: bold;
    	text-transform: uppercase;
    	margin: 10px 0px 0px 0px;
    	padding: 3px 0px 3px 10px;
    	}
    
    #sidebar p {
    	padding: 0px 0px 0px 0px;
    	margin: 0px;
    	line-height: 20px;
    	}
    	
    #sidebar ul {
    	list-style-type: none;
    	margin: 0px 0px 10px 0px;
    	padding: 0px;
    	}
    	
    #sidebar ul li {
    	list-style-type: none;
    	margin: 0px 0px 5px 0px;
    	padding: 0px;
    	}
    
    #sidebar ul ul {
    	list-style-type: none;
    	margin: 0px;
    	padding: 0px;
    	border-left: 1px solid #999999;
    	border-right: 1px solid #999999;
    	}
    	
    #sidebar ul li li {
    	background: #FFFFFF;
    	padding: 0px 0px 0px 0px;
    	margin: 0px;
            border-bottom: 1px solid #999999;
    	}
    	
    #sidebar ul li ul li {
    	background: #FFFFFF;
    	padding: 0px 0px 0px 15px;
    	margin: 0px;
    	}
    
    #sidebar_section-1 {
     width: 50%;
     float: left;
    }
    
    #sidebar_section-2 {
     width: 50%;
     float: left;
    }
    
    #sidebar_section-3 {
     clear:left;
     width: 50%;
     float: left;
    }
    
    #sidebar_section-4 {
     width: 50%;
     float: left;
    }
    	
    /************************************************
    *	Footer Background							*
    ************************************************/
    
    #footerbg {
    	background: #1A4E88;
    	}
    	
    /************************************************
    *	Footer  									*
    ************************************************/
    
    #footer {
    	width: 960px;
    	height: 30px;
    	color: #FFFFFF;
    	margin: 0px auto 0px;
    	padding: 0px;
    	}
    	
    #footer p {
    	color: #FFFFFF;
    	font-size: 10px;
        font-weight: normal;
        text-transform: none;
    	margin: 0px;	
    	padding: 0px;
    	}
    
    #footer a {
    	color: #FFFFFF;
    	text-decoration: none;
    	}
    	
    #footer a img {
    	border: none;
    	margin: 0px;
    	padding: 0px;
    	}
    
    #footer a:hover {
    	color: #FFFFFF;
    	text-decoration: underline;
    	}
    	
    .footerleft {
    	width: 700px;
    	float: left;
    	margin: 0px;
    	padding: 8px 0px 8px 0px;
    	}
    	
    .footerright {
    	width: 250px;
    	float: right;
    	margin: 0px;
    	padding: 8px 0px 8px 0px;
    	text-align: right;
    	}
    	
    /************************************************
    *	Search Form									*
    ************************************************/
    
    #searchdiv {
    	margin: 0px;
    	padding: 0px;
    	}
    	
    #searchform {
    	margin: 0px;
    	padding: 4px 0px 0px 0px;
    	}
    	
    #s {
    	background: #FFFFFF;
    	width: 210px;
    	color: #333333;
    	font-size: 11px;
    	font-family: Arial, Tahoma, Verdana;
    	padding: 3px;
    	margin: 0px 0px 0px 0px;
    	border-top: 1px solid #666666;
    	border-right: 1px solid #666666;
    	border-left: 1px solid #999999;
    	border-bottom: 1px solid #999999;
    	}
    	
    #sbutt {
    	background: #1A4E88 url(images/submit.png);
    	color: #FFFFFF;
    	font-size: 11px;
    	font-family: Arial, Tahoma, Verdana;
    	padding: 1px;
    	margin: 0px;
    	border: 1px solid #FFFFFF;
    	}
    	
    /************************************************
    *	Comments									*
    ************************************************/
    	
    #commentblock {
    	width: 500px;
    	float: left;
    	padding: 0px 0px 10px 0px;
    	margin: 0px 0px 0px 0px;
    	line-height: 20px;
    	}
    	
    .commentleft {
    	width: 150px;
    	float: left;
    	padding: 0px 20px 0px 0px;
    	margin: 0px 0px 0px 0px;
    	}
    	
    .commentright {
    	width: 300px;
    	float: right;
    	padding: 0px 0px 0px 0px;
    	margin: 0px 0px 0px 0px;
    	}
    	
    #commentblock ol {
    	margin: 0px 5px 0px 20px;
    	padding: 0px 0px 10px 0px;
    	}
    	
    #commentblock ol li {
    	margin: 0px;
    	padding: 0px;
    	}
    	
    .commentdate {
    	font-size: 12px;
    	padding-left: 0px;
    	}
    	
    #commentlist li p {
    	margin-bottom: 8px;
    	line-height: 20px;
    	padding: 0px;
    	}
    
    .commentname {
    	color: #333333;
    	margin: 0px;
    	padding: 5px 5px 5px 0px;
    	}
    
    .commentinfo {
    	clear: both;
    	}
    	
    #name, #email, #url {
    	background: #EAEAEA !important;
    	color: #202020;
    	font-size: 12px;
    	font-family: Arial, Tahoma, Verdana;
    	margin: 0px;
    	padding: 4px;
    	border-top: 1px solid #666666;
    	border-right: 1px solid #DDDDDD;
    	border-left: 1px solid #666666;
    	border-bottom: 1px solid #DDDDDD;
    	}
    	
    #words {
    	background: #EAEAEA !important;
    	width: 460px;
    	color: #000000;
    	font-size: 12px;
    	font-family: Arial, Tahoma, Verdana;
    	padding: 4px;
    	margin: 0px;
    	border-top: 1px solid #666666;
    	border-right: 1px solid #DDDDDD;
    	border-left: 1px solid #666666;
    	border-bottom: 1px solid #DDDDDD;
    	}
    	
    #submit {
    	background: #1A4E88 url(images/submit.png);
    	color: #FFFFFF;
    	font-size: 11px;
    	font-family: Arial, Tahoma, Verdana;
    	text-transform: uppercase;
    	padding: 3px;
    	margin: 0px;
    	border: 1px solid #1A4E88;
    	}
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Looks like it fills the entire navigation area. Do you mean you want it to fill the entire page width? That will be trickier as the navigation area is narrower than the page.
     
  3. nuxx macrumors member

    nuxx

    Joined:
    Jun 5, 2007
    Location:
    Tokyo
    #3
    You could simply set the width of div#navbar to 100%.

    Code:
    #navbar {
            background-image: url(images/nav_background.png);
            background-repeat: repeat-x;
            [B]width: 100%;[/B]
    	height: 30px;
    	margin: 0px auto 0px;
    	padding: 0px 0px 0px 0px;
    	}
    That way it will expand to fit the width of the browser window. You could also set the width of div#header to 100%, so that header aligns vertically with the navigation bar.

    Code:
    #header {
    	[B]width: 100%;[/B]
    	height: 150px;
    	color: #FFFFFF;
    	font-size: 16px;
    	font-weight: normal;
    	margin: 0px auto 0px;
    	padding: 0px;
    	overflow: hidden;
    }
     
  4. Rob587 thread starter macrumors 6502a

    Rob587

    Joined:
    Jul 4, 2004
    Location:
    Orlando, FL
    #4
    Cool, that worked. Thanks.

    Now how do I get the image to fill those top few pixels in the nav bar? It seems like its getting cut out by some padding or something?
     
  5. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #5
    Those 3px of lighter blue above your nav are from your header's background image. Making your header 3 px shorter or making the gradient taller in the image, getting rid of the lighter blue, should solve that for you.

    Let us know how you get on :)

    /Doug
     
  6. Rob587 thread starter macrumors 6502a

    Rob587

    Joined:
    Jul 4, 2004
    Location:
    Orlando, FL
    #6
    Awesome. You all are so helpful! Thanks!

    Hopefully these are my last questions:

    1. How do I get my nav bar links to highlight when I roll over them?

    2. Im also kind of conflicted now that ive changed the nav bar to 100% width. If anyone enlarges their browser window it makes my header and nav bar extremely far apart and awkward. How can I fix the links and header to a certain position, but make the background image width 100%?

    3. What do I edit in order to adjust the distance between the sidebar and the posts? I forget.
     
  7. nuxx macrumors member

    nuxx

    Joined:
    Jun 5, 2007
    Location:
    Tokyo
    #7
    Javascript or CSS rollovers?

    My suggestion was the simplest way to achieve what you wanted. There is of course a trade-off. A more elegant solution would be a little more complex and may possibly involve changing the page layout. Well, at least the header/navbar structure.
     
  8. Rob587 thread starter macrumors 6502a

    Rob587

    Joined:
    Jul 4, 2004
    Location:
    Orlando, FL
    #8
    hmmmm, any suggestions on how to go about doing this? I think I should fix it.
     
  9. nuxx macrumors member

    nuxx

    Joined:
    Jun 5, 2007
    Location:
    Tokyo
    #9
    Well, one suggestion would be to create a new div#nav-wrapper and place it inside the existing div#navbar. Inside div#nav-wrapper place div#navbarleft and div#navbarright. Like so;

    Code:
    <div id="navbar">
    
        [B]<div id="nav-wrapper">[/B]
    
            <div id="navbarleft">
                ..........
            </div>
    
            <div id="navbarright">
                ..........
            </div>
    
        [B]</div>[/B]
    
    </div>
    The CSS for div#nav-wrapper:

    Code:
    #nav-wrapper {
        width: 960px;
        height: 100%;
        margin: 0 auto;
    }
    In theory, div#nav-wrapper and it's child elements should now be centered within div#navbar which itself should extend to the width of the browser window. In practice, I've not checked the code, it may need some tweaking.
     
  10. Rob587 thread starter macrumors 6502a

    Rob587

    Joined:
    Jul 4, 2004
    Location:
    Orlando, FL
    #10
    Wow, that worked very well!!!

    Now how do I get the gradient background image in the nav bar to continue on both sides? Some kind of new wrap?

    And any idea why I get a 404 error when I click on an article?

    Thanks a lot by the way! :)
     
  11. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #11
    Because all of the article titles are pointed at /name, which doesn't exist.
     
  12. nuxx macrumors member

    nuxx

    Joined:
    Jun 5, 2007
    Location:
    Tokyo
    #12
    I think you've changed the width of div#navbar back to the original 960px. It should be 100%.
     
  13. Rob587 thread starter macrumors 6502a

    Rob587

    Joined:
    Jul 4, 2004
    Location:
    Orlando, FL

Share This Page