Results 1 to 2 of 2

Thread: photo gallery css ul list

  1. #1
    Join Date
    Jan 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default photo gallery css ul list

    I am creating a list of images that will float left. A couple of the images are not floating left. I used the following css code

    Here is a link showing the issue http://cedtech23.tripod.com/index.html


    Code:
    <style  type="text/css">
    
    #staffimgs ul  { 
    list-style : none; 
    width: 780px;
    margin: 0;
    margin: 0;
    border-top: 20px solid gray;
    font-size: 12px;
    
    }
    
    #staffimgs li {
    float: left;
    width: 260px;
    padding: 2em 0; /* top right bottom left */
    }
    
    #staffimgs h3 {
    margin: 0 10px; /* top right bottom left */
    padding: .5em 0 0 0; /* top right bottom left */
    font-size: 100%;
    }
    
    #staffimgs img {
    display: block;
    width: 150px;
    height: 150px;
    }
    
    #staffimgs p {
    margin: 0 10px ; /* top right bottom left */
    padding : 0 0;
    }
    
    </style>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That's a pretty odd way to layout the page, with just one UL for all those images. Even so, doing this will get them to line up a bit more as expected:

    Code:
    #staffimgs li {
    float: left;
    width: 260px;
    height:390px;
    padding: 2em 0; /* top right bottom left */
    }
    This depends upon none of the individual LI's having content that will overflow the 260x390 box I've established for them. At the default font size and with the current content, they do not. A better idea would be to abandon the UL and LI's. By using one division of the desired width to contain all of the images and one division for each set of three images and text with no dimensions set clearing left and one division for each image and its text floated left with width set, things should work out better and be less dependant upon the amount of content and the font size in use in a given browser:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test</title>
    <base href="http://cedtech23.tripod.com/" />
    <style  type="text/css">
    
    #staffimgs { 
    width: 780px;
    margin: 0;
    margin: 0;
    border-top: 20px solid gray;
    font-size: 12px;
    }
    
    #staffimgs div {
    clear: left;
    }
    
    #staffimgs div div {
    clear:none;
    float: left;
    width: 260px;
    padding: 2em 0; /* top right bottom left */
    }
    
    #staffimgs h3 {
    margin: 0 10px; /* top right bottom left */
    padding: .5em 0 0 0; /* top right bottom left */
    font-size: 100%;
    }
    
    #staffimgs img {
    display: block;
    width: 150px;
    height: 150px;
    }
    
    #staffimgs p {
    margin: 0 10px ; /* top right bottom left */
    padding : 0 0;
    }
    
    </style> 
    
    </head>
    
    <body>
    
    <div id="staffimgs" >
     
    
    <div> 		<div><h3><img src="imgs/noimg.jpeg" alt="test" />Test Person          
            <a href="mailto:test@test.com?subject=testing." >Test Email</a> </h3>
                <p>is the President and CEO of Test. He has been involved in Fire 
                Service for thirty-three years, and is currently the Assistant Chief 
                of the Essex Fire Department. In his free time he enjoys Nascar, golf, 
                home improvement projects, and mechanics. Phil and his wife Lorrie 
                have four children. </p></div>
    
            <div><h3><img src="imgs/noimg.jpeg" alt="test" />Test Person          
            <a href="mailto:test@test.com?subject=testing." >Test Email</a> </h3>
                <p>is the Vice President and CFO of Test. She has been involved 
                in the Fire and Rescue Service for over twenty years. She is currently 
                the EMT/Safety Officer of the Essex Fire Department. She enjoys spending 
                time with her family whether they are working or playing together. 
                Her hobbies include swimming, crafts, and watching her children play 
                sports.</p> </div>
    
            <div><h3><img src="imgs/noimg.jpeg" alt="test" />Test Person          
            <a href="mailto:test@test.com?subject=testing." >Test Email</a> </h3>
                <p>is the General Manager of Test. He has worked at Test for 
                four years, and has spent two years with the Hague Fire Department 
                and nineteen with the Ticonderoga Fire Department, of which he spent 
                eight years as an Assistant Chief. David has received awards for: 
                NYS Fire Instructor, NYS FF1 and FF2, NYS Hazmat Technician, Federal 
                Hazmat Tech, Nationally Trained 911 Dispatcher, Past EMT, and numerous 
                other training schools. His hobbies include collecting fire and coastal 
                items and vacationing in Maine. David has two children: Nathan, 15 
                years old, and Shelby, 11 years old.</p> </div></div>
    
      <div>        <div><h3><img src="imgs/noimg.jpeg" alt="test" />Test Person          
            <a href="mailto:test@test.com?subject=testing." >Test Email</a> </h3>
                <p>has been the Administrative and Inside Sales Support for four years 
                at Test. She is knowledgeable with helping others with their 
                firefighting, emergency, and law enforcement needs. She enjoys spending 
                time with her friends and family. Tanya is a single mom of a five 
                and a half year old little girl, who is the light of her life. </p></div>
    			
           	<div><h3><img src="imgs/noimg.jpeg" alt="test" />Test Person          
            <a href="mailto:test@test.com?subject=testing." >Test Email</a> </h3>
                <p>has been an Administrative Assistant at Test for four years. 
                She enjoys reading, watching her kids play sports, painting, watching 
                movies, and sewing. Debbie is married with three children; Travis, 
                Nicholas, and Hailee.</p></div>
    
            <div><h3><img src="imgs/noimg.jpeg" alt="test" />Test Person          
            <a href="mailto:test@test.com?subject=testing." >Test Email</a> </h3>
                <p>has been the Sales Administrator for Test for two years. Her 
                hobbies include exercising, reading, and playing games with her family. 
                Lisa and her husband, Craig, have two daughters: eight year old Mikaylla 
                and five year old Kaitlyn. She is involved with the Essex Town Firm.</p></div> </div>
           
     <div>     <div><h3><img src="imgs/noimg.jpeg" alt="test" />Test Person          
            <a href="mailto:test@test.com?subject=testing." >Test Email</a> </h3>
                <p>has been working as the Scott Service Manager at Test for three 
                years. He has had sixteen plus years of service with the Ticonderoga 
                Fire Department and nine plus years with the Hague Fire Department. 
                Richard is affiliated with the Ticonderoga Fire Co. #1. In 1997 he 
                was awarded firefighter of the year, and in 2000, officer of the year. 
                His hobbies include drowning worms in local rivers and lakes, and 
                playing with his grandchild. Richard and his wife, Valerie FF and 
                EMT, have two sons; Richard, age 22, and Kyle, age 17. In 1983 he 
                began performing field level maintance on Scott air-paks.</p></div>
                
           <div><h3><img src="imgs/noimg.jpeg" alt="test" />Test Person          
            <a href="mailto:test@test.com?subject=testing." >Test Email</a> </h3>
    
                <p>has been the Scott Service Technician for Test for a year. He 
                performed maintenance at IBM for ten years, and is a retired Chief 
                Petty Officer of twenty-one years in the US Navy. Mike has received 
                several awards. He enjoys Nascar and golfing. Mike and his wife, Kay 
                have three children and one grandchild; Christina (mother of grandchild 
                Jordan), Josephy, and Amy. Mike is involved with the Underhill-Jericho 
                Fire Department.</p></div> 
            <div><h3><img src="imgs/noimg.jpeg" alt="test" />Test Person          
            <a href="mailto:test@test.com?subject=testing." >Test Email</a> </h3>
                <p>has served as a Salesman for Test for a year. He has been with 
                the Barnet Fire &amp; Rescue for twenty-five years, and is currently the 
                Assistant Chief. Joe enjoys fishing and golfing. Joe and Jean, his 
                wife of thirty-five years, have a daughter, Joelle; a daughter and 
                son-in-law, Christopher and Jaime Royer; and a granddaughter, Emerson 
                Jean Royer, born on February 11, 2006. Joe has served as the Vermont 
                Forest Fire Warden for fifteen years.</p></div></div>
    	   
    </div>
    
    
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •