Advertisement

09.30.2008 at 10:07AM PDT, ID: 23775409
[x]
Attachment Details
[x]
The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

  • The Grade of the Solution
  • The Zone Rank of the Expert Providing the Solution
  • The Number of Author and Expert Comments
  • The Number of Experts Contributing
  • The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!
7.7

Quick Question Z-Index and interactivity

Asked by rcbprov in Cascading Style Sheets (CSS), JavaScript, Macromedia Dreamweaver, Scripting Languages, JScript

Tags: ,

Because of all the havoc wreaked in my earlier thread of questions, I'm building a new site carefully:) Not a simple one, per se. I am using HTML tags to make divs, so that this time around I actually have structure to hold things in. I am also using Z-index to layer images and behaviors. I have a button that won't work that is sitting on top on another index level.

I'm trying some inline jscript to tell it what to do.

A) if the style is nestled in it's own HTML tag, it should override nav styles in other divs....right?
(the tag i'm styling for an absolute positioned button on beneath a main image is the H4 tag)

B) with jscript i don't need all the button states...just 'on(x)____' , go do something....right?

C) the current attempt has this all nested in a form, which seem unnecessary, but an option i found on the web.

D) do z-index layers matter for where a button is?

E) is the code upset because I have two options for nav with different CSS?

the comments in the code are from a Dweaver template I thought I'd start with to avoid some mishaps.

Thanks!Start Free Trial 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:

<!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>Rachel Cyrene Blackman</title>
<style type="text/css"> 
 
<!-- 
@import url("css/mygall.css");
@import url("css/hoverbox/css");
@import url("css/sfishrcb.css");
 
body  {
	background: #000000;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: right; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	font-size: 12px;
	font-family: Rough_Typewriter;
}
.twoColFixRtHdr #container {
}
 
p {
	background-repeat: no-repeat;
	background-image: url(img/paragraph2.png);
	color: #CCCCCC;
	font-size: 12px;
	position: relative;
	width: 400px;
	text-align: center;
	white-space: normal;
	display: block;
	height: auto;
	margin-right: 100px;
}
.twoColFixRtHdr #container {
	width: 800px;
	margin: 0 auto;
	text-align: center; /* this overrides the text-align: center on the body element. */
	font-size: 13px;
	line-height: 15px;
	background-repeat: no-repeat;
} 
.twoColFixRtHdr #header {
	margin-top: 100px;
} 
.twoColFixRtHdr #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
	margin-top: 0px;
	width: 200px;
	text-align: right;
	font-size: 14px;
	color: #FFFFFF;
}
.twoColFixRtHdr #sidebar1 {
	float: right; /* since this element is floated, a width must be given */
	width: 180px; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 0;
	height: 425px;
	margin-right: 0px;
	margin-top: 50px;
	font-size: 14px;
	text-align: center;
	font-family: Rough_Typewriter;
	font-weight: bold;
	list-style-image: none;
	list-style-type: none;
	margin-left: 600px;
	color: #345DA4;
	z-index: -1;
	position: absolute;
}
.twoColFixRtHdr #sidebar1 {
}
.twoColFixRtHdr #mainContent {
	margin: 0; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 0px;
	width: 800px;
	margin-left: 0px;
	height: 500px;
	font-family: Rough_Typewriter;
	font-size: 7px;
	text-align: center;
	margin-right: 0px;
	color: #FFFFFF;
	background-image: url(img/cambig.png);
	margin-top: -50px;
} 
.twoColFixRtHdr #container #header #mainNavy {
}
.twoColFixRtHdr #footer {
	padding: 0;
	background-image: none;
	color: #FFFFFF;
	font-weight: bolder;
	font-size: 14px;
	font: "skia";
	width: 802px;
	background-repeat: no-repeat;
	background-position: 0;
	text-align: center;
} 
.twoColFixRtHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 0;
	height: 50px;
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
--> 
</style>
<!--[if IE 5]>
<style type="text/css"> 
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixRtHdr #sidebar1 { width: 220px; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRtHdr #sidebar1 { padding-top: 30px; }
.twoColFixRtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<style type="text/css">
<!--
.sideTwo {
	font-family: skia;
	font-size: 12px;
	color: #2C5BA4;
	text-decoration: none;
	background-image: url(img/Pbckgrnd.png);
	background-repeat: no-repeat;
	text-align: center;
	position: relative;
}
.style8 {color: #000000}
h4 {
	display: block;
	height: 54px;
	width: 54px;
	position: absolute;
	left: 5px;
	top: 145px;
	bottom: 250px;
	background-color: #FFFF00;
}
#apDiv1 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
}
-->
</style>
 
</head>
 
<body class="twoColFixRtHdr">
 
 
<div id="container" >
 
 
 
 
 
 
<div id="header"> 
      <!-- end #header -->
  </div>
  <div id="mainContent"> <div id="sidebar1">
   <h4><form><img src="img/P.png" input type="button" name="photos" onclick=onClick="window.location=url(photos.html")> </form></h4>
  </div>
<div style="width:350px; text-align:center;background-color:#000000;border:thin,white,solid;margin-top:170px; margin-left:155px;"></div>
<!-- end #mainContent -->
  </div>
  <div id="work"><div id="products">
 
<ul id="gallery">
 
 
<li> <a href="pagetwo.html">Photos<span><img src="img/indexboys copy.jpg" /></span> </a></li>
<li><a href="nogo">Posters </a> </li>
<li> <a href="nogo"> Writing</a> </li>
<li> <a href="posters"> Media</a> </li>
 
</span>
</ul>
 
</div></div>
  <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat
  &lt;div id="footer="footer" />
  <div id="footer">
    <div id="footer2"><img src="img/ruleruse.png" /></div>
    <!-- end #container -->
 <!-- end #footer --></div>
</div>
</body>
</html>
[+][-]09.30.2008 at 06:24PM PDT, ID: 22610922

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]09.30.2008 at 06:28PM PDT, ID: 22610940

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]09.30.2008 at 09:06PM PDT, ID: 22611555

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]09.30.2008 at 10:05PM PDT, ID: 22611732

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]10.01.2008 at 12:15PM PDT, ID: 22617943

View this solution now by starting your 7-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

 

About this solution

Zones: Cascading Style Sheets (CSS), JavaScript, Macromedia Dreamweaver, Scripting Languages, JScript
Tags: Css/Javascript, new site/all
Sign Up Now!
Solution Provided By: scrathcyboy
Participating Experts: 2
Solution Grade: A
 
 
[+][-]10.01.2008 at 12:22PM PDT, ID: 22618027

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]10.02.2008 at 05:35AM PDT, ID: 22623506

Experts Exchange has a courteous staff of administrators who help members get the most out of the website by means of administrative comments like this one.

Start your 7-day free trial to view this Administrative Comment or ask the Experts your question.

 
[+][-]10.03.2008 at 07:14AM PDT, ID: 22634142

Experts Exchange has a courteous staff of administrators who help members get the most out of the website by means of administrative comments like this one.

Start your 7-day free trial to view this Administrative Comment or ask the Experts your question.

 
[+][-]10.03.2008 at 08:24AM PDT, ID: 22634870

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]10.06.2008 at 08:31PM PDT, ID: 22656428

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]10.07.2008 at 08:36AM PDT, ID: 22660398

Assisted solutions are selected by the member who asked the question as a comment that contributed to their question's solution.

Start your 7-day free trial to view this Assisted Solution or ask the Experts your question.

 
[+][-]10.08.2008 at 03:05PM PDT, ID: 22673979

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
 
Loading Advertisement...
20080716-EE-VQP-32 - Hierarchy / EE_QW_2_20070628