WEB Gradient Bar's - How To?

Discussion in 'OT Technology' started by morrty, Oct 10, 2008.

  1. morrty

    morrty Guest

    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: Oct 11, 2008
  2. Deviance

    Deviance Can't you smell that smell? OT Supporter

    Joined:
    Jul 10, 2007
    Messages:
    4,978
    Likes Received:
    10
    Location:
    Rocky Mountain High
  3. morrty

    morrty Guest

    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.
     
  4. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,485
    Likes Received:
    69
    Location:
    Sparkopolis
    yeah, it's an image. but you don't have to use photoshop to make it.
     
  5. morrty

    morrty Guest

    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: Oct 11, 2008
  6. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,485
    Likes Received:
    69
    Location:
    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>
     
  7. morrty

    morrty Guest

    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.
     
  8. morrty

    morrty Guest

    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: Oct 11, 2008
  9. catpiss

    catpiss Guest

    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.
     
  10. morrty

    morrty Guest

    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: Oct 11, 2008

Share This Page