www.webdeveloper.com
Results 1 to 3 of 3

Thread: CSS layout issue

  1. #1
    Join Date
    Mar 2006
    Posts
    21

    CSS layout issue

    Below is both the CSS and HTML of my attempt at a photo gallery... I would however like the images in a straight row below the large main image, what am I doing wrong?

    div {}

    .gallery {}

    body {
    text-align:center;
    font-family: tahoma, "Comic Sans MS";
    font-size:76%;
    letter-spacing:0.05em;
    }


    /* The containing box for the gallery. */
    #container {
    position:relative;
    width:770px;
    height:396px;
    margin:20px auto 0 auto;
    border:1px solid #aaa;
    }


    #container ul {
    /* Removing the list bullets and indentation */
    padding:0;
    margin:0;
    list-style-type:none;
    /* set the size of the unordered list to neatly house the thumbnails */
    width:198px;
    height:250px;
    /* move the thumbnails into the correct position */
    margin:5px;
    float: right;
    display: block;
    }

    #container li {
    float:left;
    }

    /* Remove the images and text from sight */
    #container a.gallery span {
    position:absolute;
    width:1px;
    height:1px;
    top:5px;
    left:5px;
    overflow:hidden;
    background:#fff;
    }

    /* Adding the thumbnail images */
    #container a.gallery, #container a.gallery:visited {
    display: block;
    color:#000;
    text-decoration:none;
    border:1px solid #000;
    margin:1px 2px 1px 2px;
    text-align:left;
    cursor:default;
    }
    #container a.slidea {
    background: url(drum1-S.jpg) no-repeat center;
    height:113px;
    width:62px;
    }
    * html #container a.slidea {
    width: 62px;
    height: 113px;
    }
    #container a.slideb {
    background:url(drum2-S.jpg) no-repeat center;
    height:62px;
    width:113px;
    }
    * html #container a.slideb {
    height: 62px;
    width:113px;
    }
    #container a.slidec {
    background:url(drum3-S.jpg) no-repeat center;
    height:113px;
    width:62px;
    }
    * html #container a.slidec {
    height:113px;
    width:62px;
    }
    #container a.slided {
    background:url(drum4-S.jpg) no-repeat center;
    height:113px;
    width:62px;
    }
    * html #container a.slided {
    height:113px;
    width:62px;
    }
    #container a.slidee {
    background: url(drum5-S.jpg) no-repeat center;
    height:113px;
    width:62px;
    }
    * html #container a.slidee {
    width:113px;
    width:62px;
    }
    #container a.slidef {
    background:url(drum6-S.jpg) no-repeat center;
    height:113px;
    width:62px;
    }
    * html #container a.slidef {
    height:113px;
    width:62px;
    }

    /* change the thumbnail border color */
    #container a.gallery:hover {
    border:1px solid #fff;
    }

    /* styling the :hover span */
    #container a.gallery:hover span {
    position:absolute;
    width:372px;
    height:372px;
    top:10px;
    left:75px;
    color:#000;
    background:#fff;
    }


    ul {}

    li {}

    a {}

    span {}

    img {}

    a:link {}

    a:visited {}

    a:hover {}

    a:active {}






    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    body {
    background-color: #FFFFFF;
    }
    -->
    </style><link rel="stylesheet" type="text/css" href="gallerystyle.css" /> </head>

    <body>
    <div id="container">
    <ul>
    <li>
    <a class="gallery slidea" href="#nogo">
    <span>
    <img src="drum1.jpg" alt="1" title="1" />
    <br />
    </span>
    </a>
    </li>
    <li>
    <a class="gallery slideb" href="#nogo">
    <span>
    <img src="drum2.jpg" alt="2" width="424" height="242" title="2" />
    <br />
    </span>
    </a>
    </li>
    <li>
    <a class="gallery slidec" href="#nogo">
    <span>
    <img src="drum3.jpg" alt="3" title="3" />
    <br />
    </span>
    </a>
    </li>
    <li>
    <a class="gallery slided" href="#nogo">
    <span>
    <img src="drum4.jpg" alt="4" title="4" />
    <br />
    </span>
    </a>
    </li>
    <li>
    <a class="gallery slidee" href="#nogo">
    <span>
    <img src="drum5.jpg" alt="5" title="5" />
    <br />
    </span>
    </a>
    </li>
    <li>
    <a class="gallery slidef" href="#nogo">
    <span>
    <img src="drum6.jpg" alt="6" title="6" />
    <br />
    </span>
    </a>
    </li>
    </ul>
    </div>

    </body>
    </html>

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    I recognise this fine piece of code as Stu Nicholl's, I beleive it was called "A Dog's Life" or something like that. Totally open-source of course. That's why I also used his technique to create this site: http://ca.geocities.com/hobby_site/

    I started to go through your code and sort~of lost spirit... *sigh*... maybe I'd better go to lunch and I'll feel more alert afterwards...
    -J
    Last edited by WebJoel; 06-05-2006 at 02:31 PM.

  3. #3
    Join Date
    Apr 2006
    Posts
    370
    Yes, I recognised it too!

    As it stands, your "container ul" is floated right. It isn't very wide, hence the way the small images are stacking.

    Try - as a starting point - unfloating the "container ul" and taking away its width. That will give your horizontal row of images. Then you'll need to move it to make way for the main image.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles