Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    Jul 2009
    Posts
    2
    Member #
    19436
    Greetings!

    So I'm pretty new to using CSS, and I'm trying to make a thumbnail gallery for my website. Here is what I have so far:

    http://www.asylum360.com/illgallery.html

    The problem I'm having is aligning the rows of thumbnails. They seem to be off by just a bit...

    Here is the CSS code:

    /*image Gallery*/

    body#illbody {background-color:#003333;
    background-image:url(assets/layout/grid-trans.png);
    font-size:20px; color:#CCC;
    font-family:"Agency FB"; src: url(http://www.asylum360.com/assets/agencyr.ttf);}

    a:link {text-decoration:none; color:#99c; }
    a:visited {text-decoration:none ;color:#99b; }
    a:hover {text-decoration:none ;color: #634B63; }
    a:active {text-decoration:none ;color: #090;}

    div#gallerywrap {
    margin: auto 5%;
    margin-top: 2%;
    min-width:30em;}

    div.gallerytop {float: left;}
    div.gallerytop ul {padding-left: 0; margin-left: 0;}
    div.gallerytop ul li {display: inline;}

    ul.topnav {font-size:20px;}
    ul li a { text-decoration: none; color: #777; padding: 5px; border: 1px solid #090;}

    span.topnavtitle {font-size:35px; padding-right:.5em;}

    /*Thumbnails*/


    div.thumbnaildiv { float: left; width:50em;}
    div.thumbnaildiv ul {padding-left: 0; margin-left: 0;}
    div.thumbnaildiv ul li {display: inline;}

    ul.thumblist li {text-decoration: none; border: none;}
    ul.thumblist img {text-decoration: none; border: none; padding-top:.5em;}
    ul.thumblist a {text-decoration: none; border: none;}

    /*end code*/

    Any advice would be greatly appreciated.

  2.  

  3. #2
    Junior Member WebPrezentacija's Avatar
    Join Date
    Jul 2009
    Location
    Novi Sad, Serbia
    Posts
    25
    Member #
    19405
    Liked
    1 times
    Zebrasectomy,

    I just canít grasp what youíre getting at. If you would like to make thumbnail gallery, itís very simple.

    I think you want to align small images -- thumbnails -- into one row, only you have to do is to float left every image, thatís all. And if you want to click thumbnail, you will get big image in blank window, just look at html code and of course css code.

    Iím sorry if I couldnít help you more.

    Css

    Code:
    .img-gal {
                  float: left;
                  padding: 0px;
                  margin: 0px 15px 15px 0px;
                  width: 109px;
      }
    Html

    Code:
    <div class="img-gal">
      <a href="" target="_blank">
        <img src=".jpg" width="" height="" alt="" title=" "/>
      </a>
    </div>

  4. #3
    Junior Member
    Join Date
    Jul 2009
    Posts
    2
    Member #
    19436
    Ack. sorry, the link didn't work.

  5. #4
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    I made 2 changes but the distance between the thumbs is narrower than what you had. The padding messes up the next line of thumbs for you. These are the changes:

    ul li a { text-decoration: none; color: #777; padding: 0; border: 1px solid #090;}

    /*Thumbnails*/
    div.thumbnaildiv { float: left; width:45em;}

    I'm not sure to be honest with you if you can have a ul list work that way, going to the next line and being lined up. If you don't like that fix then there are alternatives. but it would involve rewriting some code. Unless somebody has a fix for this?....

  6. #5
    Banned
    Join Date
    Jul 2009
    Posts
    6
    Member #
    19536
    Something is being reused that can't be reused without unclipped code and the actual JavaScript it is pretty much impossible to tell how or what.Get Firefox and install the Web Developer Toolbar Add-on,which will tell you what goes wrong in your code, and where - that way, you can also see why in real-time.


Remove Ads

Posting Permissions

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

Search tags for this page

html code to alighthumbnails

Click on a term to search for related topics.
All times are GMT -6. The time now is 03:21 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com