Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unaligned Image & Caption

    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!

    Code:
    .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%;
    	}
    Code:
    <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>

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Like this?

    Edit: May as well look at the version below...
    Last edited by mark87; 08-11-2005 at 08:57 PM.

  • #3
    Registered User
    Join Date
    Aug 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    so let me get this straight. You can use text-align: to align pictures!?

    That's counter intuative.

  • #4
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #5
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Works fine here... (Updated)

    Code:
    <!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>

  • #7
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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/quoid...tyles-site.css

  • #8
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #9
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Mark,

    Thank you!! You're awesome ^_^


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •