...

View Full Version : Need Help Aligning Header Image



gmr324
01-06-2010, 03:00 PM
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 style sheet and header jpg files for reference.

2) I'd also like to know how to get the Shearling Boots (black title0 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.

3) How do I get ride of the jagged edges on the orange bar under the header?


Any advice appreciated

George

abduraooft
01-06-2010, 03:10 PM
Validate your CSS and fix the errors in it, see http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.shearlingboots.org%2F&profile=css21&usermedium=all&warning=1&lang=en
The way to comment inside CSS is like

/*
commented items here
*/

chefs
01-06-2010, 03:28 PM
You have to add an additional style in your header. Aside from the following styles:

#header {
background:yellow none repeat scroll 0 0;
border-right:1px solid #E4E4E4;
overflow:hidden;
padding:11px 20px;
}

You may also want to add:

background-image: url (file location);

or

background-image: url(/media/header-bg.jpg);

The orage bar should go down automatically, but if not, you should add few pixels for the top padding of the orange bar..

Excavator
01-06-2010, 04:47 PM
Hi,

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 style sheet and header jpg files for reference.

Make the #header the height you want. In this example I've given it the same height as it's background image, I also removed the top/bottom padding -
#header {
position: relative;
/*padding-bottom: 10px; this one is being ignored*/
overflow: hidden;
background: #ffffff ;
background: #000000 url('http://www.shearlingboots.org/wp-content/themes/love-the-orange/images/header-bg.jpg') no-repeat;
border-left: 1px solid #E4E4E4;
border-right: 1px solid #E4E4E4;
padding: 0 20px;
height: 133px;
}

2) I'd also like to know how to get the Shearling Boots (black title0 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.

You've pretty much answered that one.


3) How do I get ride of the jagged edges on the orange bar under the header?


That would require a different image or, if it's just orange you want, no image at all. The image your using, http://www.shearlingboots.org/wp-content/themes/love-the-orange/images/nav-bg.gif Looks like the end piece of a navigation bar.
Try just orange instead, like this -
#mainNav {
background: #ea7521;
padding: 10px 0 10px 10px;
color: #EF9552;
border-left:1px solid #E4E4E4;
border-right:1px solid #E4E4E4;
clear:left;
height:19px;
}

gmr324
01-06-2010, 11:30 PM
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

CoffeeCup.com
01-07-2010, 01:48 AM
Hello,

In the future, maybe these site can help you out:

http://www.wpdfd.com/issues/70/css_from_the_ground_up/
http://www.csszengarden.com/
http://www.alistapart.com/topics/design
http://www.w3schools.com/css/default.asp

Hope this helps!!! :thumbsup:
CoffeeCup.com



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum