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.
Re: Two questions
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<-
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.
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?
Two questions
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.
Two questions
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 ). 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<-
Two questions
<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.

Two questions
. 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<-
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
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
Two questions
set the line-height in that div to the div height and use text-align: middle on the image to center vertically.
Two questions
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
Two questions
the vertical-align: middle needs to be placed on the image, so:
div.port_right_content_learn img {
vertical-align: middle;
}
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
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; }
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 :?: