Centering Website

[mhendo]

@kushiel

Which is why, if you are running a business, you should hire someone who is a professional. I don’t care what people do on their hobby sites, but Hertz doesn’t go to the manager’s cousin who works out of his two car garage to make their car repairs, which is why a business that needs to have a website shouldn’t go to the manager’s cousin who uses a copy of Frontpage '97.

I’m sure you’re right about Hertz and their car repairs.

But what about Hertz and their website? I’m sure a massive company like Hertz didn’t have it designed by “the manager’s cousin who uses a copy of Frontpage '97.” I’ll bet they contracted a professional web design company, or hired their own web professionals.

And yet, if you go to the Hertz.com website, you’ll see that the WHOLE LAYOUT is composed of tables. If you’re running Firefox with the Web Developer toolbar, open the toolbar and get it to outline the tables and tables cells. All you’ll see on the homepage is tables within tables within tables.

When large, multinational corporate websites (Hertz is far from the only one) use tables with no apparent problems, can you blame small business people and hobbyists for saying, “Why the fuck do i need to fiddle around with CSS?” While those who know about web design and the importance of standards and accessibility can tell you why CSS is better than tables for layout, over 90% of the browsing public couldn’t tell you the difference between a table-based and a CSS-based layout.

As i suggested earlier, i have no problem with CSS. I use it myself (even though i’m not an expert), and i recommend it to others. But the whole geeky prohibition on using tables for layout falls, understandably, on a lot of deaf ears. While it’s not difficult beyond belief, CSS is a bit complicated, especially when you get down to precise layout issues, and i can easily understand why some people decide not to bother with it.

[mhendo]

@SharkB8

I’m thinking the table route might be best. That’s more like what I’ve seen. Someone will have their color scheme be, say, red, white and blue, within a table with their banner and sidebar all within a box, with a border, then there will be another color in their scheme, say dark blue in the background behind the box, right?

Sure, but, as others have said, you can get exactly the same layout using CSS, and be more standards-compliant.

Here is a small website i put together for a course i’m teaching this semester. There’s not a single table on that home page, and i’ve only used one table on the whole site.

My site does pretty much exactly what you want to do with your page. The content is centered in the browser window, there is a menu on the left, and content on the right, and the background color for the page is different than the background color for the content area.

@SharkB8

Here’s what I have and here’s what I’m going for.

Well, even if you insist on keeping your table layout, i still think your page is more complicated than it needs to be.

I have absolutely no idea why you would set your main table width to 1351 pixels. If you want your content centered in the screen, the content container needs to be narrower than the screen itself. I think it’s pretty safe to assume, these days, that virtually everyone will have a screen resolution of at least 1024 pixels wide. There might still be a few people on 800x600 monitors, but not many. Still, if you’re not going to have a liquid layout (i.e., one that resizes to fit the browser window), you need to make sure that your content width is less than 1024px.

I’m not going to go through and offer suggestions for your whole site; you need to work some of that out for yourself. But i do have a suggestion for at least getting the type of layout you want, with your content centered in the browser window.

First, reduce your main table to a width of 1000px (or 900, or whatever, but <1024).

Then, make this change to the CSS in your page header:

Replace this:

body {
	background-color: #C0DFFD;
}

with this:

body {
	background-color: #ccc;  /* or whatever color you like */
}

#container {
	width: 1000px;
	margin: 0 auto;
	background-color: #C0DFFD
	}

Then, in your html, place

around all of your content, so your page looks like this:

<body>
<div id="container">
<table width="1000" border="0" cellpadding="0" cellspacing="0">

[all the rest of your content]

</table>
</div>
</body>

This will give you a page with a light grey background (to the left and right of the main content) and will keep your light-blue background for the main content part of the page. Obviously, you can replace the light grey with whatever color takes your fancy.

None of this fixes your messy table layout, but at least your site will now look like you want.

This layout worked in IE6, IE7, Firefox 2.0.0.12, and Opera 9.24. Probably won’t work in IE5.

[SharkB8]

Thank you very much mhendo. I will give that a try as well.

Like I mentioned earlier, I’m not a designer. I’ve never had any education on what works, what’s aesthetically pleasing, or what sells with a website’s layout.

We wanted to save a little money when we started our business a thought we could do so by doing our own website opposed to hiring a pro. This was a suggestion in several books we’d read about starting up a small home-based business. And, we did realize that you get what you pay for. So we anticipated running into issues that we would not know how to resolve. Most of those we’d been able to fix or work our way through, this centering thing was just the nagging one.

I plan on getting some formal website training and sprucing up the site, but in the mean time, this has been working well enough.

I in no way wished to insult those in the web-design biz. I have a great appreciation and respect for what goes into making a great website, but we were just in a position where we needed to drop big bucks in other areas of our start-up.

Thanks everyone!

[Barry_From_Eastenders]

The “logical” use for tables is for tabular data. Using tables for layout is the same as typing up your master’s thesis in a spreadsheet program.

Using tables for layout is what’s “fucking stupid”. There’s more to web development than putting together a “decent-looking website”. If all you are worried about is looks, then you don’t really understand the intricacies of web business at all.

“When large, multinational corporate websites use tables” - Simply an “Appeal To The Masses” argument. Doesn’t necessarily make it right.

The really cool thing about the web is that almost anybody can publish a web site. The really bad thing about the web is that almost anybody can publish a web site.

I didn’t mean to turn SherkB8’s question into a fight over standards. I just hate to see people given bad advice.

[mhendo]

@SharkB8

I in no way wished to insult those in the web-design biz. I have a great appreciation and respect for what goes into making a great website, but we were just in a position where we needed to drop big bucks in other areas of our start-up.

Don’t worry about insulting web designers. Any web designer who feels insulted because someone wants to do their own website needs to get a life. Also, like car mechanics, website designers often make good money fixing things when amateurs screw them up.

First thing to say is that i accidentally left out a semi-colon in the second piece of code in my last post. If you forget the semi-colon, the CSS won’t work properly. Here’s what it should look like:

body {
	background-color: #ccc;  /* or whatever color you like */
}

#container {
	width: 1000px;
	margin: 0 auto;
	background-color: #C0DFFD; /*forgot this last semi-colon before */
	}

Second, it looks like your intention is to have a fairly basic, static website for your business. As far as i can see, you only have about a dozen pages or so, and the most complicated thing is a few streaming videos. If this is all you want for your site, and you don’t need a large, dynamic, database-driven website, there’s absolutely no reason you can’t do it yourself.

The technical skill required to put together a small static site is pretty basic. Even if you decide to move to CSS (and i think it would be a good idea), it wouldn’t take very long for you to learn enough for your site. As i said earlier, i’m no pro when it comes to html and css, but i can put together a decent-looking, standards-compliant site, and i learned most of my html and css from some very good websites.

Have a look at some of these:

A List Apart
WestCiv CSS Guide
Position is Everything
CCSplay

There are also some excellent books that will help you with html/css.

Even if you can work all this out, though, you also need to think carefully about design. I believe that many (most?) professional web design outfits have different people taking care of design and implementation, because the skills needed for each are quite different. Some people are great designers but bad website authors; others can write the code just fine but have no idea what looks good and what is user-friendly. I think that one of the key problems of many amateur sites is precisely that these very different tasks are often done by a single person, and the site is then subject to the limitations of that person’s abilities in one area or the other.

Take a look at your own current design, for example. One thing that stuck out, to me, was an issue with your menu. The menu looks fine, but the way it works is, in a couple of places, a bit counter-intuitive. For example, when you click on some of the menu entries, like “documentaries” or “ad production,” the menu remains the same (as it should). But when you click on the “weddings” link, suddenly your main menu categories disappear, to be replaced by the different wedding packages. I’m of the opinion (though others might disagree) that if you have a main site menu like this, it should stay the same. At a very minimum, i think your “home” link should remain in the same place, rather than being pushed to the bottom in the menu on your “weddings” page, otherwise your navigation is confusing. Navigation within a site should be consistent and intuitive.

One thing you might think about is trying to put together an expanding menu, so that when you click on the “weddings” link, the left menu expands or pops out a list of the packages. Some web designers don’t like those either, though, arguing that all navigation should be visible, and not hidden in expanding or fly-out sub-menus. Like so many other areas of life, you’ll never get everyone to agree on what works and what doesn’t.

Anyway, that’s just my 2c.

[mhendo]

@Barry From Eastenders

The “logical” use for tables is for tabular data.

I agree.

@Barry From Eastenders

Using tables for layout is the same as typing up your master’s thesis in a spreadsheet program.

No, it’s not. In fact, it’s about as different as two very different things can be.

@Barry From Eastenders

Using tables for layout is what’s “fucking stupid”. There’s more to web development than putting together a “decent-looking website”. If all you are worried about is looks, then you don’t really understand the intricacies of web business at all.

The problem with your argument is that many, many table-based websites don’t just look fine, but they work fine for 99% of end-users as well, as that’s what the website owner cares about.

And what “intricacies of web business” does the OP need to understand in order to get his small business website online? If the site shows the information that he wants it to show, and works for the end-user in all the major browsers, what more does he need?

@Barry From Eastenders

“When large, multinational corporate websites use tables” - Simply an “Appeal To The Masses” argument. Doesn’t necessarily make it right.

I completely agree. But, as i argued previously, it’s very easy to understand why some poor bastard trying to put together a little site for his business looks at those big sites and says “Well, if tables work for Hertz, why won’t they work for me?”

People that are new to web design, like the OP, hear all the bleating about CSS and think “What’s all this about, then? Maybe i need to learn this stuff.” But then they find out that the simple, static site that they want to make will look and work just fine in tables, and they understandably decide not to spend three days working out the box-model hack, or trying to figure out how to make two-equal length columns in CSS.

@Barry From Eastenders

I didn’t mean to turn SherkB8’s question into a fight over standards.

Sure you did.

@Barry From Eastenders

I just hate to see people given bad advice.

What bad advice has he received? I’ve said, in multiple posts, that it would be better to use CSS to lay out his site. But i can’t go over to his house and tie him to the floor until he promises to use style sheets. If he decides to use tables, he decides to use tables, and i see no harm in trying to help him get the look that we wants using tables. If using tables turns out to fuck up his website, and drives away potential business, he can’t say he wasn’t warned. But it’s unlikely that this would happen and, in the end, it’s his decision.

[Barry_From_Eastenders]

@mhendo

Sure you did.

Not deliberately! I will concede that I came in yelling for no reason. But then you called me “fucking stupid”.

I just think it’s important, especially when dealing with web dev newbies, to get them started in the right direction. Visual appeal is not the only thing that you have to deal with on the web. They need to understand that mark-up is about meaning. And putting things in a table means it’s tabular data. If the poor bastard asks:

“Well, if tables work for Hertz, why won’t they work for me?”

We, as web professionals, should try to help the poor bastard understand that Hertz built a non-standards compliant site. It may not be “wrong” but it sure ain’t “right”. I would feel derelict to let him use tables, fuck up his website, and drive away potential business.

The OP stated that he has DreamWeaver. I know it can turn out standards compliant code. Why encourage him to not do that?

Also, my spreadsheet analogy is correct! We can open another thread and argue it, if you like.

And don’t call me stupid!

[SharkB8]

@mhendo

Take a look at your own current design, for example. One thing that stuck out, to me, was an issue with your menu. The menu looks fine, but the way it works is, in a couple of places, a bit counter-intuitive. For example, when you click on some of the menu entries, like “documentaries” or “ad production,” the menu remains the same (as it should). But when you click on the “weddings” link, suddenly your main menu categories disappear, to be replaced by the different wedding packages. I’m of the opinion (though others might disagree) that if you have a main site menu like this, it should stay the same. At a very minimum, i think your “home” link should remain in the same place, rather than being pushed to the bottom in the menu on your “weddings” page, otherwise your navigation is confusing. Navigation within a site should be consistent and intuitive.

One thing you might think about is trying to put together an expanding menu, so that when you click on the “weddings” link, the left menu expands or pops out a list of the packages. Some web designers don’t like those either, though, arguing that all navigation should be visible, and not hidden in expanding or fly-out sub-menus. Like so many other areas of life, you’ll never get everyone to agree on what works and what doesn’t.

Anyway, that’s just my 2c.

Thanks for the correction, I tried what you mentioned earlier out and I got grey on the sides, as you said, as well as on the top. I’ll try out your new one and tweak the color scheme a bit.

Thanks for mentioning the stuff about my menu. I wondered if that was awkward, but wasn’t certain since no one complained yet. But I do really like your suggestion of an expanding menu, but I’m not quite there yet!

Thanks again everyone for your advice!!!

[utterlyuseless]

The problem with the center is differen browsers render it differently. I have done a few sites and it’ll look fine in Firefox and off in IE. Or it’ll look fine in IE5 and IE6 but look weird in IE7

In additon remember there are difference screen resolutions most people use 1024X768 but about 15-20% use 800X600

Then are you using XHTML or HTML? I assume you are using CSS and not HTML to format.

The variables are so much, I found it best to stick to XHTML and avoid the WYSIWYG sites because now there are too many types of browsers and such

http://www.dynamicdrive.com/forums/

is a great place to start. They also have sample scripts that would help

[mhendo]

@utterlyuseless

I assume you are using CSS and not HTML to format.

Pays to read the thread before posting.