i'm happy to say im going back with designing with some tables - Page 2

allworknoplay · 03-18-2009, 09:37 PM

Quote:

Originally Posted by delayedinsanity

Honestly, the first thing I would do in that situation is examine my reasons for creating that kind of complexity and determine what method would be best to simplify the process. Tables or CSS, the less you need to compartmentalize like that the less markup you're going to use and the faster it's going to be -- as well as easier to modify later.

Yes this is the issue that I am fighting with. I don't really ever know how a website is going to turn out or look when I am in the initial stages. Even towards the end, I will re-arrange tables and add/delete columns or rows to my liking. It's like painting where you are constantly adding slight touches with a paintbrush..

That's why it's hard for me,(right now at least) to design via CSS and then go back and edit it...of course it all comes down to experience so I just have to get to it...

Also thanks for the DIV tags so I will take a look and disect it and try to figure it out...

With that said, this example took me about 30 seconds to write;

HTML Code:

<div style="width:400px;height:150px;border:1px dashed red">
    <div style="width:98px;height:148px;border:1px solid blue;float:left">
        <div style="width:96px;height:35px;border:1px dotted green"></div>
        <div style="width:96px;height:35px;border:1px dotted green"></div>
        <div style="width:96px;height:35px;border:1px dotted green"></div>
        <div style="width:96px;height:35px;border:1px dotted green"></div>
    </div>
    <div style="width:98px;height:148px;border:1px solid blue;float:left"></div>
    <div style="width:98px;height:148px;border:1px solid blue;float:left"></div>
    <div style="width:98px;height:148px;border:1px solid blue;float:left"></div>
</div>

<div style="width:400px;height:150px;border:1px dashed red">
    <div style="width:98px;height:148px;border:1px solid blue;float:left"></div>
    <div style="width:98px;height:148px;border:1px solid blue;float:left"></div>
    <div style="width:98px;height:148px;border:1px solid blue;float:left"></div>
    <div style="width:98px;height:148px;border:1px solid blue;float:left"></div>
</div>

Rudimentary at best, but the colorful borders should show you that I accomplished your task with very little effort. From that point I have complete control over each DIV element with further refinements such as margins, padding, backgrounds, etc.

It's something that comes with practice, I'm sure. There are some crazy crazy things done with CSS that I couldn't even hope to reproduce at my experience level, but I can guarantee you tables would never accomplish the job. Plus once you include a style sheet with your page, incorporating IDs and Classes, there's just no comparing the cleanliness of the 'code'.

I learned HTML and CSS primarily by dissecting other web sites and having the W3C open in another window, but StumbleUpon search term CSS turns up some snazzy information. Can't go wrong there.[/quote]

allworknoplay · 03-18-2009, 11:32 PM

Hey guys,

Here's my first DIV, how in the world do I CENTER it?

Code:

<body>
<div id="layer1" style="position:absolute; top:50; left:50; width:1024; height:100; z-index:1; padding:5px; border:#e0e0e0 1px dashed; background-color:#EEEEEE;">
Test
</div>
</body>

Krik · 03-19-2009, 02:49 AM

HTML Code:

<div id="layer1" style="position:absolute; top:50; left:50; width:1024; height:100; z-index:1; padding:5px; border:#e0e0e0 1px dashed; background-color:#EEEEEE; text-align: center;">
Test
</div>

Will align the text center.

Or if you need the div centered use

HTML Code:

<body style="margin: 0 auto;">
<div id="layer1" style="position:absolute; top:50; left:50; width:1024; height:100; z-index:1; padding:5px; border:#e0e0e0 1px dashed; background-color:#EEEEEE;">
Test
</div>
</body>

And yes I know, it's not one anyone could have guessed.

allworknoplay · 03-19-2009, 03:33 PM

Quote:

Originally Posted by Krik

HTML Code:

<div id="layer1" style="position:absolute; top:50; left:50; width:1024; height:100; z-index:1; padding:5px; border:#e0e0e0 1px dashed; background-color:#EEEEEE; text-align: center;">
Test
</div>

Will align the text center.

Or if you need the div centered use

HTML Code:

<body style="margin: 0 auto;">
<div id="layer1" style="position:absolute; top:50; left:50; width:1024; height:100; z-index:1; padding:5px; border:#e0e0e0 1px dashed; background-color:#EEEEEE;">
Test
</div>
</body>

And yes I know, it's not one anyone could have guessed.

Still doesn't work for me. I will post the issue that I am having on a website so you guys can take a look...

Krik · 03-19-2009, 06:11 PM

Just a note on my reply if your trying to center the div you will need to remove the positioning style for the div. As positions absolute will ignore everything, even if it means positing over top of something else.

allworknoplay · 03-19-2009, 06:25 PM

Quote:

Originally Posted by Krik

Just a note on my reply if your trying to center the div you will need to remove the positioning style for the div. As positions absolute will ignore everything, even if it means positing over top of something else.

yeah, I tried that and it's still showing up aligned to the left of the page. I am trying to upload it on a server so that you could see how it looks.

Also, thanks for understanding what I meant about CENTERing eventhough I asked the question incorrectly.

The question was how to center the entire DIV, and not just the text within it, but you understood what I meant...

allworknoplay · 03-19-2009, 07:02 PM

Ok, I uploaded my DIV test to my server. Could you take a look?
It's aligned to the left, I removed the position attribute.

Below is the exact code for FYI:

DIV TEST PAGE

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test page</title>
<body style="margin:0 auto;">
<div id="layer1" style="top:50; width:1024; height:100; z-index:1; padding:0px; border:#e0e0e0 1px dashed; background-color:#EEEEEE;">
<div style="width:20; height:20;border:#CCCCCC 1px solid;float:left">#</div>
<div style="width:200; height:20;border:#CCCCCC 1px solid;float:left">Name</div>
<div style="width:250; height:20;border:#CCCCCC 1px solid;float:left">Address</div>
<div style="width:300; height:20;border:#CCCCCC 1px solid;float:left">Location</div>
<div style="width:75; height:20;border:#CCCCCC 1px solid;float:left">City</div>
<div style="width:75; height:20;border:#CCCCCC 1px solid;float:left">State</div>
<div style="width:102; height:20;border:#CCCCCC 1px solid;float:left">ZIP</div>
</div>
</body>
</html>

Also, is there anyway to clean up the DIV attributes? Perhaps with CSS? It looks just as messy as using TABLES almost...

Krik · 03-19-2009, 10:35 PM

Their are a few basics you need to get in order.

First, you need to make sure on sizes you use "px". example {top: 100px;} is better that {top: 100;}

Second you can not run-on style attributes, {width: 100px; top: 20px;} not {width: 100px;top: 20px;} As soon as I loaded your page firefox threw a big list of errors at me.

And anything you can put in an inline style you can put in the <style> tags or in a separate CSS file.

Here it is with the problem fixed and cleaned up. Note the width set to the body tag.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test page</title>
<style  type="text/css"><!--
body		{ margin: 0 auto; width: 1024px; }
.divstyle	{ height: 20px; width: 75px; border: #CCCCCC 1px solid; float:left; }
#divlayer	{ position: absolute; top: 50px; height: 100px; z-index: 1; padding: 0px; border: #E0E0E0 1px dashed; background-color: #EEEEEE; }
-->
</style>
</head>
<body>
<div id="divlayer">
<div class="divstyle" style="width: 20px;">#</div>
<div class="divstyle" style="width: 200px;">Name</div>
<div class="divstyle" style="width: 250px;">Address</div>
<div class="divstyle" style="width: 300px;">Location</div>
<div class="divstyle">City</div>
<div class="divstyle">State</div>
<div class="divstyle" style="width: 100px;">ZIP</div>
</div>
</body>
</html>

Also as a side note the width you set of 1024 if you trying to make sure the page will fit inside screens with a resolution width of 1024 that will be too large. You aren't counting the border of the window on the left or the scroll bar on the right. I have had to go as low as 990px to make a page fit inside of all browsers on screen with a resolution width of 1024.

allworknoplay · 03-20-2009, 12:14 AM

Ok, I will take a look at your code and see what I did wrong...

Yes, the 1024 was for those with 1024 resolutions...I've always thought it would fit without them having the need to use the horizontal scrollbar...

I guess I was wrong?

I'll have to pick out what I feel is a good width then..

I know you mentioned 990px, so I will take a look at that too...

allworknoplay · 03-20-2009, 12:18 AM

Quote:

Originally Posted by Krik

Second you can not run-on style attributes, {width: 100px; top: 20px;} not {width: 100px;top: 20px;} As soon as I loaded your page firefox threw a big list of errors at me.

The only difference I see with the two above is the the second one doesn't have a space before the TOP attribute...

{width: 100px; top: 20px;}
{width: 100px;top: 20px;}

Does that really make a difference?

EDIT UPDATE: Ok, I tried the new code and it works perfectly!

Does the STYLE attribute in the DIV tags override anything that's set in the CSS styles?

Krik · 03-20-2009, 12:39 AM

If the style is inline yes

HTML Code:

<div class="divstyle" style="width: 200px;height: 20px;width: 75px;border: #CCCCCC 1px solid;float:left;">Name</div>

If you run that in Firefox open the "Error Console" and you will see it will throw 4 errors.

When it is used up in the <style> tag it will not error but I still recommend the spaces first just for the continuity and second readability is big big deal in coding.

And of course I tested in just Firefox who knows how the other browsers will react. And since I did get an error in one instance of not using spaces it means there is a potential for errors to occur with other browsers in any style usage if you don't put spaces in. Whereas on the contrary having too many space is not going to cause any errors in CSS.

Krik · 03-20-2009, 12:43 AM

Quote:

Does the STYLE attribute in the DIV tags override anything that's set in the CSS styles?

Yes inline will override the styles set in the style tags or a CSS file.

I should note that placing inline style ahead of the id or class tag causes the styles set to the id or class tag to override the inline styles. So always place inline styles after the id and class tags.

As well style set to an id tag can be overridden by style set to a class tag if the class tag follows the id tag.

And style set in a file that is called before style set in <style> tag can be overridden by the style in the <style> tag.

EDIT: if your confused sorry but one more here. You can get javascript to override all the above overrides by having a function called with the onload event that set an elements style.

Best I can count you could override your styles 6+ times in the same page. Of course that is just poor coding but I can be done.

allworknoplay · 03-20-2009, 01:01 AM

Thanks Krik,

I had no idea about ERROR CONSOLE in FF. I use FF all the time too so I'll make it a habit to check it out from now on.

I have one more quick question. In the CSS STYLE, why does the "divlayer" have a # in front of it but the "divstyle" have a "."?

Code:

<!--
body		{ margin: 0 auto; width: 1000px; }
.divstyle	{ height: 20px; width: 75px; border: #CCCCCC 1px solid; float:left; }
#divlayer	{ position: absolute; top: 50px; height: 100px; z-index: 1; padding: 0px; border: #E0E0E0 1px dashed; background-color: #EEEEEE; }
.font10 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: bold; font-weight: bold; color: #990000;}
-->
</style>

I also added a font style....

Thanks again for your help on all this, you are really getting me on my way to using CSS/DIV's etc...

Krik · 03-20-2009, 01:23 AM

The "." is for the "class" attribute and the "#" is for the "id" attribute.

maZtah · 03-26-2009, 09:57 PM

allworknoplay:

You really should take a look at this html/css tutorial (going from beginner to advanced):

http://www.htmldog.com/guides/

All the basics will be explained to you, and thus you'll understand the whole css way of working.

Good luck!

allworknoplay · 03-27-2009, 02:44 AM

Quote:

Originally Posted by maZtah

allworknoplay:

You really should take a look at this html/css tutorial (going from beginner to advanced):

http://www.htmldog.com/guides/

All the basics will be explained to you, and thus you'll understand the whole css way of working.

Good luck!

Thank you! I will take a look and read it cover to cover...

WebSavvy · 03-31-2009, 09:46 PM

Quote:

Originally Posted by Wildhoney

I would feel, however, in terms of support for various screen types and browsers, HTML tables is the most compatible.

Actually, that's not true. Screen readers read a page based on how the page was coded. In other words, it reads the content based on how it is in the source code.

Screen readers do not support CSS files. If tables are used, it should be for tabular data as that was what they were designed for.

A page that is designed using a table-less design will display in linear format and be more accessible to a blind person or a person with motor skill difficulties, than would a page made up of tables.

And how do I know this? Well, I'm very knowledgeable in the area of web accessibility and I also happen to be legally blind and rely upon a screen reader to access websites.

If any of you have any questions you'd like to ask, I'd be more than happy to answer them for you, if I am able. :)

Krik · 04-01-2009, 01:00 AM

Sorry to resurrect this thread but ran into something that I thought would be a very note worthy addition to the discussion.

Several years ago I worked on a project that was very graphic intensive in it's layout. In that project tables were used extensively, in fact by today's standards over used. This project was from the early days of tabless design and many hadn't gone to it yet.

So, with myself having a bit of free time, I decided to pull the project out of my archives and load it on my server, and for the exercise of it see if I could eliminate all the tables. Nothing like a trial by fire.

The site was made to look like a book with a window in the cover of the book (for content). The site had two custom borders, one inside the other. Each of the borders had a top, left, right, and bottom background repeating graphics and all 4 graphics were different. As well there is a different graphic for all the corners (so 8 border graphics and 8 corners graphics).

The top and bottom as well as the corners worked out fine, in divs. But when I tried using a div for the left and right borders the div's height was only as tall as the browser view area. Now for some pages that would have been fine but in others it would have been several hundred pixels too short.

The problem is the long standing issue of setting the div height to 100%.

So no mater what I could not get rid of the last 2 tables on the site. Neither of which contains any content and one is nested inside the other.

So while tabless design is grand idea it is not 100% achievable.

WebSavvy · 04-01-2009, 08:34 AM

A table-less design works 100% but it depends entirely on how it's coded. My own site will be 10 years old this year and it's been table-less for more than 5 years now. It also passes WCAG-AAA by the new 2.0 standards.

There are some really good sites to learn table-less design from if you're really interested. For example, CSS Zen Garden, and a friend of mine owns a site that he offers free table-less layouts here at Search Engine Friendly Layouts.

Another site that is worth checking out is Access Sites. They showcase web accessible sites that use table-less design and pass web accessibility guidelines. Hope these resources are able to provide some help for someone. :)

WebSavvy · 04-01-2009, 12:40 PM

One more resource I forgot to mention that will really whet your appetite for the beauty of all that CSS can make possible ... visit CSS Play. It's one of my favorite CSS resources because it's so creative and he [Stu Nichols] does things with CSS that no one ever thought of. Truly a work of genius.