PDA

View Full Version : css and images / text alignment

ianmh
08-14-2004, 06:07 PM
Hi all,

I have a css problem. I want to have images with html text descriptions below them centered and have the images span the screen centered and line break when they reach the edge. Something like this.


<div>image
<div>description</div>
</div>


Visually like this if there were 5 images and it wrapped after 3.


[] [] []
desc desc desc
[] []
desc desc


I have tried a number of things, display inline ect. I can get it to work with no descriptions, but once I add a <br /> or <div> everything line breaks. I would prefer also not to use tables. Any suggestions?

Thanks
coothead
08-15-2004, 06:04 AM
Hi there ianmh,

this is not quite what you requested but...
it is a very good way of displaying a gallery of images :cool:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>image gallery</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/

body {
background: #9999ff;
margin: 20px;
}

#container {
border:solid 1px #000000;
background: #aaaaff;
}

#container ul {
display: block;
margin: 0px;
padding: 0px;
}

#container li {
display: block;
float: left;
margin: 20px;
list-style-type: none;
border:solid 1px #000000;
padding:10px;
background: #ffffff;
}

#container li p {
margin: 0px;
padding: 0px;
font-family:courier;
font-size:12px;
text-align: center;
}

#container img {
width:170px;
}

#container hr {
clear: both;
margin: 0px;
padding: 0px;
height:1px;
visibility: hidden;
}

/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[
//]]>
</script>

</head>
<body>

<div id="container">
<ul>
<li><img src="http://hstrial-dbayly.homestead.com/files/anim.gif" alt=""/><p>image description</p></li>
<li><img src="http://hstrial-dbayly.homestead.com/files/anim1.gif" alt=""/><p>image description</p></li>
<li><img src="http://hstrial-dbayly.homestead.com/files/anim2.gif" alt=""/><p>image description</p></li>
<li><img src="http://hstrial-dbayly.homestead.com/files/anim3.gif" alt=""/><p>image description</p></li>
<li><img src="http://hstrial-dbayly.homestead.com/files/anim.gif" alt=""/><p>image description</p></li>
<li><img src="http://hstrial-dbayly.homestead.com/files/anim1.gif" alt=""/><p>image description</p></li>
</ul>
<hr />
</div>


</body>
</html>
ianmh
08-15-2004, 02:41 PM
Hey coothead, that's a really cool way of doing it, still not quite what I'm trying to do, they are still not centered on the page. I had something simular with floats but without using an unordered list.

I'll play around with this for awhile thanks. :)
coothead
08-15-2004, 03:25 PM
hi there ianmh,

try changing this...

#container ul {
display: block;
margin: 0px;
padding: 0px;
}
....to this

#container ul {
display: block;
width: 720px;
margin: auto;
padding: 0px;
}
..and the images will be centered. :cool:
ianmh
08-15-2004, 09:31 PM
Thanks coothead. My only problem is my images are not always the same size. I may just have to settle with them floating left. hmm.
scoutt
08-16-2004, 10:04 AM
yeah, float will be your only choice. but floating and margins will be buggy at best in IE.