High all! What can I do to make the rows and columns in this page (<!-- m --><a class="postlink" href="http://bugster.co.uk/thumbnail.php">http://bugster.co.uk/thumbnail.php</a><!-- m -->) a bit straighter? The text in particular is a bit up and down. Here is the source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="resource-type" content="document" />
<meta name="description" content="Thumbnails." />
<meta name="keywords" content="Thumbnails" />
<meta name="distribution" content="global" />
<style type="text/css">
ul#gallery {
margin:0 auto;
padding:0;
list-style-type:none;
width:80%;
}
ul#gallery li {
float: left;
margin:20px;
height:100px;
}
ul#gallery li img {
border: 1;
border-color: #bbb;
}
ul#gallery li p {
text-align: center;
margin:5px 0;
}
ul#gallery li p a {
text-decoration: none;
color: #000;
}
</style>
<title>Thumbnails</title>
</head>
<body>
<ul id="gallery">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"1.jpg"><img src="thumbnail.php?src=1.jpg" width="70" height="27" alt="" /></a><p><a href="1.jpg">1</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"2.jpg"><img src="thumbnail.php?src=2.jpg" width="70" height="53" alt="" /></a><p><a href="2.jpg">2</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"3.jpg"><img src="thumbnail.php?src=3.jpg" width="70" height="65" alt="" /></a><p><a href="3.jpg">3</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"4.jpg"><img src="thumbnail.php?src=4.jpg" width="70" height="46" alt="" /></a><p><a href="4.jpg">4</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"6.jpg"><img src="thumbnail.php?src=6.jpg" width="52" height="70" alt="" /></a><p><a href="6.jpg">6</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"7.jpg"><img src="thumbnail.php?src=7.jpg" width="70" height="53" alt="" /></a><p><a href="7.jpg">7</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"bug1.jpg"><img src="thumbnail.php?src=bug1.jpg" width="70" height="31" alt="" /></a><p><a href="bug1.jpg">bug1</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"bug2.jpg"><img src="thumbnail.php?src=bug2.jpg" width="70" height="53" alt="" /></a><p><a href="bug2.jpg">bug2</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"bug3.jpg"><img src="thumbnail.php?src=bug3.jpg" width="70" height="53" alt="" /></a><p><a href="bug3.jpg">bug3</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"bug4.jpg"><img src="thumbnail.php?src=bug4.jpg" width="54" height="70" alt="" /></a><p><a href="bug4.jpg">bug4</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"bug5.jpg"><img src="thumbnail.php?src=bug5.jpg" width="70" height="43" alt="" /></a><p><a href="bug5.jpg">bug5</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"bug6.jpg"><img src="thumbnail.php?src=bug6.jpg" width="70" height="58" alt="" /></a><p><a href="bug6.jpg">bug6</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"bug7.jpg"><img src="thumbnail.php?src=bug7.jpg" width="70" height="52" alt="" /></a><p><a href="bug7.jpg">bug7</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"carl.jpg"><img src="thumbnail.php?src=carl.jpg" width="70" height="48" alt="" /></a><p><a href="carl.jpg">carl</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"catch1.jpg"><img src="thumbnail.php?src=catch1.jpg" width="70" height="32" alt="" /></a><p><a href="catch1.jpg">catch1</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"catch2.jpg"><img src="thumbnail.php?src=catch2.jpg" width="70" height="37" alt="" /></a><p><a href="catch2.jpg">catch2</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"cliff.jpg"><img src="thumbnail.php?src=cliff.jpg" width="63" height="70" alt="" /></a><p><a href="cliff.jpg">cliff</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"eng3.jpg"><img src="thumbnail.php?src=eng3.jpg" width="70" height="46" alt="" /></a><p><a href="eng3.jpg">eng3</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"eng4.jpg"><img src="thumbnail.php?src=eng4.jpg" width="70" height="56" alt="" /></a><p><a href="eng4.jpg">eng4</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"eng5.jpg"><img src="thumbnail.php?src=eng5.jpg" width="70" height="67" alt="" /></a><p><a href="eng5.jpg">eng5</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"eye1.jpg"><img src="thumbnail.php?src=eye1.jpg" width="70" height="53" alt="" /></a><p><a href="eye1.jpg">eye1</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"eye2.jpg"><img src="thumbnail.php?src=eye2.jpg" width="70" height="43" alt="" /></a><p><a href="eye2.jpg">eye2</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"Piston1.jpg"><img src="thumbnail.php?src=Piston1.jpg" width="70" height="53" alt="" /></a><p><a href="Piston1.jpg">Piston1</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"ster.jpg"><img src="thumbnail.php?src=ster.jpg" width="70" height="38" alt="" /></a><p><a href="ster.jpg">ster</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"UNTITLED.jpg"><img src="thumbnail.php?src=UNTITLED.jpg" width="70" height="46" alt="" /></a><p><a href="UNTITLED.jpg">UNTITLED</a></p></li>
</ul>
</body>
</html>as the thumbnails dont have an uniformal size, i would actually put them inside something that has the same size for every pic, so you could actually start by having every <li> have an fixed size and maybe a background-color, then the image should be centered and given some margin.here i got 2 links for you:
<!-- m --><a class="postlink" href="http://accessat.c-net.us/test/gallery.html">http://accessat.c-net.us/test/gallery.html</a><!-- m -->
-> in this one note that the pics aren't of the same size
<!-- m --><a class="postlink" href="http://dzinelabs.com/Pages/gallery.phpAll">http://dzinelabs.com/Pages/gallery.phpAll</a><!-- m --> those images are the same height. I'm having trouble becase mine are different heights. The page is being writen by php so I need something that works universally for all images.well , center the images, and make the parent element big enough for the biggest imagewell , center the images, and make the parent element big enough for the biggest imageCetrering the images doesn't help solve the problem with the vertical alignment. Rather than completely changing the CSS to someone elses design I was hoping to make a small change to my CSS to sort this out. Isn't that the best way to learn? It's not like there is a major problem with my CSS and I should delete the lot, it's a minor vertical alignment problem that I don't have the knowhow to fix. Maybe I should just use tables!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="resource-type" content="document" />
<meta name="description" content="Thumbnails." />
<meta name="keywords" content="Thumbnails" />
<meta name="distribution" content="global" />
<style type="text/css">
ul#gallery {
margin:0 auto;
padding:0;
list-style-type:none;
width:80%;
}
ul#gallery li {
float: left;
margin:20px;
height:100px;
}
ul#gallery li img {
border: 1;
border-color: #bbb;
}
ul#gallery li p {
text-align: center;
margin:5px 0;
}
ul#gallery li p a {
text-decoration: none;
color: #000;
}
</style>
<title>Thumbnails</title>
</head>
<body>
<ul id="gallery">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"1.jpg"><img src="thumbnail.php?src=1.jpg" width="70" height="27" alt="" /></a><p><a href="1.jpg">1</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"2.jpg"><img src="thumbnail.php?src=2.jpg" width="70" height="53" alt="" /></a><p><a href="2.jpg">2</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"3.jpg"><img src="thumbnail.php?src=3.jpg" width="70" height="65" alt="" /></a><p><a href="3.jpg">3</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"4.jpg"><img src="thumbnail.php?src=4.jpg" width="70" height="46" alt="" /></a><p><a href="4.jpg">4</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"6.jpg"><img src="thumbnail.php?src=6.jpg" width="52" height="70" alt="" /></a><p><a href="6.jpg">6</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"7.jpg"><img src="thumbnail.php?src=7.jpg" width="70" height="53" alt="" /></a><p><a href="7.jpg">7</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"bug1.jpg"><img src="thumbnail.php?src=bug1.jpg" width="70" height="31" alt="" /></a><p><a href="bug1.jpg">bug1</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"bug2.jpg"><img src="thumbnail.php?src=bug2.jpg" width="70" height="53" alt="" /></a><p><a href="bug2.jpg">bug2</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"bug3.jpg"><img src="thumbnail.php?src=bug3.jpg" width="70" height="53" alt="" /></a><p><a href="bug3.jpg">bug3</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"bug4.jpg"><img src="thumbnail.php?src=bug4.jpg" width="54" height="70" alt="" /></a><p><a href="bug4.jpg">bug4</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"bug5.jpg"><img src="thumbnail.php?src=bug5.jpg" width="70" height="43" alt="" /></a><p><a href="bug5.jpg">bug5</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"bug6.jpg"><img src="thumbnail.php?src=bug6.jpg" width="70" height="58" alt="" /></a><p><a href="bug6.jpg">bug6</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"bug7.jpg"><img src="thumbnail.php?src=bug7.jpg" width="70" height="52" alt="" /></a><p><a href="bug7.jpg">bug7</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"carl.jpg"><img src="thumbnail.php?src=carl.jpg" width="70" height="48" alt="" /></a><p><a href="carl.jpg">carl</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"catch1.jpg"><img src="thumbnail.php?src=catch1.jpg" width="70" height="32" alt="" /></a><p><a href="catch1.jpg">catch1</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"catch2.jpg"><img src="thumbnail.php?src=catch2.jpg" width="70" height="37" alt="" /></a><p><a href="catch2.jpg">catch2</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"cliff.jpg"><img src="thumbnail.php?src=cliff.jpg" width="63" height="70" alt="" /></a><p><a href="cliff.jpg">cliff</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"eng3.jpg"><img src="thumbnail.php?src=eng3.jpg" width="70" height="46" alt="" /></a><p><a href="eng3.jpg">eng3</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"eng4.jpg"><img src="thumbnail.php?src=eng4.jpg" width="70" height="56" alt="" /></a><p><a href="eng4.jpg">eng4</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"eng5.jpg"><img src="thumbnail.php?src=eng5.jpg" width="70" height="67" alt="" /></a><p><a href="eng5.jpg">eng5</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"eye1.jpg"><img src="thumbnail.php?src=eye1.jpg" width="70" height="53" alt="" /></a><p><a href="eye1.jpg">eye1</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"eye2.jpg"><img src="thumbnail.php?src=eye2.jpg" width="70" height="43" alt="" /></a><p><a href="eye2.jpg">eye2</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"Piston1.jpg"><img src="thumbnail.php?src=Piston1.jpg" width="70" height="53" alt="" /></a><p><a href="Piston1.jpg">Piston1</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"ster.jpg"><img src="thumbnail.php?src=ster.jpg" width="70" height="38" alt="" /></a><p><a href="ster.jpg">ster</a></p></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"UNTITLED.jpg"><img src="thumbnail.php?src=UNTITLED.jpg" width="70" height="46" alt="" /></a><p><a href="UNTITLED.jpg">UNTITLED</a></p></li>
</ul>
</body>
</html>as the thumbnails dont have an uniformal size, i would actually put them inside something that has the same size for every pic, so you could actually start by having every <li> have an fixed size and maybe a background-color, then the image should be centered and given some margin.here i got 2 links for you:
<!-- m --><a class="postlink" href="http://accessat.c-net.us/test/gallery.html">http://accessat.c-net.us/test/gallery.html</a><!-- m -->
-> in this one note that the pics aren't of the same size
<!-- m --><a class="postlink" href="http://dzinelabs.com/Pages/gallery.phpAll">http://dzinelabs.com/Pages/gallery.phpAll</a><!-- m --> those images are the same height. I'm having trouble becase mine are different heights. The page is being writen by php so I need something that works universally for all images.well , center the images, and make the parent element big enough for the biggest imagewell , center the images, and make the parent element big enough for the biggest imageCetrering the images doesn't help solve the problem with the vertical alignment. Rather than completely changing the CSS to someone elses design I was hoping to make a small change to my CSS to sort this out. Isn't that the best way to learn? It's not like there is a major problem with my CSS and I should delete the lot, it's a minor vertical alignment problem that I don't have the knowhow to fix. Maybe I should just use tables!