TECH Gradient Bar's - How To?

morrty

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.
 
Last edited by a moderator:
TS
TS

morrty

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.
 
TS
TS

morrty

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;}
 
Last edited by a moderator:

White Stormy

Take that, subspace!
Sep 17, 2002
85,544
Sparkopolis
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>
 
TS
TS

morrty

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.
 
TS
TS

morrty

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!
 
Last edited by a moderator:

catpiss

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.

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.
 
TS
TS

morrty

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
 
Last edited by a moderator:

Users who are viewing this thread

About Us

  • Please do not post anything that violates any Local, State, Federal or International Laws. Your privacy is protected. You have the right to be forgotten. Site funded by advertising, link monetization and member support.
OT v15.8.1 Copyright © 2000-2022 Offtopic.com
Served by fu.offtopic.com

Online statistics

Members online
418
Guests online
61
Total visitors
479

Forum statistics

Threads
369,521
Messages
16,891,746
Members
86,873
Latest member
vitalesan