michaellunsford Posted September 23, 2006 Share Posted September 23, 2006 I've heard that you can use CSS instead of tables, so I try exporting CSS from imageready. Now I get all these little independent DIVs that are all position:absolute; and the page is stuck in the upper left-hand corner.I like to think I'm pretty good at this stuff -- but getting rid of table is overwhelming me. So, how do I convert all these independent DIVs to center properly in the document??This is more or less a "theory" question -- but I provide the following example just in case.[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>index</title><style type="text/css">html, body { height:101%; width:100%; background-color:#dcc998; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px;}</style><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body><!-- ImageReady Slices (index.psd) --><div style="width:700px; height:561px; margin:auto;"><div style="position:absolute; left:0px; top:0px; width:13px; height:15px;"> <img src="images/index_01.jpg" width="13" height="15" alt=""> </div> <div style="position:absolute; left:13px; top:0px; width:675px; height:15px;"> <img src="images/index_02.jpg" width="675" height="15" alt=""> </div> <div style="position:absolute; left:688px; top:0px; width:12px; height:15px;"> <img src="images/index_03.jpg" width="12" height="15" alt=""> </div> <div style="position:absolute; left:0px; top:15px; width:700px; height:427px;"> <img src="images/index_04.jpg" width="700" height="427" alt=""> </div> <div style="position:absolute; left:0px; top:442px; width:700px; height:102px;"> <img src="images/index_05.jpg" width="700" height="102" alt=""> </div> <div style="position:absolute; left:0px; top:544px; width:13px; height:17px;"> <img src="images/index_06.jpg" width="13" height="17" alt=""> </div> <div style="position:absolute; left:13px; top:544px; width:675px; height:17px;"> <img src="images/index_07.jpg" width="675" height="17" alt=""> </div> <div style="position:absolute; left:688px; top:544px; width:12px; height:17px;"> <img src="images/index_08.jpg" width="12" height="17" alt=""> </div></div><!-- End ImageReady Slices --></body></html>[/code] Quote Link to comment Share on other sites More sharing options...
snorkler Posted September 23, 2006 Share Posted September 23, 2006 In the top div, try margin: 0 auto;I have this in mine to centre it and it works perfectly. Quote Link to comment Share on other sites More sharing options...
michaellunsford Posted September 23, 2006 Author Share Posted September 23, 2006 nope. 0 auto is just like auto. top left corner. Quote Link to comment Share on other sites More sharing options...
Accurax Posted October 13, 2006 Share Posted October 13, 2006 Whilst I am not a CSS guru (yet) by any stretch of the immagination .... I do have a fair grasp of the "theory" behind it. And i think this may be what your looking for.I apoligise in advance for any errors, and would be gratefuull for any neccersarry corrections :)Firs of all i would advise against any program that "automatically" converts your table based layout to CSS..... Cascading styles sheets are very much a personal thing, and, in order to format them correctly you need to name the div tags.Think of the <div> tag as a container, in exactly the same way as you tables were.A better way of explaining this may be via a practical example .... may i point tyou towards my own site :: [url=http://cbmgroup.co.uk]http://cbmgroup.co.uk[/url] This website is my current project, and whilst not quite finished yet, it is a 100% CSS based layout ..... Take a look at my html and you will see that the different segments are contained within div tags that take the form:[code]<div id="divCenter"> ......content.......</div>[/code]And every div tag is in itself contained by a #divwrapper tag, that starts just after my <body>.now, this layout on its own will result in an extreemly messy, rather funny looking webpage, that is almost certainly exactly what you dont want.You need to style these tage... tell them how to behave.... this is done by using an external css file.... you can use embedded css aswell... but it kind of defeats the purpose, lets assume youve created your css file and are wondering how you make you web page "know" that it should look to this file for its layout instructions.Inserting the following bit of code above your body tag will acheive this:[code]<link href="../pathtofile/yourfilename.css" rel="stylesheet" type="text/css" />[/code]I hope this helped a little............ may i suggest you visit w3schools for any further instruction on actually writing the css itself ... its quite simple, and if you dont allready understand it, i should imagine an afternoon will get enough understanding for you to start formatting your site. Quote Link to comment Share on other sites More sharing options...
AndyB Posted October 13, 2006 Share Posted October 13, 2006 [quote author=Accurax link=topic=109155.msg451288#msg451288 date=1160733203]Firs of all i would advise against any program that "automatically" converts your table based layout to CSS[/quote]Excellent advice!And avoid using position:absolute (or position anything) in your coding. Learn about 'float' instead. Quote Link to comment Share on other sites More sharing options...
Accurax Posted October 13, 2006 Share Posted October 13, 2006 For help with CSS syntax and commands visit [url=http://meyerweb.com/eric/css/references/css2ref.html]http://meyerweb.com/eric/css/references/css2ref.html[/url] . I just came accross it about 15 minuites ago... its CSS2 and seems very comprehensive.Just sharing the love 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.