Gradient .png nav bar css?

Rob587 · Nov 8, 2009

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;
	}

angelwatt · Nov 9, 2009

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.

nuxx · Nov 9, 2009

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;
}

Rob587 · Nov 9, 2009

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?

design-is · Nov 9, 2009

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

Rob587 · Nov 9, 2009

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.

nuxx · Nov 9, 2009

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

Javascript or CSS rollovers?

How can I fix the links and header to a certain position, but make the background image width 100%?

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.

Rob587 · Nov 9, 2009

nuxx said:
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.

hmmmm, any suggestions on how to go about doing this? I think I should fix it.

nuxx · Nov 10, 2009

any suggestions on how to go about doing this?

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.

Rob587 · Nov 10, 2009

nuxx said:
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.

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!

angelwatt · Nov 10, 2009

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

Because all of the article titles are pointed at /name, which doesn't exist.

nuxx · Nov 10, 2009

Now how do I get the gradient background image in the nav bar to continue on both sides?

I think you've changed the width of div#navbar back to the original 960px. It should be 100%.

Rob587 · Nov 10, 2009

Fixed and fixed! Thanks guys!

Search

Search

Gradient .png nav bar css?

Rob587

macrumors 6502a

angelwatt

Moderator emeritus

nuxx

macrumors member

Rob587

macrumors 6502a

design-is

macrumors 65816

Rob587

macrumors 6502a

nuxx

macrumors member

Rob587

macrumors 6502a

nuxx

macrumors member

Rob587

macrumors 6502a

angelwatt

Moderator emeritus

nuxx

macrumors member

Rob587

macrumors 6502a

Our Staff