BOXES

wbmkk · #1 (**permalink**) 10-12-2009, 07:48 AM

I am very new to web design so have been reading HTML XHTML and CSS books like crazy over the past few weeks.

I've got <tags> coming out of my ears and even drweam about <tags>

(1)

Anyway, I'm trying to develop a web site, which will be build up of several boxes on each page, but there is conflicting evidence about using CSS to place boxes on a page , some browsers may have a problem

(2)

Also, the # and id class are showing as not being suitable with XHTML.

Is this true ?

Lisa uses ther # option on her tutorials

(3)

One other web site has this code as an example for moving boxes. Basically having one 'style' rule for all boxes, then a simple position rule for each box.

It works, but is this the best way.

<style type="text/css">
.boxes {
position: absolute;
border: solid #000000 2px;
background-color: #ffff00;
color: #000000;
width: 20%;
}

#box1 {
top: 0px;
left: 20px;
}

#box2 {
top: 10px;
left: 40%;
}

#box3 {
top: 100px;
left: 60%;
}

#box4 {
top: 120px;
left: 20px;
}

#box5 {
top: 10px;
left: 70%;
}
</style>
</head>

<body>
<div id="box1" class="boxes">
<h2 align="center">Box #1</h2>
</div>

<div id="box2" class="boxes">
<h2 align="center">Box #2</h2>
</div>

<div id="box3" class="boxes">
<h2 align="center">Box #3</h2>
</div>

<div id="box4" class="boxes">
<h2 align="center">Box #4</h2>
</div>

<div id="box5" class="boxes">

<h2 align="center">Box #5</h2>
</div>

</body>
</html>

MANY THANKS FOR ANY ADVICE !

James · #2 (**permalink**) 10-12-2009, 06:56 PM

What you have there looks generally good (you said it works so I didn't look for any little technical mistakes).

However, I can see one thing I might be concerned about. The main reason for using percentages for widths is for content that can expand in width which is not so great for the kind of alignment you show.

The way it is set up now your boxes will change shapes drastically as the width of the page changes which will have significant affects on the contents and can even overlap at some widths (albeit sizes you would probably not see).

Also, using absolute rather than relative positioning means that the top of the boxes will be at the exact position you set. If the content/size of the box will be set you might get it to work. If they will be changing with content, perhaps when people have wider pages, your vertical alignment might be an issue.

Personally I would have a set width for my page and perhaps set pixels for width of the boxes as well unless I had a very regular layout pattern and planned carefully for size adjustments.

wbmkk · #3 (**permalink**) 10-25-2009, 08:45 AM

Sorry for the delay James, but thanks for your reply.

Regards !

Brian

yourwordpressdiva · #4 (**permalink**) 10-25-2009, 02:26 PM

Hi Brian.

Just wanted to reiterate what James says about including code to control the size of your boxes. One mistake I see often with coding for tables, boxes, is to the use of percentages which alter the layout and look of your content on different sized monitors. A lesson I learned the hard way and now always the ensure I pay attention to this detail. I even invested in different sized screens to be sure I can see what most viewers see from their vantage point.

All the best.

wbmkk · #5 (**permalink**) 10-26-2009, 04:14 AM

Thanks for your reply “Yourwordpressdiva”

I am still at the early stages of my web design, but her is my problem in a bit more detail

On the site, there will be a header with horizontal navigation buttons directly underneath, well drop down lists really

Now the tricky bit …

Below, I want each page to be made up of numerous text boxes, each coloured differently, but not quite touching each other, perhaps 6 rows in total with 4 boxes on the 1st, 3rd and 5th rows and 5 on the 2nd, 4th and 6th rows

Imagine a wall built with different coloured large-size bricks, between thick beds of black mortar.

The boxes are to have fixed heights, then if any text overruns downwards, I’ll use the overflow property with a side scroll bar. I will not need any horizontal scrolling as there will not be much text on each row.

I might have a left navigation area too, but that would be pretty simple. I’d then just have to either reduce the number of text boxes in the main body or reduce their widths

James · #6 (**permalink**) 10-26-2009, 07:42 AM

With that in mind, then, I would definitely recommend that you use a set width for your page and columns and then use absolute css positioning to put your boxes in place. This will keep them lined up and spaced just as you want them. It is probably the easiest way to set up the page, too, which doesn't hurt.

WB Sponsors