PDA

View Full Version : Getting Divs to line up corectly over tables


oni3350
02-24-2009, 08:24 AM
Hey guys im new here and i just read the "stuff you should know" thread and learned why i shouldn't be using tables.

Well im new to Dreamweaver and because at first i couldn't figure out how to work tables i ended up creating a whole website with just AP Divs that i drew, now first off is this CSS and what and HOW i should be doing things or is drawing a whole bunch of Divs and lining them up by hand a bad thing?

Anyway ive recreated my whole website in PS and then realized that i can just copy and paste the html code i get when saving for web and then im all done :) but its using tables, now ive got some text that i need to place over my table background pictures. To do this ive just gone a drawn a AP div, but in firefox and explorer the positioning of the div is WAY off from where it is in the design and live view window of Dreamweaver.

So how can i fix this? How SHOULD i be working with DIV or CSS instead of the way ive just mentioned?

And for now i have to position the Div in Dreamweaver way off for it to position correctly in Firefox and Explorer.....just hope it stays in the right spot for other browsers.

oni3350
02-24-2009, 08:42 AM
Ok i was doing a little bit of reading on the web and read that you can convert tables to Divs using dreamweaver cs4 which i have.

So i converted my tables to Divs, the unchecked the box that said "Prevent AP Element Overlaps" so i could draw my DIV over the top and its lined up perfectly! :) (at first i left all the boxes checked and found that i couldn't draw a div)

Ok so is this the way to do it? Am i learning? lol That seems pretty easy putting it in dreamweaver as a table, straight out of PS and then converting it to divs. Or is there some other way, a way i should be working with divs in the very first place?

Thanks
Andre

edbr
02-24-2009, 08:54 AM
yes you should . you have found a not so good part of DW, i beleive as i never used it. Post your code and we can help you sort this out

oni3350
02-24-2009, 09:00 AM
ok well im just testing and messing around with this at the moment, but this is what the code looks like after i paste the html code from Photo shop into dreamweaver and then convert it to divs.....

And sorry but what were you saying "yes you should" too? what should i be doing? Learning a new way to do things other than the way i have just done it?

Also i have just realized that when i zoom in and in my web browser the page kicks to the left, it only happens when i work with divs, how can i fix that?


CODE::
<html>
<head>
<title>Newheading</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-image: url(Exclusive%20XXX%20Offers/Exclusive%20XXX%20Offers/MY%20SITE/stripe_45f8cb3599938272753a09937f5b8da8.png);
}
-->
</style></head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<!-- End Save for Web Slices -->
<div id="apDiv1" style="position: absolute; left: 51px; top: 0px; width: 305px; height: 266px; z-index: 1"><img src="images/Newheading_01.jpg" width="305" height="266" alt="cheap porn"></div>
<div id="apDiv2" style="position: absolute; left: 356px; top: 0px; width: 337px; height: 266px; z-index: 2"><img src="images/Newheading_02.jpg" width="337" height="266" alt="cheap porn"></div>
<div id="apDiv3" style="position: absolute; left: 693px; top: 0px; width: 258px; height: 266px; z-index: 3"><img src="images/Newheading_03.jpg" width="258" height="266" alt="cheap porn"></div>
<div id="apDiv4" style="position: absolute; left: 51px; top: 266px; width: 305px; height: 284px; z-index: 4"><img src="images/Newheading_04.jpg" width="305" height="284" alt="cheap porn"></div>
<div id="apDiv5" style="position: absolute; left: 356px; top: 266px; width: 337px; height: 284px; z-index: 5"><img src="images/Newheading_05.gif" width="337" height="284" alt="cheap porn"></div>
<div id="apDiv6" style="position: absolute; left: 693px; top: 266px; width: 258px; height: 284px; z-index: 6"><img src="images/Newheading_06.jpg" width="258" height="284" alt="cheap porn"></div>
<div id="apDiv7" style="position: absolute; left: 51px; top: 550px; width: 900px; height: 88px; z-index: 7"><img src="images/Newheading_07.jpg" width="900" height="88" alt="cheap porn"></div>
<div id="apDiv8" style="position: absolute; left: 51px; top: 638px; width: 900px; height: 105px; z-index: 8"><img src="images/Newheading_08.jpg" width="900" height="105" alt="cheap porn"></div>
<div id="apDiv9" style="position: absolute; left: 51px; top: 743px; width: 900px; height: 32px; z-index: 9"><img src="images/Newheading_09.gif" width="900" height="32" alt="cheap porn"></div>
<div id="apDiv10" style="position: absolute; left: 51px; top: 775px; width: 58px; height: 334px; z-index: 10"><img src="images/Newheading_10.gif" width="58" height="334" alt="cheap porn"></div>
<div id="apDiv11" style="position: absolute; left: 109px; top: 775px; width: 231px; height: 334px; z-index: 11"><img src="images/Newheading_11.jpg" width="231" height="334" alt="cheap porn"></div>
<div id="apDiv12" style="position: absolute; left: 340px; top: 775px; width: 320px; height: 334px; z-index: 12"><img src="images/Newheading_12.gif" width="320" height="334" alt="cheap porn"></div>
<div id="apDiv13" style="position: absolute; left: 660px; top: 775px; width: 232px; height: 334px; z-index: 13"><img src="images/Newheading_13.jpg" width="232" height="334" alt="cheap porn"></div>
<div id="apDiv14" style="position: absolute; left: 892px; top: 775px; width: 59px; height: 334px; z-index: 14"><img src="images/Newheading_14.gif" width="59" height="334" alt="cheap porn"></div>
<div id="apDiv15" style="position: absolute; left: 51px; top: 1109px; width: 289px; height: 468px; z-index: 15"><img src="images/Newheading_15.jpg" width="289" height="468" alt="cheap porn"></div>
<div id="apDiv16" style="position: absolute; left: 340px; top: 1109px; width: 320px; height: 468px; z-index: 16"><img src="images/Newheading_16.jpg" width="320" height="468" alt="cheap porn"></div>
<div id="apDiv17" style="position: absolute; left: 660px; top: 1109px; width: 291px; height: 468px; z-index: 17"><img src="images/Newheading_17.jpg" width="291" height="468" alt="cheap porn"></div>
<div id="apDiv18" style="position: absolute; left: 51px; top: 1577px; width: 900px; height: 113px; z-index: 18"><img src="images/Newheading_18.jpg" width="900" height="113" alt="cheap porn"></div>
<div id="apDiv19" style="position: absolute; left: 51px; top: 1690px; width: 900px; height: 430px; z-index: 19"><img src="images/Newheading_19.gif" width="900" height="430" alt="cheap porn"></div>
<div id="apDiv20" style="position: absolute; left: 51px; top: 2120px; width: 380px; height: 357px; z-index: 20; vertical-align: middle"><img src="images/Newheading_20.jpg" width="380" height="357" alt="cheap porn"></div>
<div id="apDiv21" style="position: absolute; left: 431px; top: 2120px; width: 520px; height: 300px; z-index: 21"><img src="images/Newheading_21.jpg" width="520" height="300" alt="cheap porn"></div>
<div id="apDiv22" style="position: absolute; left: 431px; top: 2420px; width: 520px; height: 341px; z-index: 22; vertical-align: middle"><img src="images/Newheading_22.gif" width="520" height="341" alt="cheap porn"></div>
<div id="apDiv23" style="position: absolute; left: 51px; top: 2477px; width: 380px; height: 196px; z-index: 23"><a href="nnnnnnnnnnn target="_blank"><img src="images/Newheading_23.jpg" width="380" height="196" border="0" alt="cheap porn"></a></div>
<div id="apDiv24" style="position: absolute; left: 51px; top: 2673px; width: 32px; height: 768px; z-index: 24; vertical-align: middle"><img src="images/Newheading_24.gif" width="32" height="768" alt="cheap porn"></div>
<div id="apDiv25" style="position: absolute; left: 83px; top: 2673px; width: 172px; height: 58px; z-index: 25"><img src="images/Newheading_25.jpg" width="172" height="58" alt="cheap porn"></div>
<div id="apDiv26" style="position: absolute; left: 255px; top: 2673px; width: 176px; height: 58px; z-index: 26"><img src="images/Newheading_26.jpg" width="176" height="58" alt="cheap porn"></div>
<div id="apDiv27" style="position: absolute; left: 83px; top: 2731px; width: 348px; height: 88px; z-index: 27; vertical-align: middle"><img src="images/Newheading_27.gif" width="348" height="88" alt="cheap porn"></div>
<div id="apDiv28" style="position: absolute; left: 431px; top: 2761px; width: 520px; height: 351px; z-index: 28; vertical-align: middle"><img src="images/Newheading_28.gif" width="520" height="351" alt="cheap porn"></div>
<div id="apDiv29" style="position: absolute; left: 83px; top: 2819px; width: 348px; height: 206px; z-index: 29"><a href="nnnnnnnnnnnnnnnn" target="_blank"><img src="images/Newheading_29.jpg" width="348" height="206" border="0" alt="cheap porn"></a></div>
<div id="apDiv30" style="position: absolute; left: 83px; top: 3025px; width: 172px; height: 57px; z-index: 30"><img src="images/TEST_30.jpg" width="172" height="57" alt=""></div>
<div id="apDiv31" style="position: absolute; left: 255px; top: 3025px; width: 176px; height: 57px; z-index: 31"><img src="images/TEST_31.jpg" width="176" height="57" alt=""></div>
<div id="apDiv32" style="position: absolute; left: 83px; top: 3082px; width: 348px; height: 89px; z-index: 32; vertical-align: middle"><img src="images/Newheading_32.gif" width="348" height="89" alt="cheap porn"></div>
<div id="apDiv33" style="position: absolute; left: 431px; top: 3112px; width: 520px; height: 354px; z-index: 33; vertical-align: middle"><img src="images/Newheading_33.gif" width="520" height="354" alt="cheap porn"></div>
<div id="apDiv34" style="position: absolute; left: 83px; top: 3171px; width: 348px; height: 209px; z-index: 34"><a href=nnnnnnnnnnnnnnnnnnn" target="_blank"><img src="images/Newheading_34.jpg" width="348" height="209" border="0" alt="cheap porn"></a></div>
<div id="apDiv35" style="position: absolute; left: 83px; top: 3380px; width: 172px; height: 58px; z-index: 35"><img src="images/TEST_35.jpg" width="172" height="58" alt=""></div>
<div id="apDiv36" style="position: absolute; left: 255px; top: 3380px; width: 176px; height: 58px; z-index: 36"><img src="images/TEST_36.jpg" width="176" height="58" alt=""></div>
<div id="apDiv37" style="position: absolute; left: 83px; top: 3438px; width: 348px; height: 94px; z-index: 37; vertical-align: middle"><img src="images/Newheading_37.gif" width="348" height="94" alt="cheap porn"></div>
<div id="apDiv38" style="position: absolute; left: 51px; top: 3441px; width: 32px; height: 1060px; z-index: 38; vertical-align: middle"><img src="images/Newheading_38.gif" width="32" height="1060" alt="cheap porn"></div>
<div id="apDiv39" style="position: absolute; left: 431px; top: 3466px; width: 520px; height: 351px; z-index: 39; vertical-align: middle"><img src="images/Newheading_39.gif" width="520" height="351" alt="cheap porn"></div>
<div id="apDiv40" style="position: absolute; left: 83px; top: 3532px; width: 348px; height: 196px; z-index: 40"><a href="nnnnnnnnnnnnnnn" target="_blank"><img src="images/Newheading_40.jpg" width="348" height="196" border="0" alt="cheap porn"></a></div>
<div id="apDiv41" style="position: absolute; left: 83px; top: 3728px; width: 172px; height: 58px; z-index: 41"><img src="images/TEST_41.jpg" width="172" height="58" alt=""></div>
<div id="apDiv42" style="position: absolute; left: 255px; top: 3728px; width: 176px; height: 58px; z-index: 42"><img src="images/TEST_42.jpg" width="176" height="58" alt=""></div>
<div id="apDiv43" style="position: absolute; left: 83px; top: 3786px; width: 348px; height: 102px; z-index: 43; vertical-align: middle"><img src="images/Newheading_43.gif" width="348" height="102" alt="cheap porn"></div>
<div id="apDiv44" style="position: absolute; left: 431px; top: 3817px; width: 520px; height: 358px; z-index: 44; vertical-align: middle"><img src="images/Newheading_44.gif" width="520" height="358" alt="cheap porn"></div>
<div id="apDiv45" style="position: absolute; left: 83px; top: 3888px; width: 348px; height: 196px; z-index: 45"><a href="nnnnnnnnnnnnnnn" target="_blank"><img src="images/Newheading_45.jpg" width="348" height="196" border="0" alt="cheap porn"></a></div>
<div id="apDiv46" style="position: absolute; left: 83px; top: 4084px; width: 172px; height: 58px; z-index: 46"><img src="images/TEST_46.jpg" width="172" height="58" alt=""></div>
<div id="apDiv47" style="position: absolute; left: 255px; top: 4084px; width: 176px; height: 58px; z-index: 47"><img src="images/TEST_47.jpg" width="176" height="58" alt=""></div>
<div id="apDiv48" style="position: absolute; left: 83px; top: 4142px; width: 348px; height: 106px; z-index: 48; vertical-align: middle"><img src="images/Newheading_48.gif" width="348" height="106" alt="cheap porn"></div>
<div id="apDiv49" style="position: absolute; left: 431px; top: 4175px; width: 520px; height: 358px; z-index: 49; vertical-align: middle"><img src="images/Newheading_49.gif" width="520" height="358" alt="cheap porn"></div>
<div id="apDiv50" style="position: absolute; left: 83px; top: 4248px; width: 348px; height: 196px; z-index: 50"><a href="nnnnnnnnnnnnnnnn (http://in.cybererotica.com/c/p4.cgi/7000/2490056/X)" target="_blank"><img src="images/Newheading_50.jpg" width="348" height="196" border="0" alt="cheap porn"></a></div>
<div id="apDiv51" style="position: absolute; left: 83px; top: 4444px; width: 172px; height: 57px; z-index: 51"><img src="images/TEST_51.jpg" width="172" height="57" alt=""></div>
<div id="apDiv52" style="position: absolute; left: 255px; top: 4444px; width: 176px; height: 57px; z-index: 52"><img src="images/TEST_52.jpg" width="176" height="57" alt=""></div>
<div id="apDiv53" style="position: absolute; left: 0px; top: 4501px; width: 380px; height: 32px; z-index: 53"><img src="images/Newheading_53.gif" width="380" height="32" alt="cheap porn"></div>
<div id="apDiv54" style="position: absolute; left: 51px; top: 4533px; width: 380px; height: 346px; z-index: 54"><img src="images/Newheading_54.jpg" width="380" height="346" alt="cheap porn"></div>
<div id="apDiv55" style="position: absolute; left: 431px; top: 4533px; width: 520px; height: 346px; z-index: 55"><img src="images/Newheading_55.jpg" width="520" height="346" alt="cheap porn"></div>
<div id="apDiv56" style="position: absolute; left: 51px; top: 4879px; width: 380px; height: 279px; z-index: 56"><img src="images/Newheading_56.jpg" width="380" height="279" alt="cheap porn"></div>
<div id="apDiv57" style="position: absolute; left: 431px; top: 4879px; width: 520px; height: 279px; z-index: 57"><img src="images/Newheading_57.jpg" width="520" height="279" alt="cheap porn"></div>
<div id="apDiv58" style="position: absolute; left: 51px; top: 5158px; width: 900px; height: 564px; z-index: 58"><img src="images/Newheading_58.gif" width="900" height="564" alt="cheap porn"></div>
<div id="apDiv59" style="position: absolute; left: 51px; top: 5722px; width: 900px; height: 160px; z-index: 59"><img src="images/Newheading_59.jpg" width="900" height="160" alt="cheap porn"></div>
<div id="apDiv60" style="position: absolute; left: 51px; top: 5882px; width: 900px; height: 281px; z-index: 60"><img src="images/Newheading_60.gif" width="900" height="281" alt="cheap porn"></div>
<div id="apDiv61" style="position: absolute; left: 51px; top: 6163px; width: 191px; height: 251px; z-index: 61"><img src="images/Newheading_61.gif" width="191" height="251" alt="cheap porn"></div>
<div id="apDiv62" style="position: absolute; left: 242px; top: 6163px; width: 511px; height: 251px; z-index: 62"><a href="nnnnnnnnnnnnnnnnnnn (http://in.cesexpass.com/c/p4.cgi/401/2490056/X)" target="_blank"><img src="images/Newheading_62.jpg" width="511" height="251" border="0" alt="cheap porn"></a></div>
<div id="apDiv63" style="position: absolute; left: 753px; top: 6163px; width: 198px; height: 251px; z-index: 63"><img src="images/Newheading_61-64.gif" width="198" height="251" alt="cheap porn"></div>
<div id="apDiv64" style="position: absolute; left: 51px; top: 6414px; width: 225px; height: 221px; z-index: 64; vertical-align: middle"><img src="images/Newheading_64.gif" width="225" height="221" alt="cheap porn"></div>
<div id="apDiv65" style="position: absolute; left: 276px; top: 6414px; width: 220px; height: 68px; z-index: 65"><img src="images/TEST_65.jpg" width="220" height="68" alt=""></div>
<div id="apDiv66" style="position: absolute; left: 496px; top: 6414px; width: 216px; height: 68px; z-index: 66"><img src="images/TEST_66.jpg" width="216" height="68" alt=""></div>
<div id="apDiv67" style="position: absolute; left: 712px; top: 6414px; width: 239px; height: 221px; z-index: 67; vertical-align: middle"><img src="images/Newheading_67.gif" width="239" height="221" alt="cheap porn"></div>
<div id="apDiv68" style="position: absolute; left: 276px; top: 6482px; width: 436px; height: 153px; z-index: 68"><img src="images/Newheading_68.gif" width="436" height="153" alt="cheap porn"></div>
<div id="apDiv69" style="position: absolute; left: 0px; top: 0px; width: 1px; height: 6636px; z-index: 69"><!-- Save for Web Slices (Newheading.psd) --></div>

</body>
</html>

edbr
02-24-2009, 09:18 AM
your problems are from working with absolute divs its difficult to see how you want your layout.
it needs remade setting out a layout you want bbest with reative divs in a page wrapper. then adding your images either into the dives or as background images, there are some tuts and a very basic page layout in my diferent links sig. I would suggest making a blank layout first then think about your images

oni3350
02-24-2009, 09:31 AM
ok what ive done is designed the page layout with PS and then sliced it up, then i need to line the images back up inside DW. Ive done this by copying and pasteing the html code i get from PS, and in the past i actually just drew out Divs and lined it all up myself, which still had the kicking to the left issue.....

So ive got my pictures and then i can come along and draw divs to enter text over the top...... now im using the AP Divs in DW..... are these the Absolute Divs you mentioned...

Corect me if im wrong, but are AP divs, divs that will stay exactly in their position regardless of different visitor resolution? So thefore on a widescreen monitor my page will really kick to the left.

What are the divs i need to be working with and where are the located in DW cs4?

And also what is a page wrapper?

edbr
02-24-2009, 09:47 AM
yes you are right e absolute images but if you want to have your images from 0 on the left for ie it will stay there regardless of screen res or screen width, although screen res is the important one. a wrapper is a div that contains your page so to speak if you place absolute divs in it , they will reference from the left of the wraper div rather than the screen.
In DW sadly it uses Apdivs as default but you can change and add attributes in the css/design panel.
again i suggest you coppy the page design i suggested in the sig link. play around with it and im sure it will help you understand it

oni3350
02-24-2009, 09:50 AM
ok im go have a look at that.

Thanks for your help :)