15 replies [Last post]
Steiner
Offline
Regular
Last seen: 16 years 2 weeks ago
Joined: 2005-06-09
Posts: 39
Points: 0

Hi all, please have a look at the following:

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

Question 1:

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?

Question 2:

I would like to align the large portfolio images at right by means of 'aligning to middle' but it doesn't seem to work. I'm presently having to apply a top margin to the div tag but as the images will vary in size that won't work across the board. Can anyone spot my error?

Thanks in advance
Steiner

P.S. I realise the images in the second box are resizing - they were only thrown in as a crude sample.

Day
Day's picture
Offline
Enthusiast
Texas
Last seen: 15 years 37 weeks ago
Texas
Timezone: GMT-6
Joined: 2005-10-07
Posts: 103
Points: 0

Re: Two questions

Steiner wrote:
Question 1:

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

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 36 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Two questions

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Steiner
Offline
Regular
Last seen: 16 years 2 weeks ago
Joined: 2005-06-09
Posts: 39
Points: 0

Two questions

@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?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 36 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Two questions

Steiner wrote:
Out of curiosity - why are you using 80% as a font size in Body?

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Day
Day's picture
Offline
Enthusiast
Texas
Last seen: 15 years 37 weeks ago
Texas
Timezone: GMT-6
Joined: 2005-10-07
Posts: 103
Points: 0

Two questions

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

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 Wink). 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<-

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 36 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Two questions

Day wrote:
<div class='port_wrap'>
<div class="port">

and

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. Wink

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Day
Day's picture
Offline
Enthusiast
Texas
Last seen: 15 years 37 weeks ago
Texas
Timezone: GMT-6
Joined: 2005-10-07
Posts: 103
Points: 0

Two questions

Tyssen wrote:
. instead of # for classes in your CSS. Wink

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

->Day<-

Steiner
Offline
Regular
Last seen: 16 years 2 weeks ago
Joined: 2005-06-09
Posts: 39
Points: 0

Two questions

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

Steiner
Offline
Regular
Last seen: 16 years 2 weeks ago
Joined: 2005-06-09
Posts: 39
Points: 0

Two questions

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

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 16 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Two questions

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

Steiner
Offline
Regular
Last seen: 16 years 2 weeks ago
Joined: 2005-06-09
Posts: 39
Points: 0

Two questions

wolfcry911 wrote:
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

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 16 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Two questions

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

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

Steiner
Offline
Regular
Last seen: 16 years 2 weeks ago
Joined: 2005-06-09
Posts: 39
Points: 0

Two questions

@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

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 36 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Two questions

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;
}

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Steiner
Offline
Regular
Last seen: 16 years 2 weeks ago
Joined: 2005-06-09
Posts: 39
Points: 0

Help

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 :?: