Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

CSS Navigation Menu

Posted on 2008-06-17
9
Medium Priority
?
436 Views
Last Modified: 2011-10-19
Hi,
I am using the following codes for my navigation menu.

http://www.dynamicdrive.com/style/csslibrary/item/image-marker-list-menu/

The CSS:
<style type="text/css">

.markermenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 170px;
border: 1px solid #9A9A9A;
}

.markermenu li a{
background: white url(media/arrow-list.gif) no-repeat 2px center;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: #00014e;
display: block;
width: auto;
padding: 3px 0;
padding-left: 20px;
text-decoration: none;
border-bottom: 1px solid #B5B5B5;
}


* html .markermenu li a{ /*IE only. Actual menu width minus left padding of LINK (20px) */
width: 150px;
}

.markermenu li a:visited, .markermenu li a:active{
color: #00014e;
}

.markermenu li a:hover{
color: black;
background-color: #ffffcb;
background-image:url(media/arrow-list-red.gif); /*onMouseover image change. Remove if none*/
}

</style>

The HTML:
<ul class="markermenu">
<li><a href="http://www.dynamicdrive.com/" >Dynamic Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/" >CSS Library</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM  Reference</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com/" style="border-bottom-width: 0">Coding Forums</a></li>            
</ul>

Now I would like to have one of navigation menu have customized font, small margin and no icon in the front of text. What codes should I modified to get what I want?

Thanks in advance.
0
Comment
Question by:rowfei
9 Comments
 
LVL 1

Expert Comment

by:MikeBusby
ID: 21810361
You will have to create seperate classes for the one you want to change then apply it to that specific <li> tag
0
 

Author Comment

by:rowfei
ID: 21810373
Can you provide some sample codes?

Thanks
0
 
LVL 82

Expert Comment

by:hielo
ID: 21810389
>>customized font,
provide your font values here. I changed the "margin" from 20px to 3px (padding-left:20px) and changed the url to '':

.markermenu li a{
background: white url('') no-repeat 2px center;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: #00014e;
display: block;
width: auto;
padding: 3px 0;
padding-left: 3px;
text-decoration: none;
border-bottom: 1px solid #B5B5B5;
}

use the attached code:
<style type="text/css"> 
.markermenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 155px;
border: 1px solid #9A9A9A;
} 
.markermenu li a{
background: white url('') no-repeat 2px center;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: #00014e;
display: block;
width: auto;
padding: 3px 0;
padding-left: 3px;
text-decoration: none;
border-bottom: 1px solid #B5B5B5;
} 

* html .markermenu li a{ /*IE only. Actual menu width minus left padding of LINK (20px) */
width: 150px;
} 
.markermenu li a:visited, .markermenu li a:active{
color: #00014e;
} 
.markermenu li a:hover{
color: black;
background-color: #ffffcb;
background-image:url(''); /*onMouseover image change. Remove if none*/
} 
</style>

Open in new window

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 4

Assisted Solution

by:sajay_j
sajay_j earned 400 total points
ID: 21810393
.newmenu{
list-style-type: none;  /*  No Icons */
margin: 5px 2px;    /* less margin */
padding: 0;
width: 170px;
border: 1px solid #9A9A9A;
font-size:100%;
font-family: "customized font name";
}
0
 

Author Comment

by:rowfei
ID: 21810513
Thanks all. But after I apply the codes from Sajay or Hielo to my css, then my web pages don't have CSS apply. I have attached my css & index html.

I just want the Test2 navigation bar have small font, no pic before text, different color and starting from little bit left.

Thanks again.


style.css.txt
index.htm.txt
0
 
LVL 82

Expert Comment

by:hielo
ID: 21810543
For the changing background to work upon hover, you need to add href to your links:
<ul class="markermenu">
<li><a href="#">HOME</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test2</a></li>
<li><a href="#">Test3</a></li>
<li><a href="#">Test4</a></li>
</ul>

Use the attached css
/*!!!!!!!!!!!!!!!!!!-CONSTANT-!!!!!!!!!!!!!!!!!!!!!!!!*/
* {
	margin:0px 0px 0px 0px; 				  			 	 
	padding:0px 0px 0px 0px; 
}
body  {background:url(images/bg.jpg) 0 0 repeat-x}	
table {								 	  	  
	border-collapse:collapse;			 	 
	border:0px;	
	padding:0px 0px 0px 0px;
	width:100%;
}									   
td {							       				  
	font:normal 11px Tahoma;							 
	vertical-align:top;	  			  
	line-height:14px;
	color:#4E4E4E;
}										   	   
input, textarea, select{			     
	font:normal 11px Tahoma;			
	vertical-align:middle;	
	color:#6C6C6C;
}		
ul {list-style:none;}
img {border:0px;}	
 
/*!!!!!!!!!!!!!!!!!!!!!-MAIN-!!!!!!!!!!!!!!!!!!!!!!!!!*/
.base		{height:85%}
.main_table	{width:766px;}
.tail		{width:50%;}
 
/*!!!!!!!!!!!!!!!!!!!!!-HEADER-!!!!!!!!!!!!!!!!!!!!!!!*/
#header {height:100px}
 
/*!!!!!!!!!!!!!!!!!!!!!-CONTENT-!!!!!!!!!!!!!!!!!!!!!!!!!*/
.column_left {width:216px;}
.column_left .spase {padding:51px 17px 15px 42px;}
.column_right {width:523px; background:#FFF}
.column_right .spase {padding:0px 0px 15px 23px;}
 
.vl {background:url(images/l.jpg) top right repeat-y}
.gl {background:url(images/gl.gif) bottom left repeat-x}
 
.abs {
	height:32px; 
	background:#EDF2E4; 
	position:absolute;
	top:289px;
	width:216px;
}
.abs img {margin:10px 0px 0px 42px;}
 
.t_bg {background:url(images/t_bg.gif) 0 0 repeat-x;}
/*!!!!!!!!!!!!!!!!!!!!!-TEXT-!!!!!!!!!!!!!!!!!!!!!!!!!*/
a 		{color:#939697; font:normal 11px Tahoma}
a:hover {text-decoration:none;}	
b 		{color:#67A2BF; font:bold 11px Tahoma}
span 	{color:#1B56AF}
.xx		{color:#4883A0}
.nn a	{text-decoration:none;}
.nn a:hover {text-decoration:underline;} 
 
/*!!!!!!!!!!!!!!!!!!!-INPUTS-!!!!!!!!!!!!!!!!!!!!!!!!!*/
.input input, .ta{
	width:142px;
	height:20px;
	border:1px solid #D0D0D0;
	color:#6C6C6C;
	font:normal 11px Tahoma;
}
.ta {
	height:123px;
	overflow:auto;
	margin:0px 0px 2px 0px;
}
 
.eq_height {height:30px}
 
/*!!!!!!!!!!!!!!!!!!!!!-LINKS-!!!!!!!!!!!!!!!!!!!!!!!!*/
.link_1 {background:url(images/ico1.jpg) 0 0 no-repeat; padding:0px 0px 0px 21px; color:#176999}
.link_2 {background:url(images/ico2.jpg) 0 0 no-repeat; padding:0px 0px 0px 19px; color:#176999}
.link_3 {background:url(images/bullet2.jpg) 0 0 no-repeat; padding:0px 0px 0px 20px; color:#36A21D; font:normal 10px Tahoma}
.link_4 {background:url(images/bullet1.jpg) 0 0 no-repeat; padding:0px 0px 0px 15px; color:#4883A0}
 
/*!!!!!!!!!!!!!!!!!!!!!!-LISTS-!!!!!!!!!!!!!!!!!!!!!!!*/
.nav ul {
	text-align:left;
	list-style-type:none;
	display:block;
	margin:50px;
	padding:0;
}
/*!!!!!!!!!!!!!!!!!!!!!!-FOOTER-!!!!!!!!!!!!!!!!!!!!!!!*/
 
.footer td{
	color:#939697;
	height:10px;
	background:url(images/footer_bg.gif) 0 0 repeat-x;
}
.footer div {padding:15px 0px 0px 0px; text-align:center}
.footer span {color:#C20F15}
.footer span a {color:#4E4E4E; font:normal 11px Tahoma;}
.footer a {color:#67A2BF}
 
/*!!!!!!!!!!!!!!!!!!!!!!!-Navigation Menu!!!!!!!!!!!!!!!!!!!!!!!*/
 
.markermenu{
list-style-type: none;
margin: 0 0 0 0;
padding: 0;
width: 190px;
border: 1px solid #9A9A9A;;
}
 
/* HIELO */
.markermenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 155px;
border: 1px solid #9A9A9A;
} 
 
.markermenu li a{
background: white url(images/arrow-list.gif) no-repeat 2px center;
font: bold 11px "Lucida Grande", "Trebuchet MS", Helvetica Neuse, Helvetica, sans-serif;
color: #00014e;
display: block;
width: auto;
padding: 3px 0;
padding-left: 20px;
text-decoration: none;
border-bottom: 1px solid #B5B5B5;
}
 
/* HIELO */
.markermenu li a{
background: white url('') no-repeat 2px center;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: #00014e;
display: block;
width: auto;
padding: 3px 0;
padding-left: 3px;
text-decoration: none;
border-bottom: 1px solid #B5B5B5;
} 
 
 
 
* html .markermenu li a{ /*IE only. Actual menu width minus 
 
left padding of LINK (20px) */
width: 190px;
}
 
.markermenu li a:visited, .markermenu li a:active{
color: #00014e;
}
 
.markermenu li a:hover{
color: black;
background-color: #ffffcb;
background-image:url(images/arrow-list-red.gif); /*onMouseover image change. Remove if none*/
}
 
/* HIELO */
.markermenu li a:hover{
color: black;
background-color: #ffffcb;
background-image:url(''); /*onMouseover image change. Remove if none*/
} 

Open in new window

0
 

Author Comment

by:rowfei
ID: 21812735
Thanks, Hielo. After I applied the codes you provided, this is what I get.

Test2 is still have same color, font, postion as others.

Any more ideas?

Thanks
Navigation-Test23gif.gif
0
 
LVL 82

Accepted Solution

by:
hielo earned 1600 total points
ID: 21814884
On the code below you will find:

old value
/* HIELO UPDATE: */
new value

ex:
.markermenu li a:hover{
color: black;
/* HIELO UPDATE: */
color: green;

background-color: #ffffcb;
background-image:url(''); /*onMouseover image change. Remove if none*/
}

color:black is the "old value" and color:green is the "new value". I put these:
/* HIELO UPDATE: */ so you can easily located the edited sections and see what you had before and what I chagned it to. You need to change those to suit your needs
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
<!--
/*!!!!!!!!!!!!!!!!!!-CONSTANT-!!!!!!!!!!!!!!!!!!!!!!!!*/
* {
	margin:0px 0px 0px 0px; 				  			 	 
	padding:0px 0px 0px 0px; 
}
body  {background:url(images/bg.jpg) 0 0 repeat-x}	
table {								 	  	  
	border-collapse:collapse;			 	 
	border:0px;	
	padding:0px 0px 0px 0px;
	width:100%;
}									   
td {							       				  
	font:normal 11px Tahoma;							 
	vertical-align:top;	  			  
	line-height:14px;
	color:#4E4E4E;
}										   	   
input, textarea, select{			     
	font:normal 11px Tahoma;			
	vertical-align:middle;	
	color:#6C6C6C;
}		
ul {list-style:none;}
img {border:0px;}	
 
/*!!!!!!!!!!!!!!!!!!!!!-MAIN-!!!!!!!!!!!!!!!!!!!!!!!!!*/
.base		{height:85%}
.main_table	{width:766px;}
.tail		{width:50%;}
 
/*!!!!!!!!!!!!!!!!!!!!!-HEADER-!!!!!!!!!!!!!!!!!!!!!!!*/
#header {height:100px}
 
/*!!!!!!!!!!!!!!!!!!!!!-CONTENT-!!!!!!!!!!!!!!!!!!!!!!!!!*/
.column_left {width:216px;}
.column_left .spase {padding:51px 17px 15px 42px;}
.column_right {width:523px; background:#FFF}
.column_right .spase {padding:0px 0px 15px 23px;}
 
.vl {background:url(images/l.jpg) top right repeat-y}
.gl {background:url(images/gl.gif) bottom left repeat-x}
 
.abs {
	height:32px; 
	background:#EDF2E4; 
	position:absolute;
	top:289px;
	width:216px;
}
.abs img {margin:10px 0px 0px 42px;}
 
.t_bg {background:url(images/t_bg.gif) 0 0 repeat-x;}
/*!!!!!!!!!!!!!!!!!!!!!-TEXT-!!!!!!!!!!!!!!!!!!!!!!!!!*/
a 		{color:#939697; font:normal 11px Tahoma}
a:hover {text-decoration:none;}	
b 		{color:#67A2BF; font:bold 11px Tahoma}
span 	{color:#1B56AF}
.xx		{color:#4883A0}
.nn a	{text-decoration:none;}
.nn a:hover {text-decoration:underline;} 
 
/*!!!!!!!!!!!!!!!!!!!-INPUTS-!!!!!!!!!!!!!!!!!!!!!!!!!*/
.input input, .ta{
	width:142px;
	height:20px;
	border:1px solid #D0D0D0;
	color:#6C6C6C;
	font:normal 11px Tahoma;
}
.ta {
	height:123px;
	overflow:auto;
	margin:0px 0px 2px 0px;
}
 
.eq_height {height:30px}
 
/*!!!!!!!!!!!!!!!!!!!!!-LINKS-!!!!!!!!!!!!!!!!!!!!!!!!*/
.link_1 {background:url(images/ico1.jpg) 0 0 no-repeat; padding:0px 0px 0px 21px; color:#176999}
.link_2 {background:url(images/ico2.jpg) 0 0 no-repeat; padding:0px 0px 0px 19px; color:#176999}
.link_3 {background:url(images/bullet2.jpg) 0 0 no-repeat; padding:0px 0px 0px 20px; color:#36A21D; font:normal 10px Tahoma}
.link_4 {background:url(images/bullet1.jpg) 0 0 no-repeat; padding:0px 0px 0px 15px; color:#4883A0}
 
/*!!!!!!!!!!!!!!!!!!!!!!-LISTS-!!!!!!!!!!!!!!!!!!!!!!!*/
.nav ul {
	text-align:left;
	list-style-type:none;
	display:block;
	margin:50px;
	padding:0;
}
/*!!!!!!!!!!!!!!!!!!!!!!-FOOTER-!!!!!!!!!!!!!!!!!!!!!!!*/
 
.footer td{
	color:#939697;
	height:10px;
	background:url(images/footer_bg.gif) 0 0 repeat-x;
}
.footer div {padding:15px 0px 0px 0px; text-align:center}
.footer span {color:#C20F15}
.footer span a {color:#4E4E4E; font:normal 11px Tahoma;}
.footer a {color:#67A2BF}
 
/*!!!!!!!!!!!!!!!!!!!!!!!-Navigation Menu!!!!!!!!!!!!!!!!!!!!!!!*/
 
/* HIELO */
.markermenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 155px;
border: 1px solid #9A9A9A;
} 
 
/* HIELO */
.markermenu li a{
background: white url('') no-repeat 2px center;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
/* HIELO UPDATE: */
font-size:65%;
 
color: #00014e;
/* HIELO UPDATE: */
color: maroon;
 
display: block;
width: auto;
padding: 3px 0;
padding-left: 3px;
/* HIELO UPDATE: */
padding-left:30px;
 
text-decoration: none;
border-bottom: 1px solid #B5B5B5;
} 
 
* html .markermenu li a{ /*IE only. Actual menu width minus 
 
left padding of LINK (20px) */
width: 190px;
}
 
.markermenu li a:visited, .markermenu li a:active{
color: #00014e;
}
 
/* HIELO */
.markermenu li a:hover{
color: black;
/* HIELO UPDATE: */
color: green;
 
background-color: #ffffcb;
background-image:url(''); /*onMouseover image change. Remove if none*/
} 
 
-->
</style>
 
</head>
<body>
<ul class="markermenu">
<li><a href="http://www.dynamicdrive.com/" >Dynamic Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/" >CSS Library</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM  Reference</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com/" style="border-bottom-width: 0">Coding Forums</a></li>            
</ul>
 
</body>
</html>

Open in new window

0
 

Author Comment

by:rowfei
ID: 21837626
Thanks
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
The viewer will learn how to count occurrences of each item in an array.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

877 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question