CSS Forum

**boxiom** · 04-16-2009, 05:11 PM

Here is what I have:

here is what I want, when you move the mouse over one of the links:

here is my code/css:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pure Css</title>
<style type="text/css">
<!--


#header {
    position:absolute;
    left:256px;
    top:0px;
    width:512px;
    height:125px;
    z-index:1;
    background-image: url(header.jpg);
}
#BGmiddle {
    position:absolute;
    left:256px;
    top:125px;
    width:512px;
    z-index:2;
    background-color: #000000;
    height: 900px;
}
body {
    background-color: #333333;
}
#navtext {
    position:absolute;
    left:256px;
    top:125px;
    width:512px;
    height:20px;
    z-index:3;
}
.style1 {
    color: #FFFFFF;
    font-size: 12px;
}
#contentbox1 {
    position:absolute;
    left:325px;
    top:167px;
    width:435px;
    height:0px;
    z-index:4;
}




-->
</style>
</head>

<body>
<div id="header"></div>

<div id="BGmiddle">
  <p class="style1">&nbsp;</p>
  <p align="center" class="style1">    Header 1</p>
  <p align="center" class="style1">If  you already have a form text area field on your page, select it and  then click the Spry button for text areas. If you don't yet have a text  area, click the Spry button for text area and one will be inserted.</p>
  <p align="center" class="style1">Header 2</p>
  <p align="center" class="style1">You can rename the form widget using the Property  inspector instead of the generic name like sprytextarea1. Dreamweaver  adds the widget name with a span element wrapped around the form  element. You should probably leave &quot;spry&quot; in the name if you decide to  change it. This will help you keep from confusing it with the ID and  Label information entered in the Accessibility dialog box. The example  pictured is for a Comments text area, so I renamed the widget  &quot;spry_comment.&quot; Notice that the Required checkbox is automatically  selected on the Property inspector. The graphic is a combined image  showing what Dreamweaver has in Code View and Design View at this  point. (Your Design View may be red.)</p>
  <p align="center" class="style1">Header 3</p>
  <p align="center" class="style1">You can rename the form widget using the Property  inspector instead of the generic name like sprytextarea1. Dreamweaver  adds the widget name with a span element wrapped around the form  element. You should probably leave &quot;spry&quot; in the name if you decide to  change it. This will help you keep from confusing it with the ID and  Label information entered in the Accessibility dialog box. The example  pictured is for a Comments text area, so I renamed the widget  &quot;spry_comment.&quot; Notice that the Required checkbox is automatically  selected on the Property inspector. The graphic is a combined image  showing what Dreamweaver has in Code View and Design View at this  point. (Your Design View may be red.)</p>
</div>

<div class="style1" id="navtext"> 
  <div align="center">home | forums | about me | contact | tutorials</div>
</div>
</body>
</html>

**stevej** · 04-16-2009, 05:50 PM

Use the CSS :hover pseudo class. Example:

Code:

.rollover {
color: #FFF;
}
.rollover a {
color: #FFF;
text-decoration: none;
}
.rollover a:hover {
text-decoration: underline;
}

HTML Code:

<a href="#" class="rollover">Roll over me!</a>

- Steve

**boxiom** · 04-16-2009, 11:10 PM

I coded just the first "home" link and its not working. When I preview the page its already underlined.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pure Css</title>
<style type="text/css">
<!--



.rollover {
color: #FFFFFF;
}
.rollover a {
color: #FFFFFF;
text-decoration: none;
}
.rollover a:hover {
text-decoration: underline;
}


#header {
    position:absolute;
    left:256px;
    top:0px;
    width:512px;
    height:125px;
    z-index:1;
    background-image: url(header.jpg);
}
#BGmiddle {
    position:absolute;
    left:256px;
    top:125px;
    width:512px;
    z-index:2;
    background-color: #000000;
    height: 900px;
}
body {
    background-color: #333333;
}
#navtext {
    position:absolute;
    left:256px;
    top:125px;
    width:512px;
    height:20px;
    z-index:3;
}
.style1 {
    color: #FFFFFF;
    font-size: 12px;
}
#contentbox1 {
    position:absolute;
    left:325px;
    top:167px;
    width:435px;
    height:0px;
    z-index:4;
}




-->
</style>
</head>

<body>




<div id="header"></div>

<div id="BGmiddle">
  <p class="style1">&nbsp;</p>
  <p align="center" class="style1">    Header 1</p>
  <p align="center" class="style1">If  you already have a form text area field on your page, select it and  then click the Spry button for text areas. If you don't yet have a text  area, click the Spry button for text area and one will be inserted.</p>
  <p align="center" class="style1">Header 2</p>
  <p align="center" class="style1">You can rename the form widget using the Property  inspector instead of the generic name like sprytextarea1. Dreamweaver  adds the widget name with a span element wrapped around the form  element. You should probably leave &quot;spry&quot; in the name if you decide to  change it. This will help you keep from confusing it with the ID and  Label information entered in the Accessibility dialog box. The example  pictured is for a Comments text area, so I renamed the widget  &quot;spry_comment.&quot; Notice that the Required checkbox is automatically  selected on the Property inspector. The graphic is a combined image  showing what Dreamweaver has in Code View and Design View at this  point. (Your Design View may be red.)</p>
  <p align="center" class="style1">Header 3</p>
  <p align="center" class="style1">You can rename the form widget using the Property  inspector instead of the generic name like sprytextarea1. Dreamweaver  adds the widget name with a span element wrapped around the form  element. You should probably leave &quot;spry&quot; in the name if you decide to  change it. This will help you keep from confusing it with the ID and  Label information entered in the Accessibility dialog box. The example  pictured is for a Comments text area, so I renamed the widget  &quot;spry_comment.&quot; Notice that the Required checkbox is automatically  selected on the Property inspector. The graphic is a combined image  showing what Dreamweaver has in Code View and Design View at this  point. (Your Design View may be red.)</p>
</div>

<div class="style1" id="navtext"> 
<a href="www.google.com" class="rollover">
  <div align="center">home</a> | forums | about me | contact | tutorials</div>
</div>
</body>
</html>

**Andy Pugh** · 04-17-2009, 12:28 AM

Hi,
instead of applying the style for underlining to each link, I would assign it to your nav text style :

HTML Code:

#navtext a{
   text-decoration:none;
   color:#ffffff
}
#navtext a:hover{
   text-decoration:underline;
}

Then remove the style from your <a>

Cheers,
Andy

**boxiom** · 04-17-2009, 01:01 AM

Awesome works, thanks guys!

**LadynRed** · 04-21-2009, 02:53 PM

Text-decoration underline is the DEFAULT, and you really should NOT be removing the underline in links unless it's in an obvious navigation menu. For accessibility and usability, the underline should be largely left alone so people KNOW that it's a link!

**kcmartz** · 05-06-2009, 04:33 PM

Quote:

Originally Posted by LadynRed

Text-decoration underline is the DEFAULT, and you really should NOT be removing the underline in links unless it's in an obvious navigation menu. For accessibility and usability, the underline should be largely left alone so people KNOW that it's a link!

I completely agree and I ONLY use "text-decoration: none" for the css if it is a menu that highlights over on hover, or if it is a dropdown menu, then "text-decoration: none" is what I use.