CSS and hyperlinks

John Reynolds · Apr 22, 2005

Trying to find a good example online but can't and was wondering if anyone could help with this real quick. I'm creating a menu list in a frame for a government site I've been asked to redesign and I don't want the hyperlinks to be underlined. I can get that effect if I do this:

<style>
a:link {text-decoration: none}
</style>
</head>
</body bgcolor="#484848">

<p><th><a style="text-decoration: none" href="home.htm" target="main"><font color="#ffffff">Home Page</a></font</th>

But I also want the links to become underlined when hovered over, so I've tried this:

<style>
a:link {text-decoration: none;}
a:hover {text-decoration: underline}
</style>
</head>
</body bgcolor="#484848">

With no change in the actual link (shown below) the links don't become underlined when the mouse is moved over them.

<p><th><a style="text-decoration: none" href="home.htm" target="main"><font color="#ffffff">Home Page</a></font</th>

This is where I'm confused. I couldn't get the underline to disappear from my menu links until I added style="text-decoration: none" to the link itself, so I'm not sure what to do to make the hover/underline work. A few weeks ago I knew how to spell HTML so I've been learning tags, adding frames to this site, and added a watermark using CSS. I just think the menu frame would look more professional without underlined links, but I need some sort of hover effect to make sure your typical government worker (brain-dead) knows they're links.

TIA

digitalwanderer · Apr 22, 2005

Could you just change the text color rather than underline it on a hover? Even monkeys notice color changes.

carpediem · Apr 22, 2005

Example:

Code:

a:active {      
	color: #FF6600; 
	text-decoration: none !important; 
}
a:hover {       
	color: #CC3333; 
	text-decoration: underline !important; 
}
a:link {        
	color: #FF6600;
	text-decoration: none !important;
}
a:visited {     
	color: #FF6600; 
	text-decoration: none !important;	
}

If you're gonna use css, then you should move all styling and layout from the html code to the stylesheet. So using bgcolor in the body, is better to move to the css file.

just define the body tag in the css like this:

Code:

body { 
	background-color: #00FF00;
	font-family: verdana;
	font-size: 10px;
	etc....
}

John Reynolds · Apr 22, 2005

I already have the line a:hover {text-decoration: underline} within the style tags. But it doesn't work, and that's the problem. The style="text-decoration: none" that I'm using within the links themselves as shown is got to be the problem, but without it I can't remove the underlines on the links. Grrrrrrr.

carpediem · Apr 22, 2005

you might have conflicting rules somewhere. The !important property will make sure that it gets chosen if there are conflicts.

Test this code and build from that?

Code:

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
&lt;html>
&lt;head>
&lt;title> New Document &lt;/title>
&lt;style type="text/css">
body { 
   background-color: #FFFFFF; 
   font-family: verdana; 
   font-size: 10px; 
} 

a:active {      
   color: #FF6600; 
   text-decoration: none !important; 
} 
a:hover {        
	color: #FF6600; 
	text-decoration: none !important; 
	border-top-color: #FF6600;
	border-top-style: dotted;
	border-top-width: 1px;
	border-bottom-color: #FF6600;
	border-bottom-style: dotted;
	border-bottom-width: 1px;	
} 
a:link {
	color: #FF6600;
	text-decoration: none !important;
} 
a:visited {
	color: #FF6600;
	text-decoration: none !important;
} 

&lt;/style>
&lt;/head>

&lt;body>
hello &lt;a href="javascript:">there&lt;/a>&lt;/body>
&lt;/html>

John Reynolds · Apr 22, 2005

I've seen these examples online. I'm assuming the tag <style="text/css"> is calling a separate CSS file? Again, I'm a newb with this stuff. Here's the full code for my menu frame:

<html>
<head>
<title>SMSG Acquisitions Library Page</title>
<style>
a:link {text-decoration: none;}
a:hover {text-decoration: underline}
</style>
</head>
<body bgcolor="#484848">

<br>
<b><center>
<p><th><a style="text-decoration: none" href="home.htm" target="main"><font color="#ffffff">Home Page</a></font</th>

<p><th><a style="text-decoration: none" href="addr.htm" target="main"><font color="#ffffff">Contractors' Addresses</a></font></th>

<p><th><a style="text-decoration: none" href="basic.htm" target="main"><font color="#ffffff">Basic Contracts</a></font></th>

<p><th><a style="text-decoration: none" href="orders.htm" target="main"><font color="#ffffff">Awarded Orders</a></font></th>

<p><th><a style="text-decoration: none" href="orfp.htm" target="main"><font color="#ffffff">Pre-Award Phase Programs</a></font></th>

<p><th><a style="text-decoration: none" href="fpr.htm" target="main"><font color="#ffffff">Future/Potential Requirements</a></font></th>

color="#ffffff">Contacts List</a></font></th>
</b></center>

</body>
</html>

carpediem · Apr 22, 2005

John Reynolds said:
I've seen these examples online. I'm assuming the tag <style="text/css"> is calling a separate CSS file? Again, I'm a newb with this stuff.

No, as you can see the css is in the html code there, not an external css file.

If you're gonna do many sub pages, linking to an external css file is of course much better, since you would only have 1 file to edit when you make changes.

NocturnDragon · Apr 22, 2005

Another way would be:

Code:

a:link{
	color: #000;
	text-decoration: none;
}

a:visited {
	color: #FF0;
	text-decoration: none;
}
a:hover,
a:active {
	color: #F00;
	text-decoration: none;
	border-bottom: 1px solid #B2B2B2;
}

You have a lot more control on the underline style with the border-bottom property.

carpediem · Apr 22, 2005

You don't define the style on two places. When you define a:hover on 1 place (in the stylesheet data), all links will inherit those properties. Changing them in the html code will take presedence over what you have in the style sheet, unless you have defined it in the stylesheet to "!important" of course.

Sorry for my crappy english

carpediem · Apr 22, 2005

Using your example above I would probably do it like this. I usually go for list items when it comes to building menus, because it's quite easy to get good structure that way. If you want another menu item, just add a new <li> tag with the link and name inside.

Code:

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
&lt;html>
&lt;head>
&lt;title>SMSG Acquisitions Library Page&lt;/title> 
&lt;style type="text/css">
html, body { 
	color: #FFFFFF;
	background-color: #484848; 
	font-family: verdana; 
	font-size: 10px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
} 

a:active {      
   color: #FF6600; 
   text-decoration: none !important;
} 
a:hover {        
	color: #FF6600; 
	text-decoration: none !important; 
	border-top-color: #FFCC00;
	border-top-style: dotted;
	border-top-width: 1px;
	border-bottom-color: #FFCC00;
	border-bottom-style: dotted;
	border-bottom-width: 1px;	
} 
a:link {
	color: #FF6600;
	text-decoration: none !important;
} 
a:visited {
	color: #FF6600;
	text-decoration: none !important;
} 
ul {
	margin: 10px 10px 10px 10px; 
	padding: 0px 0px 10px 0px;
}
li {
	list-style-type: none;
	margin-bottom: 6px;
	
}
&lt;/style>
&lt;/head>

&lt;body>
	&lt;div>
		&lt;ul>
			&lt;li>&lt;a href="home.htm" target="main">Home Page&lt;/a>&lt;/li>
			&lt;li>&lt;a href="addr.htm" target="main">Contractors' Addresses&lt;/a>&lt;/li>
			&lt;li>&lt;a href="basic.htm" target="main">Basic Contracts&lt;/a>&lt;/li>
			&lt;li>&lt;a href="orders.htm" target="main">Awarded Orders&lt;/a>&lt;/li>
			&lt;li>&lt;a href="orfp.htm" target="main">Pre-Award Phase Programs&lt;/a>&lt;/li>
			&lt;li>&lt;a href="fpr.htm" target="main">Future/Potential Requirements&lt;/a>&lt;/li>
		&lt;/ul>
	&lt;/div>
&lt;/body>
&lt;/html>

John Reynolds · Apr 22, 2005

OK, changed the first style tag to read <style type="text/css">

That did nothing for my links, at least writtten like they are above. Remove the style="text-decoration: none" from between a and href and the link works but is underlined (which isn't what I want). Change the line to read <a href="/css/home.htm" target="main"><font color="#ffffff">Home Page</a></font> and it works but the links don't work (bring up a blank page because it can't find the home.htm file).

Me confused.

carpediem · Apr 22, 2005

John Reynolds said:
OK, changed the first style tag to read <style type="text/css">

That did nothing for my links, at least writtten like they are above. Remove the style="text-decoration: none" from between a and href and the link works but is underlined (which isn't what I want). Change the line to read <font color="#ffffff">Home Page</font> and it works but the links don't work (bring up a blank page because it can't find the home.htm file).

Me confused.

Use my code in the post above and work from there

Edit: fixed an small issue in the css.

digitalwanderer · Apr 22, 2005

John Reynolds said:
OK, changed the first style tag to read <style type="text/css">

That did nothing for my links, at least writtten like they are above. Remove the style="text-decoration: none" from between a and href and the link works but is underlined (which isn't what I want). Change the line to read <a href="/css/home.htm" target="main"><font color="#ffffff">Home Page</a></font> and it works but the links don't work (bring up a blank page because it can't find the home.htm file).

Me confused.

For some reason this made me smile, laugh, and generally feel a bit better about life.

Even John Reynolds gets confuzled sometimes.

John Reynolds · Apr 22, 2005

OK, it's working using your code. My menu.htm file now looks like this:

<html>
<head>
<title>SMSG Acquisitions Library Page</title>
<style type="text/css">
body {
color: #FFFFFF;
background-color: #484848;
}

a:active {
color: #FF6600;
text-decoration: none !important;
}

a:hover {
color: #FF6600;
text-decoration: none !important;
border-top-color: #FFCC00;
border-top-style: dotted;
border-top-width: 1px;
border-bottom-color: #FFCC00;
border-bottom-style: dotted;
border-bottom-width: 1px;
}
a:link {
color: #FF6600;
text-decoration: none !important;
}
a:visited {
color: #FF6600;
text-decoration: none !important;
border-top-width: 1px;
}
</style>
</head>
<body>

<br>
<b><center>
<p><th><a href="home.htm" target="main">TSA II Home Page</a></th>

<p><th><a href="addr.htm" target="main">Contractors' Addresses</a></th>

<p><th><a href="basic.htm" target="main">Basic Contracts</a></th>

<p><th><a href="orders.htm" target="main">Awarded Orders</a></th>

<p><th><a href="orfp.htm" target="main">Pre-Award Phase Programs</a></th>

<p><th><a href="fpr.htm" target="main">Future/Potential Requirements</a></th>

<p><th><a href="arch.htm" target="main">Document Archive</a></th>

<p><th><a href="contacts.htm" target="main">Contacts List</a></th>
</b></center>

</body>
</html>

Two problems: the menu links are orange, and I need them to be white, and I don't want the dotted lines above or below. . .just a solid underline beneath when a person hovers their mouse over the link. I'm making a backup of this file and then I'm going to try editing the CSS to make these changes myself.

John Reynolds · Apr 22, 2005

Got it. I think the lack of the a:visited section was screwing me up.

Thanks much for your help, Carp!!

carpediem · Apr 22, 2005

It will be much easier to maintain if you use the <ul><li> tags like in my example. There is no need to have paragraph tags <.p> and <th> in there

+ you are using alot of start <.p> tags in there, but no ending ones, so the html is not correct

All the style code is in the stylesheet, so if you want white links/hover, just edit the color: #xxxxx to #FFFFFF in the sections you want them white. put #00000 as color in the body css section though, if you want standard text to be black.

Zaphod · Apr 22, 2005

Do yourself a favor and follow carpediem's advise on keeping the structure of your documents separate from any layout and styling. You can then redesign the whole thing by changing one single file later. Check out the CSS Zen garden for examples and inspiration.

This is a good (and funny) presentation outlining the basic principles of a sound design using CSS.

John Reynolds · Apr 22, 2005

I don't have that many separate pages to make changes to (12-13).

For the curious, here's my final menu file:

<html>
<head>
<title>SMSG Acquisitions Library Page</title>
<style>
html, body {
color: #FFFFFF;
background-color: #484848;
}

a:active {
color: #FFFFFF;
text-decoration: none
}

a:hover {
color: #FFFFFF;
text-decoration: underline;
border-bottom-style: solid;
border-bottom-width: 1px;
}

a:link {
color: #FFFFFF:
text-decoration: none;
}

a:visited {
color: #FFFFFF;
text-decoration: none
}
</style>
</head>
<body>

<br>
<b><center>
<p><a href="home.htm" target="main">TSA II Home Page</a>

<p><a href="addr.htm" target="main">Contractors' Addresses</a>

<p><a href="basic.htm" target="main">Basic Contracts</a>

<p><a href="orders.htm" target="main">Awarded Orders</a>

<p><a href="orfp.htm" target="main">Pre-Award Phase Programs</a>

<p><a href="fpr.htm" target="main">Future/Potential Requirements</a>

<p><a href="arch.htm" target="main">Document Archive</a>

<p><a href="contacts.htm" target="main">Contacts List</a>
</b></center>

</body>
</html>

The program manager for this site is loving what I've done and I now get to show the site off first thing Monday morning to all the division chiefs and the wing commander (a colonel). Oh, lucky me.

Edit: Here are the pages I'm updating: http://www.pixs.wpafb.af.mil/pixs/pixslibr/tsat/tsat.htm

So a few frames, some graphics, a little CSS, and you can see why the engineer I'm doing this for loves the changes. The link will stay the same when the updates pages get FTP'd up next week.

Zaphod · Apr 22, 2005

Please. At least validate the HTML before you make it 'final'. Remove the 'B' tag as it's an inline element that you're using outside several block elements (the paragraphs). Add the proper font-weight to the CSS instead. And as carpediem mentioned: That menu really is a list, structurally speaking, so why not code it as such.

And pretty please with sugar on top dont mention frames as if it's a good thing. There is absolutely no reason to use them and uncountable reasons not to. I'm guessing you won't have the time to do any thorough compatability testing on this, so keep it valid and keep it simple. I'd suggest starting with the code you were given above, then floting the menu DIV to the left and adding a second DIV for content to begin with.

Code:

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
&lt;html>
&lt;head>
&lt;title>SMSG Acquisitions Library Page&lt;/title>
&lt;style type="text/css">
html,body {
   color: #FFFFFF;
   background-color: #484848;
   font-family: verdana, sans-serif;
   font-size: 10pt;
}

a {
   color: #FFFFFF !important;
   text-decoration: none;
   font-weight: bold;
}

a:hover {
   text-decoration: underline !important;
}

ul {
   margin: 10px 10px 10px 10px;
   padding: 0px 0px 0px 0px;
}

li {
   margin: 0px 0px 6px 10px;
   list-style-type: square;
}

div#menu {
   border: 1px dotted white; /* Just to show the DIV */
   float: left;
   width: 200px;
   height: 100%;
}

div#main_content {
   border: 1px dotted white; /* Just to show the DIV */
   padding: 0px 0px 0px 210px;
}
&lt;/style>
&lt;/head>

&lt;body>
   &lt;div id="menu">
      &lt;ul>
         &lt;li>&lt;a href="home.html">Home Page&lt;/a>&lt;/li>
         &lt;li>&lt;a href="addr.html">Contractors' Addresses&lt;/a>&lt;/li>
         &lt;li>&lt;a href="basic.html">Basic Contracts&lt;/a>&lt;/li>
         &lt;li>&lt;a href="orders.html">Awarded Orders&lt;/a>&lt;/li>
         &lt;li>&lt;a href="orfp.html">Pre-Award Phase Programs&lt;/a>&lt;/li>
         &lt;li>&lt;a href="fpr.html">Future/Potential Requirements&lt;/a>&lt;/li>
      &lt;/ul>
   &lt;/div>
   &lt;div id="main_content">
   	&lt;h1>Background&lt;/h1>
	&lt;p>Training Systems Acquisition II (TSA II) is an IDIQ contract for training and training systems. Eleven companies were awarded basic contracts in July 2001 which earns them the right to compete for orders over the next fifteen years (2016). The scope of TSA II encompasses the design, development, installation, test, production, sustainment and disposition of complex aircrew, maintenance, and system specific training systems. This includes training devices, courseware, software, hardware, visual/sensor system databases, and contractor logistics support (CLS). Any questions regarding the use of the TSA II contracts should be directed to the Contracting Officer or Program Manager as appropriate.&lt;/p>
   &lt;/div>
&lt;/body>
&lt;/html>

Zaphod · Apr 29, 2005

John,

I see that you uploded your results, and I must say that it looks good. However: The techincal implementation and code quality leaves a bit to be desired. I was bored, so I took the liberty of spending a couple of minutes reimplementing your design as a standards compliant CSS-based solution for your reference. Hope you don't mind.

Separating all layout and styling from the structural markup, amongst other advantages, makes the code:

*Smaller by 20-40%
*More portable and compatible
*More accessible (mobile devices or reading browsers for the blind, for example)
*Less demanding on the server (fewer file requests)
*Easier to maintain and redesign
*Loved by the search engines that may not index your pages as they are now.

Download the code.

CSS and hyperlinks

John Reynolds

Ecce homo

digitalwanderer

wandering

carpediem

John Reynolds

Ecce homo

carpediem

John Reynolds

Ecce homo

carpediem

NocturnDragon

carpediem

carpediem

John Reynolds

Ecce homo

carpediem

digitalwanderer

wandering

John Reynolds

Ecce homo

John Reynolds

Ecce homo

carpediem

Zaphod

Remember

John Reynolds

Ecce homo

Zaphod

Remember

Zaphod

Remember

Similar threads