Forums

Wes

Alright now that I have cleaned up my code and found a decent option for displaying my work rather than some fancy gallery I am still having the problem of unordered lists not making my background expand
I can solve it with breaks but I would prefer to learn why it is doing this
http://www.wesascolese.com/portfolio.php

here is my 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\" />
	<title>Wes Ascolese- Portfolio</title>
    <link rel=\"icon\" href=\"favicon.ico\" type=\"image/x-icon\">
    <link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" />
    <link rel=\"stylesheet\" href=\"css/lightbox.css\" type=\"text/css\" media=\"screen\" />
    <script type=\"text/javascript\" src=\"js/prototype.js\"></script>
	<script type=\"text/javascript\" src=\"js/scriptaculous.js?load=effects,builder\"></script>
	<script type=\"text/javascript\" src=\"js/lightbox.js\"></script>
   
</head>

<body>

<div id=\"page-wrap\">
	<div id=\"header\">
    
    	<ul>
        	<li><a href=\"index.php\">Home</a></li>
        	<li><a href=\"portfolio.php\">Portfolio</a></li>
            <li><a href=\"about.php\">About</a></li>
            <li><a href=\"contact.php\">Contact</a></li>
    	</ul>
     
    </div>
    <!-- End Header -->

    
	<div id=\"main\">	
    	<div class=\"gallery\">
        <ul>
        <center>
    		<li><a href=\"images/gallery/Claustrophobic.jpg\" rel=\"lightbox[gallery]\"><img src=\"images/gallery/Claustrophobic.jpg\" alt=\"New Media Assignment\" width=\"300\" height=\"388\" /></a></li>
            <li><a href=\"images/gallery/Abstract.jpg\" rel=\"lightbox[gallery]\"><img src=\"images/gallery/Abstract.jpg\" alt=\"New Media Assignment\" width=\"300\" height=\"450\" /></a></li>
            <li><a href=\"images/gallery/DM3.jpg\" rel=\"lightbox[gallery]\"><img src=\"images/gallery/DM3.jpg\" alt=\"Digital Mutilation v3\" width=\"300\" height=\"225\" /></a></li>
            <li><a href=\"images/gallery/DM5.jpg\" rel=\"lightbox[gallery]\"><img src=\"images/gallery/DM5.jpg\" alt=\"Digital Mutilation v5\" width=\"300\" height=\"431\" /></a></li>
            <li><a href=\"images/gallery/Earfood.jpg\" rel=\"lightbox[gallery]\"><img src=\"images/gallery/Earfood.jpg\" alt=\"Ear Food\" width=\"300\" height=\"367\" /></a></li>
            <li><a href=\"images/gallery/NSL4.jpg\" rel=\"lightbox[gallery]\"><img src=\"images/gallery/NSL4.jpg\" alt=\"New Sights Learning\" width=\"300\" height=\"328\" /></a></li>
            <li><a href=\"images/gallery/Pow.jpg\" rel=\"lightbox[gallery]\"><img src=\"images/gallery/Pow.jpg\" alt=\"Pow\" width=\"300\" height=\"300\" /></a></li>
            <li><a href=\"images/gallery/VKTR.jpg\" rel=\"lightbox[gallery]\"><img src=\"images/gallery/VKTR.jpg\" alt=\"Video Killed the Radio\" width=\"300\" height=\"293\" /></a></li>
        </center>
    	</ul>
  		</div>
	</div>   

  
  <div id=\"footer\">
    <p>&copy; Copyright WesAscolese.com All Rights Reserve</p>
    </div>
    <!-- End footer -->
   
    
</div>
<!-- End Page-Wrap -->


</body>
</html>

and here is my CSS

body
{ 
	background:url(images/bg.jpg);
	font-family:Verdana, Geneva, sans-serif;
	font-size:68.5%;
}

h2 
{ 
	font-size:1.6em);
	color:#827857;
	text-transform:uppercase;
}

h3
{ 
	font-size:1.4em);
	color:#827857;
	text-transform:uppercase;
}

h4
{ 
	font-size:1.2em);
	color:#827857;
	text-transform:uppercase;
}
#page-wrap
{
	
	width:800px;
	margin: 0 auto;
	background:url(images/main-bg.jpg) repeat-y;
}

#header
{
	margin:0 auto;
	background:url(images/banner.jpg);
	width:800px;
	height:155px;
	
}

	#header ul
		{
			margin:0 auto;
			list-style:none;
			font-family:Arial, Helvetica, sans-serif;
			font-size:2.0em;
			font-weight:bold;
			margin-left:150px;
			
		}
	
		#header ul li a
		{
			display:block;
			width:100px;
			float:left;
			color:#fff;
			margin:100px 0 5px 0;
			text-decoration:none;
			text-align:center;
		}
		
		#header ul li a:hover
		{
			color:#e8e4d8;
		}

#main
{
	width:450px;
	margin:0 auto;
}

#main p
{
	color:#827857;
}

.gallery ul
{
	margin:0 auto;

	list-style:none;
}

.gallery ul li img
{
	float:left;
	height:50px;
	width:50px;
	background-position:50% 50%;
	margin:5px;
	
}

#footer
{
	
	margin:0 auto;
	background:url(images/footer.jpg);
	width:800px;
	height:191px;
}
	#footer p
	{
		text-align:center;
		padding-top:30px;
		color:#FFF;
		font-size:0.8em;
		text-transform:uppercase;
	}

treehouse : what would you like to learn today?

Forums

Background not expanding with my gallery part 2