trying to quit tables

[stjean]

Hi, I am new to web development and have used tables along with CSS to build a small site before.

I am doing a small club site and I would like to try to not use any tables. This is proving more difficult than anticipated. I would like to have 2 main columns with content and images to the left or right of the content.

At the moment I am finding it hard to accomplish some tasks;
Get the header image centered over the main navigation
Use a larger background image to go behind the login area
Get the pictures to line up correctly with the content
have the lower navigation menu go across the bottom of the page

If anyone could offer any advice or resources, I would greatly appreciate it. I have attached a copy of what I would like the page to look like, as well as what I am trying to accomplish.

I would also like to use includes for the footer, header/main navigation, and large image/login area if applicable.

Thank you in advance to for advice/help.

[Izzmo]

You are going to have a hard time doing this. Without tables, currently, you will not get the exact same site cross browser. Tables allow you to design it a little better cross browser though. So, without tables, you might be lost.

[Foxtrck]

Originally Posted by Izzmo

You are going to have a hard time doing this. Without tables, currently, you will not get the exact same site cross browser. Tables allow you to design it a little better cross browser though. So, without tables, you might be lost.

Not neccessarily true, css can display correctly cross browser if you know how to use it properly. Tables are not a very good option, probably the easy way out to be honest.

@stjean: search for css layouts/templates there may be some layout templates in css that you can start from, this would be good to help you learn more css as well. Tables become very cumbersome when dealing with complex structures and having tables within tables within tables in a nested structure is not a very good choice for design principles.

[Izzmo]

If you use seperate styelsheets for each browser, sure

Every browser interprets CSS differently.

[HTMLBasicTutor]

Originally Posted by Izzmo

If you use seperate styelsheets for each browser, sure

Every browser interprets CSS differently.

Using different stylesheets for each browser is not necessary. If you keep things simple, use standards compliant coding and stay away from hacks one stylesheet will work.

Yes, each browser interprets CSS differently, even different versions of a browser will interpret things differently.

It will take some practice and patience, but you can build a web page without relying on tables for the layout.

[Foxtrck]

Originally Posted by htmlbasictutor

Using different stylesheets for each browser is not necessary. If you keep things simple, use standards compliant coding and stay away from hacks one stylesheet will work.

Yes, each browser interprets CSS differently, even different versions of a browser will interpret things differently.

It will take some practice and patience, but you can build a web page without relying on tables for the layout.

Exactly, you can make css stylesheets without using imported css for each browser if you follow standards and design to the box model theory.

Sure netscape and some other minor browsers will display your site crap, but who cares about those browsers? It's like designing your site for people without javascript turned on, sorry if you have it turned off or choose to use a non-mainstream browser I don't care and I won't spend hours designing for a tiny minority. The only real scenario you would take total cross-compatibility into mind is if you were designing an application for public sectors i.e. miltary/healthcare/government.

I do though remember a day when you used to have to design several different versions of a site for each browser, basically browser sniffing, CSS changed this and with the right knowledge you can easily create cross-browser sites that display properly.

[Boogle]

The main trick is to keep your CSS as simple as possible and like foxtrck says, make sure you understand the box model theory correctly.

Stick to the basics of CSS and you can make the simple layouts much better than you can with tables.

Boog's

[CaffinePhil]

I'm still trying to learn CSS too. I haven't done overly well so far just very basic layouts. For centering I ussually do this:

width:800px;
margin: 0;

just change the width to what you need.

[Izzmo]

Originally Posted by htmlbasictutor

Using different stylesheets for each browser is not necessary. If you keep things simple, use standards compliant coding and stay away from hacks one stylesheet will work.

Yes, each browser interprets CSS differently, even different versions of a browser will interpret things differently.

It will take some practice and patience, but you can build a web page without relying on tables for the layout.

Unfortunately, that is incorrect. I don't want to argue, but it's just not how it works. I strive to be standards compliant in all my websites, and like I said, every browser has it's own compliancy. So, even if you are 100% compliant with W3C standards, it will look different in each browser, depending on what you are doing.

[Taltos]

Izzmo, I would have to "mostly" disagree with you there. You are usually right on the money but this time you are a bit off. I say mostly because there are some usually very minor differences that can easily be gotten around but in general, CSS can easily be used to get the same look and feel across all the major browsers. I do still include the box model hacks needed for IE6 but those are easy enough to do.

As for centering with CSS, you should try:

margin: 0, auto

This sets top and bottom to 0 and automatically sets equal margins left and right.

Good luck.

[Izzmo]

Well, this does work in Firefox, sometimes. Once you start getting really CSS heavy in your site and items start to overlap, you can start to run into problems. Even on my hosting site, the most basic elements can sometimes flub. IE or FF.

[HTMLBasicTutor]

Originally Posted by Izzmo

every browser has it's own compliancy.

True. IE being the worse but they are getting better.

Originally Posted by Izzmo

So, even if you are 100% compliant with W3C standards, it will look different in each browser, depending on what you are doing.

Yes, even if the coding is compliant, the page can look different in some browsers. e.g. sizing of text, darkness of a line

As far as getting the layout to look consistant from browser to browser, sometimes just being more specific with the properties in your stylesheet will solve the problems. Yes some further tweaking may be required but using hacks is not the solution. e.g. some who used hacks to force IE6 to do what they wanted had broken sites when IE7 came out.

[Izzmo]

You are correct. Anyone who still tries to get their website to work with IE6 needs to rethink why they are designing a web site

[Boogle]

Originally Posted by Izzmo

You are correct. Anyone who still tries to get their website to work with IE6 needs to rethink why they are designing a web site

Although i fully agree with your thoughts on compliancy and all looking differently, we still need to cater for IE6 it's a major browser still because of the numbers using it, for my sites the numbers are roughly,

IE6 - 30%
FF - 30%
IE7 - 30%
Other - 10%

It's a big player, what I do is use a separate stylesheet just for IE6 only because, IE7, FF, Opera, Safari all can be made to look the same quite easily now, IE7 is nearly as good as FF in terms of W3C compliancy.

And also you have to remember, like our systems at Head Office, thin clients don't get to choose what browser they view sites in- they only get what they are given, which at the moment, IE6 still dominates because it's the most safest option for thin-client as it's tried and tested in all areas!

My advice: DO NOT IGNORE IE6 IT IS A MAJOR BROWSER STILL

Boogs

[Izzmo]

Only because it comes with XP pre-installed... and people don't know how to update it. It also comes with Windows Server standard too. So, that 30% is very scewed.

[Boogle]

Yes but the facts are there and true, 30% of my visitorsare on IE6. And it's not much extra work if you're a good designer and understand the box model theory. You can avoid much of IE6's disabilities.

Boog's

[stjean]

Thanks for the advice. I actually found a css template that I modified and am able to get the desired overlapping effect that I was looking for. It also helped because I could see how they accomplished it.

Using float: left for items in the left hand column and using another class for the everything in the right hand column they used; position: relative; top: -80 (to position it where it you want)

Thanks again.