Jump to content


Photo

bye bye tables?


  • Please log in to reply
5 replies to this topic

#1 michaellunsford

michaellunsford
  • Members
  • PipPipPip
  • Advanced Member
  • 1,023 posts
  • LocationLouisiana, USA

Posted 23 September 2006 - 04:19 AM

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.
<!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>


#2 snorkler

snorkler
  • New Members
  • Pip
  • Newbie
  • 9 posts

Posted 23 September 2006 - 04:43 AM

In the top div, try margin: 0 auto;

I have this in mine to centre it and it works perfectly.

#3 michaellunsford

michaellunsford
  • Members
  • PipPipPip
  • Advanced Member
  • 1,023 posts
  • LocationLouisiana, USA

Posted 23 September 2006 - 02:48 PM

nope. 0 auto is just like auto. top left corner.

#4 Accurax

Accurax
  • Members
  • PipPipPip
  • Advanced Member
  • 246 posts

Posted 13 October 2006 - 09:53 AM

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 :: http://cbmgroup.co.uk 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:

<div id="divCenter"> ......content.......</div>

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:

<link href="../pathtofile/yourfilename.css" rel="stylesheet" type="text/css" />

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.



#5 AndyB

AndyB
  • Staff Alumni
  • Advanced Member
  • 5,465 posts
  • LocationToronto

Posted 13 October 2006 - 11:05 AM

Firs of all i would advise against any program that "automatically" converts your table based layout to CSS


Excellent advice!

And avoid using position:absolute (or position anything) in your coding. Learn about 'float' instead.
Legend has it that reading the manual never killed anyone.
My site

#6 Accurax

Accurax
  • Members
  • PipPipPip
  • Advanced Member
  • 246 posts

Posted 13 October 2006 - 03:43 PM

For help with CSS syntax and commands visit http://meyerweb.com/...es/css2ref.html . I just came accross it about 15 minuites ago... its CSS2 and seems very comprehensive.

Just sharing the love






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users