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

 

(1)

 

Anyway, I'm trying to develop a web site, which will be built 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

 

Do I have to find a ‘hack’ to sort out the problem, before it even starts ?

 

 

(2)

 

Also, the ID attribute is showing as not being suitable for use with XHTML.

 

Is this true ?

 

I found on another web site, the code (shown below) as an example for positioning boxes. It’s basically having one 'style' rule for all boxes, then a simple position rule for each box. (you would think I knew what I was talking about … wouldn’t you ?)

 

The example works OK, but is this the best way of positioning boxes, maybe without the ID’s

 

I’ll be putting text in each box

 

Obviously, this is very early stages, as the boxes will be aligned properly and there will be navigation links within a header as well as on the left.

 

<html>

<head>

 

<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 in anticipation

First, wrong forum mate. This would go in either HTML/CSS help or How do I do that really. Second, I don't see what your problem is to be honest. Most browsers support CSS and DIV tags, and the ones that don't are either really old, used for special purposes(ie; screen readers of some sort) or the ones used in really old mobile phones. You shouldn't have any problem using them afaik.

 

Thirdly, the difference between #ID's and .classes is that ID's can only be used once in your document and classes can be used as many times as you wish. For instance, if you had 4 headers in your site and you wanted them all to be the color red, you would asign them a class called .red for example. In .red you would have your CSS rules stating anything with the class of .red would make the text red. However, if you also wanted one of them to be 100px high you could give one of them an ID of #high. In which you would have CSS rules stating that anything with an ID of #high has to be 100px.

 

So, your 4 headers would look something like:

 

<h1 class="red" id="high"></h1>
<h1 class="red"></h1>
<h1 class="red"></h1>
<h1 class="red"></h1>

 

Yes, positioning is best done with CSS and Div tags, and there's nothing wrong with it. On your example you are using the HTML attribute "align=", this is bad practice, all presentational markup should be in your CSS insted.

 

Hope I understood your question and answered it

 

gl^hf

~evu.

Thanks Evu for your reply and accept my apologies for posting in the wrong section.

 

I'll try out your suggestions too

 

Regards !

Moved to the correct forum

To expand on evu's point, you can also use multiple classes on a single element.

 

<div class="fl red dotted" id="big">
 <p class="fl">Ipsum</p>
</div>

 

 

.fl{float:left}

.red{color:red}

.dotted{border:1px dotted #000}

#big{height:300px; width:300px;}

 

 

So the div will be floated left, have red text, a dotted border and a width and height of 300px;

 

The paragraph inside will only be floated to the left.

Ignore this please

Thanks for your reply too bocaj

 

I'll try everything sugested

 

Regards !

 

Brian