PDA

Click to See Complete Forum and Search --> : How to use H1 in link?

haan
12-22-2003, 03:28 AM
In the HTML below I would like to use the H1 for a link with hover effect onmouseOver (as it is done below with class=link1). But I don't know how to to that. Can anyone help?

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<title>Welcome to Adobe GoLive 4</title>
<style type="text/css"> <!--
H1 { color: #4c5ea1; font-size: 32px; font-family: Arial; text-align: left; text-decoration: none; }

a.link1:link { color: #4c5ea1; font-size: 32px; font-family: Arial; text-align: left; text-decoration: none; line-height: 32px; }
a.link1:active { color: #4c5ea1; font-size: 32px; font-family: Arial; text-align: left; text-decoration: none; line-height: 32px; }
a.link1:visited { color: #4c5ea1; font-size: 32px; font-family: Arial; text-align: left; text-decoration: none; line-height: 32px; }
a.link1:hover { color: #ffae06; font-size: 32px; font-family: Arial; text-align: left; text-decoration: none; line-height: 32px; }
-->
</style>

</head>
<body>

<a href="(Empty Reference!)" class="link1">Text1 with link</a>
<br><br>

<a href="(Empty Reference!)" class="H1">Text2 with link; this doesn't work! </a>

</body>
</html>
TomDenver
12-22-2003, 05:55 AM
You left out the dot before H1 in your CSS. It should be:

.H1 { color: #4c5ea1; font-size: 32px; font-family: Arial; text-align: left; text-decoration: none; }

You had me confused by using H1 as a class name though, being as it's also an HTML element. Your original CSS is defining the HTML tag <H1>, not the CSS class.
haan
12-22-2003, 06:39 AM
Hi Tom,

Yes it is confusing for myself as well. I try to make it more clear. I would like to use the HTML-element H1 defined as a style around a piece of text. That works like show below in "text using H1". But now I would like to add a link to that piece of text with a hover effect so that the text changes color onmouseover (see "Text-link using H1"). But how to add the hover effect?

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<title>Welcome to Adobe GoLive 4</title>
<style type="text/css"> <!--
H1 { color: #4c5ea1; font-size: 32px; font-family: Arial; text-align: left; text-decoration: none; }
-->
</style>

</head>
<body>
<h1>Text using H1</h1>
<br>
<a href=""><h1>Text-link using H1</h1></a>
</body>
</html>
TomDenver
12-22-2003, 08:59 AM
This code works:


<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title></title>
<style type="text/css">
<!--
a { font-size: 32px; font-family: Arial; text-decoration: none; line-height: 32px; color:#00F;}
h1 a { color: #4c5ea1; font-size: 32px; font-family: Arial; text-align: left; text-decoration: none; }
h1 a:hover {text-decoration:underline; color:#F00;}
-->
</style>

</head>
<body>
<h1><a href="#">Text2 with link; this does work!</a></h1>
</body>
</html>


I've edited out unnecessary things, just to keep this simple. You should keep in mind that <h1> is a block element, and it creates line breaks before and after it, like a <div> does.

In your first post, you defined the active, link and visited states of the <a> tag identically. This is not necessary, it's redundant. Assigning the values to just the <a> tag alone will do the work for you, the others inherit their settings from this. You only want to specify those states if they are to be different from the <a> tag, like we are doing with the hover state.

Also, to be nice to Mac users, you should specify more than just Arial for your font. A setting like "font-family: Arial, Helvetica, sans-serif;" is pretty common. Helvetica is a common Mac font I think (I don't use Macs). Doing it this way will tell the browser to use Arial first if the computer has it. If not, use Helvetica. If it has neither, then use a sans serif font, which all computers will have.

Finally, text-align:left is not needed in your <h1> style setting. The default of the page (in this case) is align left, so <h1> will automatically align to the left.