absolute position problem with logo [Archive]

aredanecyfna

03-16-2009, 09:26 AM

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">

</style>
<div id="apDiv2"><img src="img/logo.png" width="164" height="201" alt="map" />
</div>

Snookerman

03-16-2009, 02:05 PM

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!

molendijk

03-16-2009, 07:48 PM

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.

aredanecyfna

03-18-2009, 01:06 PM

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

.html
<head>

<style type="text/css">

</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

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;
}