1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Help with picture and caption layout

Discussion in 'CSS' started by wrybread, Jan 17, 2008.

0
  1. #1
    I'm new to CSS and making a slideshow that centers a picture on the page, and shows a text caption box a few pixels to the left of the picture. The problem is I can't fix the size of the picture div since the pictures are all different widths.

    Is there some obvious fix for this?

    Here's my code, which doesn't work, but I'm including it to get the gist across.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
body,td,th {
	color: #CCCCCC;
	
}
body {
background-color: #000000;
text-align: center;
text-align: center;
}

#container {
margin-left: auto;
margin-right: auto;
background-color:#CCCCCC;
}

#pic {
background-color:#FFFF00;
}

#blurb {
left: 100px;
font-size: 16px;
font-weight: bold;
color: #FF0000;
}

-->
</style>

</head>

<body>

<div id = "container">

<div id = "pic">

<img src="http://www.blueflash.cc/blog/media/mg_5560.sized.jpg">
<div id = "blurb">hi there!</div>

</div> <!-- end pic -->

</div> <!-- end container -->

</body>
</html>
    Code (markup):

     
    wrybread, Jan 17, 2008 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I'd take the part where the image will sit and have a div. The div would contain the Flash/whatever image AND the blurb (blurb would not be in a div). If the image is always floated to the right inside this div box, then the blurb (which still comes later in the source) should ride alongside the image so long as blurb remains an inline element (or an box that can only contain inlines like<p>). Put the class of "blurb" on the <p> for styling reasons. It should try to hug the floated image an if longer than the image is tall, then it would wrap underneath as well.

    Normally floats must be given a width-- since your are all different widths, you'll have to rely on the browser seeing what the width is as it loads. This can sometimes cause trouble with IE as it might try to render the rest of the page before it knows the size of the image. If they're all the same height, you can set this in the HTML (better than setting it in the CSS). If these are Flash images, then they'll be sitting in an <object> tag and you would then set the height in the CSS. It's only images where sometimes IE tries rendering the page before it knows the size of the image (it knows the size after it's loaded it entirely, which is why normally image sizes are set in the HTML as <img src="blah" height="blah" width="blah" alt="blah"> without the units (pixels are assumed)).

    So, you'd have this:

    
</head>

<body>

<div id = "container">

<div id = "pic">
<img src="http://www.blueflash.cc/blog/media/mg_5560.sized.jpg" height="somenumber" alt="describe the image here">
<p class ="blurb">hi there!</p>

</div> <!-- end pic -->

</div> <!-- end container -->

</body>
</html>
    Code (markup):
    CSS:
    
#pic {
  background-color:#FFFF00;
  margin: 10px auto; <--centers it in #container
  overflow: hidden; <-- to make sure whatever colour background you have is at least longer than the float
  width: somewhat bigger than the largest image to make room for p;
}

#pic img {
  float: right;
}

p.blurb {
font-size: 16px;
font-weight: bold;
color: #FF0000;
}
    Code (markup):
    You need to look at the size of your largest image and set the width of #pic larger-- larger enough that the text can ride alongside.

    You'll also need to clear that float somewhere after #pic ends. So usually that's whatever element comes directly after #pic. You'd set clear: right; in that element's CSS.
     
    Stomme poes, Jan 18, 2008 IP