Css-p Tableless Design Help Needed.

[Deverill]

Hi folks.

 

Due to me finding a new "thing" I have been trying to convert my main page to a tableless page using CSS just to see how it works in real life.

 

I have run into a couple of questions. My latest version is www.covenantwordchurch.org/index6.php if that helps see what I mean.

 

1. My nav section on the left is not as long as the content section in the middle. Should I somehow nest the two divs or is there another way to keep them the same?

 

2. I have the whole thing in a div align="center set of tags but it's not centered (as index.php is). What is the "right" way to center my whole page for those with high resolutions set?

 

3. The words in the center content section all flush up against the left edge of the div. With a table there are padding and spacing settings to control this sort of thing. Is there a div setting I can use to put some breathing room in there to get the words off the border?

 

Thanks!

[btrfld]

1) check out This Link

The entire project is much more complicated, but the first few paragraphs of the example show just how to grow your menu section along with the content.

 

2) here's what works for me (very stripped down):

 

body ( text-align: center;}

#container { margin-left:auto; margin-right:auto}

 

Put everyting in the container and it will center itself.

 

3) There are margin and padding styles for nearly every kind of object, roughly corresponding to spacing and paddng in tables.

 

In a general way, I've learned a lot from A List Apart. Check out the Archive. There are also many links in various articles there, going to other sites with good css examples.

 

Hope all this helps.

[Deverill]

Great, thanks for the hints and links. There is so much out there about CSS and CSS-P that it's hard to home in on the good stuff so I appreciate the leads!

[Mav2u]

I would also like to point you to some css resources.

 

thenoodleincident.com/tutorials gives links to his and other peoples resources on doing css design.

 

Or you could just look at his already finished CSS design templates at CSS Box Lessons

 

Here is another layout site for learning, CSS Layout Techniques: for Fun and Profit

 

bluerobot has some nice ones also.

 

Or this one has many layouts with compatibility browser listings. Nemesis Project

 

These sites should give you a good start on figuring out what you wanna do. Also some good books on CSS design out there also.

 

A few books I like are: HTML Utopia: Designing Without Tables Using CSS and Cascading Style Sheets: The Designer's Edge. I have both books I just bought last month and I enjoy the information contained within, they are very informative and straight forward.

 

 

Mav

[TCH-Don]

Great links!

 

 

 

 

 

 

(jim kept me up til 4 am with his link)

(now Mav is going to keep me up tonight)

( )

[Deverill]

Again, thanks to the family for some great links!

 

I'm about to pull the rest of my hair out! I went through a couple of sites and got my index page looking perfect (after almost all day) and then went to Opera and Firebird and it looked not only like crap on both but it also looked different in each! Is this CSS-P stuff too new or did I just hook up with the wrong tutorials that perhaps focused on IE? Arrrggghhh!

[Mav2u]

You gotta watch what css syntax choices you make. Not all of them work with every browser, or every version of that browser. This link here will help out a little, it give tutorials plus it also shows at the bottom what css syntax works with what browsers. The best bet would be to try the book I mentioned earlier from HTML Utopia: Designing Without Tables Using CSS.

 

Try the w3schools.com site. They have many tutorials and other info on css.

 

 

Mav

[TCH-JimE]

Hi,

 

Tableless designs is what I mostly do for work, and I love doing them, gets away with all that other rubbish stuff that you just don't need.

 

You should be able to design a tabless layout so that both IE and morzilla can see it perfectley 1st time around.

 

If you still have problems, post below and I will take a look!

 

Jim

[surefire]

(My rambling thoughts.)

 

Tableless design is a great concept and I know that some members are successfully using it.

 

Switching from tables to css-p is not easy. The more complicated the design, the easier it is to give in and use tables.

 

I've spent hours combing the web for layouts that don't break in this or that browser... personally, I found it to be a huge investment of time for very little payoff.

 

The exercise was useful, since I am very conscious to reduce my reliance on tables... but I still use them a little bit.

 

Some of the more intelligent, patient, dedicated folk, like Jimuni, have mastered css-p. For me, it just takes too much time.

 

Beware that this is not an easy skill to acquire... but maybe that indicates it's worth it.

[chadf]

Why are tables such a bad thing? I spent a lot of time trying to learn table-less design using CSS, and in the end I had to find a compromise. Until CSS is more consistent between browsers, why waste so much time trying to completely elimnate tables? After all, they work perfectly for what I need them to do - and they work consistently between broswers. I guess don't really understand this whole "table-less design" debate. Now I agree that table design can be abused (ie. MS Frontpage), but again I ask - Why are tables such a bad thing?

[TCH-JimE]

Hi,

 

Reasons tables should be banned:

 

1) Bane of any page buying built. No WYSIWYG can create tables correctley or as simplfied as they should be. Often over used by the novice who in all fairness, does not understand what is going on.

 

2) Still actually poorly supported in all browsers. Try too many tricks with them and the page falls apart. Highly annoying to fix if someone comes to you with a page thats messed up, it could mean taking apart the entire page to find just one missing tag

 

3) People use them but dont have a thought about screen readers and other software that blind and disabled people use. They read tables downwards rather then across. The human eye of course goes left to right (or right to left depending on langauge)

 

4) Because of part 4 above, many pages fail any of the new rules for pages with regard to WC3 Accessilibity

 

5) With tabless designs, its all controlled via CSS. I can modify just one line which changes all the text and numbers, colours, backgrouns of every tag using that name.

 

6) You shouldn'nt need to support NS4 any longer. Its old technology that unfortuantley, good as it was back then, should be put to bed. Permentantly.

 

Yes it takes time, I have come across a few pages which go "yes do it this way" only to fail in another browser, but once learnt and the concept and downfalls understood, the pages are easier, lighter in code and are better all around.

 

Jim

[TCH-JimE]

To jim who orignally did this post.

 

Are you still having problems and if so what ones. Most of your questions are answearable, but I am not sure what u mean by "nav not as long"

 

Jim

[surefire]

Tables aren't a bad thing, I personally still use them, as I stated before.

 

From what I have read, there are two main arguments:

 

1- Purists who believe that design and content should be separate. In their eyes, tables were never intended for positioning but rather for displaying data (scientific data in a spreadsheet format).

 

2- Search engine optimizers will point out that tables push your content further down the page and decrease the impact on positioning in search engines. Some take this argument to the furthest extreme and say that the goal should be the total elimination of tables so content is right at the top. It's possible with css-p to code the content before navigation even if the navigation shows up first on the page in a browser.

 

While both of these arguments hold some water, not all users have the most up to date browsers. Different browsers interpret some elements of css-p differently.

 

Chasing the bleeding edge of technology can be a time consuming task.

 

As a developer who needs to create pages that work on most browsers without spending several days designing the layout... I do use tables.

 

But css-p has taught me ways to reduce the number of nested tables and has helped me remove depricated elements and rely more on css.

 

Some very popular layouts simply are too much trouble using css-p.

[btrfld]

First, let me say that I'm only beginning to try layout without tables. Like surefire, I find it intriguing, and not always possible (yet).

 

That said, my take on css vs tables is that if you want to apply a new design to your site, with tables you basically have to start over and re-write every piece of code. One hopes that with css and intelligent site structure, new design can be applied without having to re-code everything.

 

Just as an example of what can be done with css, take a look at The Zen Garden.

 

Their deal is that designers take the same html and apply different css to it. I find it amazing and inspirational.

[Deverill]

...but I am not sure what u mean by "nav not as long"

I'm at my day job right now so I can't get into details but my biggest stick-point right now is that I have, in simple terms, 3 divs. One is a container for the other two.

 

The one on the left is a navbar type and on the right is the content. My content is longer than my navbar on the index page so that side extends far below the other side which looks bad.

 

I scrapped and restarted the design when it got too muddled in my mind and on paper so my latest is still on my home PC, but for an idea of what I mean see http://www.covenantwordchurch.org/index6.php (don't waste a lot of time looking through the source because it has evolved a bit since then.)

 

I'll check the links and see what I can figure out and if it's getting to be too much I'll followup here with specifics. It may be a few days though because of a pretty hectic schedule the first part of this week.

 

The links are great and y'all's (I'm from Kentucky, ok!) help is terrific! Thanks!

[TCH-JimE]

Hi,

 

The way to get around that is to set the depth of thoose two div tags in question so that they are both equal.

 

If you still have problems after that, let me know and I will take a look at your newer code

 

Jim