Printable View
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:
Quote:
<style type="text/css">
<!--
#apDiv2 {
position:absolute;
left:113px;
top:83px;
width:170px;
height:212px;
z-index:2;
overflow: auto;
}
-->
</style>
Quote:
<div id="apDiv2"><img src="img/logo.png" width="164" height="201" alt="map" />
</div>
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!
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.
apDiv2 has to be over header1, menubar and header2 at the same time... and just changing "absolute" to "relative" does work
.htmlstyle.cssCode:<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>
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;
}