Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

CSS Navigation Menu

Posted on 2008-06-17
9
Medium Priority
?
428 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

 
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

661 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