-
1. Re: Working without tables and with CSS
Nancy O. Feb 3, 2010 10:05 AM (in response to lifeguardlloyd)I don't know what your question is. But that's not a bad first effort with CSS. My only suggestions are to re-think the need for absolute positioning. When text size is increased in browser, some page elements collide which can adversely effect usability.
http://apptools.com/examples/pagelayout101.php
Use default CSS positioning (which is no positioning at all ) and add margins, padding and floats for alignment.
http://www.brainjar.com/css/positioning/
Finally, a little CSS shorthand will streamline your code quite a bit.
Where you have 7 lines of CSS code like this:
#div {
border-right-width: thin;
border-right-style: solid;
border-right-color: #D9B988;
margin-right: 2px;
margin-left: 2px;
padding-right: 2px;
padding-left: 2px;}
can be shortened to 3 lines like so:
#div {
border-right: thin solid #D9B988;
margin: 0 2px 0 2px; /**top | right | bottom | left**/
padding: 0 2px 0 2px;}
More on CSS Shorthand -
http://www.dustindiaz.com/css-shorthand/
Keep up the good work. CSS is a bit daunting at first, but you'll soon get the hang of it and you'll never want to use table layouts again.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com -
2. Re: Working without tables and with CSS
KevinSFreeman Feb 3, 2010 11:20 AM (in response to lifeguardlloyd)Hey LP,
Hang in there. I switched from GoLive to Dreamweaver 4 recently and will never look back. Finished my second no table site yesterday. I used a Dreamwever template for this site and wow! I am way psyched. I did have a couple of glitches with IE6, but who doesn't? And that really gave me a deeper understanding of how divs work.
Also I read Dreamweaver CS4 with CSS, Ajax and PHP by David Powers, which I can't imagine making the transition without! Nice book David!
The site I completed yesterday is http://ogunquitlobsterpound.com/Good luck,
Kevin
-
3. Re: Working without tables and with CSS
lifeguardlloyd Feb 4, 2010 8:07 PM (in response to KevinSFreeman)Very nice site. Thanks for the encouragement.
-
4. Re: Working without tables and with CSS
lifeguardlloyd Feb 4, 2010 8:20 PM (in response to Nancy O.)Thanks so much for your kind response and direction.
This was never so much a question as opposed to some showcasing and an attempt to be open minded; I had previously posted a question regarding tables and layout. The response I got was nothing short of passionate. The css camp is very strong in their views and usually intelligent; the table camp as a group finds tables convenient. I sit closer to css but still like what tables can do in some layouts. Everyone seems to agree that css is not as widely supported as it should. Many noted that a lot of big profile sites use tables in layout. If accessibility is the issue, why can't tables be made accessible?
We'll see where it goes.
LP
-
5. Re: Working without tables and with CSS
Nancy O. Feb 5, 2010 12:26 PM (in response to lifeguardlloyd)If accessibility is the issue, why can't tables be made accessible?
Tables ARE accessible when built and used correctly. Web Accessibility comes from proper use of Semantic Markup - headings, paragraphs, lists...
Below is an excerpt from the W3C - Web Content Accessibility Guidelines (WCAGs)
5.2 Tables for layout
Checkpoints in this section:
- 5.3 Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version). [Priority 2]
- 5.4 If a table is used for layout, do not use any structural markup for the purpose of visual formatting. [Priority 2]
Authors should use style sheets for layout and positioning. However, when it is necessary to use a table for layout, the table must linearize in a readable order. When a table is linearized, the contents of the cells become a series of paragraphs (e.g., down the page) one after another. Cells should make sense when read in row order and should include structural elements (that create paragraphs, headings, lists, etc.) so the page makes sense after linearization.
http://www.w3.org/TR/WCAG10-HTML-TECHS/#tables-layout
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com -
6. Re: Working without tables and with CSS
lifeguardlloyd Feb 5, 2010 8:56 PM (in response to Nancy O.)Thanks again. My intent is to return to technical college and further my knowledge. To date, I'm mostly self taught thru a multitude of books.
LP
-
7. Re: Working without tables and with CSS
lifeguardlloyd Feb 8, 2010 9:54 PM (in response to lifeguardlloyd)Hi everyone
This site, I did for a friend, is an example of what I like about tables. Once I figure out how to get css to replicate this site - I'm fully in. The tables are marked up in css of course. Mark up language is minimal.
http://www.mikeyspoolschool.com/
LP
-
8. Re: Working without tables and with CSS
polar_bare Feb 9, 2010 5:58 AM (in response to lifeguardlloyd)It looks good. I have one suggestion for the roblinchiro.com site that I think would make it a bit better.
The logo at the top looks too much like a button. Lose the button feel and I think it will be look better.
Good job,
Jim
-
9. Re: Working without tables and with CSS
lifeguardlloyd Feb 9, 2010 6:07 AM (in response to polar_bare)Thanks for the input. I guess people will try and "click it" eh? I know the client likes the 3D look; I'll play with it; I can create some very cool 3D efffects in other programs.
LP
-
10. No I don't think they will click it
polar_bare Feb 9, 2010 6:29 AM (in response to lifeguardlloyd)I don't think people will try to click it. I would work with the logo and use black and blue, possible white. Make it more like the sign in the picture. They have a good simple logo.
Just suggestions.
jim
-
11. Re: Working without tables and with CSS
Nancy O. Feb 9, 2010 11:49 AM (in response to lifeguardlloyd)an example of what I like about tables. Once I figure out how to get css to replicate this site - I'm fully in.
A 3-column CSS layout will do this.
Look at #4 at the following link:
http://www.tjkdesign.com/articles/one_html_markup_many_css_layouts.asp
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com




