I'm trying to make a css menu...

G

greg

Looks like that below but... how can I make a pressed link to stay in
different color so the person knows where actually is on the web site.

For some unknown to me reason that id is not working for me.

Any idea?

TIA...

-------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>new</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>

#lftColm {width:197px; vertical-align:top;}

#lftNav {margin:22px 2px 0 2px;}

#lftNav A:link, #lftNav A:visited
{
margin-top:1px;
padding:4px 4px 4px 8px;
font-weight:bold;
text-decoration:none;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
display:block;
border-style:solid;border-width:0px 1px 1px 6px;
border-color:#FFF #B7B7B7 #D7D7D7 #f0f;
color:navy;
background-color:#fff;
}
#lftNav A:active, #lftNav A:hover
{border-left-color:#0A7ACD;color:red;background-color:#dff;}
#sel A:hover, #sel A:active
{background-color:#ffc;}

</style>

<title>New Page 1</title>
</head>

<body>
<table border="0" cellpadding="0" cellspacing="0" width="22%">
<tbody><tr>
<td id="lftColm" width="220">
<div id="lftNav">
<a id="sel" href="#" title="Computer Equip">Home</a>
<a href="#" title="Notebook">Notebooks</a>
<a href="#" title="Internet Security">Prices</a>
<a href="#" title="Broadband">Services</a>
<a href="#" title="Domain">Broadbands with WestNet</a>
<a href="#" title="Printer">Contakt</a>
<a href="#" title="Web Hosting">Links</a>
<a href="#" title="Anti Virus">Anti Virus Software</a>
</div>
</td>
</tbody></table>

</body>

</html>
 
M

meltedown

greg said:
Looks like that below but... how can I make a pressed link to stay in
different color so the person knows where actually is on the web site.

For some unknown to me reason that id is not working for me.

Any idea?

TIA...

-------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>new</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>

#lftColm {width:197px; vertical-align:top;}

#lftNav {margin:22px 2px 0 2px;}

#lftNav A:link, #lftNav A:visited
{
margin-top:1px;
padding:4px 4px 4px 8px;
font-weight:bold;
text-decoration:none;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
display:block;
border-style:solid;border-width:0px 1px 1px 6px;
border-color:#FFF #B7B7B7 #D7D7D7 #f0f;
color:navy;
background-color:#fff;
}
#lftNav A:active, #lftNav A:hover
{border-left-color:#0A7ACD;color:red;background-color:#dff;}
#sel A:hover, #sel A:active
{background-color:#ffc;}

</style>

<title>New Page 1</title>
</head>

<body>
<table border="0" cellpadding="0" cellspacing="0" width="22%">
<tbody><tr>
<td id="lftColm" width="220">
<div id="lftNav">
<a id="sel" href="#" title="Computer Equip">Home</a>
<a href="#" title="Notebook">Notebooks</a>
<a href="#" title="Internet Security">Prices</a>
<a href="#" title="Broadband">Services</a>
<a href="#" title="Domain">Broadbands with WestNet</a>
<a href="#" title="Printer">Contakt</a>
<a href="#" title="Web Hosting">Links</a>
<a href="#" title="Anti Virus">Anti Virus Software</a>
</div>
</td>
</tbody></table>

</body>

</html>
Click to expand...
#sel A:hover, #sel A:active
{background-color:#ffc;}

This will only take effect if you are hovering or if the link is active.
If you want the backgorund color to show otherwise, they you need to put
the style on the anchor itself.
#sel a{background-color:#ffc;}
 
G

greg

That is working, but... I have huge gaps between menu items in IE, but
in Firefox looks perfectly.

Any idea how to eliminate these gaps in IE?




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>new</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>


#lftColm {width:197px; vertical-align:top;}

#lftNav {margin:22px 2px 0 2px;}

#lftNav A:link, #lftNav A:visited
{
margin-top:1px;
padding:4px 4px 4px 8px;
font-weight:bold;
text-decoration:none;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
display:block;
border-style:solid;border-width:0px 1px 1px 6px;
border-color:#FFF #B7B7B7 #D7D7D7 #f0f;
color:navy;
background-color:#fef;
}
#lftNav A:active, #lftNav A:hover
{border-left-color:#0A7ACD;color:red;background-color:#dff;}
#uberlink a:link, #uberlink a:visited,
#uberlink a:hover, #uberlink a:active {
background-color: #FFFF9F;
color: navy;
}


</style>

<title>New Page 1</title>
</head>

<body>
<table border="0" cellpadding="0" cellspacing="0" width="27%">
<tbody><tr>
<td id="lftColm" width="270">
<div id="lftNav">
<ul>
<li><a href="#" title="Used Computer Equipment">Home</a></li>
<li><a href="#" title="Notebook">Notebooks</a></li>
<li id="uberlink"><a href="#" title="Internet
Security">Prices</a></li>
<li><a href="#" title="Broadband">Services</a></li>
<li><a href="#" title="Domain Hosting">Broadband</a></li>
<li><a href="#" title="Printer">Contakt</a></li>
<li><a href="#" title="Web Hosting">Links</a></li>
<li><a href="#" title="Anti Virus Software">Anti Virus
Software</a></li>
</ul>
</div>
</td>
</tbody></table>

</body>

</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Working on mobile css menu with plenty of frustration! 2
How can I get my menu inside of a menu to function properly? 1
Positioning CSS components 1
Horizontal menu bar header 2
How to position the *tooltip* comment on these buttons? 9
Help me sort out this script 1
Help with my responsive home page 2
I need help making a zooming function 11

Members online

Total: 45 (members: 2, guests: 43)
Robots: 194

Forum statistics

Threads
473,763
Messages
2,569,563
Members
45,039
Latest member
CasimiraVa

Latest Threads

Top