Please help with a (probably) easy to fix problem

stefstefstef · 06-28-2012, 08:02 PM

I'm trying to build my first site, I'm not great with coding (obviously lol)

What I'm trying to do is create a main div which will be in the centre of the page. (no matter how the browser is resized)

Then inside that I want to place some ap divs, positioned in relation to the main div.

I've attached a photo of how I want it to look.

And here's my code so far:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Stef Greenhill Portfolio</title>
<style type="text/css">
<!--
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #9D9EA1;
}
body {
	background-color: #E8E8E8;
	margin-top: 10px;
	margin-bottom: 10px;
}
a {
	font-size: 12px;
	color: #BBB;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #BBB;
}
a:hover {
	text-decoration: none;
	color: #BBB;
}
a:active {
	text-decoration: none;
	color: #BBB;
}
h1,h2,h3,h4,h5,h6 {
	font-family: Arial Black, Gadget, sans-serif;
}
h1 {
	font-size: 14px;
	color: #9D9EA1;
}
#apDiv1 {
	position:absolute;
	left:318px;
	top:64px;
	width:580px;
	height:367px;
	z-index:1;
}
.imgbox2 {
	float: left;
	height: 270px;
	width: 236px;
}
.imgbox3 {
	height: 270px;
	width: 236px;
	float: left;
}
.IMGboxholder {
	height: 270px;
	width: 708px;
	position: absolute;
	left: 166px;
	top: 194px;
}
.main_container {
	height: 700px;
	width: 957px;
}
.imgbox1 {
	height: 270px;
	width: 236px;
	float: left;
}
-->
</style>
<link href="css.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv2 {
	position:absolute;
	left:111px;
	top:46px;
	width:487px;
	height:96px;
	z-index:1;
}
#apDiv3 {
	position:absolute;
	left:703px;
	top:44px;
	width:164px;
	height:24px;
	z-index:2;
}
#apDiv4 {
	position:absolute;
	left:102px;
	top:156px;
	width:748px;
	height:139px;
	z-index:3;
}
-->
</style>
</head>

<body>
<center> 
<div id="body">
<div id="main_container"><img src="fmineNM1_03.jpg" width="957px" height="235px" />
  <div class="IMGboxholder">
    <div class="imgbox1">Content for  class "imgbox1" Goes Here
      <div class="imgbox2">Content for  class "imgbox2" Goes Here</div>
    </div>
  </div>
<center> 
</body>
</html>

Thanks for any help, I've been working on this for hours, and I'm sure someone can explain how to do this easily (It's probably something really simple I don't know about)

Thanks again

Stef

Muckiem14 · 06-28-2012, 08:40 PM

You don't need to absolute position to achieve this. In fact, absolute positioning may work against you since you want things to stay centered at all browser widths. Just add margin: 0 auto; to your main container to center it on the screen.

For the three images/text snippets I would create 3 divs(a div for each). Give each div a class of something like "feature". Then in your css style .feature to float left. You could give .feature a width but if the content inside will always be the same size, and all 3 add up to be less than your main container, no need for a width.

I hope that helps. It's easier than it seems.

stefstefstef · 06-28-2012, 11:54 PM

Thanks for replying so quickly!! You have a good point there, I don't need to absolutely position most elements, so I'm not going to!

But there's still one or two I may need to - somehow I think I figured what I was doing wrong. I wanted relative positioning. But I kept relative positioning the image containers themselves, rather than the main container.

It's a weird way of thinking - after using graphic design programs for so long!