...

View Full Version : Unaligned Image & Caption



astrid26
08-11-2005, 07:54 PM
Hey all. I want to have an image that is centered, but I want the caption underneath to be right-aligned. Below is the CSS for the tags I'm using and an example from the page, but it's not working. I'm new to CSS, so I'm sure I messed up somewhere. Please help! Thanks! :)


.port3 {
float: none;
margin-right: auto;
margin-left: auto;
padding: 20px 0px 0px 0px;
border: 0px;
}

.port4 {
float: none;
margin-right: auto;
margin-left: auto;
border: 0px;
color: #999999;
font-family: Georgia, Palatino, serif;
font-size: 10px;
font-weight: bold;
text-align: right;
line-height: 170%;
}


<div class="port3">
<img src="images/postcards.jpg" width="356" height="242" border="0" /></a><br />
<span class="port4"><a href="index.php">1</a> <a href="poster.php">2</a> <a href="postcards.php">3</a> <a href="map.php">4</a> </span>
</div>

mark87
08-11-2005, 08:11 PM
Like this?

May as well look at the version below...

Gant
08-11-2005, 08:44 PM
so let me get this straight. You can use text-align: to align pictures!?

That's counter intuative.

astrid26
08-11-2005, 08:45 PM
Not exactly. I want the caption to be right-aligned with the edge of the image. Also, I don't want there to be a big gap between the image and the caption [like there is when using a paragraph]. Also, for some reason when I used your code, the text was still left-aligned...? I dunno why that happened.

Any other suggestions are greatly appreciated!

mark87
08-11-2005, 08:47 PM
Works fine here... (Updated)



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<style type="text/css">
.port3 {
margin: 0 auto;
padding: 20px 0px 0px 0px;
}

.port4 {
margin: 0 auto;
color: #999;
font-family: Georgia, Palatino, serif;
font-size: 10px;
font-weight: bold;
text-align: right;
line-height: 170%;
}

.imgwrap {
width: 356px;
margin: 0 auto;
}
</style>
</head>

<body>

<div class="imgwrap">
<div class="port3">
<img src="images/postcards.jpg" width="356" height="242" border="0" />
<p class="port4">
<a href="index.php">1</a>
<a href="poster.php">2</a>
<a href="postcards.php">3</a>
<a href="map.php">4</a>
</p>
</div>
</div>

</body>
</html>

astrid26
08-11-2005, 08:47 PM
Gant,

I know! But I've just been messing about and desperate to find a way that works. When I had the margins set at auto for the image, but the caption was aligned, the image still wasn't centred.

astrid26
08-11-2005, 09:00 PM
Mark,

For some reason, the text is being left-aligned! Also, not all my images are 356 pixels in width. Any more ideas for me? :)

Here's the actual page: http://www.iheartpreston.co.uk/design/untitled3.php

And here's my stylesheet: http://www.iheartpreston.co.uk/quoideneuf/styles-site.css

mark87
08-11-2005, 09:25 PM
The 'text-align: left;' in 'content p' could be your problem. Try taking that out. Text will default to left anyway so you don't really need it.

You don't need to have the imgwrap set to that width, change it to the largest image size. The 'margin: 0 auto' will ensure it's centred.

astrid26
08-11-2005, 11:05 PM
Mark,

Thank you!! You're awesome ^_^



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum