hi, i have made myself a fairly simple table layout.
im hoping someone with a little time to spare could take a quick peek at it and perhaps advise how to convert it from tables to CSS - as i know tables are frowned upon these days.
i tried converting all to Div's but couldnt get the centering or 100% height of a footer working
i tried the CSS generator but it didnt work to my needs.
thanks
Re: beginner - table layout to CSS
hi, i have made myself a fairly simple table layout.
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.
im hoping someone with a little time to spare could take a quick peek at it and perhaps advise how to convert it from tables to CSS - as i know tables are frowned upon these days.
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.
i tried converting all to Div's but couldnt get the centering or 100% height of a footer working
Why do you want either? How do they serve your content, or your users?
i tried the CSS generator but it didnt work to my needs.
thanks
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.
beginner - table layout to CSS
Ed,
Uh, seriously, what are you talking about? :?
beginner - table layout to CSS
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!
beginner - table layout to 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.
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...
beginner - table layout to CSS
http://www.mitchellpage.com.au/mitcho/ is what im trying to do

beginner - table layout to CSS
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
beginner - table layout to CSS
I actually used Adobe image ready to produce this - hope thats ok!?
Step one: GET A DOCTYPE!
i cant get the footer to have 100% height so that it goes all the way to bottom of screen.
beginner - table layout to CSS
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
beginner - table layout to CSS
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;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.
beginner - table layout to CSS
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
beginner - table layout to CSS
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.
beginner - table layout to CSS
Mitcho, where have you got all that position absolute from?
Remember if text isn't selectable then google can't read it and screen readers can't speak it.
beginner - table layout to CSS
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
beginner - table layout to CSS
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!
beginner - table layout to CSS
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.
beginner - table layout to CSS
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.
beginner - table layout to 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.
Add a dose of Lorem ispum
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.
Or add some l33t speak
Just to really bug us
@nD M4NY c0n+3N+ 4bund4n7 1T! Y3r Up 51T3$. 3|53wh3r3, y3r Wi+H. 51m1L4R y0. D4 y3r 1n70 7h15 KWIckLy,, aLL h7m| f1|35, 83. 7h15 m0|23 534r(h j00 83. 3nT3R f34tUr3 p|20g|24m, 0f n0w?
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!
beginner - table layout to CSS
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
beginner - table layout to CSS
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.
beginner - table layout to CSS
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?
beginner - table layout to CSS
here - i used sliding doors http://www.mitchellpage.com.au/mitcho/index_new.html
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
beginner - table layout to CSS
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;
}
beginner - table layout to CSS
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
beginner - table layout to CSS
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?
beginner - table layout to CSS
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
beginner - table layout to CSS
What do you mean, "did not work"? What did it do?
beginner - table layout to CSS
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
beginner - table layout to CSS
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.
beginner - table layout to CSS
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.
beginner - table layout to CSS
have i been abandoned!
please come back - you were all so helpful!
beginner - table layout to CSS
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 :?
beginner - table layout to CSS
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?
beginner - table layout to CSS
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?
beginner - table layout to CSS
i split the button image into three images and still using css sliding doors. i hope this is what you meant.
Yep, that's better.
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?
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.
beginner - table layout to CSS
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!
beginner - table layout to CSS
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.
beginner - table layout to CSS
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.
beginner - table layout to CSS
Looks fine for me? :? What version of IE are you using? Have you cleared your caxche/done a forced refresh?
beginner - table layout to CSS
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.
beginner - table layout to CSS
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...
beginner - table layout to CSS
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
Ed Seedhouse wrote:
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:
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
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.