Menu
Hello all,
I’m currently working on my own version of a photo gallery for a school site. I’ve tried two different methods so far, one being an inline list (which looks pretty crappy), and one being left floated divs. This works great, and allows me the control I need, however some bad code somewhere is making the whole photo gallery interact with another div on the page, and, well, you’ll see.
Link: [url]http://www.coloradocollege.edu/giving/1874/events/blacktie.htm
CSS: [url]http://www.coloradocollege.edu/giving/1874/style.css
Relevant CSS Code:
[code]
.whole{
width:680px;/*+30*/
position:relative;
margin:0 auto 0 auto;
height:700px;
padding-bottom:100px;
}
html>body .whole{
padding-bottom:0;
}
/*left stuff*/
.nav, .newsHeader {
font-size:large;
}
.nav, .news {
top:2px;
left:2px;
width: 140px;
background-color:#bb8410;
margin:2px;
padding:5px;
color:#FFFFFF;
}
.newsBorder{
position:relative;
margin-top:10px;
margin-bottom:50px;
}
.navBorder, .newsBorder{
border:thin solid #bb8410;
float:left;
}
.newsBorder{
clear:left; [B]/*I think this is where the problem lies, but I don’t know a way around it.*/[/B]
}
/*this is how I do it with divs */
.thumbnail{
float:left;
width: 140px;
height:200px;
text-align:center;
margin:0 2px 20px 2px;
overflow:hidden;
color:white;
}
.thumbnail img{
/*border:solid thin white;*/
border-color:#bb8410;
border-style:ridge;
border-width:thick;
}
/*and this is how i do it with inline lists */
ul{
}
ul li{
display:inline;
margin-left: 10px;
}
ul li img{
border-color:#bb8410;
border-style:ridge;
border-width:thick;
}
And the HTML:
[code=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=iso-8859-1″ />
<title>1874 Society</title>
<link href=”../style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<!– CC Header –>
<div align=”center”>
<script language=”JavaScript” type=”text/JavaScript” src=”http://www.coloradocollege.edu/include/navbar.asp?js=true&roll=&width=765&style=”></script>
</div>
<!– /CC Header –>
<!– logo –>
<div align=”center”>
<p><img src=”../images/logo.gif” alt=”1874 Society Logo” width=”297″ height=”158″/></p>
</div>
<!– /logo –>
<!– Main Content –>
<div class=”whole”>
<!– Nav –>
<div class=”navBorder”>
<div class=”nav”>
<!– #BeginLibraryItem “/Library/nav.lbi” –><span class=”shadow_container”>Home<span class=”shadow_text”><a href=”index.htm”>Home</a></span></span>
<p> <span class=”shadow_container”>Join Today<span class=”shadow_text”><a href=”https://secure.infront.com/coloradocollege/donate.asp” target=”_blank”>Join Today</a></span></span> </p>
<p> <span class=”shadow_container”>Contact<span class=”shadow_text”><a href=”contact.htm”>Contact</a></span></span> </p>
<p> <span class=”shadow_container”>Events<span class=”shadow_text”><a href=”events.htm”>Events</a></span></span> </p>
<p> <span class=”shadow_container”>Newsletters<span class=”shadow_text”><a href=”newsletters.htm”>Newsletters</a></span></span></p>
<span class=”shadow_container”>Buy CC Alumni Wine<span class=”shadow_text”><a href=”http://store.vintagespec.com/cocovi.html” target=”_blank”>Buy CC Alumni Wine</a></span></span> <!– #EndLibraryItem –></div>
</div>
<!–/Nav–>
<!– News–>
<div class=”newsBorder”>
<div class=”news”>
<span class=”newsHeader”><span class=”shadow_container”>Other Events<span class=”shadow_text”>Other Events </span></span></span>
<p><span class=”shadow_container”><strong>Test Event</strong><span class=”shadow_text”><strong>Test Event</strong></span></span></p>
</div>
</div>
<!– /News–>
<!– MainTop
<div class=”mainTop”>–>
<div class=”photoTitle”>
2006 <span class=”i874″>1874 Society</span> Black Tie Holiday Party
</div>
<!–<div id=”entireGallery”>–>
<ul>
<li>
<div class=”thumbnail”>
<img src=”blacktie_images/6937rev_thumb.jpg” alt=”Blacktie Event” width=”85″ height=”150″ /><br />
I’m a caption!
</div>
</li>
<li>
<div class=”thumbnail”>
<img src=”blacktie_images/6939rev_thumb.jpg” alt=”Black Tie Holiday Party” /> <br />
I’m a caption!
</div>
</li>
<li>
<div class=”thumbnail”>
<img src=”blacktie_images/6941rev_thumb.jpg” alt=”Black Tie Holiday Party” /> <br />
I’m a caption!
</div>
</li>
<li>
<img src=”blacktie_images/6945rev_thumb.jpg” alt=”Black Tie Holiday Party” /><!– <br />
I’m a caption!–>
</li>
<li>
<img src=”blacktie_images/6948rev_thumb.jpg” alt=”Black Tie Holiday Party” /><!– <br />
I’m a caption!–>
</li>
<li>
<img src=”blacktie_images/6950rev_thumb.jpg” alt=”Black Tie Holiday Party” /><!– <br />
I’m a caption!–>
</li>
<li>
<img src=”blacktie_images/6951rev_thumb.jpg” alt=”Black Tie Holiday Party” /><!– <br />
I’m a caption!–>
</li>
<li>
<img src=”blacktie_images/6952rev_thumb.jpg” alt=”Black Tie Holiday Party” /><!– <br />
I’m a caption!–>
</li>
<li>
<img src=”blacktie_images/6955rev_thumb.jpg” alt=”Black Tie Holiday Party” /><!– <br />
I’m a caption!–>
</li>
<!– this goes on for 43 images, but you get the drift… –>
</ul>
</div>
<!– other stuff you don’t need to see… –>
</body>
</html>
I know that it looks weird, cuz I have divs in the list, but that just shows you, if you go to the page, what happens to the divs. It doesn’t work if i just have divs floated right… again, this is just firefox. any ideas? Thanks in advance,
PJ