beginner - table layout to CSS

There are no table layouts, and no non-table layouts. There is just layout. And the various tools you use to *do* layout. But before layout comes content. Layout without content is as meaningless as a book consisting solely of blank, numbered pages.

They are not frowned on at all. They are perfectly useful and appropriate - for the display of tabular information.

As a layout tool, however, they suck.

You haven't really given us anything to convert. Layout is used to present content. As I said above, layout without content is meaningless, so your picture really tells us nothing.

Why do you want either? How do they serve your content, or your users?

Judging from the jpg, your needs are very little. 99% of what you want can be done without tables or css, just simple semantic html or (preferably) xhtml.

Ed,

Uh, seriously, what are you talking about? :?

ok, well i guess this is a suitable post for the beginners sections then.
i just assume that the layout, what i have created using tables, could be recreated using CSS.

as you can see there is a table with 5 rows. the top row will be banner, the second row navigation, third row image, forth row bas navigation, and final row and extending footer.

http://www.mitchellpage.com.au/mitcho/ is what im trying to do - but i would like to know how to do this in CSS instead of tables so i can join the bandwagon!

Thanks guys!

Well I'm sorry to be so cryptic and unhelpful, but I took a look at your page and couldn't understand a darned thing out about it. You have no DTD, a whole lot of javascript, almost no actual text content, only graphics, and tables within tables. Or at least I think you do - please correct me if I'm wrong.

If you really want to get away from tables for layout, then I think you'll have to be willing to put aside what you already know and start looking at things in an entirely different way.

Web pages naturally flow from top to bottom, so your images should do that automatically without having to be put into table rows. For navigation you can use the float property to put them side by side. Most people use an unordered list (<ul>) for navigation since that's usually a list of links.

Sorry, I hope I'm not confusing things even more...

It's just a single column with a header and a footer. Seems pretty simple. Try using the layout generator again with no left or right column (just the main content centered), add a header and footer and we'll go from there.

ok ive updated the layout to use CSS.

I actually used Adobe image ready to produce this - hope thats ok!?

the url is the same but its in CSS -

the problems are - i cant get the site to be centered
-i cant get the footer to have 100% height so that it goes all the way to bottom of screen.

thanks

PS- CSS is within the page

It's not the greatest idea. It will most likely need to be cleaned up.

Step one: GET A DOCTYPE!

This should help: http://www.alistapart.com/articles/fauxcolumns

sorry about the doctype thing - all sorted now - i am just testing but i suppose it makes a difference. anyway,

i had a look at that link and tried what it suggests. i made the main div 100% heigh and the footer background like so:

background: #8f8d86 repeat-y 50% 0;

but the page will still not continue to the base of the browser.

thanks for ur feedback so far

background: #8f8d86 repeat-y 50% 0;That's not what it suggests at all. Perhaps you misunderstood it.

I really can't explain it better than the article does so try reading through it again and see what you come up with.

And show an updated link.

had to upload to a diff URL - here www.arch.usyd.edu.au/~mpag5967/test

i got the image repeating as a background using the body style

now how do i move all the divs to be centered?

thanks again

Mitcho, where have you got all that position absolute from? is it adobe that is inserting it? if so STOP using it immediately as it is misleading you in an extremely bad way.

Position absolute must not be used to position major layout elements and most certainly not every single element on the page it's utter madness.

CSS and html is based around elements flowing naturally from top of page through to the bottom and of nesting elements within one another, as a rule you do not use the position property unless there is a specific reason.

To start getting some fundamental order to your layout remove ALL position absolutes and any top/left offsets, add margin:0 auto; to your .table-01 wrapper to center the page.

You should now have a layout that is starting to flow and look correct from here you will need to work on the inner elements to get them rendering as you want them.

With the major elements use ID instead of classes and try not to name your elements as table_01 this smacks of clinging to table layout mentality and doesn't express the nature of the element call it either 'wrapper' or 'container'.

Make those changes and update the link and then the next stage can be tackled.

Hugo.

Oh, I hadn't noticed that. Not that it matters if all the text is pictures (which is a bad idea in itself).

Remember if text isn't selectable then google can't read it and screen readers can't speak it.

and mitcho to see why you shouldn't use graphics for text normally, view your page in a browser with the images disabled. What is left to see? just a plain blank page

i know there is no text in this page - this is just an entry point and the centre bit where the battery image currently is will be replaced by text and blog entries when the site is up and running.

onto the page, i have reuploaded to www.mitchellpage.com.au/mitcho/

i believe i understand what u mean by flowing layout elements, so my layout is now flowing from top to bottom the way i want it to render.

So now my issue is getting the buttons back within the index-nav-bar div and positioned in order horizontally within this div. i have put the button divs' within the index-nav-bar dive and given them all their respective left positions, but they are all overlapping.

thanks for all this help!

Good stuff, now it's looking a little more like a layout.

The next thing to tackle is the index-nav-bar , ideally what you will do here is loose all the horrible javascript rollovers that are nested in this div and replace it with lean semantic ul lists and a few lines of code in the stylesheet to produce the rollovers, if that is, your happy to loose the images for the moment you can re-introduce images at a later stage but for the moment it's better to understand how to create a basic text navigation list, for this I would ask you to have a read of this guide and implement it's code it may not be exactly what you wanted but it will be tweakable and should be a good base to work from

http://css.maxdesign.com.au/listamatic/horizontal03.htm
(of course you may prefer to implement one of the other many examples)

Work on that and post up the results even if you get stuck with it , someone will help out.

Hugo.

You've really got people's backs up a bit with this layout! Not that it's a problem, we were all beginners once, but I fear the others may have jumped on you a bit too soon

You still don't actually have any text content on your page. I know it's early days, but there are CSS replacements for what you are doing.

For the logo, research on Image Replacement.
For the hover effect in the navbar, research Sliding Doors of CSS.

Which is why I'm attempting to guide gradually through the process, where possible at each stage loosing the graphics.

mitcho is doing fine, lets get him through this bit by bit and I think the graphics problem will start to become self evident.

Hugo.

Mitcho, you can keep all the negative posters down (and look knowledgeable at the same time) by adding a bit of typesetters' latin where the text will end up going.

Just to really bug us

U/ da 4||d t3xN0l0933,, p4r7I c0nT3nT, Up (1f, |247h3r [email protected] 47 4r3! [email protected] iz p49E$ +hO53 PH4M1li4r? 4|50 [email protected]+I0N, 1+ [email protected], +HE NUMbER (4(]-[3z b3? 1+ z33 [email protected] 1753lf! ALL LINk r35ul7, iz? H45 70 [email protected]$ 1|/|@g3, [email protected] r3l473d |/|4c|-|1n3 d3n 1+.

T3H 5O [email protected] kl1k r33zUltz, 5O 1iNx f00l! |3tz0rz [email protected] 47 [email protected] L1kE @8ou+ r33dz0r, 1F vv1|_|_ [email protected]+I0N, 533, 1+ 3nT3R r1tez 5peNDInG 70p. C|1ck qu3ry z3aRcH n0w [email protected], |7 w4n7 |1nk v3|2510n 7h3. U5Ed 1nf0 y0 +h3? Pdf 5O vv3b d0wn|04d, 1+ p1x 1n70 1|/|@g3 |23p|4c3d! 533 l3tz NUMbER 0t|-|3r 83, d0n't kvv3r33, 70p 5O, y0ur p493 533 0f.

Iz [email protected] r3zUltz v3|2510n kUm, 4r3 h4v3 j00'|| 0R. 5IM1LaR INt3r35+3d [email protected]+1cUL4r 4z n0n. 8Ut 7h3y 4lvvAyz 4u70m471(4lly !=. 717|3z 0vvn3r da CaN, 17 aLL p493 4|7h0ugh KeYW0rD5. @nD 1T yOU, m47(h NUMbER!

didnt really have a lot of luck trying to achieve what i wanted to.

i want to use the images i created as buttons rather than use text in this case.

i came up with http://www.mitchellpage.com.au/mitcho/ still based on javascript buttons

and with text: http://www.mitchellpage.com.au/mitcho/photo.html

this is an attempt at text links http://www.mitchellpage.com.au/mitcho/index_textcss.html

as you can see a very beginner effort, but for CSS, thats what i am at the moment.

basically i would like a way to be able to make individual image javascript like rollovers with CSS. i like to do a lot of sites with image based buttons to experiment with different colours and text types.
so this site is sort of a beginning point to learn CSS layouts and CSS image based rollover buttons.

thanks

Your image rollovers CAN be used with text, that's why I told you to research CSS Sliding Doors.

The Photos page is getting there, use that as a base and continue with it.

Lose the height on the middle element, it's unneeded.

Lose the background image on the footer.

You're also overcomplicating this layout.

You should only need a few divs, and a list for the buttons:

<body>

<logo>

<navlist>

<content>

<previous/next>

<footer>

</body>

In HTML, that equates as:

<body>

<h1>mitchospage<h1>

<ul>
<li> home </li>
<li> photo </li>
<li> blog </li>
</ul>

<h2> title </h2>

<p> content </p>

<div id="lowernav">
<a href="previous.html> previous </a>
<a href="next.html> next </a>
</div>

<div id="footer"> <img src="footer.jpg" width="xx" /></div>

</body>

It looks compliacted, so work through it one step at a time.

1) Don't embed the logo in the HTML. Google for Image Replacement techniques.

2) The links ARE text, the same principle for the header applies here.

Have a crack at this, let us know how you get on.

here - i used sliding doors http://www.mitchellpage.com.au/mitcho/index_new.html

and

http://www.mitchellpage.com.au/mitcho/photo.html

and here is css http://www.mitchellpage.com.au/mitcho/mitchoStyle.css

Ok?

Excellent stuff, youre picking this up fast!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>website3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="mitchoStyle.css" rel="stylesheet" type="text/css">
</head>
<body onload="preloadImages();" style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<div id="container">
	<div id="banner">
		<img src="images/banner.gif" width="526" height="82" alt="">
	</div>
	<div id="navlist">

		<ul id="top-buttons">
    		<li id="panel1b"><a href="#1"></a></li>
    		<li id="panel2b"><a href="#2"></a></li>
    		<li id="panel3b"><a href="#3"></a></li>
  		</ul>
	</div>
	<div id="middle">
		<img src="images/center.gif" width="526" height="370" alt="Powered by everyday life"></div>
	<div id="base-line">

		<div id="btn-previous">
			<img src="images/btn_previous.gif" width="49" height="17" alt="">
		</div>
		<div id="btn-next">
			<img src="images/btn_next.gif" width="32" height="17" alt="">
		</div>
	</div>
	<div id="footer">
		
	</div>

</div>
</body>
</html>

Is good, I can see you working through each bit at a time. However, you don't need the div around the ul. Try this code instead:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>website3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="mitchoStyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
	<div id="banner">
		<img src="images/banner.gif" width="526" height="82" alt="">
	</div>
		<ul id="top-buttons">
    		<li id="panel1b"><a href="#1"></a></li>
    		<li id="panel2b"><a href="#2"></a></li>
    		<li id="panel3b"><a href="#3"></a></li>
  		</ul>

	<div id="middle">
		<img src="images/center.gif" width="526" height="370" alt="Powered by everyday life"></div>
	<div id="base-line">

		<div id="btn-previous">
			<img src="images/btn_previous.gif" width="49" height="17" alt="">
		</div>
		<div id="btn-next">
			<img src="images/btn_next.gif" width="32" height="17" alt="">
		</div>
	</div>
	<div id="footer">
		
	</div>

</div>
</body>
</html>

I've removed the outer div, and removed the onload stuff from body, as it's not needed.

Also, this stuff:

style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;"

should go in the css:

body {
background-color:#FFF; 
margin: 0;
}

Next task, have a go at the logo

Actually - before i go any further - this doesnt work in IE.???

At the moment, its rendering EXACTLY HOW I WANT IT TO LOOK in firefox, but in IE its all stuffed.

and i had the div around the button list because i want the navigation row to have the background image index_08.gif behind all the buttons

#navlist {
width:526px;
height:19px;
background: url(images/index_08.gif) repeat-x;
}

ok, it no longer looks exactly how i want it to in firefox

[if you view this link in firefox it will give u an idea of how it should look: http://www.mitchellpage.com.au/mitcho/index_look.html
i had to stuff around with the btn-previous and btn-next styles as they were stuffing up
]

i tried image replacement technique like you suggested for the banner.gif

and now its all out of wack in firefox aswell as IE...

links are same: http://www.mitchellpage.com.au/mitcho/index_new.html
http://www.mitchellpage.com.au/mitcho/mitchoStyle.css
http://www.mitchellpage.com.au/mitcho/photo.html

Thanks again - this is really such a help! hope its no trouble for you guys

Haven't got time to check it all now, but you don't need the containing div.

You say you want the background behind the list items - so why not apply it to the <ul> element?

i added a ul id as follows:
#top-buttons ul{background: url(images/index_08.gif) repeat-x;}

the html already read <ul id="top-buttons">

this did not work.

i am still having the problems that the page doesnt render correctly in IE.

Links are same as previous post..

thankyou

What do you mean, "did not work"? What did it do?

take a look at http://www.mitchellpage.com.au/mitcho/index_new.html and you will see. its all formatted wrong in IE.

and in Mozilla the nav bar no longer has the background.

???

thanks

Ok, a few things to fix it up for now.

Remove the background-image of the footer on container, it's confusing me and messing up the layout a bit. Actually embed the img in the html, like you've done with the logo.

Secondly, the reason the background image won't go all the way along is because the <ul> element only contains it's <li>s. Give it
width: 100%;

Then, put some content in the anchors:

	<ul id="top-buttons">
    	<li id="panel1b"><a href="#1">Home</a></li>
    	<li id="panel2b"><a href="#2">Photo</a></li>
    	<li id="panel3b"><a href="#3">Blog</a></li>
  	</ul>

This can be hidden with:

ul#top-buttons li {
text-indent: -999999em;
}

This may be why IE is messing it up.

Have a crack, let us know what happens.

Its actually looking worse now that is has before. check out the link in IE.

http://www.mitchellpage.com.au/mitcho/index_new.html
http://www.mitchellpage.com.au/mitcho/mitchoStyle.css

it doesnt look as bad in Mozilla but still has many problems....

- i extended the top-buttons ul to 100%, but rather than repeating the plain image its repeating the buttons image

- i removed the footimage background, but had to put another bg image in replacement to maintain the look of the footer extending down

-the site is no longer at the top of the page but is now about 5 pixels down from the top.
and there is a gap between the menu and banner

here is an image of what the page should look like....:
http://www.mitchellpage.com.au/mitcho/site.gif

Thanks for your help so far. hope you can continue to help till this is working.

have i been abandoned!

please come back - you were all so helpful!

Let's get the nav sorted first.

http://www.mitchellpage.com.au/mitcho/images/buttons.gif

Split it up into separate images. and apply each one to it's corresponding <li>.

And I don't see a 5px gap at the top :?

when i view http://www.mitchellpage.com.au/mitcho/index_new.html it is dark grey at the top before the banner begins. the banner should be flush at the top.

also why am i splitting the buttons up now. i was told a number of posts back that i should use that technique to use images as rollovers.
it was you that told me to use CSS sliding doors i think.

can you please explain then a little more what you want me to do with the nav?

i split the button image into three images and still using css sliding doors. i hope this is what you meant.

i then applied the nav background to the #top-buttons id instead of the top-buttons ul , because it wasnt working when on the ul.

http://www.mitchellpage.com.au/mitcho/index_new1.html
http://www.mitchellpage.com.au/mitcho/mitchoStyle1.css

are the new files. there is still a grey gap above the banner and below the banner. this appeared ever since i used the css image replacement technique?

any ideas?

Yep, that's better.

any ideas?

This is because the H1 element has default margins and paddings.

Amend your css by adding this in h1#banner

margin: 0;
padding: 0;

Let us know how you get on.

hey thanks.

i did what you suggested and there is still a grey line at the top above the banner, but there is no longer one below the banner.? why is this?

its looking better in both IE and firefox now, - HOWEVER if you look at it in Internet explorer, you will notice that the site elements are not exactly centred over the top of the repeating background image. if you expand the browser the site elements pull to the left.
also the next and previous buttons down the bottom are too high in IE.

updated links here

http://www.mitchellpage.com.au/mitcho/index_new1.html
http://www.mitchellpage.com.au/mitcho/mitchoStyle1.css

Thanks ---- almost there!

The gap at the top is because of the margin/padding on <body>

Put this at the top of your CSS:

html, body {
margin: 0;
padding: 0;
}

This will remove padding and margins on the body and html.

ok now thats fixed, now for the big problem -

how can i get this to work in Internet Explorer???

Currently it is all stuffed in IE - the navigation sliding doors are visible, the site isnt correctly centred etc.

Looks fine for me? :? What version of IE are you using? Have you cleared your caxche/done a forced refresh?

im using latest IE 6.

it does look ok at first, but upon closer inspection you will see these small errors. i have included a screen shot which points them out.

http://www.mitchellpage.com.au/mitcho/sie.gif

i know these errors are small but are there solutions. id like the site to be cross browser compatible and IE is the most used i think.

i just have problems now with my sliding doors menu

http://www.mitchellpage.com.au/mitcho/index_new1.html

in IE, the bottom half of the sliding door images are visible?

can anyone see why this is happening... only in IE...

ok it seems to be workin in IE - but not on my laptop - which is wide screen. this is what i see www.mitchellpage.com/mitcho/error.JPG

is this because my laptop is widescreen. i am using ver 6.0.2900.2180 xp sp2 of IE, and have tested it on other computers with same version and it works

pleease advise

They are not frowned on at all. They are perfectly useful and appropriate - for the display of tabular information.

Thank for clarifying that. I tought that tableless-css was... well... no table at all, under no circumstance. Relief.

Now, if you have something that you would have use a table for in the past, either a one row horizontal table or a 1 colum vertical table. Would you use LI with CSS for that today. Or only in limited situations

I have a project (http://test.mfreview.com) where I have a submenu. It's a vertical arrangement:

Submenu Title

Menu Item 1

Menu Item 2

Menu Item 3

Submenu Footer

I used specific classes for the title and footer. But its all one LI structure. Works fine on FF and Safari

Now that i'm customizing a CSS file for ie6 and ie7 i find i am having a lot of problems

Was this the right way to proceed or there were better ways?

Thanks

Well you use a table for information or content where a natural relationship applies. That is each column refers to a particular attribute of the objects which is the same for all rows, and each row describes an instance of the object, and the table describes only one type of object. So to put it another way a table is a list of objects each of which has several sub-objects and where in each case the list of sub-objects is the same.

A one column table describes no relationship so should be considered a list. The OL describes a list where each object has a natural order in the list and the order is important. UL is for lists where order is of no importance. DL is for lists which imply a relationship betwen the oject defined and the definition of the object and could indeed be a two row table, but the markup is much simpler so it is useful.

Also DL implies a particular kind of relationship where there is a heirarchy. You can appropriately have

dt
dd
dd
for example, depending on what you are describing.

Hope that makes some kind of sense... and trusting that the real gurus here will correct any mistatements above.