TGWSE_GY Posted November 19, 2010 Share Posted November 19, 2010 Ok so for the first time I am attempting Absolute Positioning and I am finding it somewhat confusing. I have http://visualrealityink.com/clients/prostaffers.com/abs/ that I have been working on, and I have the first 3 sections(the navi, header, and color) areas displaying fine. However when you get to <div id="subcolormastercontainer"></div> things go a little strange. The three divs in "subcolormatercontainer" are displaying towards the top right below the navi behind the header image. Could someone please see if they could point me in the right direction to where my error may be? I have been working on this for two days LOL Thanks in adavance index.html <!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>Pro Staffers, LLC Employment Agency Lancaster SC 29720</title> <link rel="stylesheet" type="text/css" href="css/simple.css" /> <script language="javascript" type="text/javascript"> var newwindow; function poptastic(url) { newwindow=window.open(url,'name','height=600,width=400'); if (window.focus) {newwindow.focus()} } </script> </head> <body> <div id="sitecontainer"> <div id="navi1"></div> <div id="navi2"><a href="index.html">HOME</a></div> <div id="navi3"><a href="about.html">ABOUT</a></div> <div id="navi4"><a href="">DIRECTIONS</a></div> <div id="navi5"><a href="mailto:dplane@prostaffersllc.com">CONTACT</a></div> <div id="navi6"><a href="">APPLY</a></div> <div id="mast"> </div> <div id="colorcontainer"> <div id="color1"> d </div> <div id="color2"> d </div> <div id="color3"> d </div> </div> <div id="subcolormastcontainer"> <div id="subcolormasthead1"> d </div> <div id="subcolormasthead2"> d </div> <div id="subcolormasthead3"> d </div> </div> <div id="subcolorcontentcontainer"> <div id="subcolorcontent1"> </div> <div id="subcolorcontent2"> </div> <div id="subcolorcontent3"> </div> </div> <div id="footer"> </div> </div> </body> </html> simple.css /* CSS Document */ body{margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;} div#sitecontainer{width:949px; margin-left:auto; margin-right:auto; padding:0px;} div#navicontainer{height:44px;padding:0px; text-align:center; color:#FFF; line-height:40px;} a{color:#FFF;} div#navi1{height: 44px; width: 257px; background-image:url(../images/navi1.png); margin:0px; float:left; overflow:hidden; line-height:40px; text-align:center;} div#navi2{height: 44px; width: 138px; background-image:url(../images/navi2.png); margin:0px; float:left; overflow:hidden; line-height:40px; text-align:center;} div#navi3{height: 44px; width: 139px; background-image:url(../images/navi3.png); margin:0px; float:left; overflow:hidden; line-height:40px; text-align:center;} div#navi4{height: 44px; width: 138px; background-image:url(../images/navi4.png); margin:0px; float:left; overflow:hidden; line-height:40px; text-align:center;} div#navi5{height: 44px; width: 142px; background-image:url(../images/navi5.png); margin:0px; float:left; overflow:hidden; line-height:40px; text-align:center;} div#navi6{height: 44px; width: 135px; background-image:url(../images/navi6.png); margin:0px; float:left; overflow:hidden; line-height:40px; text-align:center;} div#mast{height:189px; width:949px; background:url(../images/mast.png) no-repeat; position:absolute; top:45px;} div#colorcontainer{height:150px; width:949px; position:absolute; top:234px; margin-left:auto; margin-right:auto;} div#color1{height:150px; width:316px; background-image:url(../images/green.png); display:inline; margin:0px; float:left; overflow:hidden;} div#color2{height:150px; width:316px; background-image:url(../images/orange.png); display:inline; margin:0px; float:left; overflow:hidden;} div#color3{height:150px; width:317px; background-image:url(../images/blue.png); display:inline; margin:0px; float:left; overflow:hidden;} div#subcolormastercontainer{height:47px; width:950px; top:383px; position:absolute; margin-left:auto; margin-right:auto; overflow:hidden;} div#subcolormasthead1{ height:47px; width:317px; background-image:url(../images/subcolormasthead1.png); display:inline; margin:0px; float:left; overflow:hidden;} div#subcolormasthead2{ height:47px; width:316px; background-image:url(../images/subcolormasthead2.png); display:inline; margin:0px; float:left; overflow:hidden;} div#subcolormasthead3{ height:47px; width:316px; background-image:url(../images/subcolormasthead3.png); display:inline; margin:0px; float:left; overflow:hidden;} div#subcolorcontentcontainer{} div#subcolorcontent1{} div#subcolorcontent2{} div#subcolorcontent3{} div#footer{} Quote Link to comment Share on other sites More sharing options...
haku Posted November 19, 2010 Share Posted November 19, 2010 You should avoid absolute positioning for the most part. There are times when you will need it, but until you know exactly why you should be using absolute positioning and not another method, you shouldn't use absolute positioning. Focus your time on learning how floats work. Google 'floatutorial' for a good starter. Pages these days are for the most part positioned by floating various elements. Absolute positioning just causes problems that cascade and cascade until the point that you realize the only way to do what you want is to go back and start from scratch and not use absolute positioning. Quote Link to comment Share on other sites More sharing options...
TGWSE_GY Posted November 19, 2010 Author Share Posted November 19, 2010 Haku thanks I appreciate it, thankfully this is not too difficult to undo at this point sense I am only on the first page. Thanks again Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.