Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Please help with a (probably) easy to fix problem

    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
    Attached Thumbnails Attached Thumbnails Please help with a (probably) easy to fix problem-picture-2.jpg  
    Last edited by WA; 06-28-2012 at 09:46 PM.

  • #2
    New Coder
    Join Date
    Jun 2007
    Posts
    79
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •