?
Solved

Using Styles and Pseudo Classes

Posted on 2011-10-26
2
Medium Priority
?
119 Views
Last Modified: 2012-05-12
#innvernav
 {
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family:Arial, Helvetica, sans-serif;
background-color: #E4F9C4;
color: #333;
 }

#innvernav ul
 {
 list-style: none;
 margin: 0;
 padding: 0;
 border: none;
 }

#innvernav li
 {
 border-bottom: 1px solid #90bade;
 margin: 0;
 }

#innvernav li a
 {
 display: block;
 padding: 5px 5px 5px 0.5em;
 border-left: 10px solid #1958b7;
 border-right: 10px solid #6FB34B;
 background-color: #E4F9C4;
 color: #000;
 text-decoration: none;
 width: 100%;
 }
 html>body #navcontainer li a { width: auto; }

#innvernav li a:hover
 {
 border-left: 10px solid #1c64d1;
 border-right: 10px solid #5ba3e0;
 background-color: #2586d7;
 color: #fff;
 }

a#innvernav:link {
	background-color:#E4F9C4;
	text-decoration:underline;
	border: 2px solid #6FB34B;
}
a#innvernav:visited {
	background-color:#E4F9C4;
	border: 2px solid #6FB34B;

}
a#innvernav:hover {
	background-color:#E4F9C4;
	text-decoration:none;
	border: 2px solid #6FB34B;

}
a#innvernav:focus {
	text-decoration:none;
	background-color:#E4F9C4;
	border: 2px solid #6FB34B;

}
a#innvernav:active {
	text-decoration:none;
}

Open in new window

and in the html code
<div id="innernav">
<ul>
<li><a href="/service.asp">Service</a></li>

Open in new window

I am trying to remember how to remove the discs and also get the proper format this should be in since focus is added (I know it is link, visited, hover, active) but I don't know where focus should be.  

I am trying to replicate this list.

Thank you!
0
Comment
Question by:coreybryant
2 Comments
 
LVL 30

Accepted Solution

by:
LZ1 earned 2000 total points
ID: 37030423
Your misspelling your CSS id's.

Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#innernav
 {
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family:Arial, Helvetica, sans-serif;
background-color: #E4F9C4;
color: #333;
 }

#innernav ul
 {
 list-style: none;
 margin: 0;
 padding: 0;
 border: none;
 }

#innernav ul li
 {
 border-bottom: 1px solid #90bade;
 margin: 0;
  list-style-image:none;

 }

#innernav li a
 {
 display: block;
 padding: 5px 5px 5px 0.5em;
 border-left: 10px solid #1958b7;
 border-right: 10px solid #6FB34B;
 background-color: #E4F9C4;
 color: #000;
 text-decoration: none;
 width: 100%;
 }
 html>body #navcontainer li a { width: auto; }

#innernav li a:hover
 {
 border-left: 10px solid #1c64d1;
 border-right: 10px solid #5ba3e0;
 background-color: #2586d7;
 color: #fff;
 }

#innernav a:link {
	background-color:#E4F9C4;
	text-decoration:underline;
	border: 2px solid #6FB34B;
}
#innernav a:visited {
	background-color:#E4F9C4;
	border: 2px solid #6FB34B;

}
#innernav a:hover {
	background-color:#E4F9C4;
	text-decoration:none;
	border: 2px solid #6FB34B;

}
#innernav a:focus {
	text-decoration:none;
	background-color:#E4F9C4;
	border: 2px solid #6FB34B;

}
#innernav a:active {
	text-decoration:none;
}
</style>
</head>

<body>

<div id="innernav">
<ul>
<li><a href="/service.asp">Service</a></li>
<li><a href="/service.asp">Service</a></li>
<li><a href="/service.asp">Service</a></li>
<li><a href="/service.asp">Service</a></li>
</ul>
</div>
</body>
</html>

Open in new window

0
 
LVL 29

Author Closing Comment

by:coreybryant
ID: 37030493
Thanks - at least I was on the right track
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Suggested Courses
Course of the Month17 days, 12 hours left to enroll

829 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