Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    Header text & background image

    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?

    Code:
    <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
    Code:
    #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}
    Last edited by quartzy; 11-14-2010 at 06:33 PM.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    re

    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.

  • #4
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    484
    Thanks
    10
    Thanked 33 Times in 32 Posts
    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.
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #5
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    re

    I dont know how to put images on this forum.
    the site is:

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

  • #6
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    484
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Just curious but how big is the recycle_cm1.jpg image?
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #7
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    the image is 120px x 117px

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello quartzy,
    I think your box model 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:
    Code:
    #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; 
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    quartzy (11-14-2010)

  • #9
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    Re

    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •