SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Floating Thumbnails images and centering caption

    I know my semantics are not good except for the form, need some help on centering caption and Link to live site

  2. #2
    SitePoint Addict Kokos's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First of all: you should not be using HTML attributes for your layout.
    In order to center captions on an image, you need a parent div that contains both the caption and the image.

    Do the following things to make it work:

    • Remove the align="left" from all images
    • Remove the css margins from the images and captions
    • Give the 'a' containing the images and captions a text-align:center;


    If you want to have space in between the images, give the parent 'a' a margin, not the images.

    Taking over the web one pixel at a time.
    Currently working @ CodeCreators

  3. #3
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the parent id for to center the caption on the image would go inside the ul and li tags like

    Code:
    <ul><li><a><div id="someid"><p></p><img> /></div></a></li></ul>

    The above will make it?

  4. #4
    SitePoint Addict Kokos's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You already have a parent, the 'a'.

    Taking over the web one pixel at a time.
    Currently working @ CodeCreators

  5. #5
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did block in the style.css sheet like

    Code:
     #someid p {
    			margin: 0 auto 0 auto;
    padding: 0;
    			}
    To center the caption on the image inside the id #someid but so far has work any takes on that. maybe I am not being to specific in the css block

    it is true I can use a I was thinking about that, thanks for confirm that. I will take the div id from there

  6. #6
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not avail on centering the caption I have use this block

    Code:
    #navigator ul li a {
    			
    		
    		float:left;
    		padding: 0 0 0 0;
    margin:0 auto 0 1em;
    	
    		}
    #navigator ul li a p{
    			
    		
    		
    		padding: 0 0 0 0;
    margin:0 auto 0 auto;
    	
    		}

  7. #7
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,775
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    You can't nest a p element inside an a element (unless you are using html5 and even then you shouldnt because some browsers don't like it).

    Do something simpler like this.

    Code:
    #navigator {
        width:604px;
        border:#006;
    }
    #navigator li img {
        margin: 0 auto;
        display:block;
        border:1px solid #000;
    }
    #navigator ul {
        margin: 0;
        padding: 0;
        border:1px solid #009;
        list-style-type: none;
        overflow:hidden;
    }
    #navigator ul li {
        display:inline;
    }
    #navigator li a {
        float:left;
        display:inline;
        text-align:center;
        margin:0 0 0 1em;
    }
    Code:
    <td class"unordered" width="289"><div id="navigator">
                    <ul>
                        <li><a href="children.php?category_id=4&ids=3&name=Tube">Tube<img src="images/profileimages/4.jpg" alt="Category 9" width="100" height="130" /></a></li>
                        <li><a href="children.php?category_id=4&ids=3&name=LCD">LCD<img src="images/profileimages/4.jpg" alt="Category 9" width="100" height="130" /></a></li>
                        <li><a href="children.php?category_id=4&ids=3&name=Plasma">Plasma<img src="images/profileimages/4.jpg" alt="Category 9" width="100" height="130" /></a></li>
                        <li><a href="children.php?category_id=4&ids=3&name=TV-DVD Combinations">TV-DVD Combinations<img src="images/profileimages/4.jpg" alt="Category 9"width="100" height="130" /></a></li>
                    </ul>
                </div></td>
    Text-align center is set on the parent to center the text and then the image is put onto a new line by using display:block and then auto margins to center the images as well.


Bookmarks

Posting Permissions

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