Forum Moderators: not2easy
<style type="text/css">
div{width:500px;margin:auto;}
<!--
#apDiv1 {
position:absolute;
left:217px;
top:199px;
width:517px;
height:265px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:10px;
top:0px;
width:200px;
height:200px;
z-index:5;
}
#apDiv3 {
position: absolute;
left:294px;
top:118px;
width:1px;
height:1px;
z-index:6;
}
#apDiv4 {
position:absolute;
left:250px;
top:50px;
width:125px;
height:75px;
z-index:6;
}
#apDiv5 {
position:absolute;
left:500px;
top:50px;
width:125px;
height:75px;
z-index:7;
}
#apDiv6 {
position:absolute;
left:748px;
top:82px;
width:1px;
height:2px;
z-index:8;
}
#apDiv7 {
position:absolute;
left:750px;
top:50px;
width:150px;
height:75px;
z-index:8;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>
<body>
<div id="apDiv1">
<p><a href="lobster.html" border=0><img src="icons/lobstericon.jpg" alt="lobster" width="100" height="100" border="0" /></a> <a href="polarbear.html"><img src="icons/polarbearicon.jpg" alt="polar bear" width="100" height="100" border="0" /></a> <img src="icons/catcollageicon.jpg" alt="cat" width="100" height="100" /> <img src="icons/inkyicon.jpg" alt="ink" width="100" height="100" /> <img src="icons/socksicon.jpg" alt="socks" width="100" height="100" /><img src="icons/oddgodicon.jpg" alt="odd god" width="100" height="100" /> <img src="icons/catsicon.jpg" alt="cats" width="100" height="100" /> <img src="icons/doeicon.jpg" alt="doe" width="100" height="100" /> <img src="icons/mouseicon.jpg" alt="mouse" width="100" height="100" /> <img src="icons/thanksicon.jpg" alt="thanks" width="100" height="100" /></p>
</div>
<div id="apDiv2"><img src="" alt="" name="octopus" width="200" height="200" id="octopus" /></div>
<div id="apDiv4"><img src="" alt="" name="about" width="200" height="75" id="about" /></div>
<div id="apDiv5"><img src="" alt="" name="blog" width="200" height="75" id="blog" /></div>
<div id="apDiv7"><img src="" alt="" name="contact" width="200" height="75" id="contact" /></div>
</body>
</html>
I have several divs that contain images that link to other parts of my site I want all the divs to be centered and resize to fit the browser. So I'm pretty sure their positions need to be absolute right? any thoughts on how I would do that? thanks!
While I'm not against absolute positioning, I'm not sure that absolute positioning is needed. to do centering or have content adapt to viewport size
To center a block element, there are a number of ways, the easiest is to give it a width and apply "margin: 0 auto" on it.
To have content adapt to the width of the viewport, the easiest is to use sme margins and a minimal and maximal width to keep it usage.
e.g.
body {
margin: 0 100px;
min-width: 300px;
max-width: 1000px;
}
