Hi all,
I've spent all afternoon studying how to do a box with a caption in
it, following the advice at
http://css.maxdesign.com.au/floatutorial/tutorial0208.htm
However, I'm running into a few problems/questions. So I must be
missing something...
First off, because you have to specify the width of the box, how can
you accommodate pictures of different sizes? I can't image making a
new set of styles for every size photo?
I did find that making the height of the div "auto" seems to work.
But making the width = auto would mean I would have to put in line
breaks in the caption, otherwise the div expands to fill the text.
My first attempt is online at
http://www.socahort.org/awardsbanquet.html
The CSS is at
http://www.socahort.org/stylesheets/schs.css
go to very end, I used ".captionbox" as my div style (the tutorial
used ".floatright"):
.captionbox {
float: right;
margin: 0 0 10px 10px;
background-color: #FFFFFF;
padding: 10px;
border: 2px solid #F6B534;
width: 320px;
height: auto;
}
div.captionbox img {
border: 1px solid #250066;
}
div.captionbox p {
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 50%;
text-align: center;
color: #250066;
}
? I can't figure out how to get the caption text to be a different
size? I make it 50% which should be very small, but it's showing up
as 100.1%, which is what the Body is? And yet, changing the font
style works, and the text-align, just not the size.
I don't usually style a div like the tutorial suggests, I usually
give each div a name. But if I name the div (i.e., div#captionbox)
then I can only have one div with that name, right? I'd like to be
able to reuse this design over and over.
as usual, I've ended up more confused than when I started...<G>
thanks in advance,
Trish
--
_______
\ Trish & Chris Meyer/CyberMotion: Motion Graphics Design & Effects
\ recent projects & clients: http://www.cybmotion.com/projects
\ books, video, & articles: http://www.cybmotion.com/sharing
\ music (including Alias Zone): http://www.cybmotion.com/music
\______________________________________________________________
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
