CSS instead of tables?

by **cstef24** » Tue Oct 20, 2009 8:53 pm

I'm trying to set up a website that has a header image, rollover tabs and an area for an iframe in the body. I've usually gone about this by using tables, but this time it's getting a bit messy with nested tables...
is there an easier way using CSS?

Thanks

(here's the code if you want to see it)

Code: Select all: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title></title> <script type="text/javascript"> var revert = new Array(); var inames = new Array('home','portfolio','references','services','contact'); // Preload if (document.images) { var flipped = new Array(); for(i=0; i< inames.length; i++) { flipped[i] = new Image(); flipped[i].src = "images/"+inames[i]+"2.gif"; } } function over(num) { if(document.images) { revert[num] = document.images[inames[num]].src; document.images[inames[num]].src = flipped[num].src; } } function out(num) { if(document.images) document.images[inames[num]].src = revert[num]; } </script> </head> <body style="color: rgb(252, 251, 241); background-color: rgb(251, 252, 241);"> <table style="text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="width: 800px; height: 240px;" colspan="5" rowspan="1"><img style="width: 800px; height: 240px;" alt="" src="images/header.gif"></td> </tr> <tr> <td style="width: 216px; height: 36px;"><a href="home.html"><img alt="" src="images/home1.gif" style="border: 0px solid ; width: 216px; height: 36px;" name="home" onmouseout="out(0)" onmouseover="over(0)"></a></td> <td style="width: 101px; height: 36px;"><a href="portfolio.html"><img alt="" src="images/portfolio1.gif" style="border: 0px solid ; width: 101px; height: 36px;" name="portfolio" onmouseout="out(1)" onmouseover="over(1)"></a></td> <td style="width: 110px; height: 36px;"><a href="references.html"><img alt="" src="images/references1.gif" style="border: 0px solid ; width: 110px; height: 36px;" name="references" onmouseout="out(2)" onmouseover="over(2)"></a></td> <td style="width: 143px; height: 36px;"><a href="services.html"><img alt="" src="images/services1.gif" style="border: 0px solid ; width: 143px; height: 36px;" name="services" onmouseout="out(3)" onmouseover="over(3)"></a></td> <td style="width: 230px; height: 36px;"><a href="contact.html"><img alt="" src="images/contact1.gif" style="border: 0px solid ; width: 230px; height: 36px;" name="contact" onmouseout="out(4)" onmouseover="over(4)"></a></td> </tr> <tr> <td colspan="5" rowspan="1"> <table style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="width: 125px; height: 324px;" colspan="1" rowspan="3"><img style="width: 125px; height: 324px;" alt="" src="images/4.gif"></td> <td style="width: 552px; height: 17px;"><img style="width: 552px; height: 17px;" alt="" src="images/2.gif"></td> <td colspan="1" rowspan="3" style="width: 123px; height: 324px;"><img style="width: 123px; height: 324px;" alt="" src="images/3.gif"></td> </tr> <tr> <td style=""></td> </tr> <tr> <td style="width: 552px; height: 27px;"><img style="width: 552px; height: 27px;" alt="" src="images/1.gif"></td> </tr> </tbody> </table> <br> </td> </tr> </tbody> </table> <br> </body> </html>

by **Andy** » Tue Oct 20, 2009 9:55 pm

This post scares me to death. You're doing everything you possibly can wrong.

Scrap everything (I mean it!) and start learning CSS and HTML from start:

http://reference.sitepoint.com/html/html-concepts
http://reference.sitepoint.com/css/concepts

by **falkencreative** » Wed Oct 21, 2009 12:16 am

Yes, CSS will be easier to work with -- with one CSS style sheet, you can eliminate all of the inline styles you are using (all the style="" statements) and put all that styling in once place (which means if you ever need to change it, you can make one change in the CSS file, rather than having to change it multiple times in multiple files). The rollover menu can be done with a css based rollover (http://www.alistapart.com/articles/slidingdoors/).

Take a look at the CSS links above that Andy posted -- that'll be a good starting point. This might help too: http://www.cssbasics.com/

Also, avoid using iframes if you don't have to -- although they were popular a couple years ago, they come with a lot of issues... Accessibility issues, issues with breaking the back button, breaking browser bookmarking functionality, etc. If you are trying to have a main content area that scrolls, you'll be better off using a div with a fixed height and "overflow:auto". If you are worried about repeating code for navigation/header/etc, perhaps you could use a PHP include or similar to include code that repeats on all of your pages? (http://www.tizag.com/phpT/include.php)

As a very brief example, here is an rough outline of what the code to your site could look like using divs rather than tables... (I'm not sure it is completely accurate, since I can't see your images/content within the iframes, so it's a bit of a guess)

Code: Select all: <div id="wrapper"> <div id="header">  </div> <ul id="nav"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> <div id="content">  </div> <div id="footer">  </div> </div>

A lot easier to read and understand, huh?

by **cstef24** » Wed Oct 21, 2009 7:56 pm

Thanks so much! I'm still in high school, so I've only ever learned what I pick up on my own...and apparently that didn't include much CSS

I'll let you know if it ends up working

by **louelladeguzman** » Wed Oct 21, 2009 11:20 pm

falkencreative wrote:If you are trying to have a main content area that scrolls, you'll be better off using a div with a fixed height and "overflow:auto".

thanks for this! learn something new every day

by **Cippo** » Thu Oct 22, 2009 5:46 pm

You can also learn some from http://w3schools.com/css/default.asp

by **Andy** » Thu Oct 22, 2009 5:49 pm

Cippo wrote:You can also learn some from http://w3schools.com/css/default.asp

It's better if he reads the resources we have already linked him to. To be honest, W3 Schools isn't that good.

by **wbshim** » Fri Oct 23, 2009 11:46 am

Andy thoroughly covered what was needed to be said, but I'd just like to note that the markup resembles ones from early 2000!

I remember the days of javascript rollovers...

by **cstef24** » Mon Oct 26, 2009 9:52 pm

With the CSS tabs would I still be able to do ones like I planned or can you only have them look a certain way?

^^it would make sense that my coding looks like its from the early 2000s that's when I learned :oops:

haha

by **tuffcode** » Mon Oct 26, 2009 10:56 pm

This topic is thery reason I came to this forum in the first place. Stoked that it was the first topic in the list.

I am 99% programmer, 1% designer. I mostly take designs from local firms and get them to "work" on the web. I do not have a say in the design process, that's between the client and the designers. Once they've agreed on something, its my job to get it done.

I do not like to employ hacks or browser-specific code if I can avoid it.

All said, at least for my situation, the standard 2 or 3 column website design is the one I implement the most. Here's my personal challenge. How do you create a 2 column layout in pure css given the following parameters:
1. Main body background color is hex, say FFFFFF
2. Side column is hex, say EFEFEF
3. Column heights are not set in stone. Sometimes the main body is longer. Sometimes the sidebar is longer.
4. I do not want to load a background image to fake the two column layout.
5. I do not want browser-specific hacks.
6. I want the background colors of both columns to always be equal height, just expand to whichever column is longest.

This is very easy to do it tables. I've just never really found a good solution to this very elementary design in css.

Here's a page I've been working on for reference. This is a fake mockup thrown together for argument's sake...no comments on the source code please :oops:

http://awa.tuffcode.net/

Thanks for any help. Smashing Mag is a great resource. I've learned tons here.

by **cstef24** » Sun Nov 01, 2009 1:07 pm

Okay so here's what I have so far (just the basic framework) : http://www.csteffen.com/heidi

Do I have to create 5 different pages for every menu option or is there a way to get the links to open in the div area like it would with an iframe?

by **Andy** » Sun Nov 01, 2009 5:11 pm

cstef24 wrote:Do I have to create 5 different pages for every menu option

Yes, you do.

cstef24 wrote:or is there a way to get the links to open in the div area like it would with an iframe?

There's that too. It's called AJAX. It allows you to asynchronously send a request with JavaScript to the server and fetch data.
However, you should only use this method if you already have statically linked to the 5 pages. It's not a substitute for traditional navigation, it's an enhancement.

After all, your users wouldn't be able to use the site if javascript was disabled. Not to talk about SEO.

Welcome!

Smashing Links

Statistics

TOP POSTERS

CSS instead of tables?

CSS instead of tables?

Re: CSS instead of tables?

Re: CSS instead of tables?

Re: CSS instead of tables?

Re: CSS instead of tables?

Re: CSS instead of tables?

Re: CSS instead of tables?

Re: CSS instead of tables?

Re: CSS instead of tables?

Re: CSS instead of tables?

Re: CSS instead of tables?

Re: CSS instead of tables?

Who is online