10 replies [Last post]
DaytonaSteve
Offline
Regular
Last seen: 12 years 19 weeks ago
Timezone: GMT-4
Joined: 2007-05-31
Posts: 12
Points: 0

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:



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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 25 min 53 sec ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Code

Verschwindende wrote:
  • CSS doesn't make pies

DaytonaSteve
Offline
Regular
Last seen: 12 years 19 weeks ago
Timezone: GMT-4
Joined: 2007-05-31
Posts: 12
Points: 0

sorry left off the code

sorry left off the code tag



thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 25 min 53 sec ago
Joined: 2004-06-30
Posts: 9679
Points: 815

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?

Verschwindende wrote:
  • CSS doesn't make pies

DaytonaSteve
Offline
Regular
Last seen: 12 years 19 weeks ago
Timezone: GMT-4
Joined: 2007-05-31
Posts: 12
Points: 0

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Anchors to display:block.

Anchors to display:block.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

DaytonaSteve
Offline
Regular
Last seen: 12 years 19 weeks ago
Timezone: GMT-4
Joined: 2007-05-31
Posts: 12
Points: 0

Doc type included in code

Doc type included in code above and I did validate

Valid CSS!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

DaytonaSteve
Offline
Regular
Last seen: 12 years 19 weeks ago
Timezone: GMT-4
Joined: 2007-05-31
Posts: 12
Points: 0

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.

lokiloks
lokiloks's picture
Offline
Enthusiast
Albuquerque, NM
Last seen: 11 years 30 weeks ago
Albuquerque, NM
Timezone: GMT-6
Joined: 2007-05-16
Posts: 145
Points: 24

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

DaytonaSteve
Offline
Regular
Last seen: 12 years 19 weeks ago
Timezone: GMT-4
Joined: 2007-05-31
Posts: 12
Points: 0

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: