Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works

z-index placement [SOLVED]

  • Please log in to reply

D. K. Smith

D. K. Smith


  • Member
  • PipPip
  • 13 posts
Okay so I'm trying to put together a webpage, and working pretty exclusively to look at code alone. I have a problem in which a dynamic menu only goes out under a slideshow. I researched heavily to look at how to layer and found z-index coding to layer, and was wondering where to put z-index in the script to specify that the menu goes over the slideshow. Wherever I put it, it doesn't seem to work.

Obviously, since my page uses quite a few css/js elements and picture setup, I can only post the code. But I'd really like some help (total n00b here, heh). I want to bold the parts that are in question, but it's all the 'vertical menu' CSS/JS and 'fadeslideshow' CSS, and in the body. I'm kinda going 'GOOD ENOUGH' on the rest, though, so how bad the rest of the website is is not my main point. :) Yay unpaid work!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">



<title>Westmont High School</title>

<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<meta http-equiv="X-UA-Compatible" content="IE=7">

[b]<link rel="stylesheet" type="text/css" href="main.css">
<script src="../templates.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="cssverticalmenu.css">

<script type="text/javascript" src="cssverticalmenu.js"> </script>[/b]

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

[b]<script type="text/javascript" src="fadeslideshow.js">


<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [350, 160], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["students.jpg", "", "", ""],
		["band.jpg", "", "", ""],
		["students2.jpg", "", "", ""],
		["band2.jpg", "", "", ""],
		["students3.jpg", "", "", ""],
		["band3.jpg", "", "", ""],
		["students4.jpg", "", "", ""] //<--no trailing comma after very last image element!
	displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""


<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [140, 160], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["index.jpg", "", "", "Star Freshman of the Month: Name"],
		["index_002.jpg", "", "", "Star Sophomore of the Month: Name"],
		["index_003.jpg", "", "", "Star Junior of the Month: Name"],
		["index_004.jpg", "", "", "Star Senior of the Month: Name"] //<--no trailing comma after very last image element!
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""


<table class="Global" cellpadding="0" cellspacing="2" border="1">
<tr><td height="115" colspan="3">

<!-- ============ Header section ============== -->
<table class="Header" cellspacing="0" border="0"><tr>

<!-- ============ Logo ============== -->
<td style="background: url('header-bg.jpg') no-repeat;"><div style="display: table; margin-left: 0px; margin-top: 0px;">&nbsp;</div>
<div align=right><script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&amp;up_source_language=en&amp;synd=open&amp;w=170&amp;h=40&amp;title=Google+Translate+My+Page&amp;lang=en&amp;country=ALL&amp;border=%23ffffff%7C0px%2C1px+solid+%23993333%7C0px%2C1px+solid+%23bb5555%7C0px%2C1px+solid+%23DD7777%7C0px%2C2px+solid+%23EE8888&amp;output=js" type="text/javascript"></script></div>


<!-- ============ COLUMNS SECTION ============== -->

<!-- ============ Left Column ============== -->
<tr><td class="Left" width="170" align="center" rowspan="2">

<!-- ============ Extra Block below Site Menu ============== -->
[b]<table class="BoxStyle" style="width: 150px;" cellspacing="0"><tr><td style="padding: 0px;">

<ul id="verticalmenu" class="glossymenu" style="z-index: 2;">
<li><a href="http://www.westmont.cuhsd.org/">Home</a>
	<li><a href="http://www.cuhsd.org/">CUHSD</a></li>
	<li><a href="http://www.westmont.cuhsd.org/about/about.html">About</a></li>
<li><a href="#">Westmont Resources</a>
	<a href="#">Schedule</a></li>
	  <ul><li><a href="http://www.westmont.cuhsd.org/daily_bulletin.htm">Daily Bulletin</a></li>
		  <li><a href="http://www.westmont.cuhsd.org/bellschedule.htm">Bell Schedule</a></li>
		  <li><a href="http://www.westmont.cuhsd.org/blockschedules.htm">A/B Block Schedule</a></li>
		  <li><a href="https://www.astihosted.com/cuhsd/Calendar/Calendar/Parent/Cal_Par_top.asp?ViewName=Westmont+Calendar">Event Calendar</a></li></ul>
	<li><a href="http://www.cuhsd.org/">CUHSD</a></li>
	<li><a href="http://www.westmont.cuhsd.org/contacts/contact.html">Staff Contact</a></li>
	<li><a href="http://www.westmont.cuhsd.org/images/VideoIcon%20copy.jpg">Warrior Broadcasting</a></li>
<li><a href="#">Student Resources</a>
	<a href="http://www.westmont.cuhsd.org/seniorproject/senior%20project%2009-10.pdf">Senior Project Handbook</a></li>
	   <ul><li><a href="http://www.westmont.cuhsd.org/seniorproject/sample%20senior%20project.mp4">Sample Sr. Project Video</a></li></ul>
	<li><a href="http://www.westmont.cuhsd.org/ssc.html">Student Service Center</a></li>
	<li><a href="http://destiny.cuhsd.org/common/welcome.jsp?site=104">Library (7:30-3:30)</a></li>
	<li><a href="http://members.tripod.com/westmontccc-ivil//">College Career Center</a></li>
	<li><a href="http://webstores.activenetwork.com/school-software/westmont_high_school/">Webstore</a></li>
	<li><a href="http://westmont.schoolloop.com/">SchoolLoop</a></li>
	<li><a href="http://www.westmont.cuhsd.org/videos/index.htm">Videos</a></li>
<li><a href="#" >Clubs/Activities</a>
	<li><a href="http://www.westmont.cuhsd.org/clubs.htm">WHS Campus Clubs</a></li>
	<li><a href="http://www.westmontmusic.org/">School Band</a></li>
	<li><a href="http://www.westmontdrama.com/">Drama</a></li>
	<li><a href="http://www.westmont.cuhsd.org/whsshield/09-10/shield%20issue%203.pdf">Shield</a></li>
	<li><a href="http://www.westmontathletics.com/">WHS Athletics</a></li>
	<li><a href="http://www.westmont.cuhsd.org/Summer%20parent%20letter%20september%2009-10.doc">Athletic Participation</a></li>
<li><a href="#" >Parents and Community</a>
	<li><a href="http://www.westmontptsa.org/">PTSA</a></li>
	<li><a href="https://www.mynutrikids.com/login.asp">Meal Payment</a></li>
	<li><a href="http://www.westmont.cuhsd.org/menu.htm">Meal Menu</a></li>
	<li><a href="http://www.teenfamilycounseling.org/">Teen Family Counseling</a></li>
	<li><a href="http://www.westmont.cuhsd.org/websource.htm">Academic Web-Source</a></li>
	<li><a href="http://www.westmont.cuhsd.org/WESTMONT%20HIGH%20SCHOOL%202009-2010.pdf">Parent Handbook</a></li>
	<li><a href="http://www.westmont.cuhsd.org/Parent%20Communication%20Tools%2008-09.doc">
	Parent Comm. Tools</a></li>


<!-- ============ Photo ============== -->
<table class="BoxStyle" style="width: 170px; height: 150px;" cellspacing="0" >
<tr><td style="background: url('sidelogo.jpg') no-repeat; color: #ffffff;">&nbsp;</td></tr>

<a href="http://maps.yahoo.com/index.php#q1=4805%2BWestmont%2BAvenue%2C%2BCampbell%2C%2BCA%2B95008">
&lt;School Map&gt;</a></td>

<!-- ============ Picture row (Middle) ============== -->
[b]<td class="Content Padded" width="55%" height="160px">

<p><div id="wrapper" style="width: 490px; z-index: 2;">
<div id="fadeshow1" style="float: left; width: 140px; background-color: #000000;"></div>
<div id="fadeshow2" style="float: right; width: 140px; background-color: #000000;"></div>

<!-- ============ Logo ============== -->

<!-- ============ Right Column ============== -->
<td class="Right Padded" rowspan="2">
<table class="RightPanelBox" cellspacing="0" border="0"><tr><td class="Padded">

<object width="445" height="364"><param name="movie" 


name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed 

src="http://www.youtube.com/v/DPQmzCgb1gI&hl=en_US&fs=1&rel=0&color1=0x5d1719&color2=0xcd311b&border=1" type="application/x-shockwave-flash" 

allowscriptaccess="always" allowfullscreen="true" width="445" height="364"></embed></object>


<!-- ============ Content Column (Middle) ============== -->

<td class="Content Padded" width="55%">

<p><i>"Westmont high school's community ensures all students succeed in rigorous and engaging academic program which leads to post-secondary success."</i>

<!-- ============ Page Heading ============== -->


<!-- ============ Footer ============== -->
<tr><td colspan="3" class="Footer" style="vertical-align: middle;">

<font size="1">Westmont High School will not be held accountable for any errors made. Copyright Westmont High School; layout designed by <a href="FINDHTML">Spider</a>.  Viewed best in Firefox.  Last Update 11/18/2009</font>



Edited by D. K. Smith, 09 December 2009 - 01:15 PM.

  • 0


D. K. Smith

D. K. Smith


  • Topic Starter
  • Member
  • PipPip
  • 13 posts
And two seconds after I post this I figure it out. -.-;; This is why some people shouldn't be allowed on the internet. I'm changing the title to 'solved' for now.
  • 0

Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
For those members who may have a similar problem and were following your thread, could you post your solution?

BTW, may I suggest updating your code to the latest web standards? The "center" and "font" tags have been deprecated. There is only ONE embed tag. The old Netscape tag has never been approved by the w3c.org and really is not needed. You have mixed table tags which are no longer used for page layouts with divs and CSS. Tables have always been used for data tabulation. It's just that CSS was not available at one time and everyone has gotten use to making pages with them. You have a lot of divs with "id"s, but also have added inline CSS.

Might use the Validators for your CSS and HTML:

CSS Validator
HTML Validator (Use "Show Source" and "Verbose" Options
  • 0

Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP