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

    Position of top left logo

    I am trying to position the blue oval logo on the top left of this image:

    http://img4.imageshack.us/img4/6625/layoutgj.jpg

    The problem I am having and can`t seem to figure out is when the window resizes I need the logo to stay put and to get hidden much like the orange sidebars would on smaller screens instead of overlapping the menu.

    my css for it is:

    Code:
    html, body{
    	height: 100%;
    	text-align: center;	
    	font: 12px Arial, Helvetica, sans-serif;
    	color: #000;	
    	margin: 0px;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:12px;
    	color:#000000;
    }
    
    #wrapper {
    width:100%;
    margin:0 auto;
    background: url(images/bg_sidebar.png) repeat-x #feea83;
    height:100%;
    }
    
    #underbelt {
    background:url(images/whatsunder.png) no-repeat;
    float:left;
    position: absolute;
    top:10px;
    left:0px;
    width:307px;
    height:130px;
    }
    
    #content {
    padding-top:40px;
    width:950px;
    margin: 0 auto;
    background:#FFFFFF;
    }
    
    #menubar {
    background:url(images/menubar_bg.png) repeat-x;
    height:80px;
    }
    and the html is

    Code:
    <body>
    <div id="wrapper">
    <div id="content">
      <div id="underbelt"></div>
      <div id="menubar"></div>
    
    </div>
    </div>
    </body>
    So obviously it is moving since the position is absolute.. But I am not sure how I can get it to stick per se...

    I`m sure this is pretty simple I'm just a putts. Any help?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Hello sackstein,
    Make #wrapper position:relative; and then adjust top/left pixels to place #underbelt.

    #underbelt can be just the image instead of putting an un-needed div around the image.
    Like this - <img src="images/whatsunder.png" alt="description" width="307" height="130" id="underbelt" />
    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:

    sackstein (12-02-2009)


  •  

    Posting Permissions

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