Advertisement

05.20.2008 at 12:12AM PDT, ID: 23416203
[x]
Attachment Details

Highlight current page with CSS

Asked by panosms in Cascading Style Sheets (CSS)

Tags: CSS

Hello experts.
I have to pages with link one page to the other.
Each page has the css and class parameter so that the highlighting is working fine.
What changes must i do so that can have only one css style for all and one menu in template.
I know that i have to put the classes in the body but this code is too difficult for me.
I have used the code from http://www.cssplay.co.uk/menus/pro_dropline.html.
These are the two pages: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:
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:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:
374:
375:
376:
377:
378:
379:
380:
381:
382:
383:
384:
385:
386:
387:
388:
389:
390:
391:
392:
393:
394:
395:
396:
397:
398:
399:
400:
401:
402:
403:
404:
405:
406:
407:
408:
409:
410:
411:
412:
413:
414:
415:
416:
417:
418:

test1.cfm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | Professional drop-line</title>
<style type="text/css">
.nav {
	height:26px;
	position:relative;
	font-family:arial, verdana, sans-serif;
	font-size:11px;
	width:990px;
	z-index:500;
	background-image: url(../../img/HorizonNav/pro_line_0.gif);
	background-repeat: repeat-x;
	vertical-align: top;
}
 
.nav .table {
	display:table;
	margin:0 auto;
	vertical-align: top;
}
 
.nav .select,
.nav .John {
	margin:0;
	padding:0;
	list-style:none;
	display:table-cell;
	white-space:nowrap;
	vertical-align: top;
}
 
.nav li {
	margin:0;
	padding:0;
	height:auto;
	float:left;
	vertical-align: top;
}
 
.nav .select a {
	display:block;
	height:26px;
	float:left;
	padding:0 30px 0 30px;
	text-decoration:none;
	line-height:26px;
	white-space:nowrap;
	color:#ddd;
	background-image: url(../../img/HorizonNav/pro_line_0.gif);
}
 
.nav .John a {
	display:block;
	height:26px;
	float:left;
	padding:0 0 0 15px;
	text-decoration:none;
	line-height:26px;
	white-space:nowrap;
	color:#fff;
	background-image: url(../../img/HorizonNav/pro_line_2.gif);
}
 
 
.nav .John a b {
	display:block;
	padding:0 30px 0 15px;
	background-image: url(../../img/HorizonNav/pro_line_2.gif);
	background-position: right top;
}
 
.nav .select a:hover, 
.nav .select li:hover a {
	padding:0 0 0 15px;
	cursor:pointer;
	color:#fff;
	background-image: url(../../img/HorizonNav/pro_line_1.gif);
}
 
.nav .select a:hover b, 
.nav .select li:hover a b {
	display:block;
	float:left;
	padding:0 30px 0 15px;
	cursor:pointer;
	background-image: url(../../img/HorizonNav/pro_line_1.gif);
	background-position: right top;
}
 
.nav .select_sub {
	display:none;
	color: #00CC00;
}
 
/* IE6 only */
.nav table {
border-collapse:collapse; 
margin:-1px; 
font-size:1em; 
width:0; 
height:0;
}
 
.nav .sub {
display:table; 
margin:0 auto; 
padding:0; 
list-style:none;
}
 
.nav .sub_active .John_sub a, 
.nav .sub_active a:hover {
	background:transparent;
	color:#00FF00;
}
 
.nav .select :hover .select_sub, 
.nav .John .show {
	display:block;
	position:absolute;
	width:990px;
	top:26px;
	padding:0;
	z-index:100;
	left:0;
	text-align:center;
	background-image: url(../../img/HorizonNav/back_0.gif);
}
 
.nav .John .show {
z-index:10;
}
 
.nav .select :hover .sub li a, 
.nav .John .show .sub li a {
	display:block;
	float:left;
	background:transparent;
	white-space:nowrap;
	border:0;
	color:#444;
	padding-top: 0;
	padding-right: 16px;
	padding-bottom: 0;
	padding-left: 16px;
}
 
.nav .John .sub li.Salisbury a {
	color:#088;
	cursor:default;
	background-image: url(../../img/HorizonNav/back_1.gif);
}
 
.nav .select :hover .sub li a:hover, 
.nav .John .sub li a:hover {
	visibility:visible;
	color:#088;
	background-image: url(../../img/HorizonNav/back_1.gif);
}
</style>
 
 
</head>
 
<body>
 
<div class="nav">
<div class="table">
 
<ul class="select"><li><a href="#nogo"><b>Home</b>
</a></li></ul>
 
<ul class="John"><li><a href="#nogo"><b>John Constable</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub show">
	<ul class="sub">
		
		<li><a href="#nogo">Malvern Hall</a></li>
		<li class="Salisbury"><a href="test1.cfm">Salisbury Cathedral</a></li>
		<li><a href="#nogo">Weymouth Bay</a></li>
	</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
 
 
<ul class="select"><li><a href="#nogo"><b>Henri Matisse</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
	<ul class="sub">
		<li><a href="#nogo">The Girl with Green Eyes</a></li>
		<li class="Dream"><a href="test2.cfm">The Dream</a></li>
		
	</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</div>
<br /><br /><br />
<p>&nbsp;</p>
</body>
</html>
test2.cfm
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | Professional drop-line</title>
<style type="text/css">
.nav {
	height:26px;
	position:relative;
	font-family:arial, verdana, sans-serif;
	font-size:11px;
	width:990px;
	z-index:500;
	background-image: url(../../img/HorizonNav/pro_line_0.gif);
	background-repeat: repeat-x;
	vertical-align: top;
}
 
.nav .table {
	display:table;
	margin:0 auto;
	vertical-align: top;
}
 
.nav .select,
.nav .Henri {
	margin:0;
	padding:0;
	list-style:none;
	display:table-cell;
	white-space:nowrap;
	vertical-align: top;
}
 
.nav li {
	margin:0;
	padding:0;
	height:auto;
	float:left;
	vertical-align: top;
}
 
.nav .select a {
	display:block;
	height:26px;
	float:left;
	padding:0 30px 0 30px;
	text-decoration:none;
	line-height:26px;
	white-space:nowrap;
	color:#ddd;
	background-image: url(../../img/HorizonNav/pro_line_0.gif);
}
 
.nav .Henri a {
	display:block;
	height:26px;
	float:left;
	padding:0 0 0 15px;
	text-decoration:none;
	line-height:26px;
	white-space:nowrap;
	color:#fff;
	background-image: url(../../img/HorizonNav/pro_line_2.gif);
}
 
 
.nav .Henri a b {
	display:block;
	padding:0 30px 0 15px;
	background-image: url(../../img/HorizonNav/pro_line_2.gif);
	background-position: right top;
}
 
.nav .select a:hover, 
.nav .select li:hover a {
	padding:0 0 0 15px;
	cursor:pointer;
	color:#fff;
	background-image: url(../../img/HorizonNav/pro_line_1.gif);
}
 
.nav .select a:hover b, 
.nav .select li:hover a b {
	display:block;
	float:left;
	padding:0 30px 0 15px;
	cursor:pointer;
	background-image: url(../../img/HorizonNav/pro_line_1.gif);
	background-position: right top;
}
 
.nav .select_sub {
	display:none;
	color: #00CC00;
}
 
/* IE6 only */
.nav table {
border-collapse:collapse; 
margin:-1px; 
font-size:1em; 
width:0; 
height:0;
}
 
.nav .sub {
display:table; 
margin:0 auto; 
padding:0; 
list-style:none;
}
 
.nav .sub_active .Henri_sub a, 
.nav .sub_active a:hover {
	background:transparent;
	color:#00FF00;
}
 
.nav .select :hover .select_sub, 
.nav .Henri .show {
	display:block;
	position:absolute;
	width:990px;
	top:26px;
	padding:0;
	z-index:100;
	left:0;
	text-align:center;
	background-image: url(../../img/HorizonNav/back_0.gif);
}
 
.nav .Henri .show {
z-index:10;
}
 
.nav .select :hover .sub li a, 
.nav .Henri .show .sub li a {
	display:block;
	float:left;
	background:transparent;
	white-space:nowrap;
	border:0;
	color:#444;
	padding-top: 0;
	padding-right: 16px;
	padding-bottom: 0;
	padding-left: 16px;
}
 
.nav .Henri .sub li.Dream a {
	color:#088;
	cursor:default;
	background-image: url(../../img/HorizonNav/back_1.gif);
}
 
.nav .select :hover .sub li a:hover, 
.nav .Henri .sub li a:hover {
	visibility:visible;
	color:#088;
	background-image: url(../../img/HorizonNav/back_1.gif);
}
</style>
 
 
</head>
 
<body>
 
<div class="nav">
<div class="table">
 
<ul class="select"><li><a href="#nogo"><b>Home</b>
</a></li></ul>
 
<ul class="select"><li><a href="#nogo"><b>John Constable</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
	<ul class="sub">
		
		<li><a href="#nogo">Malvern Hall</a></li>
		<li class="Salisbury"><a href="test1.cfm">Salisbury Cathedral</a></li>
		<li><a href="#nogo">Weymouth Bay</a></li>
	</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
 
 
<ul class="Henri"><li><a href="#nogo"><b>Henri Matisse</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub show">
	<ul class="sub">
		<li><a href="#nogo">The Girl with Green Eyes</a></li>
		<li class="Dream"><a href="test2.cfm">The Dream</a></li>
		
	</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</div>
<br /><br /><br />
<p>&nbsp;</p>
</body>
</html>
[+][-]05.20.2008 at 01:07AM PDT, ID: 21604242

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

Zone: Cascading Style Sheets (CSS)
Tags: CSS
Sign Up Now!
Solution Provided By: qasitouch
Participating Experts: 1
Solution Grade: B
 
 
[+][-]05.20.2008 at 03:07AM PDT, ID: 21604684

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.

 
[+][-]05.20.2008 at 03:29AM PDT, ID: 21604772

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.

 
[+][-]05.20.2008 at 04:09AM PDT, ID: 21604993

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