[x]
Posted via EE Mobile

Search, ask, and monitor your questions on the go with EE Mobile. Visit Experts Exchange from your mobile device and never be out of touch again.
Question
[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!
6.7

Problem using drop down navigation bar at the desired location in CSS designed webpage

Asked by JatinHemant in Cascading Style Sheets (CSS), JavaScript, Hypertext Markup Language (HTML)

Hi friends !

I am designing my website in Dreamweaver CS 3 using HTML, Advance HTML, CSS, PHP include files and inclusion of graphics and swf animations.

Now, the main sections of my pages are:

1. Header
2. Menu Bar
3. Left pane
4. Middle pane
5. Right pane
6. Footer

Among these, Header, Menu Bar, Right pane, Bottom pane and Footer will be same for all the web pages. I have included INC files for all of them and using a custom template (NOT dwt template).

Now, according to the selection on the Menu Bar, there will be a navigation bar at the left pane. For example, there is a tab named Faculties on the Menu Bar, so when a user clicks on it, there will be a navigation bar with sub menus (in a two  three level navigation bar style):

Faculty of Sciences---->submenus will be Computer Sciences, Physics Department etc.
Faculty of Arts and Languages---->Department of English, Department of French etc.

Now, I went through www.dynamicdrive.com and looked for a suitable vertical drop down navigation bars. I found one at this link:

http://www.dynamicdrive.com/dynamicindex1/hvmenu/index.htm

I could be happy if I were using a normal web page without a custom CSS. BUT&

Here, I am using style.css (My style sheet) to create layout (including width, height, color etc.) for all the sections.

I have also attached the code of my style sheet. Please have a look at "DIV CLASS LEFT". You will see that the div class left is for left pane. I included the navigation bar code in cs.inc include file that takes properties from div class left.

The cs.inc file includes this:
***************************
<script type='text/javascript'>

//HV Menu- by Ger Versluis (http://www.burmees.nl/)
//Submitted to Dynamic Drive (http://www.dynamicdrive.com)
//Visit http://www.dynamicdrive.com for this script and more

function Go(){return}

</script>
<script type='text/javascript' src='test/exmplmenu_var.js'></script>
<script type='text/javascript' src='test/menu_com.js'></script>
<noscript>Your browser does not support script</noscript>

<img src="images/complab.gif" />  //PICTURE APPEARS RIGHT LOCATUION//

***************************


Please tell me what modification should I do to change its location right inside my leftpane. (All other things like color, font etc., I can change myself).

Please tell me if you need some more information.

Regards,
Hemant
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:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:

/* Beginning of Style code for Webpage Body including Background, banner, top pane, left pane, middle pane, right pane, bottom pane and footer */
 
* {
    padding: 0;
    margin: 0;
} 
 
body {
    background: #FFFFFF;
	font: .74em "Trebuchet MS" Verdana, Arial, sans-serif;
	line-height: 1.5em; 
}
a {
	text-decoration: none;
}
 
a:hover {
	text-decoration: underline;
}
 
 
#wrap {
margin: 10px auto;
width: 980px;
background: #F8F8F8; url('images/midd.jpg');
background-repeat: repeat-y;
}
 
#top { 
background: #F8F8F8; url('images/topp.jpg');
height: 10px;
}
 
#content {
padding: 0 10px 0 10px;
}
 
#bottom {
 
background: #fff url('images/bott.jpg');
height: 5px;
}
 
 
.header {
height: 130px;
background: #0080FF;
}
 
.header h1 { padding-left: 17px; padding-top: 22px; font-size: 130%; color: #FFF; }
.header h1 a { font-size: 130%; color: #FFF; text-decoration: none;}
.header h2 { padding-left: 17px; padding-top: 0px; font-size: 100%; color: #FFF; }
 
 
.breadcrumbs { 
    background: #F6F9FB; 
	border-bottom: 1px solid #E1E1E1; 
	padding: 5px;
}
 
 
.toppane {
height: 120px;
background: #0080FF;
}
 
.toppane {
	float: right;
	width: 100%;
	margin: 30px 2px;
        padding: 2% 1%;
        text-align: justify;
}
 
 
.left {
	float: left;
	width: 19%;
	margin: 30px 0px;
	padding: 1% 1%;
        background: #EBEBEB; 
	
}
 
.left ul {
	padding: 10px 0 4px 25px;
	margin:0;
        font-size: 100%;
        font-weight: bold;
}
 
.left li {
	margin-bottom:3px;
	list-style-type: square;
	color: #00A854;
        font-size: 90%;
        font-weight: bold;
        font-family: Arial, "Palatino Linotype";
}
 
 
.right {
	float: right;
	width: 18%;
	margin: 30px 0px;
	padding: 1% 1%;
        background: #EBEBEB;
	
}
 
 
.middle {
	float: left;
	width: 57%;
	margin: 30px 0px;
        padding: 1% 1%;
        text-align: justify;
}
 
.middle li {
	margin-bottom:5px;
        margin-left:20px;
	list-style-type: square;
        font-size: 100%;
	color: #000000;
        font-weight: normal;
        font-size: 100%;
        font-family: Arial, "Palatino Linotype";
}
 
.bottompane {
	float: left;
	width: 100%;
	margin: 3x 0 4px 0;
	padding: 2% 0% 0% 0%;
	text-align: justify;
}
 
 
 
.middle h2 { color: #3B6EBF; font-size: 100%; margin-bottom: 10px; margin-top: 10px; font-family: Arial, "Palatino Linotype";}
.middle h3 { color: #009B50; font-size: 100%; margin-bottom: 10px; margin-top: 10px; font-family: Arial, "Palatino Linotype";}
.middle h4 { color: #009B50; font-size: 100%; 12px; font-weight: bold; margin-bottom: 10px; margin-top: 10px; font-family: Arial, "Palatino Linotype";}
.middle p { color: #000000; font-size: 100%; font-weight: normal; margin-bottom: 10px; margin-top: 10px; font-family: Arial, "Palatino Linotype";}
 
.left h2 { color: #3B6EBF; font-size: 100%; margin-top: 11px;font-family: Arial, "Palatino Linotype";}
.left h3 { color: #3B6EBF; font-size: 100%; margin-top: 9px;font-family: Arial, "Palatino Linotype";}
.left h2 a { color: #3B6EBF; font-size: 100%; margin-top: 11px;font-family: Arial, "Palatino Linotype";}
.left h3 a { color: #3B6EBF; font-size: 100%; margin-top: 9px;font-family: Arial, "Palatino Linotype";}
 
 
#indextable .style1 {
	font-family: Arial, "Palatino Linotype";
	font-size: 100%;
        color: #FFFF00;
        font-weight: bold;
        padding: 1% 2% 1% 2%             
}
 
 
#indextable .style2 {
	font-family: Arial, "Palatino Linotype";
	font-size: 100%;
        color: #FFFFFF;
	font-weight: bold;
        padding: 1% 2% 1% 2%
                   
}
 
 
#moduletable .style1 {
      font-family: Arial, "Palatino Linotype";
      font-size: 90%;
      font-weight: bold;
      color: #009B50;
      padding: 1% 1% 1% 1%              /* Green color fonts */
}
 
 
#moduletable .style2 {
      font-family: Arial, "Palatino Linotype";
      font-size: 90%;
      font-weight: normal;
      text-align: left;
      padding: 2% 2% 2% 2%             /* Black color fonts */
}
 
 
#generaltable .style1 {
      font-family: Arial, "Palatino Linotype";
      font-size: 90%;
      font-weight: normal;
      text-align: left;
      padding: 1% 1% 1% 1%             /* Black color fonts */
}
 
#generaltable .style2 {
      font-family: Arial, "Palatino Linotype";
      font-size: 90%;
      font-weight: normal;
      text-align: center;
      padding: 1% 1% 1% 1%             /* Black color fonts */
}
 
 
#clear {
	display: block;
	clear: both;
	width: 100%;
	height:1px;
	overflow:hidden;
}
 
 
#footer {
	font-face: Verdana;
        font-size: 120%;
        text-align: center;
	color: #666;
}
 
 
/* Ending of Style code for Webpage Body including Background, banner, footer, middle pane and right pane and footer */
 
 
 
 
 
/* Beginning of Style code for Drop-down menu bar */
 
<style type="text/css" media="screen">
body{ behavior:url("csshover2.htc"); }
.pd_menu_01 {float:left; padding:0; margin:0; color:#0080FF; background:#F8F8F8; width:100%; border:solid 1px #F8F8F8;clear:both;} /*Color navigation bar normal mode*/
.pd_menu_01  a, .pd_menu_01 a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:normal;
font-size: 100%;
color: #0080FF;
background-color: #F8F8F8;
text-decoration: none;
}
.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}
.pd_menu_01 ul li {float:left; position:relative; z-index:auto !important ; z-index:1000 ; border-right:solid 1px #F8F8F8; border-left:solid 1px #F8F8F8;}
.pd_menu_01 ul li a {color: #0080FF;background: #F8F8F8;float:none !important ; float:left ; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.pd_menu_01 ul li ul {display:none; border:none;color: #0080FF;background: #F8F8F8; width:1px}
.pd_menu_01 ul li:hover a {background-color:#F8F8F8; text-decoration:none; color:#008080;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {display:block;  position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.pd_menu_01 ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #F8F8F8; border-bottom: solid 1px #F8F8F8; background-color:#F8F8F8;  color:#0080FF;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#F8F8F8; text-decoration:none;color:#008080;} /*Color subcells hovering mode*/
.pd_menu_01 ul li a:hover {background-color:#F8F8F8; text-decoration:none;color:#008080;} /*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.pd_menu_01 ul li ul li a:visited { background-color:#F8F8F8;  color:#0080FF;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #F8F8F8; border-bottom: solid 1px #F8F8F8; background-color:#F8F8F8;  color:#0080FF;} 
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#F8F8F8; text-decoration:none;color:#008080;} /*Color subcells hovering mode*/
</style>
 
 
/* Ending of Style code for Drop-down menu bar */
Attachments:
 
disorientation.GIF (80 KB) (File Type Details) 
Misplacement of Navigation Bar
Misplacement of Navigation Bar
 
 
Related Solutions
Keywords: Problem using drop down navigation b…
Title
1 Unable to find the plugin that handles th…
 
Loading Advertisement...
 
[+][-]03/10/09 08:34 AM, ID: 23847901Expert Comment

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 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]03/10/09 09:24 AM, ID: 23848525Author Comment

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 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]03/10/09 09:28 AM, ID: 23848583Author Comment

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 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]03/10/09 11:28 AM, ID: 23849735Expert Comment

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 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]03/10/09 11:09 PM, ID: 23854268Author Comment

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 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]03/12/09 10:23 AM, ID: 23871060Expert Comment

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 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]03/13/09 12:58 AM, ID: 23876889Author Comment

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 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]03/13/09 02:03 AM, ID: 23877143Author Comment

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 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]03/13/09 08:35 AM, ID: 23880440Expert Comment

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 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]03/13/09 10:33 AM, ID: 23881711Expert Comment

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 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]03/13/09 10:51 AM, ID: 23881910Expert Comment

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 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]03/13/09 10:55 AM, ID: 23881964Expert Comment

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 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]03/13/09 11:14 PM, ID: 23885639Author Comment

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 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]03/13/09 11:57 PM, ID: 23885703Author Comment

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 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]03/14/09 01:24 AM, ID: 23885850Author Comment

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 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]03/16/09 11:47 AM, ID: 23900987Accepted Solution

View this solution now by starting your 30-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, Hypertext Markup Language (HTML)
Sign Up Now!
Solution Provided By: mltsy
Participating Experts: 1
Solution Grade: A
 
[+][-]03/17/09 03:42 AM, ID: 23906326Author Comment

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 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]04/18/09 08:58 AM, ID: 24175739Author Comment

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 30-day free trial to view this Author Comment or ask the Experts your question.

 
 
Loading Advertisement...
20091021-EE-VQP-81 - Hierarchy / EE_QW_3_20080625