...

View Full Version : Resolved Header text & background image



quartzy
11-14-2010, 02:50 AM
I am doing an header, that consists of left and right sides.
On the right side I have a background image that lays flush to the right. I want to add some text as a tagline before the background image, but the text is all swashed up to the image. Is there an easy way I can make this more spaced as I have tried a lot of things, like making the div size bigger and adding span tabs?


<div id="header">
<div id="left_header">
<h1><a href="www..uk" title=""><img height="86" alt="" src="" width="231" /></a></h1>
</div>
<div id="right_header">
<p>Recycle and donate<br />your unwanted furniture<br/>Tel: <br /><span class="caps">Lewisham Area</span></p></div></div><div class="clear"></div>


The css is
#header {
display: block;
width: 90%;
height: 140px;
padding-top: 5%;
padding-bottom: 3%;
background: #fff;
padding-left: 2%; padding-right: 2%;
margin:0;
}
#left_header {position: relative; float:left; width: 48%; height: 90px;}

#right_header {background: url('recycle_cm1.jpg');
background-repeat: no-repeat;
background-position: top right;
font-family: Arial, sans-serif, Verdana;
color: #666666;
position: relative;
width: 50%;
height: 150px;
float: left;
margin-right: 14px; padding: 0; text-indent: 10px;
text-align: right;
}

#right_header p {margin: 0; padding: 0; text-align: center; }

.caps {text-transform: uppercase; color:purple; margin-right: 10px}

teedoff
11-14-2010, 03:03 AM
Is there a reason you wanted a left and right side to your header? I mean you can have a header div and float an image to the left side of the header. Add a paragraph and use margins to position the text where you need it.

quartzy
11-14-2010, 03:27 AM
On the left side of the header I have the logo. I then have the text and a background image on the right side, so yes I do need 2 sides.

Chris Hick
11-14-2010, 03:32 AM
How about attaching the images for me. ^_^ Then, I'll spend about five minutes fixing it up and you'll be good to go. After, I will explain to you what was wrong.

quartzy
11-14-2010, 03:35 AM
I dont know how to put images on this forum.
the site is:

puddypaws.co.uk/test.html with the usual www. before

Chris Hick
11-14-2010, 04:02 AM
Just curious but how big is the recycle_cm1.jpg image?

quartzy
11-14-2010, 04:05 AM
the image is 120px x 117px

Excavator
11-14-2010, 05:27 AM
Hello quartzy,
I think your box model (http://www.w3.org/TR/CSS2/box.html) is off. You set left and right header to 48 and 50% widths and then add margins to that. Margin and padding both add to total width and it's pretty much impossible to mix % and px measurements.

You also have the containing #header set at 140px and put #150px high #right_header inside it. That doesn't quite fit...

Try it like this once:
#header {
height: 140px;
padding: 10px 5px 5px;
background: #fff;
margin:0;
}
#left_header {
width: 48%;
float:left;
}
#right_header {
background: url('recycle_cm1.jpg')no-repeat top right;
font-family: Arial, sans-serif, Verdana;
color: #666666;
width: 50%;
float: left;
}
#right_header p {
margin: 0;
padding: 0;
text-align: left;
}

quartzy
11-14-2010, 04:27 PM
I know that pixels and percentages do not mix, and that was my next task to get all of the pixels into ems.

I tried it your way, but it did not work, I had to remove the float left from the right div. And I then added a margin left to the p tag, to get the text into place, which I had not thought of until you said to add a margin left for the right div. So thanks between us we have sorted it out. Now back onto the next prob.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum