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 7 of 7
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation How can I centre the picture captions?

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

    Code:
    <?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.

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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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:
    Code:
    <div id="container">
         <ul class="pics">
         <li><a href="Steven2.html"><img alt="Family photos" src="YoungSteve.jpg"></a> <h5>Young Steven.</h5> </li>
    Code:
    .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/
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    Last edited by effpeetee; 05-26-2007 at 05:26 PM.

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    As a side issue, never use this:
    Code:
    <?xml version="1.0"?>
    It is causing your page to be rendered in quirks mode in IE6. The layout is breaking in IE6.

    For what reason are you even using XHTML? Read this post by Arbitrator to hear what he has to say about that question.

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by koyama View Post
    As a side issue, never use this:
    Code:
    <?xml version="1.0"?>
    It is causing your page to be rendered in quirks mode in IE6. The layout is breaking in IE6.

    For what reason are you even using XHTML? Read this post by Arbitrator to hear what he has to say about that question.
    Thanks,

    I have reverted to HTML 4.1

    effpeetee
    Last edited by effpeetee; 05-26-2007 at 07:34 PM.

  • #6
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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:

    Code:
      * { 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
    Code:
    <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.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Hi.

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

    effpeetee


  •  

    Posting Permissions

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