cedtech23
01-14-2007, 03:19 AM
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
<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>
jscheuer1
01-14-2007, 04:12 AM
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:
#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:
<!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 & 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>
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.