homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

CSS Styles
are a lot ok?

 5:06 pm on Nov 4, 2002 (gmt 0)

I have a page made soley with CSS (no tables). It has 4 small boxes side-by-side in the center, thats basically it. I need to make several more rows of the same 4 boxes but if I made a new style for each, I would have over 30 styles defined for this page. Is that ok? Will so many styles slow down loading time?

I wish you could see the page but the rules here say no URLs I think.



 5:10 pm on Nov 4, 2002 (gmt 0)

So post some simplified code ;) ...and welcome to WebmasterWorld BTW!

How are you positioning these boxes? I can think of a few ways to do this with minimal CSS but even so, 30 classes won't impeed speed noticeably...

Let's hear how you're doing it...



 5:10 pm on Nov 4, 2002 (gmt 0)

I don't think 30 styles is much. If you put them all in an external stylesheet the browser only has to load it once so in some ways it could actually be more efficient.


 5:51 pm on Nov 4, 2002 (gmt 0)

I'm not exactly sure what you mean by "simplified code", the page code or the .css code?

I am positioning them from the div tag from this:
.leftcontent {
position: absolute;
background:#fff; (using div id="leftcontent" class="leftcontent" in the page)
and so on with the other 3 only changing the name and left:%'s by adding 20 to each one. Seems to work ok.

If a new row is added, the only way I see to do it is by duplicating the above style and changing the top:100px to a greater number. Is there a better way?


 6:03 pm on Nov 4, 2002 (gmt 0)

One way to do it would be to create a containing div and position that 100px from the top. (if this is really important...)

Then create your classes, but use float: right; instead. After each row add something like this:

<div style="clear: both"></div>


<hr style="clear: both;" />

and repeat the above. That way you just have a containing div for the intitial positioning and 1 class.

You could of course do this many different ways by varying the above but one advantage the float approach has is that if your suers resize their text you don't have a problem with the height of your divs. (I assume you're guessing how high to position the second row...and so on?)



 7:25 pm on Nov 4, 2002 (gmt 0)

Nick, I've been trying to figure out your last post and now I'm confused. If I can't figure it out I may have to go with the 20 classes/styles for each box. I just started learning CSS so it may take me some time to grasp it.

I believe that I tried using "float:" before but then the boxes touched each other. I'm not really sure though. I need each box to be seperate and have spaces in between them.


 7:56 pm on Nov 4, 2002 (gmt 0)

Then you just need to apply a margin to each box.

margin: 20px;

or similar.

A good place to learn about CSS is W3 Schools [w2schools.com] or Westciv [westciv.com]

Rather than go through this problem bit by bit and not really understand it, you're better off really getting to grips with the basics.

You'll find it's actually rather simple, and very intuitive ;)

Have fun...



 8:59 pm on Nov 4, 2002 (gmt 0)

One more quick question.

I have all my styles/classes in mainstyle.css except for one. I'm having to define it on the page because I can't figure out how to put it on the style sheet because its not supposed to have spaces or punctuation, I think. Its purpose is to replace all the redundant styles for the boxes.

#rightcontent, #centerrightcontent, #centerleftcontent, #leftcontent,
#rightcontent2, #centerrightcontent2, #centerleftcontent2, #leftcontent2,
#rightcontent3, #centerrightcontent3, #centerleftcontent3, #leftcontent3,
#rightcontent4, #centerrightcontent4, #centerleftcontent4, #leftcontent4,
#rightcontent5, #centerrightcontent5, #centerleftcontent5, #leftcontent5 {
border:thin dashed #000;
background-color: #FFFFFF;
width: 150px;

Can I put that in the mainstyle.css page or will it have to stay on the page code? Or not use it at all and re-add all of it to the box styles?

Thanks for all your help,


 10:35 pm on Nov 4, 2002 (gmt 0)

Doood, a comma separated list is perfectly cool in your .css style sheet. Welcome to Webmaster World!


 6:23 am on Nov 5, 2002 (gmt 0)

How about defining that as a class, rather than a list of all the members of the class? Then add 'class="yourClassName"' as an attribute of all those elements. If you're already using the class attribute for left/right/center positioning, yout could still cut down the length of the selector to a list of three classes instead of all those IDs.

.yourClassName {
border:thin dashed #000;
background-color: #FFFFFF;
width: 150px;


.leftClass, .centerClass, .rightClass {
what's: the same;
about: all of them;

.leftClass {
how: left;
is: different;



 8:15 am on Nov 5, 2002 (gmt 0)

That sounds like a good idea.

I've made this same page at least 10 times with 10 different methods and always hit a wall somewhere. I'm still learning. I finally figured out what Nick_W was saying and started to simplify everything but gave up on that and went back to positioning each box seperately because that page is finished and I'm tired of dealing with it...hehe.

29 classes used and a 3KB style sheet later, my brain is hurting. I've never really used CSS before.


 3:30 pm on Nov 5, 2002 (gmt 0)

30 classes and 3k is not too much, unless you have really strict bandwidth limitations.

But, did you know that you can use more than one class on an element [w3.org]? I think this would work here. So you can use the following css:

div {
position: absolute;
border: thin dashed #000;
background-color: #FFFFFF;
width: 150px;
div.rowOne {
top: 100px;
div.rowTwo {
top: 200px;
div.left {
left: 0px;
div.center {
left: 150px;
div.right {
left: 300px;

and the following html:

<div class="rowOne left"></div>
<div class="rowOne center"></div>
<div class="rowOne right"></div>
<div class="rowTwo left"></div>
<div class="rowTwo center"></div>
<div class="rowTwo right"></div>

to get what you want in newer browsers, assuming I understand your needs correctly (tested in Mozilla 1.1, IE 6, and Opera 6).

Note that I put the generic styles (border, color, etc) on the div element itself -- you might want to identify another class (like, say, layout) and apply the style to that instead. So then you would have divs like <div class="layout rowOne left"></div>.


 4:53 pm on Nov 5, 2002 (gmt 0)

Alternatively...another different way, but I fear this one only works if you want your boxes all the same size..

You could apply different colors borders etc.. to them using moonbiters method. I've use only one class for all boxes and the float method so it doesn't matter how many boxes you add on a page you won't need any more classes...

the floated boxes are then contained in a "container" div to which the top margin is applied and any other styles you wish...
the <div class="clear> is required at the top and bottom of the container to give the illusion that there is actually some content in the container, as floated divs (boxes) don't really take up any space...


<title>Little Boxes</title>
<style type="text/css"><!--

margin: 100px 20px 20px 20px;
padding: 0.6em;
width: 90%;
border: medium dotted #aaa;
background-color: #ddd;
color: #000;

div.box {
float: left;
width: 150px;
height: 150px;
padding: 0.2em;
margin: 0.2em;
border: thin dashed #000;
background-color: #fff;
color: #000;

div.box p {
text-align: center;

div.clear{clear: both;}



<div class="container">
<div class="clear"></div>

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"><p>some content here and more content here</p></div>
<div class="box"><p>some content here and more content here</p></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

<div class="clear"></div>
</div><!-- container -->



edited: sorry just realised that this is the same method Nick_W suggested in an earlier post (Great Minds and all that ;))

but I'll leave code for reference..


 5:15 pm on Nov 5, 2002 (gmt 0)

But, did you know that you can use more than one class on an element? I think this would work here.

I didn't. In fact, somewhere I picked up the idea that you couldn't. Don't know where, though, so if that validates I'll be more than happy to start making use of it in my code. There are places where it would come in handy.


 7:18 pm on Nov 5, 2002 (gmt 0)

I didn't. In fact, somewhere I picked up the idea that you couldn't.

Here's what the HTML 4.01 specification [w3.org] says about it. One caveat: you will almost certainly [htmlhelp.com] have problems with this in older browsers (like Netscape 4.x). However, since you are doing a CSS layout you are probably aiming for newer browsers anyway.


 8:00 pm on Nov 5, 2002 (gmt 0)

My current take on CSS layouts is that I write them for Gecko, Opera6, and IE6, and make sure that everything has nice structural markup that will make it usable in anything else, but not necessarily pretty. If it doesn't take too much more effort, I'll go ahead and make it look nice in NN4 as well, but it's not a high priority as long as it's usable.

That's not always workable, but I'm blessed with a site that has strange browser demographics. Far more Opera and Gecko users than most places, with a coresponding paucity of others.


 5:38 pm on Nov 6, 2002 (gmt 0)

You guys have really provided a lot of help. I will definitely put it to use.


Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved