homepage Welcome to WebmasterWorld Guest from 54.167.11.16
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
To CSS or not to CSS?
Why choose CSS instead of tables?
kiwanji




msg:1182358
 9:13 pm on Jan 3, 2003 (gmt 0)

I was reading in the web design forum about using CSS instead of tables. I have never taken the time to learn much about CSS but I do understand they would be helpful for things like font styles and sizes, etc. What I did not understand was the discussion in one of the threads on that forum (http://www.webmasterworld.com/forum21/3981.htm) about not designing pages in structuing tables any longer. The ideas being presented were that you could design using CSS instead of tables for a variety of reasons. One was that XHTML does not recognize tables? I was very confused by that.

I guess my problem is that i use structuring tables on every page I create to lock information into place on the page. I even teach my students this. My resoning is - why would you allow a user to change the way your page looks after putting so much effort into creating it's display? If you do not put content into tables then the user can resize the page and paragraphs will get "squished" and the careful design of your page will be out the window.

So, when do we start learning CSS? I don't think I can make the leap, especially after hearing all these problems with cross-platform useage (why would anyone use Netscape anyway?) :)

Thanks!

 

gsx




msg:1182359
 9:25 pm on Jan 3, 2003 (gmt 0)

Because Norton AntiVirus caught several viruses in my cache a few months back - all designed to be automatically installed by Internet Explorer. Fortunately, they were in the Netscape cache. Thank you IE for being so popular and so insecure that people don't write many virii for Netscape.

CSS for Tables?

Depends on what you want exactly. For displaying a table, with headers and columns, tables are still the correct way of doing this. CSS should be used for column layouts, such as a newspaper style - you should not use tables for things like this. For some reason (one I have never understood) browsers tend to render tables slower than CSS styling. Some suggest that all the images have to load before any of the table is displayed so the browser can determine the size, this can be true in some instances even in IE. But that argument holds true against the CSS variety - all the images need to load before it can determine the size. But browsers don't - those that suffer from such a problem shuffle the page about when loading, something that they don't do with tables. I've never understood the difference. But thats the way life is. I changed my site to CSS, columns with CSS small boxes and small layouts within these columns still use standard tables.

And the bit you mention about getting squished - do you mean if the browser window is too narrow? CSS can be formatted by pixel size as well as percentage and many other measurements; Tables will get squished if you specify them with the same measurements as CSS.

madcat




msg:1182360
 9:35 pm on Jan 3, 2003 (gmt 0)

kiwanji- come join us;)

take a look at this article:
[thenoodleincident.com...]

the web should be an environment that can be be accessed by all sorts of devices, not just screen. by breaking your code out of table cells (except for tabular data), you open your information up to a whole new world. remember aural, text-only and hand-held browsers...they will need the information on your site. css affords you the capability. also, you'll find that your total code is greatly reduced and easier to manage. information that needs to be managed, like from a database, will still be held in tables because that's their purpose. other than that the content should be free.

also check:
[nypl.org...]
[w3schools.com...]

...for a great introduction or two.

good luck!

jaeden




msg:1182361
 9:35 pm on Jan 3, 2003 (gmt 0)

Tables aren't dead, use them if you want. Some people like to use CSS when designing code because it gives you the ability to streamline your code using DIV statements, and then positioning your boxes using CSS. It really is amazing how small your pages can be when you take a huge page designed with tables and convert it to CSS. Some great places to read and see CSS in action are glish.com [glish.com], bluerobot.com [bluerobot.com] and glassdog.com [glassdog.com].

Warning, you may not want to go back to tables once you see how cool these sites are.

Jaeden

kiwanji




msg:1182362
 9:45 pm on Jan 3, 2003 (gmt 0)

What I normally do is set a table to a specific width (depending on the auidience either 750pix for older audiences or 1000pix for newer audiences). That way, it doesnt matter what size the user has the window open to, the content is still presented in the same manner. If I set a table to 100% then the table will still be manipulatable and content will move depending on how the user has the window opened.

What I have never delved into are div's. The only time I see them is when Dreamweaver creates them for centering blocks of text and the like. When boxes are mentioned, I am not understanding what happens. Does the DIV create a box that you can set the width and height to and then set its position on the screen, something like hanging pictures on a wall?

I understand the need to start creating pages that can be accessed by multiple interfaces, such as handhelds, I thought that was the point of using XHTML! If tables are not appropriate for handhelds then why does XHTML support them?

Development just gets harder and harder.

madcat




msg:1182363
 8:33 pm on Jan 4, 2003 (gmt 0)

Does the DIV create a box that you can set the width and height to and then set its position on the screen, something like hanging pictures on a wall?

Exactly. You can set your widths and heights using percentages - nothing changes as far as the liquid layouts you've mentioned. Imagine you want to make a box that is 100px by 100px. Next, say you want to place this image 10px from the top, and 10px from the left. We will give this a 3px border so we can see what's happening. The CSS rules that will make up this box are:

box1 { 
position: absolute;
top: 10px;
left: 10px;
width: 100px;
height: 100px;
border: 3px solid #000;
}

Next, let's look at the bigger picture. You have a normal HTML document, notice the bolded CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Learning CSS - Super Cool</title>

<!-- Declaring style rules -->

<style type="text/css" media="screen"> 
body {
margin: 0px;
padding: 0px;
background: #fff;
color: #000;
}
<!-- Here is our box. This is the 'box1' class. -->
.box1 { 
position: absolute;
top: 10px;
left: 10px;
width: 100px;
height: 100px;
border: 3px solid #000;
}
</style>

</head>

<body>

<!-- Place the box on screen. The rules above will draw the box. It will help you to remember that EVERY element is going to create a box (from a <p> tag to an <a> tag). -->

<div class="box1"></div>

</body>
</html>

This snippet might give you a good idea what XHTML was cooked up for:

XHTML is in many ways similar to HTML, but is designed to work with the new eXtensible Markup Language, or XML, that will soon serve as the core language for designing all sorts of new Web applications, in which XHTML will be only one of many "languages." But, XHTML is designed to work with these other languages, so that different documents, in different languages, can be easily mixed together.

-- For example, MathML:
[w3.org...]

If tables are not appropriate for handhelds then why does XHTML support them?

For tabular data. Tables are here to stay for information designed to fit in table cells. It's not just that though. Take a look at this link below - it leads to further links - but identifies just a few reasons why using tables for layout should be avoided.

[snow.utoronto.ca...]

Development just gets harder and harder.

There is a whole lot to learn for sure. But it really isn't as bad as it seems. In just a short time, you can learn enough CSS to start laying out your pages. What's funny is that, eventually after the confusion subsides you find the grass is greener. Food tastes better, etc. Less typing and a more intuitive technology will do wonders...but that's just me;)

A couple more links to get started:

[westciv.com...]
[nypl.org...] >>
Can't stress enough.

Keep On!

kiwanji




msg:1182364
 4:07 pm on Jan 5, 2003 (gmt 0)

Three more questions...

1.) What kind of accessibility are we talking in regards to CSS? Does it work cross-platform and with older browsers (I am pretty sure older browsers are limited right?)? If it does not work with older browsers, what happens to the content on computers using these dinosaurs?

2.) I understand setting up the first box. After that, what about the rest of the boxes? If a box is to be placed under the first, does it reference the bottom of the first (when setting up the positioning) or does it reference the top of the page still?

3.) Inside the <DIV> tags, are we still designing like as of old with basic HTML? I am pretty sure of this but I thought I would check to make sure.

Thanks everyone!

Yoeri




msg:1182365
 5:59 pm on Jan 5, 2003 (gmt 0)

I also used tables for doing my layout. But after reading the article of the redesign of the wired website, I changed my mind.

[stopdesign.com ]

Most of the web applications we write at work have a 2-column layout with a header, and a single color scheme. The applications only work on IE 5.x, 6.

I recently started using Mozilla because it is gaining a lot of popularity ... and I like it.

With the use of css I can now change my color scheme with very little effort, and I can also change my page layout. Instead of changing my asp.net server control to support multiple page layouts, i just include another css file. And above all, I can now run the applications on Mozilla based browsers too!

Less code and more flexibility ... thats is what we are searching, and css looks to be the solution to my problems

Birdman




msg:1182366
 6:15 pm on Jan 5, 2003 (gmt 0)

Let's not forget Nick's CSS Crash Course [webmasterworld.com] as reference material.

madcat




msg:1182367
 6:44 pm on Jan 5, 2003 (gmt 0)

I understand setting up the first box. After that, what about the rest of the boxes? If a box is to be placed under the first, does it reference the bottom of the first (when setting up the positioning) or does it reference the top of the page still?

If you set position: absolute; on an element, that element will be removed from the documents normal flow. It won't have any idea where it is on the page - you have to tell it. You could put it absolutely anywhere; it might overlap other elements and it wouldn't care at all.

In the example above, subsequent boxes will be referenced from the top left corner of the page. This is the initial containing block, <HTML>. This is only because these elements are descendants of the ICB. They could just as easily have a <div> parent which would become it's containing block --> therefore, being referenced from the top left corner the <div> and not from the ICB.

Remember though. If the ancestor element is not positioned, you will have to set position: relative; (or absolute or fixed...) on it in order for it's absolutely positioned descendant elements to be referenced from this containing block. For example, notice how both black boxes are absolutely positioned and have the same top and right settings:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Learning CSS - Super Cool</title>
<style type="text/css" media="screen">

body{
margin: 0;
padding: 0;
background: fff;
color: #333;
}

p{
padding: 10px;
margin: 0;
}

div.container
{
position: relative;
margin: 20px;
width: 52%;
border: 1px solid #000;
font: 12px/22px verdana, helvetica, sans-serif;
}

.black-box {
position: absolute;
top: 10px;
right: 10px;
width: 50px;
height: 50px;
background: #000;
color: #fff;
}

.black-box-b
{
position: absolute;
top: 10px;
right: 10px;
width: 50px;
height: 50px;
background: #000;
color: #fff;
}

</style>
</head>

<body>

<div class="container">

<div class="black-box-b"></div>

<p>Inway CSSAY2, anymay oxbay ositionspay andway izessay areway
alculatedcay ithway espectray otay ethay edgesway ofway away
ectangularray oxbay alledcay away ontainingcay ockblay. Inway
eneralgay, eneratedgay oxesbay actway asway ontainingcay
ocksblay orfay escendantday oxesbay; eway aysay atthay away
oxbay "establishesway" ethay ontainingcay ockblay orfay itsway
escendantsday. Ethay asephray "away ox'sbay ontainingcay ockblay
" eansmay "ethay ontainingcay ockblay inway ichwhay ethay oxbay
iveslay," otnay ethay oneway itway eneratesgay.</p>

</div>

<div class="black-box">
</div>

</body>
</html>

--------------------------------------------------------------------------

If it does not work with older browsers, what happens to the content on computers using these dinosaurs?

It gets to them, just not as gracefully.

--------------------------------------------------------------------------

Follow some of these links and threads in the forum, you'll be up and running in no time.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved