Div and Z-index problems

Question

T4gal

14 Years Ago

Hi,

I spent hours working on a page yesterday and /finally/ got it to work so that the header image would resize when the browser window changed size. So I'm about to publish it and think I should maybe check it over once more to make sure everything works. Turns out, the navigation doesn't work. I have a DIV layered overtop of the navigation DIV, so it's not allowing me to click on any of the navigation buttons. I've tried messing with the Z-Index and I've looked on google for solutions but it's just not working for me. I'm totally clueless when it comes to DIVs and Z-indexes, I usually use tables since I find them easier as I don't know how to use DIVs.
I'm sure the DIVs are all wrong too, so if you have any tips on how to use them properly I would be very grateful.

Any help would be very very much appreciated!

Thanks!

<!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>Untitled Document</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
	
<script type="text/javascript">
	$(document).ready(function() {
	
		function imageresize() {
			var contentwidth = $('#content').width();
			if ((contentwidth) < '1175'){
			    $('.fluidimage').attr('src','layout/header1_small.png');
			} else {
			    $('.fluidimage').attr('src','layout/header1_big.png');
			}
		}
	
		imageresize();	
	
		$(window).bind("resize", function(){
			imageresize();
		});
		
	});
	</script>

	
	<style type="text/css">
		*{ padding:0px; margin:0px; }
		#content{
	width:100%;
	min-width:600px;
	text-align: right;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	float: right;
	position: absolute;
}
#container
{
	width: 100%;
}

#leftnav
{
	float: left;
	width: 175px;
	margin: 0;
	padding: 11px;
}

#page {
	top: 290px;
	width:100%;
	min-width:600px;
	text-align: right;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	float: right;
	position: absolute;
}

.mouseover {
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #FFFfff;
	background-color: #060;
	font-size: 18px;
	text-align: left;
	text-indent: 10px;
	letter-spacing: 2px;
	cursor: hand;
	cursor: pointer;
	padding-top: 3px;
	padding-bottom: 3px;
	width: 200px;
	border-top-width: 3px;
	border-top-style: solid;
	border-top-color: #FFF;
}
.navbar {
	width: 175px;
}
.buttons {
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #FFF;
	background-color: #030;
	text-align: left;
	text-indent: 10px;
	font-size: 16px;
	letter-spacing: 2px;
	padding-top: 1px;
	padding-bottom: 1px;
	border-top-width: 3px;
	border-top-style: solid;
	border-top-color: #FFF;
}
.copyright {
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-small;
	color: #000;
	text-align: center;
}
.cellclass {
	vertical-align: top;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	padding-top: 11px;
	padding-left: 11px;
}
.sideimage {
	margin: 0px;
	height: 215px;
	width: 175px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	position: relative;
	overflow: auto;
	vertical-align: top;
	padding-top: 2px;
	padding-bottom: 2px;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
.align {
	padding-left: 10px;
}
.mainfont {
	font-family: "Century Gothic";
	color: #030;
	text-align: justify;
	padding-top: 15px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 20px;
	vertical-align: top;
}
.spacer {
	padding-top: 12px;
	padding-left: 11px;
}
a:link {
	color: #000;
	text-decoration: underline;
}
a:visited {
	text-decoration: underline;
	color: #000;
}
a:hover {
	text-decoration: none;
	color: #000;
}
a:active {
	text-decoration: underline;
	color: #000;
}
.welcomemessage {
	min-width:382px;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #030;
	font-size: 19px;
	padding-top: 15px;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 200px;
	text-align: center;
	line-height: 25px;
}
.news {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	color: #030;
	padding: 10px;
}
.newsheader {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 25px;
	color: #030;
	letter-spacing: 4px;
	text-align: left;
	text-indent: 20px;
	font-style: italic;
	line-height: 40px;
	padding-top: 10px;
}



-->
    </style></head>

<body>

<div id="container" style="z-index: 1">
<div id="content" style="z-index: 2">
<img src="layout/header1_small.png" class="fluidimage"/>
 </div>
<div id="page" style="z-index:3">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="800" class="welcomemessage">Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</td>
      <td width="373" align="right" valign="top"><img src="layout/home_header_2.png" width="373" height="252" /></td>
      </tr>
    <tr>
      <td colspan="2" class="welcomemessage"><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="47%" height="396" rowspan="2" align="center"><img src="images/homepage_peterderby.png" width="431" height="424" /></td>
          <td width="53%" valign="top" class="newsheader">Whats Happening...</td>
        </tr>
        <tr>
          <td align="left" valign="top" class="news"><p><strong>Content Content Content Content Content</strong><br />
            &nbsp;&nbsp;&nbsp;Content Content Content Content Content</p>
            <p>&nbsp;</p>
            <p><strong>Content Content Content Content Content</strong><br />
&nbsp;&nbsp;&nbsp;Content Content Content Content Content </p>
            <p>&nbsp;</p>
            <p><strong>Content Content Content Content Content</strong><br />
&nbsp;&nbsp;&nbsp;Content Content Content Content Content</p>
            <p>&nbsp;</p>
            <p><strong>Content Content Content Content Content</strong><br />
&nbsp;&nbsp;&nbsp;Content Content Content Content Content</p></td>
        </tr>
        <tr>
          <td colspan="2" align="center" class="copyright">&nbsp;</td>
        </tr>
        <tr>
          <td colspan="2" align="center" class="copyright">Content Content Content Content Content</td>
        </tr>
        </table></td>
      </tr>
  </table>
</div>
<div id="leftnav" style="z-index: 4">
<table width="210" border="0" cellpadding="0" cellspacing="0" class="navbar">
      <tr>
        <td width="204"><img src="menus/sidetop.png" alt="" width="175" height="215" /></td>
      </tr>
      <tr>
        <td class="buttons" onclick="location.href='http://www.countryhavenstables.ca/home.htm';" onmouseover="this.className='mouseover';" onmouseout="this.className='buttons';">Home</td>
      </tr>
      <tr>
        <td class="buttons" onclick="location.href='http://www.countryhavenstables.ca/contact.html';" onmouseover="this.className='mouseover';" onmouseout="this.className='buttons';">Contact Us</td>
      </tr>
      <tr>
        <td class="buttons" onclick="location.href='http://www.countryhavenstables.ca/comments.html';" onmouseover="this.className='mouseover';" onmouseout="this.className='buttons';">Comments</td>
      </tr>
      <tr>
        <td class="buttons" onclick="location.href='http://www.countryhavenstables.ca/facilities.html';" onmouseover="this.className='mouseover';" onmouseout="this.className='buttons';">Facilities</td>
      </tr>
      <tr>
        <td class="buttons" onclick="location.href='http://www.countryhavenstables.ca/board_rates.html';" onmouseover="this.className='mouseover';" onmouseout="this.className='buttons';">Board Rates</td>
      </tr>
      <tr>
        <td class="buttons" onclick="location.href='http://www.countryhavenstables.ca/lessons.html';" onmouseover="this.className='mouseover';" onmouseout="this.className='buttons';">Riding Lessons</td>
      </tr>
      <tr>
        <td class="buttons" onclick="location.href='http://www.countryhavenstables.ca/camp.html';"" onMouseOver="this.className='mouseover';" onmouseout="this.className='buttons';">Riding Camp</td>
      </tr>
      <tr>
        <td class="buttons" onclick="location.href='http://www.countryhavenstables.ca/Schedule/september_10.html';" onmouseover="this.className='mouseover';" onmouseout="this.className='buttons';">Schedule</td>
      </tr>
      <tr>
        <td class="buttons" onclick="location.href='http://www.countryhavenstables.ca/bulletinboard/bulletin_board.html';" onmouseover="this.className='mouseover';" onmouseout="this.className='buttons';">Bulletin Board</td>
      </tr>
      <tr>
        <td class="buttons" onclick="location.href='http://www.countryhavenstables.ca/directions.html';" onmouseover="this.className='mouseover';" onmouseout="this.className='buttons';">Directions</td>
      </tr>
      <tr>
        <td class="buttons" onclick="location.href='http://www.countryhavenstables.ca/sales/horses.html';" onmouseover="this.className='mouseover';" onmouseout="this.className='buttons';">Horses For Sale</td>
      </tr>
      <tr>
        <td class="buttons" onclick="location.href='http://www.countryhavenstables.ca/sales/clothing.html';" onmouseover="this.className='mouseover';" onmouseout="this.className='buttons';">Apparel For Sale</td>
      </tr>
      <tr>
        <td class="buttons" onclick="location.href='http://www.countryhavenstables.ca/riders.html';" onmouseover="this.className='mouseover';" onmouseout="this.className='buttons';">Riders</td>
      </tr>
      <tr>
        <td class="buttons" onclick="location.href='http://www.countryhavenstables.ca/albums/gallery_home.htm';" onmouseover="this.className='mouseover';" onmouseout="this.className='buttons';">Photo Gallery</td>
      </tr>
    </table>
</div>
</div>

</body>
</html>

web-design

Edited 14 Years Ago by T4gal because: Replaced link with code

4 Contributors
5 Replies
162 Views
2 Weeks Discussion Span
Latest Post 14 Years Ago Latest Post by Blaise.M

Lusiphur 185 Practically a Posting Shark

14 Years Ago

Without going through all of the code you provided (it's getting late here, I'm sorry) I can say you have the right general idea on the z-index portion.

The higher the number, the further 'forward' it's position in relation to what's lower in number.

That being said, some content types (flash for example) don't like to play well with z-indexed content and will always 'force' themselves to be on top. There are others as well but flash was one that popped to mind when I was thinking of possible issues here.

I noted that you mentioned that you are more comfortable with tables and while I can sympathize, I should point out that the current trends in web design frown upon table use and lean toward divs.

What I might mention is that it may be helpful to check out some of the tutorials at w3schools as they may be very helpful in leading you in the right direction for your CSS and DIV issues.

Hope this helps :)

Varnius 2 Newbie Poster

14 Years Ago

For z-index to work div must be positioned relatively or absolutely, like this:

<div style="position: relative; z-index: 5;">content</div>

By the way, you shouldn`t embed styles directly into HTML, use separate stylesheets instead. Same goes for Javascript. Clear separation of those three things really makes it easier to work and edit your code later. Consult w3schools.com for more useful tips and stuff. :)

Edited 14 Years Ago by Varnius because: n/a

T4gal commented: Answered my question perfectly. +2

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

T4gal · Answer 1 · 2010-09-08T02:32:19+00:00

Yeah I've really been meaning to learn to use DIVs. Everything I read says they're way better and more flexible, but I can never seem to get them to work. I'll check out those links.

Well, it's good to know I'm heading in the right direction anyway. If anyone could check out the code and tell me why it's not working that would be awesome. I don't know much about javascript either. I just got that code off of google.
Also if anyone knows a better way to do this I'm all ears. Basically, I have a nav bar on the left that going all the way to the top of the page, and the I have a header to the right of that along the top and the content right below the header. I'd like to make the header image switch based on the screen width. So I have more than one header, different widths to choose from.

Thanks!

T4gal · Answer 2 · 2010-09-09T02:39:27+00:00

That worked like a charm! Thank you so much!

And yes, I use separate stylesheets, I just find it easier to switch to an external stylesheet after I'm finished working on the page. I'm not sure how to do that with javascript though?

Thanks again!

Blaise.M 0 Newbie Poster · Answer 3 · 2010-09-22T18:24:30+00:00

Hi,

what if you had a flash instead of the green navigation at the left side? I substituted it with flash and zooming in causes the <td> that contains the flash to overlap other content. Is there a way to control flash in this situation?
I asked this question in a separate thread here where you can see my code.