Two questions

I hope to use this box layout as a portfolio mechanism. The only problem is it turns up 2 errors due to repeat DIV names. As I'll need to have about 50 of these things on various pages it will be a major headache to duplicate 100 new div tags. Is there a simple work around for being able to duplicate these things painlessly?
Yeah. Use classes for re-usable things and use ids for one-shot things. That's how they're designed.

->Day<-

Would setting top & bottom margin of the images to auto work? Or maybe set the image as a background image and use position: center center?
Also, a few comments about your code:
You don't need this sort of stuff in your HTML: hspace="0" vspace="0" border="0". That sort of stuff should be set in your CSS.
Also, you seem to be using a lot of javascript rollovers where it seems that CSS ones (using a:hover) would work just as well and with less markup.
And your CSS text styling really needs trimming down, e.g.:

.BodyText10 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	font-style: normal;
	font-weight: normal;
	color: #E8E8E8;
	text-decoration: none;
	line-height: 20px;
}

.BodyText10b {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	font-style: normal;
	font-weight: normal;
	color: #E8E8E8;
	text-decoration: none;
}

Take the font-family out of each style and put it in the body - that way it affects all text styles and you only need to specify something different when you want a particular class or ID to have a different font.
Same with font color: set it on a parent element and all styles within that element will pick it up. Set it on the body, or on a div that contains an area of content.
You don't need to keep repeating font-style:normal and font-weight:normal as they're the default and only need to be mentioned if you've set those attributes to be something else higher up.
Text decoration doesn't need to be there unless you're styling links.
The way I would do the above would be:

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	color: #E8E8E8;
	line-height: 20px;
}

.BodyText10 { font-size: 0.7em; }

or something like that.

@Tysen

Thanks for the feedback. Yes, I do need to clean my styling up. An artefact of trying to teach myself this stuff (and not doing a great job of it). I'm using javascript out of habit but I'll give CSS atry once I've got a bit of time. Out of curiosity - why are you using 80% as a font size in Body? Wouldn't that then effect all other fonts regardless of their tag?

@Day

Thanks also, but I'm not quite sure if I'm following you. Could you possibly offer a code sample?

The way I style my fonts is to set a percentage for font-size and line-height in the body and then use percentages (others use ems) on everything else after that.
So you're scaling your base font size relative to the browser's default font size and then scaling your elements relative to the base font size you've set.

Sure thing. You have

<div id='port_wrap'>
<div id="port">

in your HTML and

div#port_wrap {
	width: 600px;
	margin: 7px 0px 7px 0px;
	height: 260px;
}

div#port {
	width: 570px;
	padding: 0px 0px 0px 0px;
	margin: 0px 14px 15px 14px;
	background-color: #2B2B2B;
	height: 260px;
	border-top-color: #7C7C7C;
	border-right-color: #7C7C7C;
	border-bottom-color: #7C7C7C;
	border-left-color: #7C7C7C;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-left-width: 1px;
	border-bottom-width: 1px;
	border-right-width: 1px;
	border-top-width: 1px;
}

in your CSS. In stead, make it

<div class='port_wrap'>
<div class="port">

and

div#port_wrap {
	width: 600px;
	margin: 7px 0px 7px 0px;
	height: 260px;
}

div#port {
	width: 570px;
	padding: 0px 0px 0px 0px;
	margin: 0px 14px 15px 14px;
	background-color: #2B2B2B;
	height: 260px;
	border: solid 1px #7C7C7C;
}

respectively. I went ahead and consolidated your boder declarations, too.

You see, a class is like a class of object, say, chairs, for example. THere are a lot of things that are chairs. So you could go into a room and point at any number of things and say, "Chair," and you might be right (unless you don't know a chair from a corkscrew ). Ids are like, say, a Social Security Number. Everybody gets one, and no one shares. So if you were to walk into a room and point at two people and say they were both, say, 243-3456-24, you'd be wrong. You just can't have two people with the same SSN. That make some sense?

I had trouble with this for a while, too. Just remember ids need to be unique and classes can be reused.

->Day<-

div.port_wrap {
	width: 600px;
	margin: 7px 0 7px 0;
	height: 260px;
}

div.port {
	width: 570px;
	padding: 0;
	margin: 0 14px 15px 14px;
	background-color: #2B2B2B;
	height: 260px;
	border: solid 1px #7C7C7C;
}

. instead of # for classes in your CSS.

Erp. I got distracted by the borders and forgot to edit the important part. Hah! Good eye, Tyssen.

->Day<-

Many thanks fellas - this is a great help. I'm definitely in the correct section 'beginners'. There's obviously many basics that I'm unaware of.

I am more a front end person than a programmer but I can really see the benefit of designing with CSS. I only hope my technical hat proves sufficient to the task.

Thanks again!
Steiner

Oops. Don't mean to appear ungrateful but I've had no joy with 'question 2' at the start of this string.

Setting the top/bottom margins to AUto seems to do nothing and while setting the image to the background would probably align properly - it would not act as a roll over with the thumbnails (I would also have to create a CSS rule for every portfolio entry).

Any other possibilities - or should I simply give up on this one?

Thanks again

set the line-height in that div to the div height and use text-align: middle on the image to center vertically.

Thanks WolfCry, I've tried this but no joy. Perhaps I've done something incorrectly. Please have a look at:

http://www.condottiero.com/rework/sample.html

The relevant style sheets are 'sample'

img.port_align {
	vertical-align: middle;
	text-align: center;
}

and 'sample2'

div.port_right_content_learn {
	float: right;
	width: 308px;
	background-color: #333333;
	height: 250px;
	border: solid;
	border-bottom-width: 7px;
	border-top-color: #9F9F9F;
	border-right-color: #9F9F9F;
	border-bottom-color: #630316;
	border-left-color: #9F9F9F;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	margin: 1px 1px 1px 1px;
	line-height: 250px;
	vertical-align: middle;
	text-align: center;
}

Thanks
Steiner

the vertical-align: middle needs to be placed on the image, so:

div.port_right_content_learn img {
vertical-align: middle;
}

@WC, I'm probably being thick here but I thought the following code was applied to the image?

img.port_align { 
   vertical-align: middle; 
   text-align: center; 
}

Anyway, I tried placing the following in my doc but still no joy:

<div class="port_right_content_learn"><img src="images/newoilspace1.jpg" alt="" name="portlarge" width="300" height="175" border="0" class="port_right_content_learn img" id="portlarge" /></div>

The doc is still available here in case:

http://www.condottiero.com/rework/sample.html

Thanks
Steiner

Going on the code snippet provided, your vertical-align should be assigned to either:

div.port_right_content_learn img {
   vertical-align: middle;
   text-align: center;
}

or

img.port_right_content_learn {
   vertical-align: middle;
   text-align: center;
}

Still no joy. I believe I've followed your suggestions so please have a look at:

http://www.condottiero.com/rework/sample.html

Any ideas :?: