Need Help Fitting Header Image

Get Started
1

Hi,

I had a header designed for my WP site. I like the header dimensions even though the bottom of it is getting cut off.

  1. Can anyone tell me where in my style.css file that I would modify the code to fit this header. My site is:

http://tinyurl.com/ykg5utl

Essentially, I want to lower the orange bar.
I’ve attached the WP theme and header jpg files for reference.

  1. I’d also like to know how to get the Shearling Boots (black title) which
    is part of the h1 tag in the theme to be positioned where the
    Shearling Boot (orange title) is. I guess I should have the orange one
    removed from the header image.

  2. How do I get ride of the jagged edges on the orange bar under the header?

Any advice appreciated

George

2

Hi,

You could apply the image to the h1 itself and do away with the header div altogether and save some bytes and make it cleaner.

You could use the orange text from the image and just hide the text in the h1 with text-indent (there are better replacement techniques but I didn’t want to overload you with fixes :)).

Change the header styles to this:


h1#header {
    position: relative;
    overflow: hidden;
    background:url(http://www.shearlingboots.org/wp-content/themes/love-the-orange/images/header-bg.jpg) no-repeat 0 0;
    height:133px;
    font-size:3.3em;
    font-weight: normal;
    letter-spacing:-1px;
    white-space:nowrap;
    text-indent:-999em;
    padding:0;
    margin:0 0;
    border-left:1px solid #E4E4E4;
    border-right:1px solid #E4E4E4;
}
h1#header  a {
    color: #333333;
    text-decoration: none;
    width:330px;
    height:80px;
    display:block;
    margin:40px 0 0 35px;
}

Then the html would look like this:


<div id="wraper">
    <div class="tc"><span>&nbsp;</span></div>
 [B]   <h1 id="header"><a href="http://www.shearlingboots.org">Shearling Boots</a></h1>[/B]
    <div id="mainNav">

Not sure what you want done with the orange nav but you are repeating a round image so you get little gaps all the way along.

Don’t repeat the image but give it a background colour. You will need to add another image to the right if you need a round right edge though.


#mainNav {
[B]    background:#ea7521 url(http://www.shearlingboots.org/wp-content/themes/love-the-orange/images/nav-bg.gif) 0 0 no-repeat;
    padding:10px 0 0 10px;
    color: #EF9552;
    border-left:1px solid #E4E4E4;
    border-right:1px solid #E4E4E4;
    clear:left;
    height:29px;
    margin:0;[/B]
}
3

Hi,

I appreciate the help. I will be having the Shearling Boots title removed from the header image since the I positioned the h1 title properly.
However, there is a space between the Orange bar and the header that is driving me crazy! Also, this space varies depending on which browser
you look at the site through (IE, FF)

Any final advice appreciated

George

4

Hi,

You still don’t need the header div as that is a waste of space as everything could be done with the h1 and the anchor. You should always try to minimise your code and not add elements where none are needed.

The code I offered was in good working order and could have been adjusted to suit quite easily.:slight_smile:

However you can fix your code like this:


#header h1{
    font-size:3.9em;
  [B]  line-height:1.0;[/B]
    font-weight: bold;
   [B] padding:60px 0 0 60px[/B];
    letter-spacing: -2.5px;
    white-space:nowrap;
[B]margin:0;[/B]
}

The line height (due to the large font-size) was pushing through the element higher and making the nav start lower down.