Verticle Stretch - Dev Shed

Dev Shed Forums Sponsor:
November 17th, 2012, 11:56 PM
jdarst
Registered User
Join Date: Nov 2012
Posts: 1
Time spent in forums: 13 m 16 sec
Reputation Power: 0
New Member - Verticle Stretch
Hello I have been working on getting this template to stretch for two days and everything I try doesn not work. So rather than going around the mountain again, I need to get a fresh set of eyes on this. If could look over the template and css that would be awesome. I need to get it to stretch vertically. I have enbeded the css in the template.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The meta tag below refering to Google is a Google Web Master Website verification-->
<meta name="google-site-verification" content="uqV3FTQvTkMi4T97eZ5yxj4YyXYHuxFZ-pSrpWUiEa0" >
<title> [*description] - [(site_name)] | [*pagetitle*]</title> 

<base href="[(site_url)]"></base>
<!--Below are the Meta Information that is populated through using the create page fields to populate-->
<meta name="subject" content="[*longtitle*]" >
<meta name="description" content="[*introtext*]" >
<!--The Key words meta is populated through the TV Tags section and can be modified in each pages. It is located in the located towards the bottom of the page-->
<meta name="Keywords" content="[*keyword_meta*]" >
<!--Below some of the  meta information is located in the chunk section under meta tag section-->
<meta name="abstract" content="{{abstract}}" >
<meta name="owner" content="{{owner}}" >
<meta name="classification" content="{{classification}}" >
<meta name="author" content="{{author}}" >
<meta name="copyright" content="{{copyrightmeta}}" >
<meta http-equiv="content-type" content="css" >
<meta http-equiv="content-type" content="javascript, html, php" >
<meta http-equiv="content-language" content="English" > 

<!--Below is the different Style Sheets and javasript pages that are used for the CMS-->
<!-- <link rel="stylesheet" href="assets/templates/modxhost/layout.css" type="text/css" media="screen" />-->
  <link rel="stylesheet" href="assets/templates/modxhost/modxmenu.css" type="text/css" media="screen" >
    <link rel="stylesheet" href="assets/templates/modxhost/modx.css" type="text/css" media="screen" >
<link rel="stylesheet" href="assets/templates/modxhost/print.css" type="text/css" media="print" >
  <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="[(site_url)][~11~]" >
  <script src="manager/media/script/mootools/mootools.js" type="text/javascript"></script>
    
<!--The Styles Sheet below is the one that is created for the design fo the template
<link href="Styles/layoutstyle.css" rel="stylesheet" type="text/css">-->

<!--Belows are the javascript pages that the scroller utilizes-->
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<!--Below is additional scripts for the image scroller-->
<script type="text/javascript">
/*** 
    Simple jQuery Slideshow Script
    Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc.  Please link out to me if you like it :)
***/

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order
    
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

</script>

<!--Below is the Google analytics. I have created a analytical profile. I can be contacted at darstjeff@gmail.com if this needs to be transfered to an account-->
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-29086297-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

<style type="text/css"> 
body, html {
	margin: 0px;
	height: 100%;
	padding:0;
	width:100%;
	background-image:url(/images/background.jpg);
}
#wrapper{
	margin:0 auto;
    width: 1024px;
	height:100%;	
	/*min-height:1400px;*/
}

#header{
	background-image:url(/images/header.png);
	width: 1024px;
	height: 335px;
}


#horizontalbar{
	background-image:url(/images/menu.png);
	width: 1024px;
	height: 50px;
}

#content-container{
	background-image:url(/images/content.png);
	background-repeat:repeat;
	margin:0 auto;
	min-height:400px;
    width: 1024px;
	
	height:100%;	
	
	z-index:1;
	
}
.content{
	float: left;
	width: 650px;
	margin:0 auto;
	/*min-height:400px;*/
	height:100%;	
	
	margin: 0;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 35px;
}


.leftcolumn{
	float:left;
	clear:both;
	height: auto;
	width: 270px;
	margin-left: 10px;
	margin-top: 5px;
}


.Menutable {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size:20px;
	color: #265275;
	height: 40px;
	width: 270px;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	padding-top: 10px;
	border: .5px solid #629CCC;
}
#footer{
	background-image: url(/images/footer.png);
	margin:0 auto;
    width: 1024px;
	height:140px;
	z-index:2;
}
.copyright {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#FFF;
	height: 30px;
	width: 1024px;
	position:relative;
	
	margin-top: -30px;
	margin-left: 0px;
	top: 50px;
	left: 0px;
	
}
.centercopyright {
	text-align: center;
}
#vertmenu {
	float: none;
	clear: none;
	height:100%;
	min-height:400px;
	width: 270px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	margin-top: 0;
	margin-right: 0px;
	margin-bottom: auto;
	margin-left: 0px;
	position: relative;
	text-indent: 10px;
}

#vertmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#vertmenu ul li {
margin: 0px;
padding: 0px;
}
#vertmenu ul li a {
	font-size: 16px;
	display: block;
	text-decoration: none;
	color:#013D61;
	width:270px;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom:10px;
	padding-left:0px;
	margin-left: 0px;
	border: .5px solid #629CCC;	
}

#vertmenu ul li a:hover, #vertmenu ul li a:focus {
	color: #FFF;
	background-color: #476FA2;
}


#slideshow {
	position:relative;
	width: 459px;
	height:300px;
	left: 535px;
	top: 31px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}


</style>
</head>

<body>
<!--Outside Wrapper-->
<div id="wrapper">

<div id="header">
<!--location of the image scroller-->
<div>{{imageslides}}</div>
</div>
<!--Establishes the menu location and adds the wayfinder, which is the automatic menu item creator-->
<div id="horizontalbar">
</div>


<!--The main contains the white area which is where the content is to be established-->
<div id="content-container">
<div class="leftcolumn">
	
    <div class="Menutable">Information</div>
  <div id="vertmenu">[[Wayfinder?startId=`0` ]] </div>
  
</div>
<!--Below is the content area-->
<div class="content">[*content*]</div>
</div>

<!--Below is the footer div and holds the information and css-->

<div id="footer">
<div class="copyright"><p class="centercopyright"> <p>University of South Alabama - College of Education - Choices © 2012, All Rights Reserved<br>
University Commons 3600 -  Mobile, AL, 36688   <br>The creation of this database was supported by IES through the National Center for Special Education Research (NCSER).</p>
</div>
</div>
</div>

</body>
</html>
Thank you
New Member - Verticle Stretch

Developer Shed Advertisers and Affiliates
