Forum Moderators: not2easy
I wish you could see the page but the rules here say no URLs I think.
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...
Nick
I am positioning them from the div tag from this:
}
.leftcontent {
position: absolute;
left:10%;
width:150px;
top:100px;
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?
Then create your classes, but use float: right; instead. After each row add something like this:
<div style="clear: both"></div>
or
<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?)
Nick
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.
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...
Nick
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,
Hunter
.yourClassName {
border:thin dashed #000;
background-color: #FFFFFF;
width: 150px;
}or
.leftClass, .centerClass, .rightClass {
what's: the same;
about: all of them;
}.leftClass {
how: left;
is: different;
}
etc.
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.
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>
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...
code:
<html>
<head>
<title>Little Boxes</title>
<style type="text/css"><!--
div.container{
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;}
--></style>
</head>
<body>
<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 -->
</body>
</html>
Suzy
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..
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.
I didn't. In fact, somewhere I picked up the idea that you couldn't.
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.
Thanks
