Results 1 to 4 of 4

Thread: absolute position problem with logo

  1. #1
    Join Date
    Mar 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default absolute position problem with logo

    The web site is centered, and i have problem with the logo that changes positions @ different sizes/resolutions of the browser.

    What i have to do to fix this?

    the code is like this:
    <style type="text/css">
    <!--
    #apDiv2 {
    position:absolute;
    left:113px;
    top:83px;
    width:170px;
    height:212px;
    z-index:2;
    overflow: auto;
    }
    -->
    </style>
    <div id="apDiv2"><img src="img/logo.png" width="164" height="201" alt="map" />
    </div>

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Absolutely positioned elements position themselves in the first parent element that has a specified position. If you have a wrapping div around the apDiv2, give it relative positioning and you should be fine. If it doesn't work, please post a link to your site or attach all the code you have.

    Good luck!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  3. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,734
    Thanks
    46
    Thanked 216 Times in 209 Posts
    Blog Entries
    53

    Default

    If you mean that you want the logo at approximately the same position of the screen, whatever its resolution, then could use percentages for the left and top of #apDiv2.
    ===
    Arie.

  4. #4
    Join Date
    Mar 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    apDiv2 has to be over header1, menubar and header2 at the same time... and just changing "absolute" to "relative" does work

    .html
    Code:
    <head>
    
    <style type="text/css">
    <!--
      #apDiv2 {
    position:absolute;
    /*position:relative;*/
    	left: 113px;
    	top: 83px;
    	width:170px;
    	height:210px;
    	z-index:2;
        overflow: auto;
    }
      -->
    </style>
    
     <link rel="stylesheet" type="text/css" href="style.css" />
    
    <script type="text/javascript" src="ddlevelsmenu.js">
      </script>
    
    </head>
    
    <body>
    
    
    <div id="apDiv2"><img src="img/logo.png" width="164" height="201" alt="map" />
      </div>
    
    <!--  -->
    
    <div class="header1"><img src="img/h1.jpg" alt="header1" />
    </div>
    
    <!--  -->
    
    <div id="ddtopmenubar" class="solidblockmenu" width="980">
    <ul>
    
    <li><a href="4.html" >Contact</a></li>
    <li><a href="4.html">Fourth</a></li>
    <li><a href="4.html"  >Third</a></li>
    <li><a href="4.html" rel="ddsubmenu1">Second</a></li>
    <li><a href="4.html">Home</a></li>
    </ul>
    </div>
    
    <script type="text/javascript">
    ddlevelsmenu.setup("ddtopmenubar", "topbar")
    </script>
    
    <ul id="ddsubmenu1" class="ddsubmenustyle">
    <li><a href="4.html">1</a></li>
    <li><a href="4.html">2</a></li>
    <li><a href="4.html">3</a></li>
    <li><a href="4.html">4</a></li>
    </ul>
    
    <!--  -->
    
    <div class="header2"><img src="img/h2.jpg" alt="header2" />
    </div>
    
    </body>
    style.css
    Code:
    body
    {
    width: 980px;
    margin: 20px auto;
    background-color: #efefef;
    font-family: Tahoma, Verdana, Arial;
    font-size: 13px;
    color: #777;
    }
    
    div.header1 {
    border:0;
    width: 980px;
    height: 74px;
    }
    
    div.header2
    {
    border:0;
    width: 980px;
    height: 210px;
    }
    
    /*  M E N U  */
    
    .solidblockmenu ul{
    margin: 0;
    padding: 0;
    float: left;
    font: bold 13px Arial;
    width: 980px;
    overflow: hidden;
    margin-bottom: 1em;
    border-width: 1px 0;
    background: black url(ddlevelsfiles/blockdefault.png) center center repeat-x;
    }
    
    .solidblockmenu li{
    display: inline;
    }
    
    .solidblockmenu li a{
    float: right;
          /*  float: left; */
    color: white;
    padding: 9px 11px;
    text-decoration: none;
    border-right: 1px solid white;
    }
    
    .solidblockmenu li a:visited{
    color: white;
    }
    
    .solidblockmenu li a:hover, .solidblockmenu li a.selected{
    color: white;
    background: transparent url(ddlevelsfiles/blockactive.png) center center repeat-x;
    }
    
    /* ######### Drop Down ULs CSS ######### */
    
    .ddsubmenustyle, .ddsubmenustyle ul{ /*topmost and sub ULs, respectively*/
    font: normal 13px Verdana;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    background: white;
    border: 1px solid black;
    border-bottom-width: 0;
    visibility: hidden;
    z-index: 100;
    }
    
    .ddsubmenustyle li a{
    display: block;
    width: 160px; /*width of menu (not including side paddings)*/
    color: black;
    background-color: lightyellow;
    text-decoration: none;
    padding: 4px 5px;
    border-bottom: 1px solid black;
    }
    
    * html .ddsubmenustyle li{ /*IE6 CSS hack*/
    display: inline-block;
    width: 170px; /*width of menu (include side paddings of LI A*/
    }
    
    .ddsubmenustyle li a:hover{
    background-color: black;
    color: white;
    }
    
    /* ######### Neutral CSS  ######### */
    
    .downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
    padding-left: 4px;
    border: 0;
    }
    
    .rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
    position: absolute;
    padding-top: 3px;
    left: 100px;
    border: 0;
    }
    
    .ddiframeshim{
    position: absolute;
    z-index: 500;
    background: transparent;
    border-width: 0;
    width: 0;
    height: 0;
    display: block;
    }
    
    /* ######### Marker List Vertical Menu ######### */
    
    .markermenu{
    width: 175px; /*width of side bar menu*/
    clear: left;
    position: relative; /*Preserve this for "right" arrow images (added by script) to be positioned correctly*/
    
    }
    
    .markermenu ul{
    list-style-type: none;
    margin: 5px 0;
    padding: 0;
    border: 1px solid #9A9A9A;
    }
    
    .markermenu ul li a{
    background: #F2F2F2 url(bulletlist.gif) no-repeat 3px center; /*light gray background*/
    font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
    color: #00014e;
    display: block;
    width: auto;
    padding: 3px 0;
    padding-left: 20px;
    text-decoration: none;
    border-bottom: 1px solid #B5B5B5;
    }
    
    * html .markermenu ul li a{ /*IE6 hack*/
    width: 155px;
    }
    
    .markermenu ul li a:visited, .markermenu ul li a:active{
    color: #00014e;
    }
    
    .markermenu ul li a:hover, .markermenu ul li a.selected{
    color: white;
    background-color: black;
    }
    
    /* ######### Customized Drop Down ULs CSS (inherits from ddlevelsmenu-base.css) ######### */
    
    .blackwhite li a{
    background: white;
    }
    
    .blackwhite li a:hover{
    background: black;
    color: white;
    }
    Last edited by aredanecyfna; 03-18-2009 at 01:14 PM.

Tags for this Thread

Bookmarks

Posting Permissions

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