Design with CSS?

nomayo · #1 (**permalink**) 11-18-2004, 11: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-19-2004, 12:06 AM

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-19-2004, 12:37 AM

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, 04: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, 08: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, 02:51 PM

thanks for taking the time to answer my post.

ronbaker1 · #7 (**permalink**) 11-19-2004, 06: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, 07: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, 07: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, 08: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, 09: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, 09: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, 10: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-20-2004, 12:50 AM

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, 03: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, 07: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, 01: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, 09: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, 10: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, 06: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, 07: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.

Kellare · #22 (**permalink**) 11-21-2004, 01:35 PM

Quote:

Originally Posted by deltatrend

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

This is a bit of a nasty solution for ie and a nice one for firefox, the main benefit I see of css for me is consistency across web pages and just for the record, firefox messes up css quite a bit at times, it might be worth waiting until a few more bugs are fixed before using it as a standard test platform for all of your web design. so said, as a browser, it rocks ;)

When it comes down to it, I use tables and css interchangeably, whichever one I makes my life easier at the time + for future maintenance, I use.

<html>

<head>
<title>New Page 1</title>
<meta name="GENERATOR" content="Notepad - the only thing ms wrote that works">
<style>
div#centerDiv {
margin-left:auto;
margin-right:auto;
display:table-cell;
vertical-align: middle;
text-align:center;
border:2px solid gray;

}
div#outercenter{ margin-left:auto;
margin-right:auto;
text-align:center;
border:2px solid gray;
display:table-cell;

}
div#innercenter{
margin-left:auto;
margin-right:auto;
margin-top:40%;
margin-bottom;50%;
text-align:center;
border:0px;
display:table-cell;

}

</style>
</head>

<body>
<div id="centerDiv" style="width:600px; height:500;">
Here is some sample text centered within in a div section. The text is centered by
using a CSS style with
"text-align:center"

"vertical-align:middle".

and "display:table-cell".

This style works with firefox but not ie.
</div>

<div id="Outercenter" style="width:600px; height:500;">
<div id="Innercenter">
Here is some sample text centered within two div sections. The text is centered by
using a CSS style with
"margin-top:40%"

"margin-bottom:50%" within the inner div.

This style works with ie but lets face it, it's much easier with a table ;)
</div>
</div>
</div>

</body>
</html>

There's another solution here too which works on all browsers -> http://www.wpdfd.com/editorial/wpd0103.htm#toptip

greeneagle · #23 (**permalink**) 11-22-2004, 08:35 AM

davebarnes:
"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."

________

I have to agree with Dave, too many work arounds and inconsistencies for different browsers. Whether due to immaturity of browser support or the evolution of CSS itself, IMHO - Page layout just isn't there yet!

Ken

slideri812 · #24 (**permalink**) 11-22-2004, 07:42 PM

Hi all,

There are too many quotes to quote so I’ll hit the big ones only:

1. Try this out www.westciv.com and download StyleMaster. You’ll be cranking out CSS based sites in no time. It comes with several site templates ready to go, all you have to do is tweak the CSS. Additionally it gives you a look at the HTML and the CSS and how the two should be put together. The site has really great support, tips, tricks and forums for CSS and the product. If you buy it, it is cheap, about $40. I have been using it for about 6 months and all of my sites use CSS to one degree or another. But all new sites use the CSS to control the look of the tables.

2. ESPN: you have got to be joking. ESPN has mountains of money to burn in research and programmer time. Not and adequate analogy for the common or newbie developer. If you want total CSS for the regular guy check this out www.solardreamstudios.com better have Safari or Firefox.

3. As with all websites you need a plan to work from. Implementing the plan is the tough part. There are few CSS WYSIWYG editors. Having more of these (westciv.com has one) would help move the whole CSS thing forward.

4. I have this issue myself

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

Ronbaker1 wrote:
“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>”

This is not a CSS solution. What you have done is demonstrate that even with CSS you need to apply some stylizing and formatting directly into the page. This negates or counters and cancels out the whole “control your content look and layout with CSS” if you have to tweak your in page content by hand. Not to mention the CSS you used is inserted. That works for one page (using HTML controls), what about the rest?

5. Browser compliance:
CSS has a really great future ahead of it. It IS the standard of the future. And, many people consider it the standard of today. However, a standard is not a standard if it is not ubiquitous. Take USB, it is ubiquitous. My camera plugs in to MAC’s, Dell’s HP’s and any other device that has a USB port. This is not the case with CSS. As it was stated above, design for FireFox and Tweak for IE. What kind of a design philosophy have we come to when this type of approach is becoming the norm. Until we can build sites that use ONE style sheet (resolution differences aside) that will display the content equally and correctly in ALL browsers we will continue to have this divide.

Thank you Microsoft for your continued resistance to make IE standards complaint. I take this as a clear sign that the method of delivery has not kept pace with the innovations in design.

It is not so much that CSS is not ready for primetime; I think that primetime is not ready for CSS.

kimmykool · #25 (**permalink**) 11-29-2004, 07:54 PM

From the mind of Eric Meyer comes this great little site pushing CSS to the edge. It is, in his words:
"intended, first and foremost, to be as relentlessly creative with CSS as we have been practical all these years. It does not exist to present or explain safe cross-browser techniques; in fact, almost the opposite. The goal here is to find ways to make CSS live up to its fullest potential, with only minimal regard to browser limitations."

http://www.meyerweb.com/eric/css/edge/

found this on glish.com.

These are the sort of results I get from one of my sites. The agent type report details the web browsers used to connect to the site over a few days.

Robot 46.6%
MSIE 32.4%
Unknown 14.8%
Netscape Gecko 2.5%
Mozilla Compatible 1.8%
Netscape 1.0%
Opera 0.7%
Mozilla 0.1%

I have moved over to CSS for layout, I always check for cross browser compatibility but am never that bothered by the minor blips.
(minimal regard to browser limitations)

I am a sucker for validation I just love it! CSS is the most friendly way for accessibilty along with simple clean HTML (W3c accessibilty guidelines).

I don't know what I have added to the debate really but I fancied a chat!!!

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode