First I’ll post a screen shot of my problem…
My original problem was I couldn’t get the images centered, but I fixed that, but now after I did that the captions are underneath the image and the image borders are gone. There is supposed to be a white border around the images and the caption should be at the top on mouse over. I’ll post my CSS and HTML. It is affecting ULs. The CSS in question is the #main-content stuff.
Thanks in advance.
HTML:
<!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=utf-8” />
<link rel=“icon” href=“siteimages/favicon.gif” type=“image/gif”>
<link rel=“stylesheet” href=“CSS/style.css” type=“text/css” media=“screen” />
<link rel=“stylesheet” href=“CSS/navbar.css” type=“text/css” media=“screen” />
<link rel=“stylesheet” href=“fancybox/jquery.fancybox-1.3.0.css” type=“text/css” media=“screen”>
<script type=“text/javascript” src=“http://code.jquery.com/jquery-1.4.2.min.js”></script>
<script type=“text/javascript” src=“fancybox/jquery.fancybox-1.3.0.pack.js”></script>
<title>Gilles Photography</title>
</head>
<body>
<div id=“home”>
<p>gillesphotography.com // <a href=“index.html”>home</a></p>
</div>
<div id=“logo”><img src=“siteimages/Banner_01_01.png” alt=“Banner” width=“450” height=“144” />
</div>
<div id=“navcontainer”>
<ul id=“navlist”>
<li id=“active”>
<a href=“index.html” id=“current”>Home</a></li>
<li><a href=“galleries.html”>Galleries</a></li>
<li><a href=“about.html”>About</a></li>
<li><a href=“contact.html”>Contact</a></li>
<li><a href=“purchase.html”>Purchase</a></li>
</ul>
</div>
<div id=“images”>
<div id=“main-content”>
<ul>
<li><a href=“bw.html”><img src=“galleries/galleryheaders/gallery-1.jpg” alt=“The thumb” border=“0” /><span>Black & Whtie</span></a></li>
<li><a href=“arch.html”><img src=“galleries/galleryheaders/gallery-2.jpg” alt=“The thumb” border=“0” /><span>Architecture</span></a></li>
<li><a href=“auto.html”><img src=“galleries/galleryheaders/gallery-3.jpg” alt=“The thumb” border=“0” /><span>Automobiles</span></a></li>
<li><a href=“fauna.html”><img src=“galleries/galleryheaders/gallery-4.jpg” alt=“The thumb” border=“0” /><span>Fauna</span></a></li>
<li><a href=“people.html”><img src=“galleries/galleryheaders/gallery-5.jpg” alt=“The thumb” border=“0” /><span>People</span></a></li>
<li><a href=“flora.html”><img src=“galleries/galleryheaders/gallery-6.jpg” alt=“The thumb” border=“0” /><span>Flora</span></a></li>
<li><a href=“sports.html”><img src=“galleries/galleryheaders/gallery-7.jpg” alt=“The thumb” border=“0” /><span>Sports</span></a></li>
<li><a href=“landscapes.html”><img src=“galleries/galleryheaders/gallery-8.jpg” alt=“The thumb” border=“0” /><span>Landscapes</span></a></li>
</ul>
</div>
</div>
<div id=“footer”>© Copyright 2010 Gilles Photography
</div>
</body>
</html>
CSS:
@charset “utf-8”;
/* CSS Document */
body{
background-color:#000;
color:#FFF;
font:“Palatino Linotype”, “Book Antiqua”, Palatino, serif;
font-size:medium;
margin-top:0;
}
a:link {color: #227eb8; text-decoration: none;}
a:visited {color: #227eb8; text-decoration: none;}
a:hover {color: #d2ebff; text-decoration: none;}
a:focus {color: #d2ebff; text-decoration: none;}
a:active {color: #d2ebff; text-decoration: none;}
#home {float:left;
width:20%;
position:absolute;top: 10px; left: 10px;
}
#logo{text-align: center;
width:100%;
margin:0 auto;
background-image:url(…/siteimages/topglow3.png);
background-position:top;
background-repeat:no-repeat;
}
#menu{width:90%;
margin:0 auto;
}
#text{width:90%;
margin:0 auto;
}
images{
width:90%;
margin:0 auto;
text-align:center;
}
#form{width:50%;
margin:0 auto;
}
#footer{font-size:x-small;
background-color:#171717;
width:90%;
margin:0 auto;
clear:both;
}
#navcontainer{width:90%;
margin:0 auto;
}
#main-content ul{
text-align:center;
}
#main-content li{
width:300px;
border:solid #FFF;
border-width:0 1px 1px 0;
background:#FFF;
padding:10px;
text-align:center;
position:relative;
display:inline;
margin:5px;
text-align:center;
}
#main-content a span{
position:absolute;
left:-9999px;
}
#main-content a:hover span{
top:10px;
left:10px;
width:300px;
font-weight:bold;
background:#FFF;
color:#000;
padding:5px 0 5px 0;
text-transform:uppercase;
font-size:80%;
border:1px solid #FFF;
border-width:0 0 2px 0;
filter: alpha(opacity=100);
}
