SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How do I center a thumbnail picture vertically in a floating div?

    Hi all!

    I'm making a thumbnail picture page. The thumbs are 100x75 and 75x100px (landscape and portrait style). I'm putting these in a floating div with height:100px and width:100px.

    I want the thumbnails to be in the center of this, both horizontally and vertically. text-align:center took care of the horizontal bit, no problem there.

    But I can't get them to align vertically. I've tried vertical-align:middle but to no avail. Here's the code:
    PHP Code:
    <html>
    <
    head>
    <
    title>Talitha's birthday</title>
    <style type="text/css">
        div.thumb {
            float: left;
            display: block;
            padding: 5px;
            margin: 1px;
            border: 0;
            text-align: center;
            background: silver;
            width :100px;
            height: 100px;
        }
        div.thumb img {border: 0;}
    </style>

    </head>
    <body>
        <div class="thumb"><a href="p\00-02-06.jpg"><img src="p\t_00-02-06.jpg" width="75" height="100"></a></div>
        <div class="thumb"><a href="p\00-02-10.jpg"><img src="p\t_00-02-10.jpg" width="100" height="75"></a></div>
        <!-- More thumbs here -->
    </body>
    </html> 
    Preferebly I would like it to work on 5+ browsers. Btw, I know about the 'voice-family' hack to fix widths for ie5win. Since it does not seem relevant to this problem I ommitted it here for the sake of brevity.

    Any suggestions welcome .

    Greetings

    Rik

    <edit> Several typo's </edit>
    Last edited by Zoef; Dec 23, 2002 at 17:36.
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2000
    Location
    Chico, Ca
    Posts
    1,125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here try this out...

    PHP Code:

    <html>
    <
    head>
    <
    title>Talitha's birthday</title>
    <style tyext/css">
        div.thumb {
           
            display: block;
            padding: 5px;
            margin: 1px;
            border: 0;
            text-align: center;
            background: silver;
            width :100px;
            height: 100px;
        }
        div.thumb img {border: 0;}
    </style>

    </head>
    <body>
       <div style="text-align: center;">

            <div class="thumb">
                
                <a href="p0-02-06.jpg"><img src="p\t_00-02-06.jpg" width="75" height="100"></a>
                
            </div>

            <div class="thumb">
            
                <a href="p0-02-10.jpg"><img src="p\t_00-02-10.jpg" width="100" height="75"></a>
                
            </div>

        </div>
    </body>
    </html> 
    I got this to work, I am not sure if it's cross-browers compitable..
    "Happiness doesn't find you, you find happiness" -- Unknown
    www.chuckknows.com

  3. #3
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that chuckie!

    I tried it and I'm afraid that's not the effect I'm after, sorry!

    Maybe I should have explained a bit better, let me have another stab at it...

    First I'll discuss what it already does and then the thing I would like to achieve.

    It displays a number of (grey) boxes (div.thumb) of 110x110px(width and height = 100 plus the padding). These gray boxes, thanks to the 'float' wrap around the viewport very much like text does, ie they will display next to each other untill the 'end of the line' and the warp to a next 'line', irrespective of screen width etc... )

    Inside each of these boxes is a thumbnail picture of either 100x75px (landscape format) or 75x100px (portrait format).

    Now what I'm after is that each thumbnail is displayed in the middle of it's 'grey box', horizontally and vertically. Horizontally I managed, thanks to 'text-align:center'. Vertically I didn't manage...

    I hope this made things a bit clearer...

    Greetings

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2002
    Location
    Australia
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horrible solution

    Hi Zoef,

    I've had the same kind of problem since I started to use css. Still can't find a good solution, but I have found a little trick, which is definitely horrible, but it works. :/

    Code:
    <head>
    <title>Talitha's birthday</title>
    <style tyext/css">
        div.thumb {
            float: left;
            display: block;
            padding: 5px;
            margin: 1px;
            border: 0;
            background: center center no-repeat silver;
            width :100px;
            height: 100px;
        }
        div.thumb img {
    	border: 0; }
    </style>
    
    </head>
    <body>
      <div class="thumb" style="background-image:url(1.jpg)">
        <a href="p0-02-06.jpg"><img src="trans.gif" width="100" height="100"></a>
      </div>
      <div class="thumb" style="background-image:url(2.jpg)">
        <a href="p0-02-10.jpg"><img src="trans.gif" width="100" height="100"></a>
      </div>
      <!-- More thumbs here -->
    </body>
    I know that seeing 'trans.gif' with css hurts , so let's see if this encourages some of the css-gurus to get us a better answer! Good luck,

    d13

  5. #5
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks dense13!

    Tried it and it worked... in Explorer.

    Unfortunately both Mozilla and Opera don't like it. They will only show a 'silver' square. The picture is invisible .

    Thanks for taking your time and a Happy Christmas to you and your family.

    Greetings

    Rik

    PS: Tell Barcelona I will visit her again some day... I love that city .
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2002
    Location
    Australia
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works fine in my Mozilla 1.2 (windows) and NS6.2.3, and not perfect, but displaying the images in Opera6.

    Come back to BCN when you want! A CSS talk in the old city is something to which I wouldn't say no...

  7. #7
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    stupid stupid stupid!!!!!!!!

    It works just the way you said.

    I reeeeealy don't know what got in to me but stupid me made the stupid mistake of putting stupid backslashes in the thumb's url's!!!

    Ooooohhhhhh the horror...

    Thanks a lot mate!!!!!!

    And I just might take you up on that offer one of these years

    Greetings

    Rik

    PS: Did I mention 'stupid'?
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  8. #8
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    New and improved! Washes whiter then white and...

    Also perfect in Opera!

    Like this:
    Code:
    background: center center no-repeat silver; /* To make the thumbs center */
    background-position: center; /* To make the thumbs also center in Opera */
    For reference here's the complete code, also including the 'voice-family' hack:
    Code:
    <title>Thumbs page</title>
    <style type="text/css">
      div.thumb {
        float: left;
        display: block;
        padding:5px;
        margin: 1px;
        border: 0;
        background: center center no-repeat silver; /* To make the thumbs center */
        background-position: center; /* To make the thumbs also center in Opera */
        width :110px; /* Start of 'voice-family' hack for ie5win */
        height: 110px; 
        voice-family: "\"}\"";
        voice-family: inherit;
        width: 100px; 
        height: 100px;
        }
      html>body div.thumb {
        width: 100px; 
        height: 100px;
      }               /* End of 'voice-family' hack for ie5win */
      div.thumb img {
      border:0;
      }
    </style>
    </head>
    <body>
      <div class="thumb" style="background-image: url(p/t_00-02-06.jpg)">
        <a href="p/00-02-06.jpg"><img src="g/e100x100.gif" width="100" height="100" alt="Bigger" /></a>
      </div>
      <div class="thumb" style="background-image: url(p/t_00-02-07.jpg)">
        <a href="p/00-02-07.jpg"><img src="g/e100x100.gif" width="100" height="100" alt="Bigger" /></a>
      </div>
        <!-- More of the same... -->
    </body>
    </html>
    I tested this in ie5.0, moz1.0 and Opera6.05, all under Windows. Just curious about other browsers/platforms... Volunteers?

    Just one more thing, not a big issue but since I noticed it I thought I'd mention it. In order to have it really 'pixel-perfect' in ie5.0 one needs to put every 'div' on one single line without linebreaks. Otherwise ie5 will add a few pixels to the height of each 'box'. Just make sure that every 'div' has an equal amount of linebreaks in it so all boxes will be the same size.

    Thanks again dense13 and I hope the above might also be of some use to you...

    Greetings

    Rik

    PS: Did I mention I feel kinda 'smart' now?
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac


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
  •