Table-Less Layouts [Archive] - Web Hosting Talk

dtredwell

08-08-2006, 03:18 PM

Ok, so as most of us know, tables are NOT meant to position elements on a page. So how are we supposed to do it? -- CSS.

If you have Little or no experience with CSS, you might want to follow a few CSS tutorials and come back.

The HTML
Instead of <table>'s<tr>'s and <td>'s we now use <div>'s, and css to position them...

<!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>
<title>Look, no tables!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body id="body">
<center>
<div id="header">
</div>
<div id="navigation">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</center>
</body>
</html>

So here we have the HTML for a basic layout. Later on we can use CSS to position them.

The CSS

first you need to give them width and height properties.

.header {
width: 720px;
height: 150px;
}

Next you need to give it a position property, you can choose from static, relative, fixed, and absolute.Play around with this property, and choose which one does the job.

Left, Top, Right and Bottom
The left property is how far from the left you want the element to be.
The top property is how far from the top you want the element to be.
The right property is how far from the right you want the element to be.
The bottom property is how far from the bottom you want the element to be.

Generally you'd use the Top and Left property, or the Right and Bottom property.
All of them can use percentages.

.header {
width: 720px;
height: 150px;
position: absolute;
top: 0px;
left: 300px;
}

This would place the header div in the html code 0 px from the top, and 300px from the right, regardless of any other element its inside/formatting.

Well thats the basics of it!

AlReece45

08-09-2006, 06:26 PM

1: You shouldn't be using <center> because XHTML doesn't have a <center> tag

(excuse the doctype, board won't allow me to post links)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "...">
<html xmlns="...">
<head>
<title>Look, no tables!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body id="body">
<div id="header">
</div>
<div id="navigation">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</body>
</html>

So for those wanting to know how to center you do something like this in your stylesheet.

body {

text-align:center;

}

div {

margin: auto;

}
Note that this will center all the divs and cause the content in them to be centered. You might want to specify a specific div to center and a specific not have everything in it centered using something like:

div#header {

margin: auto;
text-align: left;

}
The "text-align: center" is because IE doesn't handle "margin: auto" correctly (by W3 Standards).

2: If you don't want your elements positioned relative to the entire page you can simply do something like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "...">
<html xmlns="...">
<head>
<title>Look, no tables!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body id="body">
<div id="container">
<div id="header">
</div>
<div id="navigation">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
And then do something like this in the stylesheet:

div#container {

position:relative;

}
And that will cause all the elements under it to position themselves relative to the container div.

dtredwell

08-11-2006, 07:40 AM

1: You shouldn't be using <center> because XHTML doesn't have a <center> tag
Notice the doctype, im pretty sure <center> was removed in strict, and is still in transitional.

dtredwell

08-11-2006, 07:58 AM

Infact, i just ran it through w3, and its valid.

$howdy$

08-11-2006, 06:47 PM

No offence bro, but I think you should edit your HTML example and provide column examples as that's the whole idea behind using the "tables".

The example only outputs in a vertical stack format without columns.

---------------------------
| Header |
---------------------------
| Navigation |
---------------------------
| Content |
| |
| |
---------------------------
| Footer |
---------------------------

My suggestions is adding a left and right div above the content div and float them appropriately. Then margin off the the content div.

AlReece45 is right about using a main wrapper/container. This is a common practice.

As far as the center tag, I'm a bit surprised it's still being used...whether valid according to the W3C or not.

AlReece45

08-12-2006, 01:30 PM

I just checked the DTD and I guess they still have it there (line 236 if your wondering). A s for a Column Example, I was just doing one a few weeks ago, here's the uh, Stylesheet:

html, body {

margin: 0px;
padding: 0px;
background: #1F1F1F;
color: white;
height: 500px;

}

div, table {

margin: 0px;
padding: 0px;
border: none;

}

div#template {

position: relative;
height: 100%;
width: 796px;
margin: 0px auto;
border-left: solid 2px #BFBFBF;
border-right: solid 2px #BFBFBF;
border-bottom: solid 1px #BFBFBF;
border-top: solid 1px #BFBFBF;
background: #171717;

}

div.spacer {

clear: both;
height: 0px;

}

div#template div#logo {

width: 796px;
height: 182px;

}

div#template div#main div#left_nav div.left {

margin: 5px 5px 10px 25px;

}

div#template div#main div#left_nav {

background: #454545;
border: 2px solid #555555;
position: absolute;
top: 182px;
left: 0px;
width: 182px;

}

div#template div#main {

background: #171717;
padding: 0px 190px 0px 190px;

}

div#template div#main div#content {

border: 2px solid #555555;
background: #777777;
width: 417px;
position: absolute;
top: 182px;
right: 182px;
left: 182px;
margin: 5px 5px 5px 5px;

}

div#template div#main div#bottom_nav {

border: 2px solid #555555;
background: #333333;
text-align: center;
width: 410px;
position: absolute;
right: 182px;
left: 182px;
bottom: 5px;
margin: 5px 7px 5px 9px;

}

div#template div#main div#right_nav {

background: #454545;
border: 2px solid #555555;
position: absolute;
top: 182px;
right: 0px;
width: 183px;

}

div#template div#main div#right_nav div.right {

margin: 5px 30px 5px 5px;
}

div#template div#footer {

position: absolute;
left: 0px;
bottom: -10px;
width: 796px;
height: 10px;
clear: both;

}

and the 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=iso-8859-1" />

<title>Two Colums</title>
<link rel="stylesheet" href="template.css" type="text/css" />

</head>

<body>

<div id="template">

<div id="logo"></div>

<div id="main">

<div id="left_nav">

<div class="left">Left Navigation</div>

</div>

<div id="content">Content</div>

<div id="right_nav">

<div class="right">Right Navigation</div>

</div>

<div id="bottom_nav">Bottom Navigation</div>

</div>

<div id="footer"></div>

</div>

</body>

</html>

This template is aligned at the top, has two columns, a set width, a set height expandable to content, bottom navigation top logo and centered content.

This was original designed for use with images, so there's actually supposed to be a logo on top. Tested in Firefox 1.5.0.6, Firefox 2.0b1, Internet Explorer 6, Opera 9.00.

---------------------------------
| Logo |
---------------------------------
| Left | Content | Right |
| | | |
| | | |
| | | |
| | | |
| |----------------| |
| | Bottom | |
----------------------------------

sromagazine

08-13-2006, 04:19 PM

thanks! complicated though.

adpyramid

12-08-2006, 08:19 PM

roosevelt

12-10-2006, 06:54 PM

Looks good the tutorial was great. Was wondering is there any easy way to export .PSD files to CSS. I know how to do it using Photoshop but the exported result is bit complicated to edit.

cybgeek16

12-24-2006, 06:58 AM

thanx for the tutorial..

Marble

12-24-2006, 02:49 PM

@adpyramid -- just like with tables you make areas expandable or fixed using a specific dimension (like px) or a percentage that changes depending on resolution.

@roosevelt -- There is no magic button that converts your mockup to the perfect css layout. Developers just use the mockup as a reference. You only take the images you need and then build the site from there, not using the html that photoshop produces.

jose17

12-27-2006, 04:56 PM

I see this is an old thread but... I've always wondered how CSS layouts work for different resolutions. Obviously they work but how? I use CSS for all my styles now but still use tables for layouts because I don't understand the resolution issue... Can anyone explain?

Thanks!

that's one of the questions i have myself. for example if you use the value absolute on a div tag and let say you set it to 30 px from the top and 200 from the left

will this position look good on a small resolution screen as well on a high resolution screen? i mean if it looks like it's on the center on the screen of a small resolution screen it won't look center on a high resolution screen or will it?

vkess

01-21-2007, 03:57 PM

This is just one of the reasons we don't absolutely position divs. What would be more suitable is to use:

<div id="container">
content goes here
</div>

then use the following style:

#container{
width:780px;
margin:0 auto;
background-color:#ff0000;
}

The key here is specifying a width for the div then using an auto margin for the left and right. This will make the div appear in the centre of the screen regardless of the size of the browser window.

layer0

01-21-2007, 06:28 PM

Eversuns

07-13-2007, 05:38 AM

Great tutorial to help out some of the newer people to coding. Instead of using (for the centering) text-align: center; and margin: auto; i would just use margin: 0 auto;.

Thanks

spiderwebfx

07-16-2007, 06:56 PM

If you want to center something with CSS, so it is centered on all different size resolutions, wouldn't it be easier to just do this: (for example)

.class {
position: absolute;
width: 500px;
left: 50%
margin-left: -250px;
}

Because the left margin is set to minus half the width of the div, and the "left" is set to 50% it positions the div perfectly center to every resolution.

Yes? No?

Works for me....