Solved

CSS Navigation Menu

Posted on 2008-06-17
9
413 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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
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

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

632 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