Solved

CSS Navigation Menu

Posted on 2008-06-17
9
373 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
 
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 

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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

760 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now