Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Underlined text links

Status
Not open for further replies.
EvertonFC

EvertonFC

Technical User
Nov 24, 2004
107
0
0
GB
Hello

I have the following in my <HEAD> tag:

<style type="test/css">
DIV.Abstract{text-align:justify;}
h6{font-size:10pt;}
A:link{text-decoration:none;}
A:visited{text-decoration:none;}
A:hover{text-decoration:underline;color:#111111;}
A:active{text-decoration:none;}
</style>

Underneath this, in <BODY>, I have the following:

<TD><DIV><h6>
Alan<br>
Bob<br>
Colin
<br></h6><DIV></TD>

How do I go about applying these:

A:link{text-decoration:none;}
A:visited{text-decoration:none;}
A:hover{text-decoration:underline;color:#111111;}
A:active{text-decoration:none;}

so that they work in the list:

Alan<br>
Bob<br>
Colin<br>

Many thanks

EvertonFC

 
Sort by date Sort by votes
To make it work across all browsers, you need to wrap the lines in <a href> tags.
Code: 
<a href="[URL unfurl="true"]www.google.com">Alan</a><br>[/URL]
<a href="[URL unfurl="true"]www.google.co.uk">Bob</a><br>[/URL]
<a href="www.google.com.au">Colin</a><br>
If you only want to underline the text that appears (and have no link associated) then you can use this CSS:
Code: 
td div h6 {text-decoration:underline;}
Note that you will not get the underline to appear only on hover using this technique (without <a href> tags).

Good luck,
Jeff

[tt]Jeff's Page @ Code Couch
[/tt]

What is Javascript? FAQ216-6094
 
Upvote 0 Downvote
Hello Jeff

Thanks for your reply.

I'm working on the links right now and all seems to be fine, but the CSS part is not working.

What I have in the <HEAD> here:

<style type="test/css">
DIV.Abstract{text-align:justify;}
h6{font-size:10pt;}

works in the table which I have in the <BODY>. That is, the text, which is a list of names:

Alan<br>
Bob<br>
Colin<br>

is set at 10pt (h6) as indicated above. It is against these names that I have started to add the links - as you suggested. But the underline link appearing in a certain colour when the mosue 'hoovers' doesn't appear.

I have these:

A:link{text-decoration:none;}
A:visited{text-decoration:none;}
A:hover{text-decoration:underline;color:#111111;}
A:active{text-decoration:none;}

in the <HEAD>, but nothing to relate to them in the <BODY>. I cannot use your td div h6 {text-decoration:underline;}
because there is a header in there which would be reduced to <h6> which I do not want.

Cheers



 
Upvote 0 Downvote
I have started to add the links
Click to expand...

I have these ... in the <HEAD>, but nothing to relate to them in the <BODY>
Click to expand...

Well - which is it?

You say that you're adding links in, but then say you've no links. Why don't you just show us the code, with links, so we can stop guessing and see what is actually happening?

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Which part of Jeff's message did you not read? About how to put links on your website or something else? What seems to be troubling you in this easy task. Once again, your style in the head says that all links will behave like that -- no underline by default and then change colour and get underline on hover. So as soon as you put links on the page, they will behave that way. Are you having trouble putting links on the page? Even after Jeff showed you how?
 
Upvote 0 Downvote
Here's what I have:

<head>
<style type="text/css">
body {background-color: #E0E0E0}
</style>

<style type="test/css">
DIV.Abstract {text-align: justify;}
h6 {font-size: 10pt; }
A:link {text-decoration: none; }
A:visited {text-decoration: none; }
A:hover {text-decoration: underline; color: #0FDDAF; }
A:active {text-decoration: none; }
</style>
</head>


<TD WIDTH=25% BGCOLOR="FFFFFF"><CENTER><DIV style="border:1px solid navy; font-family:verdana; color: navy; font-weight: bold"><h5>Names</h5>

</CENTER>

<h6>
<a href="<a href="<a href="</h6>

</DIV></CENTER></TD>
</BODY>

</html>
 
Upvote 0 Downvote
Surprisingly it's not the many missing tags or other errors on that page that's causing the problem, nor is it that you've written CSS for the A element and applied it to <a> tags, it's this:
Code: 
<style type="[red]test[/red]/css">
change it to [tt]text/css[/tt] and it works. I'd still strongly suggest you get your page to validate though.

You'll also save yourself a world of pain one day if you get into the habit of using a single upper/lower case convention for HTML tags and stick to it. Lower case is probably a better habit to get into if you want to go to XHTML some day.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
And here is the same page, written a little differently using CSS. This might give you some ideas as to how to proceed (once you have the right type set up for your CSS)...
Code: 
<html>
<head>
<style type="text/css">
body {
  background-color: #e0e0e0;
  font-family:verdana;
}
div.nav {
  border:1px solid navy;
  color:navy;
  font-weight:bold;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}
h6 { font-size: 10pt;}
a:link, a:visited, a:hover, a:active {text-decoration: none; }
a:hover {
  text-decoration: underline;
  color: #0fddaf;
}
</style>
</head>
<body>
<center>
	<div class="nav">
		<h5>Names</h5>
		<h6>
			<a href="[URL unfurl="true"]http://alan.html">Alan</a><br>[/URL]
			<a href="[URL unfurl="true"]http://bob.html">Bob</a><br>[/URL]
			<a href="[URL unfurl="true"]http://colin.html">Colin</a><br>[/URL]
		</h6>
	</div>
</center>
</body>
</html>

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch
[/tt]

What is Javascript? FAQ216-6094
 
Upvote 0 Downvote
Hello Chris

Thanks for noticing that.

It works, as you say, except for the first link.

Thanks again.

EvertonFC

 
Upvote 0 Downvote
It looks very professional, BabyJeff. I'll try to incorporate it in my page. It looks impressive.

Thanks

EvertonFC
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
78
jjgupta915
jjgupta915
coldbohemia
  • Locked
  • Question
I'm inserting a text file into a we
Replies
2
Views
63
coldbohemia
coldbohemia
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
87
ChrisHirst
ChrisHirst
peterd51
  • Locked
  • Question
HTML External Links Fail
Replies
15
Views
118
peterd51
peterd51
geneg28
  • Locked
  • Question
NEED HELP WITH CREATING LINKS
Replies
6
Views
76
geneg28
geneg28

Part and Inventory Search

Sponsor

Back
Top