How to make my header across?

Discussion in 'CSS' started by keemuph, Oct 7, 2009.

  1. #1
    How can I make my blue header have it continue all the way to the left end and the right end of ths screen?

    This is the site : carolynyarbroughtv.com

    Please help me guys. I will go insane.
     
    keemuph, Oct 7, 2009 IP
  2. blurredfringe

    blurredfringe Member

    Messages:
    77
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    48
    #2
    use a thin strip of that gradient background and repeat it on horizontal axis. but first you need to put a div on header that has 100% width



    ex:

    div#header_external {
    position: absolute;
    height: 102px;
    width: 100%;
    background: url(../header_bg.gif) repeat-x;
    }

    then the logo section inside

    div#logo {
    width: 960;
    height: 100px;
    margin: 0 auto;
    }
     
    blurredfringe, Oct 7, 2009 IP
  3. goliath

    goliath Active Member

    Messages:
    308
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    60
    #3
    There's a spot in your web page's HTML code where you see this:

    
    <div id="wrap">
    
    <div id="header">
    
    Code (markup):
    Add New code so it looks like this:

    
    <div style="position:absolute;z-index:-1;top:0;left:0;width:100%;height:100px;background-image:url("http://carolynyarbroughtv.com/wp-content/themes/tubular_light_10/images/header.png");background-repeat:repeat-x;"></div>
    
    <div id="wrap">
    
    <div id="header">
    
    Code (markup):
    You can convert that to a class or ID description if you would like but just adding that to the header will let you know of it's going to work for you. The image is not tiled, and it is not the same size as the current header so you may have to juggle things a bit.

    The current header is inside the #wrap, which is set to 960px, so nothing inside that container there can get as wide as the page.
    [/code]
     
    goliath, Oct 8, 2009 IP
  4. keemuph

    keemuph Peon

    Messages:
    585
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Guys,

    Its not working. Can you do the modifcation? I am really newbie in CSS. I appreciate your help. Thanks

    Here's my CSS code:

    And here's me header.php

     
    keemuph, Oct 8, 2009 IP
  5. goliath

    goliath Active Member

    Messages:
    308
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    60
    #5
    It's hard to be sure since I don't have wordpress to test on right now but I changed the quote style, try pasting this into the template HTML right before the wrap div:

    
    <div style="position:absolute;z-index:-1;top:0;left:0;width:100%;height:100px;background-image:url('http://carolynyarbroughtv.com/wp-content/themes/tubular_light_10/images/header.png');background-repeat:repeat-x;"></div>
    
    
    Code (markup):
    It may not be perfect, but you should see the bar and you can fix it from there, maybe. It goes in the exact line in the code that I showed you in my other post.
     

    Attached Files:

    goliath, Oct 8, 2009 IP
  6. keemuph

    keemuph Peon

    Messages:
    585
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Thank you, its working now. I appreciate your help.

    Renan
     
    keemuph, Oct 10, 2009 IP