WEB Gradient Bar's - How To?

Hi, I'm new to both offtopic.com as well as XHTML & CSS

Back about four years ago I made a few websites with broken HTML (didn't need to close tags etc...).

Enough about me though, my question is simple.

If you go to several sites one that comes to mind is break.com you will notice a bar about 40-50 pixels in height and it has a gradient colour.

On break.com you will see the blue gradient bar with the links
* Daily Buzz
* Just Submitted
* Most Viewed
and the search function.

No I'm not looking to copy anything from this site I am just curious as to how they did this. Whether it can be done with CSS or if I have to go make the image in photoshop.

I could make a 1x50 pixel gradient image and just repeat it I suppose but I am curious as to how its officially done.

Thanks in advance.

 

How they did this?

http://media1.break.com/static/live/v1/img/site/hires_cdp/main_subnav_bg_lrg.gif

 

Ahh thank you, I was looking through the code for it but didn't find it.

Thanks, so it is done in photoshop. All I needed to know.

 

yeah, it's an image. but you don't have to use photoshop to make it.

 

Thank for the help guys I have the gradient menu bars figured out.

Although I do have another question I didn't want to make a new thread for.

Here lies my problem:

I've just been testing a few things getting to know CSS and <div> tags since I used to be 100% tables.

For the Life of me I can't figure out how to center the two boxes at the bottom of the screen (pink & orange) while keeping to the XHTML Strict standard.

I've tried using margins but didn't seem to do much.

Edit: Here is the CSS

Code:

body {margin: 0 auto; padding: 0; background-color: #222;}

p {color: #fff;}
p.dark {color: #000;}

div {margin: 0 auto; border: 1px solid #fff; padding: 10px;}

.red {background-color: red;}
.green {background-color: green;}
.blue {background-color: blue;}
.purple {background-color: purple;}
.yellow {background-color: yellow; border: 5px solid #666;}
.pink {background-color: pink; width: 40%; float: left; border: 0; margin: 10px 10px;}
.orange {background-color: orange; width: 40%; float: left; border: 0; margin: 10px 10px; padding: 5px;}

 

try this around pink and orange..

<div style="border: none; padding: 0;">
<div class="pink">
<p class="dark">testing</p>
</div>
<div class="orange">
<p class="dark">testing</p>
</div>
</div>

 

Actually I figured out where I went wrong. I have

Code:

float: left;

on both.

Changed it around a bit and fixed my issue.

Thanks for all the help.

 

Ok I ask one last favour please

Problem: Can't get the link into the green part of the background.
CSS:

Code:

body {
background-color: #222;
margin: 0 auto;
border: 0;
padding: 0;
}

a:link {text-decoration: none; color: #fff}
a:visited {text-decoration: none; color: #fff}
a:hover {text-decoration: none; color: #fff}
a:active {text-decoration: none; color: #fff}

p {color: white;}

#main {
background-color: #fff;
margin: 0 auto;
width: 960px;
}

#topnav {
width: 960px;
height: 137px;
background-image: url('media/images/completenav.gif');
background-repeat: no-repeat;
}

#topnav a {
margin: 100px 0 0 100px;
}

Thanks!

 

The coders at Break aren't exactly that great. They overdo ajax causing lots of issues.

I would do a 1 pixel wide gradient and repeat-x it. It seems they stuck a big fat gradient bar there. It is only 3K, but it still adds up.

 

I made a gradient in photoshop.

Unfortunately I can't get the links to go in the green part.

EDIT: Ignore my posts. I moved the links by using the position:relative; instead of margin