Design with CSS?

nomayo · #1 (**permalink**) 11-18-2004, 10:20 PM

I'm just starting to get the hang of using tables for my web designs. I've been reading about CSS and I've used separate attached CSS style sheets for my text but I don't understand how a whole layout can be done using CSS instead of tables.

Should I just forget learning tables and start learning CSS layout, if so, are there any good tutorials you could recommend?

Thanks
Brandon

davebarnes · #2 (**permalink**) 11-18-2004, 11:06 PM

CSS (for layout) is NOT ready for prime time.
CSS (for styles) is ready.

The browsers (Internet Exploder, Firefox, Opera, Safari) do not display CSS layouts the same.
If fact, some screw it up completely.

CSS (for layouts) = great idea. But, not here today.

,dave

rivux · #3 (**permalink**) 11-18-2004, 11:37 PM

I disagree completely, CSS is more then ready for layouts. Yes IE and Firefox show some CSS elements differntly (because IE doesn't know its ass from a hole in the ground) but those can be worked around and there are plenty of examples on the web for how to do it.

Doing layouts in CSS is completely different then layouts using Tables, the thought process and planning is different. So the quicker you can make the switch to CSS the better off you will be.

If CSS for layouts wasn't ready for primetime, then why did ESPN make the switch to tableless designs? The answer is, because it is ready for prime time.

speed · #4 (**permalink**) 11-19-2004, 03:55 AM

The only thing I'd like to add to rivuxs post, which I agree with, is that when you do start developing pure CSS layouts design for Firefox and then fix for IE.

With Firefox you get what you expect, and as rivux said there is plenty of information out there on how to fix for IE.

paulhiles · #5 (**permalink**) 11-19-2004, 07:12 AM

Quote:

Originally Posted by nomayo

Should I just forget learning tables and start learning CSS layout, if so, are there any good tutorials you could recommend?

Hi Brandon,

I've moved your post from Web Programming into Site Design (as this is more the appropriate spot!). Have you checked out the CSS, HTML, XHTML Tips and Useful Resources threads posted as a "Stickies"? There are some very good starting points there.. as well as tons of previous discussions on CSS & XHTML layouts (tip: use the site's search facility!)

Feel free to ask questions!
Look forward to seeing you around the forums,

Paul

nomayo · #6 (**permalink**) 11-19-2004, 01:51 PM

thanks for taking the time to answer my post.

ronbaker1 · #7 (**permalink**) 11-19-2004, 05:37 PM

I use CSS for layout on all of my web sites and I'm confident it's ready for prime time.

Be certain to test first with FireFox, then with IE. And use an appropriate DOCTYPE statement, for example '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'. You'll find this will produce a CSS page that works the same across almost all browsers 4.0 and up.

Once in a while I may have to do some minor tweaking. But no more tweaking than when I used tables for layout. And the resulting CSS page is signicantly easier to maintain and change. And of course the page is smaller, so it loads faster.

Here is a book that I highly recommend. It's "Eric Meyer on CSS", by Eric Meyer who is a recognized expert on CSS. This book takes you through 4-5 real-life examples of CSS web site designs. Work those examples and you'll be on your way to becoming an experienced CSS developer.

Here is a link to his web site, http://www.ericmeyeroncss.com/, for additional information.

You can validate your CSS at http://www.w3.org/, the World Wide Web consortium.

I recommend using CSS for styling as well as for layout.

Ron Baker
www.apex-systems.net

deltatrend · #8 (**permalink**) 11-19-2004, 06:05 PM

I'll go against the grain here to say that my experiences with trying to use purely CSS layouts has been very discouraging. CSS simply lacks some handy layout techniques that you would expect. For example, try to center a text vertically in a div. I spent many hours looking at hacks and clever workarounds to do what I could easily do with tables.

A CSS-only layout can be done, but without a lot of research, you can only generate the kind of blocky, boxy style that now seems popular in PHP and Blog sites.

Go to any site you like and check the source code. It will likely use tables. Frankly, I think it was a mistake to push out a CSS standard that could not allow designers to easily produce the style of design their customers demand.

hal · #9 (**permalink**) 11-19-2004, 06:57 PM

Just a quick note to say "thanks."

I am both happy with CSS and frustrated, for all of the above-described reasons. I was beginning to question whether it was just me -- i.e., going schizoid -- or if other people felt the same way. Now I see it's both ways. That's just great!!!

Now if I can only find the door to this rubber room...

Hal

Cliffhanger · #10 (**permalink**) 11-19-2004, 07:52 PM

I'm kind of in the same boat here. I've recently purchased two books from www.sitepoint.com (I also highly recommend their newsletter(s). While I have yet received them, I have high hopes. I, too, design with tables but am hardly close to knowing all aspects of them yet. Heck, I've never used a paragraph tag or a div tag to this day. Partly because, at times, I simply don't comprehend or get overwhelmed. To you seasoned designers this must sound pathetic, but 'tis true.

ronbaker1 · #11 (**permalink**) 11-19-2004, 08:23 PM

deltatrend wrote:
"CSS simply lacks some handy layout techniques that you would expect. For example, try to center a text vertically in a div. "

If I understand correctly what deltatrend is trying to accomplish, it's easy with CSS Styles to center text vertically (or horizontally) within div sections as well as centering the div on the page. Here is an example:

<style>
div#centerDiv {margin-left:auto; margin-right:auto;}
</style>
<div id="centerDiv" style="text-align:center; border:2px solid gray; width:400px;">

Here is some sample text centered within in a div section.
The text is centered by using a CSS style with "text-align:center".

Let's continue writing this sample text to see how it looks.
</p>
</div>

Cut and paste this example into an HTML page and display it in a browser. Be certain to include an appropriate "DOCTYPE" in the page "Head" section. If that "DOCTYPE" supports CSS, the page will display the text centered within a gray box (the div) and the box centered on the page.

In this example I deliberately used a box style layout. And, in fact it results in an identical display to one with text centered in a table layout. If I wanted to deliver the design using curves, not square corners for example, I could do that using CSS styles. That's slightly more complex with CSS styling, but easily done once you're familiar with the CSS layout techniques. By the way, using curves in a table layout is also a more complex design task.

In my CSS designs, I use tables when it's appropriate (for example to display tabular data) - but, I don't use tables just to achieve a layout on the page. They're not necessary. And, I style all my tables using CSS.

Again - I recommend taking a look at the book "Eric Meyer on CSS". It will initially be more difficult to do a CSS layout, because you're learning new concepts. But once you're over the learning curve, CSS is a superior design technique. And, I find it very easy to use.

Ron Baker
www.apex-systems.net

Voodoo1967 · #12 (**permalink**) 11-19-2004, 08:38 PM

I guess I haven't really taken the time to fully investigate the whole debate, but I know it's all over the place. Just try doing a search for css vs tables and you will find a debate about as vicious as the recent presidential election. I personally use both Visual Studio .net and Dreamweaver and both IDE's have some pretty easy ways to use layers or tables, flow layout or grid layout. Saying one way or another is the best way is kinda crazy don't ya think. Learn both and you can use both together. Drag and drop the darn layout and spend some time learnig JavaScript or asp.net. : )

Voo

Voodoo1967 · #13 (**permalink**) 11-19-2004, 09:57 PM

Dreamweaver also has the option of using templated pages that you can apply and then only edit the content per page and edit the layout site wide. ASP.net will also have what is called master pages that work the same way in the upcoming new version 2.0. You can download the beta free to try it out http://msdn.microsoft.com/asp.net/

Tjaart · #14 (**permalink**) 11-19-2004, 11:50 PM

If you want to learn more about CSS have a look at http://www.alistapart.com. Step-by-step instruction on how to do things. Helped me a lot.

Tjaart
Siam Excursions

wmabear54 · #15 (**permalink**) 11-20-2004, 02:58 AM

hi I have to agree with tjaart about good tut's on css and it is http://www.pmob.co.uk/temp/3colfixedtest_explained.htm if that is what you are are looking for and it was for me. It is what I wanted and I got it this is what I have done with it so far http://www.giftdealsgalore.com/untitled-14.php I know more now than I did. alistapart.com is good too.
Mike

le_gber · #16 (**permalink**) 11-20-2004, 06:01 AM

Tjaart & wmabear54 are right, the first place to look for if you want to learn CSS table less design is ALA www.alistapart.com.

You may also want to check www.simplebits.com, www.zeldman.com and the CSS Zen garden (www.zeldman.com).

If like me you wanted to learn CSS for SEO and Accessibility issues you may want to go down to your favourite bookstore and buy the books from the zeldman dude: 'designing with web standards'.

as for

Quote:

Should I just forget learning tables and start learning CSS layout, if so, are there any good tutorials you could recommend?

If you're just starting I think you should start designing with table and use css for styling. Once you got your hands and head round it, start using CSS for layout.

hope this helps.

[a bit of self promotion] the website to review below is actually my first CSS-P table less (except for the form) website. If you guys would like to review it[/a bit of self promotion]

Leo

msadmin · #17 (**permalink**) 11-20-2004, 12:02 PM

Quote:

Originally Posted by ronbaker1

Be certain to test first with FireFox, then with IE. And use an appropriate DOCTYPE statement, for example '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'. You'll find this will produce a CSS page that works the same across almost all browsers 4.0 and up.

Actually that WON'T produce a CSS page at all and virtually has nothing to do with CSS. It is an important part of an HTML document but CSS will work just fine without it.

Yes I have found the need to use tables instead of CSS but I have to admit it was only because of time constraints or laziness.

Maybe if I give you a simple template you could figure it out for yourself. I think it's as easy as that. Yes CSS is really simple.

Save this as an HTML file (index.html)

Code:

<head>
<title> title </title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="index,all" />
<meta name="robots" content="index,follow" />
<meta name="revisit after" content="15 days" />
<link rel="stylesheet" type="text/css" href="styles/styles.css" />
</head>
<body>

<div id="header"></div>
<table class="nav">
	<tr>
		<td>

site map our history our services our portfolio contact us jobs at</p></td>
	</tr>
</table>
<div id="main"></div>
<div id="footer">

Copyright 2000 - 2005. Your Company</p></div>

</body>
</html>

Now make sure to make a folder and name is styles and save the code below into 'styles.css' as you can see is in the statement in the above code

Code:

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

CSS Code:

Code:

body{background:#ffffff;margin:0px;}
div#header{border:solid 1px #ff0000;width:100%;height:100px;border-width:8px 0px 0px 0px;}



table.nav{border:solid 1px #000000;width:100%;border-width:1px 0px 0px 0px;}
table.nav p{font-family:verdana;font-size:.8em;}
table.nav a{text-decoration:none;color:#000000;margin:0px 10px 0px 10px;}


div#main{border:solid 1px #C0C0C0;width:100%;height:400px;}




div#footer{border:solid 1px #000000;width:100%;height:30px;text-align:center;margin:10px 0px 0px 0px;
border-width:1px 0px 0px 0px;}
div#footer p{font-family:verdana;font-size:.54em;margin:7px 0px 0px 0px;}

This is basic so play around with the values and find the patters in the width properties. Right now the width of each div (which used to be a table) is 100%. Go from there.

Once you get the hacks downpacked then you won't be so reluctant to use the almighty CSS,

ebitsden · #18 (**permalink**) 11-20-2004, 08:41 PM

I'm a recent convert to css, and Id say that I do prefer it to the table based way that I was very comfortable with. The basic advantage is speed, bandwith, and accesibility are improved. While you seperate content from design, you can even make one stylesheet that you call in for every page.

But it can be hard to grasp basic concepts at first. I did until I picked up a handy book and mocked-up some practice sites. Also, I was able to find many awesome websites done in css for inspiration, some of which have been mentioned: http://www.csszengarden.com, http://www.mezzoblue.com, http://www.zeldman.com, http://www.simplebits.com, http://www.hicksdesign.co.uk, http://www.justwatchthesky.com/, http://www.cssbeauty.com, and what the hey, here's my own school project I designed in css, my second css site http://www.ebitsden.com/siddhartha
And that's just scratching the surface,... I think its ready for primetime. I'm redesigning my main site soon using complete css and xhtml.

deltatrend · #19 (**permalink**) 11-20-2004, 09:11 PM

Quote:

Originally Posted by ronbaker1

If I understand correctly what deltatrend is trying to accomplish, it's easy with CSS Styles to center text vertically (or horizontally) within div sections as well as centering the div on the page. Here is an example

I know this is not supposed to be a thread about CSS layout, but ronbaker1's posting seems to be incorrect. I have tested his code http://deltatrend.com/CSS_Example.htm. I have added the "height: 200px" to the div.

The text is not vertically positioned withing the div. I would love to see the solution to this.

Voodoo1967 · #20 (**permalink**) 11-21-2004, 05:58 AM

I'm not trying to go overboard with the Dreamweaver thing, but that's how I got introduced to this topic. In Dreamweaver 2004 they included a bunch of what they call "Page Designs CSS" that are prebuilt with some good information at their develepment center. I put all the templates on my server for viewing and download if anyone wants to see some quite advanced samples. I also added a link to the lesson. You can find it here. : ) http://www.vision32.com/Downloads.aspx

tmwender · #21 (**permalink**) 11-21-2004, 06:57 AM

The promised advantages of faster loading and better, deeper bot scanning were too much to ignore. My designs are now all CSS.

The real problem is the browser interpretations. I hack this by having separate style sheets for each user agent class, with browser detection and style sheet link rewrites on page load. Then I carry a user agent variable throughout the session. Works like a charm.