another height 100% problem

**mlegg** · 03-16-2011, 03:23 AM

So I made another site for my church and used a template from a previous site you helped me with. I have added Visual Slideshow to the bottom of the main/index page. The slideshow goes way down past the bottom footer. I did use the height:100%; in the container but apparently messed it up somehow.

the site: http://portsmouthgreekfestival.com/

HTML:

Code:

<!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" xml:lang="en">
<head>
  <meta name="generator" content=
  "HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
  <meta name="language" content="english" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta name="google-site-verification" content=
  "I4Ask6VXiDmcOHZoEGhMNu7K7mGb4VG28ZHmOGPF7SE" />

<title>Greek Festival Portsmouth</title>
  <link rel="stylesheet" type="text/css" href="styles.css" /><!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6styles.css">
<![endif]-->
  

  <style type="text/css">
/*<![CDATA[*/
  li.c1 {border:none}
  /*]]>*/
  </style>
  <style type="text/css">

    <style type="text/css">
/*<![CDATA[*/
  div.c1 {clear:both}
  /*]]>*/
  </style>


<!-- Start visualslideshow.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine/css/slideshow.css" media="screen" /> 
<style type="text/css">.slideshow a#vlb{display:none}</style> 
<script type="text/javascript" src="engine/js/mootools.js"></script> 
<script type="text/javascript" src="engine/js/visualslideshow.js"></script> 
<!-- End visualslideshow.com HEAD section -->

</head>

<body>
  <div id="container">
    <div id="mainPicture"></div>
    <div id="nav1">
      <ul>
        <li id="current" class="c1"><a href="index.html">Home</a></li>
        <li><a href="program.html">Program Book</a></li>
        <li><a href="menu.html">Menu</a></li>
        <li><a href="events.html">Schedule of Events</a></li>
        <li><a href="directions.html">Directions</a></li>
      </ul>
    </div>
    <div class="one">
      <h3>The 2011 festival will be on Friday July 15 through July 17</h3>
      <table>
<tr>
  <td width="275px"><p><strong>Hours:</strong><br />
      Friday 3:00 pm to 11:00 pm<br />
      Saturday 11:00 pm to 11:00 pm<br />
      Sunday 1:00 pm to 5:00 pm</p>
      <p>Voluntary admission: $3.00 (children under 12 admitted free of charge)</p>
      <p><strong>Dance to live Greek Music by Ellas</strong><br />
      Friday and Saturday 6:30 pm to 11:00 pm and Sunday 1:30 to 6:00 pm</p>
      <p><strong>D.J. by Meleti</strong><br />
      Friday 5:30 - 6:30 pm, Saturday 12:00 - 6:30 pm, Sunday 1:00 - 6:30 pm</p>
      <p>Greek Foods and specialties - Homemade Greek Pastries - Beer &amp; Wine</p>
      <p>Agora - Bakaliko and Gift Shop - Cafenion (Greek Coffee House) and more! (inside
      the air conditioned Jarvis Hall)</p>
      <p>Children's Activities - Friday evening - Saturday &amp; Sunday</p>
</td>
  

<td width="675px">

<!-- Start visualslideshow.com BODY section -->
<div id="show" class="slideshow"> 
<div class="slideshow-images">
<a href=""><img id="slide-0" src="data/images/greekfestivalcrowds.jpg" alt="GreekFestivalCrowds" title="GreekFestivalCrowds" /></a>
<a href=""><img id="slide-1" src="data/images/greekfestivalcrowds(2).jpg" alt="GreekFestivalCrowds(2)" title="GreekFestivalCrowds(2)" /></a>
<a href=""><img id="slide-2" src="data/images/greekfestivaldancing.jpg" alt="GreekFestivalDancing" title="GreekFestivalDancing" /></a>
<a href=""><img id="slide-3" src="data/images/greekfestivalentrance.jpg" alt="GreekFestivalEntrance" title="GreekFestivalEntrance" /></a>
<a href=""><img id="slide-4" src="data/images/greekfestivalfood.jpg" alt="GreekFestivalFood" title="GreekFestivalFood" /></a>
<a href=""><img id="slide-5" src="data/images/greekfestivalfood2.jpg" alt="GreekFestivalFood2" title="GreekFestivalFood2" /></a>
</div>
<div class="slideshow-thumbnails">
<ul>
<li><a href="#slide-0"><img src="data/thumbnails/greekfestivalcrowds.jpg" alt="GreekFestivalCrowds" /></a></li>
<li><a href="#slide-1"><img src="data/thumbnails/greekfestivalcrowds(2).jpg" alt="GreekFestivalCrowds(2)" /></a></li>
<li><a href="#slide-2"><img src="data/thumbnails/greekfestivaldancing.jpg" alt="GreekFestivalDancing" /></a></li>
<li><a href="#slide-3"><img src="data/thumbnails/greekfestivalentrance.jpg" alt="GreekFestivalEntrance" /></a></li>
<li><a href="#slide-4"><img src="data/thumbnails/greekfestivalfood.jpg" alt="GreekFestivalFood" /></a></li>
<li><a href="#slide-5"><img src="data/thumbnails/greekfestivalfood2.jpg" alt="GreekFestivalFood2" /></a></li>
</ul>
</div>
<a id="vlb" href="http://visualslideshow.com">DHTML Slideshow by VisualSlideshow.com v1.2</a> 
</div> 
<!-- End visualslideshow.com BODY section --></td>
  </tr>
</table>

<div style="clear:both;">
        
        <div class="c1"></div><br />
        <div id="footer">
          Copyright &copy; PortsmouthGreekFestival.com
        </div>
      </div><!--end #container -->
    </body>
    </html>

CSS:

Code:

html,body {
    padding:0;
    margin:0;
    height:100%;
    background-image:url(images/greekkey2.gif);
    background-position:center top;             /* this positioning has been modified */
 }
#mainPicture {
  height:250px;
  width:960px;
  background-image:url(images/GreekLogo.jpg);      
 }
#nav1 {
	background: transparent url(images/footer.png) repeat-x scroll left top;
        height:40px;
	margin:0 auto ;
	width:960px;	
	text-align:center;
}


#nav1 ul {
	display:table;
	margin:0 auto;
	padding:0;
	list-style-type:none;
	position:relative;
	height:40px;
	text-transform:uppercase;
	font-size:13px;
	font-family:Arial,sans-serif;
}


#nav1 ul li {
	display:block;
	float:left;
	margin:0;
	padding:0;
	background:transparent url("images/footer.png") repeat-x top left;

}


#nav1 ul li a {
	display:block;
	float:left;
	color:#ffffff;
	text-decoration:none;
	padding:0px 20px ;
	line-height:40px;
	font-weight:bold;
}


#nav1 ul li a:hover {
	color:#ffffff;
	background:transparent url("images/hmenu-sel.jpg") repeat-x top left;
}
#container {
    position:relative;
    width:960px;
    height:100%;
    margin:auto;
    font-family: sans-serif;color:navy;
    background-color:#fff;
 }
div.one {  
      padding: 15px;  
      min-height:100%;
} 
div.one a:link  { 
color :#00008B;
text-decoration:underline;
}
div.one a:visited {
color: #FF0000;
text-decoration : underline; 
}

div.one a:hover  {
color: #FFFFFF;
background-color: #8B0000;
text-decoration: underline;
}

div.one a:active  {
color : #FF0033; 
background-color: #FFFFFF;
text-decoration: underline;
}
table a {
    font-size:16px;
    color:#000066;
    text-decoration:underline;
 }
table a:hover {
    font-size:16px;
    color:#fff;
    background-color:#8B0000;
 }

#footer {
    position:absolute;
    width:100%;
    left:0;
    bottom:0;
    padding:5px 0;
    font-family:sans-serif;
    font-size:15px;
    color:#036;
    text-align:center;
    background-image:url(images/footer.png);
 }
#footer a:link  { 
color : #FF0000;
text-decoration:underline;
}

#footer a:visited {
color: #FF0000;
text-decoration : underline; 
}

#footer a:hover  {
color: #FFFFFF;
background-color: #8B0000;
text-decoration: underline;
}

#footer a:active  {
color : #FF0033; 
background-color: #FFFFFF;
text-decoration: underline;
}

Thread: another height 100% problem

Thread Tools

Search Thread

another height 100% problem

Bookmarks

Bookmarks

Posting Permissions