Forums

Wes

http://www.wesascolese.com/portfolio.php

Alright so the java script works no problem, pretty simple and light weight but I cannot figure out for the life of me why my page wrap is not expanding with the gallery. It does for text (look at any of the other pages)

here is the 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\" />
 
	<script type=\"text/javascript\">
		var gal = {
			init : function() {
			if (!document.getElementById || !document.createElement || !document.appendChild) return false;
			if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
			var li = document.getElementById('jgal').getElementsByTagName('li');
			li[0].className = 'active';
			for (i=0; i<li.length; i++) {
				li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
				li[i].title = li[i].getElementsByTagName('img')[0].alt;
				gal.addEvent(li[i],'click',function() {
					var im = document.getElementById('jgal').getElementsByTagName('li');
					for (j=0; j<im.length; j++) {
						im[j].className = '';
					}
					this.className = 'active';
				});
			}
		},
		addEvent : function(obj, type, fn) {
			if (obj.addEventListener) {
				obj.addEventListener(type, fn, false);
			}
			else if (obj.attachEvent) {
				obj[\"e\"+type+fn] = fn;
				obj[type+fn] = function() { obj[\"e\"+type+fn]( window.event ); }
				obj.attachEvent(\"on\"+type, obj[type+fn]);
			}
		}
	}
	gal.addEvent(window,'load', function() {
		gal.init();
	});
	
	</script>
    <script type=\"text/javascript\">document.write(\"<style type='text/css'> #gallery { display: none; } </style>\");</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\">
    	<ul id=\"gallery\">
    		<li><img src=\"images/Claustrophobic.png\" alt=\"New Media Assign\" width=\"300\" height=\"388\" /></li>
            <li><img src=\"images/Claustrophobic.png\" alt=\"New Media Assign\" width=\"300\" height=\"388\" /></li>
            <li><img src=\"images/Claustrophobic.png\" alt=\"New Media Assign\" width=\"300\" height=\"388\" /></li>
            <li><img src=\"images/Claustrophobic.png\" alt=\"New Media Assign\" width=\"300\" height=\"388\" /></li>
            <li><img src=\"images/Claustrophobic.png\" alt=\"New Media Assign\" width=\"300\" height=\"388\" /></li>
            <li><img src=\"images/Claustrophobic.png\" alt=\"New Media Assign\" width=\"300\" height=\"388\" /></li>
            <li><img src=\"images/Claustrophobic.png\" alt=\"New Media Assign\" width=\"300\" height=\"388\" /></li>
            <li><img src=\"images/Claustrophobic.png\" alt=\"New Media Assign\" width=\"300\" height=\"388\" /></li>
    	</ul>
   </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 the 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;
	position: relative;
	background:url(images/main-bg.jpg) repeat-y;
}

#header
{
	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
{
	padding: 5px 170px 30px 170px;
}

#main p
{
	color:#827857;
}

#main #gallery
{
	padding::10px 0 0 120px;

}

#footer
{
	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;
	}


/* general styling for this example */
/* begin gallery styling */
#jgal { list-style: none; width: 100px; }
#jgal li { opacity: .5; float: left; display: block; width: 60px; height: 60px; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { position: relative; display: none; margin-left:75px;}
#jgal li.active img { display: block; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }

/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }

<!--[if lt IE 8]>
<style media=\"screen,projection\" type=\"text/css\">
#jgal li { filter: alpha(opacity=50); }
#jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
</style>
<![endif]-->

Wes

Well I solved it a bit but not the way I wanted to. I just used a lot of page breaks

tbwcf

You need to put a clear in like <br style="clear:both" />

When you have two or more floated divs nested within a wrapper the wrapper will lose it's dimensions putting a clear after the last float but before the wrapper closes will fix it.

benwolken

Whenever you float elements within a containing element, the containing element WILL COLLAPSE unless you do one of the following:

1) Float the containing element as well. However, this will not ensure that the containing element interacts properly with other elements on the page.
2) You clear the floated elements. This can be done by adding an empty element such as a div or li tag after the other elements with "clear:left" applied using CSS. This clearing element must be INSIDE of the containing element. Otherwise, the containing element will collapse.

If you haven't watched Chris' screencast #42: All About Floats, please do so! It is a great episode covering floats and how to work with them.

Another thought about your page: you are currently floating the img tags. Keep in mind that floating is easier when you apply it to the TOPMOST element that needs to float. In this case, it would be better to apply it to the li elements that contain the image tags, not the actual img tags themselves.

Anyway, hope that helps!

treehouse : what would you like to learn today?

Forums

Background not expanding with my gallery