[SOLVED] Best way to create a layout?

[kratsg]

So, I'm somewhat experienced, I've dealt with the horrible float, divs, table-less, table layouts, all of them.

 

Currently, I'm working on this:

 

http://www.xirapets.com/

 

This uses a simplified table layout (as simple as it gets, honestly :-o) This is more a rough draft than it is anything final.

 

The very top image is going to be broken up into pieces for faster loading. As you can see, I'm using a css stylesheet right now, and I've set-up the basics for multiple layouts.

 

What I'd like to find out is if I made the right choice (in this case) to go for a tabled layout. It seems to make sense with the whole semantic business, but you know... tables versus table-less... It's all about getting the right look in different browsers.

 

So far, I've achieved that, except in IE, the spacing between the images on the side-bar goes wacky, not that they're terribly far apart, but there's a notable different between firefox and IE.

 

Comments greatly appreciated ;-D

[AndyB]

Given that there is no tabular data, why would you want to use a table?  Trust me, you can do it.

 

And unless you're using different compression for the various pieces of the top image, slicing it into parts makes it load more slowly (more data transfer at the server, more latency, etc, etc)

[kratsg]

Given that there is no tabular data, why would you want to use a table?  Trust me, you can do it.

 

And unless you're using different compression for the various pieces of the top image, slicing it into parts makes it load more slowly (more data transfer at the server, more latency, etc, etc)

 

Whadya mean no tabular data? There's a table in there. It's just a very slim, basic table used to control where the images are on the page. I just don't know if I should spare myself the agony of going to DIVS and stressing over why it won't work in IE or FireFox o_o

 

The images are going to be compressed completely when sliced apart. The one problem is that top image is huge in size. (compared to the other images)

[AndyB]

There is a difference between an html table with 'stuff' in it and tabular data (think of a railway timetable as an example of tabular data).

 

It will always take longer to download ten 10kb images than to download one 100 kb image.

[revraz]

You're asking in a CSS forum if you should use CSS or Tables? 

[kratsg]

Well, I already have css implemented as far as basics go. But before I go any further... Would it be much more applicable for this type of application to use tables or CSS for layout... I don't want to go through with one way and realize that the other way is better o_o

[AndyB]

Regardless of the application, tables should only be used to display tabular data and should not be used for layout (for more reasons than it's worth posting here because it's all been said many many times).

[TheFilmGod]

Regardless of the application, tables should only be used to display tabular data and should not be used for layout (for more reasons than it's worth posting here because it's all been said many many times).

 

wise words of wisidom

[kratsg]

So, that sounds like DIVs are the way to go...

 

How would I guarantee that what looks like something in FireFox will look the same way in IE or vice-versa?

 

Any links that shows what I have to look out for or something? Obviously, difference in paddings/total width of elements is interpreted differently, but what else? :-o

[AndyB]

How would I guarantee that what looks like something in FireFox will look the same way in IE or vice-versa?

 

Write compliant code and avoid browser-specific stuff.

 

Here's an easy starter for you to generate code you can play with - http://www.inknoise.com/experimental/layoutomatic.php

[bronzemonkey]

As for getting a table-free layout working for you, there are a few things you need to do first:

 

1. Use a DOCTYPE - http://www.w3.org/QA/2002/04/valid-dtd-list.html. You need to let the browser know what it's looking at, this will also put IE into standard mode and not quirks mode.

 

2. Use lists for lists of links. Creating navigation usually involves using an unordered list of links (this is semantic) that are then positioned and styled with css.

 

3. You'll have to rely on playing around with the css to insert background images, replace text with background images, position all the elements, float columns, clear floated elements, and so on.

 

For example:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>XiraPets.com - Main Layout</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="keywords" content="">
  
  <link rel="stylesheet" type="text/css" href="css/master-stylesheet">  
  <!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="css/ie6-only-stylesheet.css"><![endif]-->
  
  <script type="text/javascript" src="js/site-javascript.js"></script>
</head>

<body>

<div id="container">
  <div id="header">
    <h1><a href="/" title="XiraPets Homepage">XiraPets</a></h1>
  </div>
  
  <div id="navigation">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Forums</a></li>
      <li><a href="#">Adoption</a></li>
      <li><a href="#">Explore</a></li>
      <li><a href="#">Games</a></li>
      <li><a href="#">etc</a></li>
      <li><a href="#">etc</a></li>
      <li><a href="#">etc</a></li>
    </ul>
    
    <form>
    </form>
  </div>
  
  <div id="content">
    <div id="alert">
      <p>No Alerts for you.</p>
      <p>Line 2.</p>
    </div>
    <p>Would you like to access our temporary forums? Click the Forums link on the left menu bar, thank you.</p>
  </div>
  
  <div id="footer">
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Jobs</a></li>
      <li><a href="#">Whatever</a></li>
    </ul>
  </div>
</div>

</body>
</html>

[kratsg]

As for getting a table-free layout working for you, there are a few things you need to do first:

 

1. Use a DOCTYPE - http://www.w3.org/QA/2002/04/valid-dtd-list.html. You need to let the browser know what it's looking at, this will also put IE into standard mode and not quirks mode.

 

2. Use lists for lists of links. Creating navigation usually involves using an unordered list of links (this is semantic) that are then positioned and styled with css.

 

3. You'll have to rely on playing around with the css to insert background images, replace text with background images, position all the elements, float columns, clear floated elements, and so on.

 

1. Easily Done

2. I'm awesome at this one :-)

3. I can do everything except floating... Floating's weird. I've always gotten weird results with it. Can someone explain how it works? Float:left; Float:right; Float:both; Clear:left; etc..? It's always helpful to get a wise word of wisdom about things like these ;-o

[AndyB]

http://css.maxdesign.com.au/floatutorial/

 

That'll solve your float isues

[kratsg]

Awesome :-o There's never been any really good tutorials on floating.

 

Cool, thanks :-D