Forum Moderators: not2easy
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:427px;top:293px;width:800px;height:500px;
z-index:1;visibility: inherit;
}
#apDiv3 {
position:absolute;
left:378px;top:120px;width:473px;height:485px;
z-index:0;
}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body background="wallpaper fullCOVEv2.jpg">
<div id="apDiv1">
<!--flash content is in this div-->
</div>
<div id="apDiv3"><img src="light test 2x.png" alt="" width="900" height="639" /></div>
</body>
</html>
.....everything is fine as I have set the margins using px.....
In the sample code provided, you have not set margins at all - you have created the effect that you want at one resolution setting by positioning the elements. There are no margin declarations to be found.
For example:
#apDiv1 {
position:absolute;
left:427px;top:293px;
This will be positioned at those exact coordinates regardless of browser resolution. It will only center at one specific resolution. I would use something like:
#apDiv1 {
margin: 293px auto 0 auto;
}
That is quite possibly all that is required.
Do you really need the z-index: and visibility: declarations? Maybe. Quite possibly not.
.............................
.....just an image 1679 width and 1200 height (don't know if this causes an issue with different resolutions or not)
Yes it will be an issue.
1) You are not tiling a small file as would be typical for a body background but using a single image. How large is the file? Is it worth it?
2) Depending upon the image, it may need to be positioned to center as well.
3) I would remove this from inline and embed in the head.
html, body {
background: url(wallpaper fullCOVEv2.jpg) no-repeat center top; margin: 0; padding: 0;
}
.............................
Based on the description of what you want, and the markup, I would say that the approach to positioning the elements is fatally flawed as a result of relying on position: absolute; in this way and would use margin: instead.
The first is a trick with negative margins and 50% positioning.
e.g.:
#apDiv1 {
position:absolute;
width:800px;
height:500px;
top: 50%
margin-top: -250px; /* half the height */
left: 50%
margin-left: -400px; /* half the width */
}
A second way is to use auto margins:
e.g.:
#apDiv1 {
position:absolute;
width:800px;
height:500px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
Remember that an absolutely positioned element uses the closest parent that has "position" as reference for top/left/right/bottom. If there is no such parent it will use the viewport instead.
To intentionally give an element "position" all you need is "poisition:relative" on it.
#apDiv1 {
position:absolute;
width:800px;
height:500px;
top: 293px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#apDiv3 {
position:absolute;
width:900px;
height:639px;
top: 120px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
Because I needed the Div3 to be centered but slightly higher up than div 1.
Can I add another quick question along the same sort of lines (positioning divs). I want to put a Home, About Us and Contact button at the top of the page but again I have used absolute positioning and just put in px numbers as below
#apDiv14 {
position:absolute;
left:74px;
top:78px;
width:65px;
height:22px;
z-index:2;
}
#apDiv15 {
position:absolute;
left:150px;
top:78px;
width:99px;
height:22px;
z-index:2;
}
#apDiv16 {
position:absolute;
left:270px;
top:78px;
width:83px;
height:22px;
z-index:2;
}
These are positioned so they are over the top of a certain part of the background but I now think that this won't be the case in all resolutions. It is hard to explain without someone seeing a page.
