Page arrangement with CSS 1

[carlg]

I have a page arrangement question regarding CSS.

I'll use msn.com as an example.

If you go to

http://www.msn.com

and notice they have sections.

Some of the sections are:

Fox Sports
Money
Video Highlights
Entertainment

I want to arrange a page in a similar way. Traditionally I would have used an HTML table, but now I want to try it the CSS way.

Let's say everything about my sections is the same except the actual text.

Would I have a CSS class for each of my sections (since they need to be in different locations).

I thought it would be nice to have 1 CSS class define all of my sections, but since they all need different locations, I think I need a separate class for each one.

Is this true?

Any examples are appreciated.

Thanks

Carl

 

[BillyRayPreachersSon]

As a general rule, I'd use IDs to break down your containers, as you can then set explicit widths & heights on them. Classes are more useful when you need to repeat common styles on multiple elements (whereas IDs need to be unique).

Of course, if the containers are similar (as with the MSN site), you might want both IDs and classes - or even just classes, although given you'll need to float them, I'd opt for both, something like:

<div id="podVideo" class="contentPod">

...

<div id="podMoney" class="contentPod">

Hope this helps,
Dan




Coedit Limited - Delivering standards compliant, accessible web solutions

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

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

[/tt]

 

[carlg]

So then would I set the location of each section (defined by id) in my css file?

Would I have something like this (not sure if my syntax and attributes are correct, but I can look em up later)

sectionmoney {
location:20,20
}

sectionsports {
location:20,40
}

 

[BillyRayPreachersSon]

Yes - you've the right idea, but completely incorrect syntax. In CSS files, IDs being with hashes ("#"), and classes begin with full-stops / periods ("."), thus:

#someID {
}

.someClass {
}

Also "location" is incorrect. You could replace it with something like:

yourRule {
   position: absolute;
   top: 20px;
   left: 50px;
}

However, I would [!]strongly[/!] suggest you do not do this, instead letting the content flow naturally, and use floats to get your 20-column layout.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

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

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

[/tt]

 

[Vragabond]

No. You would let your page flow naturally, like in the example of MSN, you have two columns and then the boxes flow naturally one after another. This is especially useful, because if you remove one of the boxes, the others will simply stack to fill the empty space. Similarly, you can have more or less content per box, depending on the current data. If you were to define the location for every box, that would be a very rigid structure that would break quickly and easily, given more/less content or even a smaller/bigger text size. To achieve the two columns you would float two containers next to each other (these containers appear invisible on the MSN page, because they have no styling applied to them). As for css, I suggest you learn it well, preferably from a tutorial on a site like htmldog, where you will learn to write good css.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[carlg]

Floating sounds good!!!

Anyone have an example of this?


By the way, thanks for all of the good info so far.

 

[BillyRayPreachersSon]

xxx {
   float: left;
}

or

xxx {
   float: right;
}

I suggest your read on "Position is Everything" about "Easy clearing".

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

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

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

[/tt]

 

[carlg]

Thanks again.

This is a lot different than
all of the TD's and TR's that I used to use.