Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
-
I think I've looked at least 100 forums and I can not figure it out. I don't know much about web design so maybe I'm just doing this the completely wrong way. 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!
<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> -
-
CommentAuthorkari.patila
- CommentTimeFeb 6th 2009
You probably should be using floats instead of absolutely positioning the elements. Could you draw a quick mockup of how you'd like to arrange the divs? You can email the mockup to me if you can't upload it elsewhere. -
-
Hi,
I've been using this method for making absolut centered divs, maybe this is what you need:
BODY { text-align:center; }
div.CenteredContent
{
background:#CCCCCC;
height:500px;
left:50%;
margin:-250px 0px 0px -300px;
overflow:hidden;
padding:0px;
position:absolute;
text-align:left;
top:50%;
width:600px;
}
Works in major browsers, OS's and monitor resolution. You can resize the browser window as many sizes you like: the div is always centered!
Hope this help you
Cheers!
,-·*’°§♥ Aleare ♥§°’*·-,
1 to 3 of 3