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
    161
    Thanks
    71
    Thanked 1 Time in 1 Post

    css header issue

    I have a problem with my header. The header has a background image, and two logos which should overflow. I am attempting to use the 1140 grid system. So the html is
    Code:
    <div class="container">
    	<div class="row">
    		<div class="twelvecol last" id="imgHolder">
            <img id="logo" src="images/logo.jpg" />
            <img id="top" src="images/top.png" />
    		</div>
    	</div>
    </div>
    And the css is
    Code:
    .container {
    padding-left: 20px;
    padding-right: 20px;
    }
    .row {
    width: 100%;
    max-width: 1140px;
    min-width: 755px;
    margin: 0 auto;
    }
    .row .twelvecol {
    width: 100%;
    float: left;
    }
    
    #topImg {
    width: 100%;
    }
    
    #footerImg {
    width: 100%;
    }
    #imgHolder{
    	background:#efefef url(../images/header.jpg) no-repeat;
    	background-size:100% 100%;
    }
    #logo{
    	float:left;
    }
    
    #top{
    	float:right;
    }
    classes container and row are from the grid template. I have a couple of problems. Firstly, the two logos dont overflow. I have tried setting the overflow property without no success. My second issue relates to the positioning of the logos. float left and right partly do the job, but now I need to get them in more precise positions. I cant use absolute, as this will mess things up when the browser is resized. So what is the best thing to do to precisely position my images whilst allowing for the adaptive layout?

    cheers

    Nick

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,859
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Can we have a link to your page? And where do you need to position those images?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    161
    Thanks
    71
    Thanked 1 Time in 1 Post
    Hi, I have uploaded the site to http://www.animatemycard.com/sky/index.html

    I have only started so it is very basic. As you can see, there is the skyclub logo on the left hand side, and the you call us tab on the right hand side. Both of them logos should overlap onto the black area. They should also be positioned either side of the text in the middle. I remember before that you told me that absolute positioning removes from the flow of the page, so I was wondering how else I could get the images positioned there? If I use padding or something, will this work when resized in the browser?

    thanks

    Nick

  • #4
    New Coder
    Join Date
    Mar 2010
    Posts
    58
    Thanks
    10
    Thanked 3 Times in 3 Posts
    First you want to add position:relative; to #imgHolder
    Code:
    #imgHolder{
    	background:#efefef url(../images/header.jpg) no-repeat;
    	background-size:100% 100%;
            position:relative;
    }
    Then to #logo add position:absolute;, left:Xpx;
    Code:
    #logo{
    	postion:absolute;
            left:100px;
    }
    And the same to #top but with left:Xpx;
    Code:
    #top{
    	postion:absolute;
            right:100px;
    }
    Then just adjust the left and right properties until the images are in the right position.

    Just a word of warning. As the window re-sizes the position of the images will be relative to the width of #imgHolder. It will cause the images to overlap and cover the text in the middle.


  •  

    Posting Permissions

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