How can I centre the picture captions?

effpeetee

05-26-2007, 03:56 PM

Hello friends,

I have been unable to find what I need to do to get the picture captions centred to the picture. Would some kind coder please help?

Page address - http://www.exitfegs.co.uk/nine.html

Here is the HTML code for page nine:-

<?xml version="1.0"?>
<!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>
<title>Effpeetee's Photo Gallery</title>
<link rel="stylesheet" type="text/css" href="cssstyle.css" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="A page of family photos." />
</head>

<body>
<a href="index.html"><img alt="Back Home." src="home.jpg" width="85" height="42" /></a>

<div id="container">
<ul class="pics">
<li><a href="Steven2.html"><img alt="Family photos" src="YoungSteve.jpg" /></a>Young Steven.</li>
<li><a href="HonW.html"><img alt="Family photos" src="web20.jpg" /></a>Hay-on-Wye.</li>
<li><a href="Glider.html"><img alt="Family photos" src="Glider.jpg" /></a>Frank in a glider - Wartime ATC.</li>
<li><a href="twoc.html"><img alt="Family photos" src="web3.jpg" /></a>Betty and Frank - Arlesford.</li>

<li><a href="Mum.html"><img style="WIDTH: 120px; HEIGHT: 150px" alt="Family photos" src="web14.jpg" /></a>Frank's mum.</li>
<li><a href="Steve3.html"><img style="WIDTH: 120px; HEIGHT: 150px" alt="Family photos" src="steve-01.jpg" /></a>Steven.</li>
<li><a href="FSin.html"><img style="WIDTH: 120px; HEIGHT: 150px" alt="Family photos" src="EdPortrait2.jpg" /></a>Sister Edna.</li>
<li><a href="web19large.html"><img style="WIDTH: 120px; HEIGHT: 150px" alt="Family photos" src="web19.jpg" /></a>Frank - 45 years ago.</li>

<li><a href="grandad.html"><img style="LEFT: 146px; WIDTH: 150px; HEIGHT: 150px" alt="Family photos" src="grandad.jpg" /></a>Frank's Dad.</li>
<li><a href="BSGroup.html"><img alt="Family photos" src="Bettyandsteve.jpg" /></a>Betty and Steven.</li>
<li><a href="web20large.html"><img alt="Family photos" src="Cus10006.jpg" /></a>Samantha and Philip.</li>
<li><a href="SteveandPhil.html"><img alt="Family photos" src="SteveandPhil.jpg" /></a>Steve and Philip.</li>
<li><a href="famgroup.html"><img alt="Family photos" src="web17.jpg" /></a>Fam.ly group.</li>
</ul>
<div class="clear"></div>
</div>
</body>
</html>

This is the style sheet.

body {
font: "Lucida Grande", Tahoma, Verdana, sans-serif;
font-size:10px

font-weight:bold;
background: #000;
color: #FFF;
}
#container {
width: 728px;
margin: 0 auto;
}
.pics {
list-style-type: none;
}

.clear { /* clear the floats */
clear: both;
height: 0;
}

.pics li {
list-style: none;
float: left;
width: 162px;
margin: 0 10px 25px;
}

.pics img {
display: block;
width: 160px;
height: 120px;
border: 1px solid;
}

.pics2 img {
width: 120px;
height: 160px;
border: thin solid white;
display: block;
}

* { margin: 0; padding: 0; }

html { font: bold 62.5%/1.6 "Lucida Sans", "Lucida Grande", Tahoma, Geneva, Verdana, sans-serif; background: black; color: white; }

body{background:#555555}
A:link { color: white}
A:visited { color: white}
A:hover { color: orange}
A {text-decoration:none;font-family:"Arial Bold",sans-serif;}

height:100%;

overflow:hidden;

Excavator

05-26-2007, 04:18 PM

Goodmorning effpeetee,
Your li float: left; is putting your caption over to the left. To style the text you need to tag it with something you can style. In this example I used h5:
<div id="container">
<ul class="pics">
<li><a href="Steven2.html"><img alt="Family photos" src="YoungSteve.jpg"></a> <h5>Young Steven.</h5> </li>
.pics li {
list-style: none;
float: left;
width: 162px;
margin: 0 10px 25px;
}
h5 {
text-align: center;
}

You should have a look at a photo presentation method I have been working on for a while at http://www.nopeople.com/CSS/thumbnail%20presentation/

effpeetee

05-26-2007, 04:24 PM

Excavator,

Many thanks for your help. The site you gave me looks very interesting and I shall go there and study hard. One other problem that I have encountered is the one where the pictures vary between Portrait and Landscape presentation, So farr I have cheated and gotten around this by putting all of one type per line across.

Is there a way to incorporate mixed styles?

Once again thanks for your help.

effpeetee

koyama

05-26-2007, 06:37 PM

As a side issue, never use this:

<?xml version="1.0"?>

It is causing your page to be rendered in quirks mode (http://www.quirksmode.org/css/quirksmode.html) in IE6. The layout is breaking in IE6.

For what reason are you even using XHTML? Read this post (http://codingforums.com/showpost.php?p=569539&postcount=9) by Arbitrator to hear what he has to say about that question.

effpeetee

05-26-2007, 07:16 PM

harbingerOTV

05-27-2007, 03:43 PM

you shouldn't need the h5's in there really. since your LI's have width applied you should be able to write sopmething like:

* { margin: 0; padding: 0; } /* make sure this is first in your style sheet otherwise it will override everything you set before it */

html { font: bold 62.5%/1.6 "Lucida Sans", "Lucida Grande", Tahoma, Geneva, Verdana, sans-serif; background: black; color: white; }

body{
background:#555555;
height:100%;
overflow:hidden;
font: "Lucida Grande", Tahoma, Verdana, sans-serif;
font-size:10px;
font-weight:bold;
background: #000;
color: #FFF;
}

A:link { color: white}
A:visited { color: white}
A:hover { color: orange}
A {text-decoration:none;font-family:"Arial Bold",sans-serif;}

#container {
width: 728px;
margin: 0 auto;
}
.pics {
list-style-type: none;
}

.clear { /* clear the floats */
clear: both;
height: 0;
}

.pics li {
list-style: none;
float: left;
width: 162px;
margin: 0 10px 25px;
text-align: center;
}

.pics img {
display: block;
width: 160px;
height: 120px;
border: 1px solid #fff;
margin: 0 auto;
}

and in your HTML

<li><a href="Steven2.html"><img alt="Click to select." src="YoungSteve.jpg" width="100" height="100" /></a><br>Young Steven.</li>

no need for inline styles on the images, just make sure they have th esize applied to them.

effpeetee

05-27-2007, 06:55 PM

Hi.

Thanks for the code, but without the <h5> the captions will not center, which was my original problem.

effpeetee