Help me with a CSS Concept

[Kjonnnn]

I'm finally trying to make that plunge from Tables to CSS. I understand CSS and the concept of an external stylesheet to rule everything in the site. But here's where I'm having a problem.

In the sites I'm doing, the "content" area (div) would vary in length, depending on the particular page. Some will be short, some will be long. Does putting the rules for positioning of the content area in and external stylesheet mean that the content area has to be the same width and length on every page? I've put fixed dimensions in the stylesheet, but if the content is more than the dimensions set, it automatically expands it. That's find for that page, but it also affects the other pages that don't have as much content, and creates a lot of extra space.

How can an individual page content area lengthen or shorten, without changing the dimensions for EVERY page in the site? I hope I was clear. Thanks.

 

[vacunita]

The whole point of CSS is to have the presentational part of the site be completely separate from the content of the site.

The amount of content should never determine the size of your site.

Your site should look correct whether there is one word or there are 5000. Obviously if there is only one word there's going to be space.
Now if you don't specify any dimensions to say a layer DIV that holds all your text, it will shorten or lengthen depending on its content.

Try this for example:

#contentlayer{
border:1px solid red;
background-color:#0000FF;
}

and your HTML:

<div id="contentlayer">
Add text here.
</div>

If you add text to the DIV, it will expand to accommodate it. Remove text and it shortens itself again.





----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Kjonnnn]

So am I NOT to had positioning info in the external style sheet, e.g. absolute, width, length?

 

[vacunita]

You can have all that in your style sheet, as its part of the presentation of your site.

But as you yourself said, if certain pages of my site are bigger than others than having a pre-determined height is not something you want to do.

Its hard to offer a solution, as it depends on your sites layout. If you know you have a lot of text you may have a scrollable area that contains the text. Or have it just fill as it needs and the entire page scrolls. Or hide whatever doesn't fit in a certain area.

What I'm getting at, is that the amount of content you have should be immaterial to how you design the presentation, as it should be able to accommodate the content it is give.
As my example above illustrates that particular box would grow or reduce itself depending on the amount of content.
However it does not in any way limit the amount of it.

As an additional tip. absolute positioning should only be used if absolutely necessary as it can cause more problems than it solves. Otherwise, the normal document flow should be enough to let you place objects where you want them.







----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Kjonnnn]

Maybe you can list one or two of the sites you've done so that I can visualize what you are saying.

 

[vacunita]

Not sure what you mean. Most of my sites use the technique described above. although I do have uses for the scrollable areas as well.

But that's the basic concept. How you apply it depends on what your site looks like.

Also perhaps the HTML/CSS forum here can offer more advice.
forum215


----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.