CODEWITHSUNDEEP
htmlcssgallery
user1253957
user1253957

Reputation: 13

formatting web gallery

i am using the following code to create a small web gallery. right now the thumbnails are placed vertically, and id like them to run horizontally below the main image. does anyone have any suggestions for how to do so?

<div id="content">
    <script type="text/javascript">
        function myshowImages(id) {

             /**$(".bigPic").hide();
                $("#pic-"+id).show();*/
                $('.bigPic').css({'display':'none'});
                $("#pic-"+id).fadeIn('slow'); 

        }
    </script>
    <script>
        $(document).ready(function () {
            $('.email-sign-up').css({'marginBottom':'0px'});        
        })
    </script>

    <div class="product">
        <div class="galerie">
            <div class="bigPics">
                <a href="insert" target="_blank">
                    <img src="insert" title="" alt="" id="pic-0" width="450" height="450" class="bigPic" name="bigPic"  />
                </a>
                <a href="insert" target="_blank">
                    <img src="insert" title="" alt="" id="pic-1" width="450" height="450" class="bigPic" name="bigPic" style="display:none;" />
                </a>
            </div>

            <div class="thumbnails">
                <div class="mini-thumb">
                    <a href="javascript:myshowImages(0)" >
                        <img src="insert" title="" alt="" />
                    </a>
                </div>
                <div class="mini-thumb">
                    <a href="javascript:myshowImages(1)" >
                         <img src="insert" title="" alt="" />
                    </a>
                </div>

Upvotes: 1

Views: 82

Answers (1)

calebds
calebds

Reputation: 26228

The div elements wrapping your thumbs have a default CSS style of display: block, which causes an element to take up 100% of the horizontal space available to it. You could change this with the following rule:

.mini-thumb {
    display: inline-block;
}

As a side note, well-indented markup can help you identify problems such as missing closing </div> tags, which may contribute to formatting issues.

Upvotes: 1

Related Questions