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 4 of 4
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    160
    Thanks
    71
    Thanked 1 Time in 1 Post

    Question on positioning

    Hi, I wanted to try a liquid layout, although I dont think I am doing things very well. I need to produce a header the same as the following


    At this moment, I do
    Code:
    <!-- HEADER -->
    <div id="header"> 
      <div class="wrapper"> <a href="index.html"><img id="logo" src="images/logo.png" alt="" /></a> </div>
      
      <div class="wrapper"> <img id="logoTwo" src="images/top.png" alt="" /> </div>
      
      <div class="wrapper"><div id="text">TRUSTED BY THE WORLD'S <br> MOST DEMANDING CLIENTS</div></div>
    </div>
    <!-- ENDS HEADER -->
    Where the header id has the background image for the header, and log and logoTwo are the two logos you see in the image (including the you call us section as a logo).

    The css is as follows
    Code:
    #header{
    	height: 100px;
    	position: relative;
    	z-index: 10;
    	background: #2a2d30 url(../images/header.png) top center  no-repeat;
    	background-size:100% 100%;
    }
    #logo{
    	position: absolute;
    	top: 5px;
    	left: 30px;
    }
    
    #logoTwo{
    	position: absolute;
    	top: 5px;
    	left: 620px;
    }
    
    #text{
    	font:Tahoma, Geneva, sans-serif;
    	color:#FFFFFF;
    	font-size:18px;
    	position: absolute;
    	top:25px;
    	left:330px;
    }
    Now, everything seems to be positioned nicely on my computer. I am worried if it will be the same on different resolutions are. When I originally used padding instead, the logo's seemed to move places on different resolutions. The top, left attributes dont appear to make this happen. Whats the difference between to two? Also, is my code ok? Would you do things differently?

    Just any advise you can give would be greatly appeciated.

    Cheers

    Nick

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Yes I would do things differently. Don't abuse absolute positioning which is exactly what you are doing. Remove the div with class="wrapper" from your HTML. Let the elements natually flow. Then use this for your CSS
    Code:
    #header{
            padding-top:5px;
    	height: 95px;
    	position: relative;
    	background: #2a2d30 url(../images/header.png) top center  no-repeat;
    	background-size:100% 100%;
            overflow:hidden;
    }
    #logo {
    	float:left;
            margin-left:30px;
            display:inline;
            width: XXpx; /* this should be the width of your #logo image */
    }
    
    #logoTwo{
    	float:right;
    	width: XXpx; /* this should be the width of your #logoTwo image */
    }
    
    #text{
    	font:Tahoma, Geneva, sans-serif;
    	color:#FFFFFF;
    	font-size:18px;
    	
    	padding-top:25px;
            margin-left: XXpx; /* this should be greater than or equal to the width of your #logo image */
            margin-right: XXpx; /* this should be greater than or equal to the width of your #logoTwo image */
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    nick2price (05-22-2012)

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    160
    Thanks
    71
    Thanked 1 Time in 1 Post
    Thank you very much for the advise. I was just wondering what is wrong with using absolute positioning to much? I have tried what you suggested, but the logos dont overlap the header like in the image. I think this is because of the overflow:hidden. Also, the logos are not in the exact position where I need them to be. How would I get them in their correct position without using absolute positioning?

    Cheers

    Nick

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    What I gave you should have put logo on the left and logoTwo on the right. When you use absolute positioning in the way you have it may not look the same on all resolutions. Post your updated CSS and HTML. A link to your site would be better.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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