Solved

CSS Navigation Menu

Posted on 2008-06-17
9
392 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
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

 
LVL 4

Assisted Solution

by:sajay_j
sajay_j earned 100 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 400 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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

861 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