CSS design 1

[d0nny]

Layout

OK, I've built the above page using tables! Oh no, I hear you all sighing!

Anyone know if this is possible in CSS?
I should say it is possible, but I haven't got a clue - I struggle sometimes just to get a 3 column layout.

Can anyone offer some advice on how to do this layout using CSS?

 

[BillyRayPreachersSon]

On the face of it, it would be easily possible using CSS and no tables.

However, the devil is in the details. Many things could would affect my above statement, including:

- What content is to go in the bottom 4 squares?

- Does this content need to flow with the 4 squares always aligned at the same width / height, or can the containers have an independent height?

There are other things, but flesh out the details a bit more... it will certainly help.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[d0nny]

Thanks Dan.

Most of the page will be fixed. For example, the width of the page will be 1024px and the bottom 4 squares will be fixed, at least in width and probably in height. They should not be fluid.
So the 4 squares should always be uniform in their size.

The content of these 4 squares is probably images with a title, but not sure yet. These areas will be built dynamically using a database.

What you see in this page is exactly what I want in the CSS.

 

[BillyRayPreachersSon]

Then yes, it should be very easy - and there's more than one way to do it.

Personally, I'd go with the floating option, even though you could use absolute positioning (due to the fixed-size nature of the containers).

You've already made it easy by dividing your site into logical rows - a header, then navigation, then content, then footer. You've also got a complete DOCTYPE, which is also a good thing.

Here are some bits to get you started. If you need help with specifics, I'd post the relevant chunk(s) of code in a thread over at forum215:

- Learn about clearing floated elements using CSS:

http://www.positioniseverything.net/easyclearing.html

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

- Use DIV elements to build the logical structure of your site that you've already got, e.g:

<div id="centreWrapper">
	<div id="header">
	</div>

	<div id="navigation">
	</div>

	<div id="content">
	</div>

	<div id="footer">
	</div>
</div>

- Within those containers, create other containers as necessary. Nesting floating elements should be no problem.

- Think about how you'll deal with text that overflows the containers. If they are a fixed width / height, then consider either clipping text (overflow:hidden), or adding a scrollbar if needed (overflow:auto).

- When you think you're done, validate both your HTML and your CSS and fix any issues.

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

- Then cross-browser test and fix IE quirks

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[d0nny]

Many thanks for the tips Dan.
And apologies for posting in the 'wrong' forum - I was looking for a CSS forum but couldn't see it anywhere. Then realised its in my subscription list!!! Doh!

I'll give this a go and read up on the links you've set me.

One other question - would it be seen as 'acceptable' to produce these pages using tables, or would that be frown upon?

 

[BillyRayPreachersSon]

Acceptable? That depends on who you ask, and who did the producing, I guess...

If I were a manager looking for a web developer, I'd take one look and bin the CV.

If a plumber produced it, however, I'd be impressed

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[d0nny]

Yes, I understand and I suppose that answers my question.