Thu, 2007-08-09 12:09
Very new at this, self taught:
I created a nav bar. The objective is a different color bar on mouse over. The result is at http://www.bdmcdaytona.com/subsite/
The problem is, when I get the look I want, as showing on the bottom two buttons, a click on the button goes no where except to another instance of the page. The top two buttons work but don't look right.
The only difference is the use of # in front of the reference.
Here is the code on the page:
- UniqueCraftique.com
- Raging Gator.com
- Steve Burdette.com
- Condo for Sale
Here is the css:
body {background-image: url('images/water.jpg'); background-repeat: repeat; margin-top: 0; margin-left: auto; margin-right: auto; text-align:center}
h1 {font-size:11pt; font-family: Arial; font-weight: Bold; color:black; margin-top:25px; margin-bottom:0;}
h2 {font-size:11pt; font-family: Arial; font-weight: bold; color:#980400; margin-top:15px;}
h3 {font-size:11pt; font-family: Arial; font-weight: bold; color:#00FF00; margin-top:0px; margin-bottom:0px; margin-left:10px; margin-right:10px;}
h4 {font-size:8pt; font-family: Arial; font-weight: normal; color:#ffffff; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px;}
p {font-family:arial; font-size:10pt; color:#C0C0C0; margin-top:0; margin-bottom:0}
ul a:link, ul a:visited ul a:hover, ul a:active{
text-decoration: none;
padding: 2px 10px;
display:block;
}
ul{
list-style-type: none;
margin:5px;
padding:2px;
border:1px solid #333;
width:260px;
font: bold 12px 'Lucida Grande',Verdana,sans-serif;
}
li {
background: #DDDDDD;
margin: 0;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #aaa;
border-bottom: 1px solid #666
}
ul a:link {color: red;}
ul a:visited {color: red;}
ul a:hover {color: green; background:#fff;}
ul a:active {color: #333;}
I know its the #. I just don't know how to get the bottom two links to got to their correct reference
Thu, 2007-08-09 12:18
#1
Thu, 2007-08-09 13:15
#2
sorry left off the code
Thu, 2007-08-09 13:52
#3
The # symbol is, in essence,
The # symbol is, in essence, a page link back to itself.
If you change the href value to simply "#" you will see nothing will happen.
Why are you using the # anyway?
Thu, 2007-08-09 14:29
#4
Self taught, looking at an
Self taught, looking at an example that had it, however, when I remove it, the underline for the link returns and only the words are hyperlinked. When # is in the code, the whole box is a link and the underline is removed.
My objective is having the whole box serve as the link, no underline, box color changes on hover.
Thu, 2007-08-09 14:42
#5
Anchors to display:block.
Anchors to display:block.
Thu, 2007-08-09 15:03
#6
Doc type included in code
Doc type included in code above and I did validate
Thu, 2007-08-09 15:24
#7
Not sure what the validator
Not sure what the validator link code is for , but see that you had made anchors display:block, so not sure what the problems is?
Thu, 2007-08-09 18:22
#8
I included the validator to
I included the validator to show I had validated.
It is very strange that a simple # could make such a difference in appearance. I understand what it does relative to the reference in terms of "nofollow" but why it effects the appearance is remains a mystery.
Thu, 2007-08-09 18:59
#9
Although I can't test it, my
Although I can't test it, my best guess is that it has to do with the visited status of the link. Have you tried using #test or some other url so that the link isn't "visited" upon opening the page?
LokiLoks
Thu, 2007-08-09 23:51
#10
Solved:You put me on the
Solved:
You put me on the right track...not the status but a missing comma.
Here's the code I posted, validated...
ul a:link, ul a:visited ul a:hover, ul a:active{
text-decoration: none;
padding: 2px 10px;
display:block;
}
Notice the comma missing after the word "visited" .....put it in, removed all the #'s and it works great. Thanks for the help :thumbsup: