PDA

View Full Version : CSS Structure/Planning Naming Scheme

jyoseph
10-10-2005, 07:20 PM
Hello,

I'm running into a few snags in building my first 'tableless' all CSS layout. (Not in the code, I can code everything out nicely. This is more of a "I need advice" post not a "How do I align this or make this red" post)

I am having a hard time deciding how to build the site in a way that won't be confusing when I want to add pages page with different structure, widths, etc.

For instance, the front page has 3 columns but I want an about page to have two colums with completely different widths.

Would you suggest something like this: (For this example I'm more interested in the naming scheme than I am in how tidy the code is)

#Frame{
position: relative;
width:800px;
left:0px;
top:0px;
margin:0px 0px 0px 0px;
}

#MainPage_ColumnOne{
position:absolute;
width:395px;
top:0px;
left:0px;
margin:0px 0px 0px 0px;
}

#MainPage_ColumnTwo{
position:relative;
width:195px;
top:0px;
left:405px;
margin:0px;
}

#AboutPage_ColumnOne{
position:absolute;
width:695px;
top:0px;
left:0px;
margin:0px 0px 0px 0px;
}

#AboutPage_ColumnTwo{
position:relative;
width:105px;
top:0px;
left:695px;
margin:0px;
}
and then the HTML for the main page like so:

<div id="Frame">

<div id="MainPage_ColumnOne">Stuff</div>
<div id="MainPage_ColumnTwo">Stuff</div>

</div>


and then the HTML for the About Page like so:

<div id="Frame">

<div id="AboutPage_ColumnOne">Stuff</div>
<div id="AboutPage_ColumnTwo">Stuff</div>

</div>




Today I thought about possibly assigning an ID to the <body> tag and naming it after whatever page you were on. Is that a bad idea? Like so:

<body id="MainPage">

and then use CSS like:

#MainPage .ColumnOne{
position:absolute;
width:395px;
top:0px;
left:0px;
margin:0px 0px 0px 0px;
}

#AboutPage .ColumnOne{
position:absolute;
width:395px;
top:0px;
left:0px;
margin:0px 0px 0px 0px;
}

#ContactPage .ColumnOne{
position:absolute;
width:395px;
top:0px;
left:0px;
margin:0px 0px 0px 0px;
}

Is this overkill or does it even make sense. I'm just looking for a way to manage multiple pages in a way that will be easy. I think it just comes down to a naming scheme that I would be able to follow.

Any help on what has worked for you would be really nice. I'm really new to CSS and want everything structured in a way that will be easy when it comes to adding pages.

Thanks in advance!
-Jyoseph
www.jyoseph.com
syrupcore
10-10-2005, 11:41 PM
hey, you're doing great. either of those are fine, good even.

body ID will open up some possibilities later so I'd go with it - even if you use the first method for the actual positioning. Body ids are great for templating and for using along with SSI or php includes. here's a post about using body ids for highlighting the current page's menu button, nice and clear: http://www.codingforums.com/showpost.php?p=349983&postcount=7


Will
jyoseph
10-11-2005, 01:01 AM
Will,

Thanks for the reply, man. I was hoping that I explained that properly. The toughest thing is to explain something when you're a novice and don't know exactly what you want/need.

Thanks for the link, too. That is pretty clever and I'll definitely have to go with that.

And to make it clear; Say I choose the 2nd method and I want to select class "ColumnOne" on the about page (the about page which has the id "about" assigned to the body tag)

Would I do this . . .

#about .ColumnOne{
}

And that would select column one. Alternatively, if I wanted to select a paragraph in column one on the about page would I do this . . .

#about .ColumnOne p{
}

thanks in advance for any clarification. What I have on my site now will work, but if I get these few things ironed out I want to switch everything over before I start adding all of the meat. :)