PDA

View Full Version : Removing Underline from Text on Hyperlinked Div


Crumpy1
04-10-2013, 05:22 PM
Hi,

I have turned my header div into a link using the code below.

I have styled this using CSS3 to speed up load times and improve indexing etc instead of using an image.

<a href="../index.php"> <div id="header">
<div id="header_name">
<p>Company Name</p>
<p class="headerSlogan">&quot;Slogan</p>

</div><!--end of header_name div -->

<div id="header_logo"><img src="../Assets/Images/Logos/Logo.gif" width="200" height="200" alt="Logo" /></div>

<!--end of header_logo div -->
</div> </a><!--end of header div -->


I am trying to remove the purple hyperlink line from under my slogan in the header_name div but i am unsure what the correct CSS rule is to do this.

Can anyone help me?

Cheers

gentleone
04-10-2013, 10:23 PM
This:

a { text-decoration: none }

But that removes the underline on all your links. If you don't want that you give the anchor tag a class, or it might even better to get rid of <div id="header"> and use the anchor for that.

<a href="../index.php" id="header">
header content
</a>


#header {
text-decoration: none;
display: block;
/* and the rest of the styles
you had on header div */
}

Also ask yourself if you really need that div around your logo image. You can set an image also to display block in your CSS and position it like you would position a div.

Crumpy1
04-11-2013, 10:36 AM
Hi gentleone

Thanks for the fix, i originally created a class called .noDeco to hide link lines but this did not work correctly in Safari, i amended the class add block to the rule and it now works perfectly in all browsers.

Cheers

gentleone
04-11-2013, 11:19 AM
good stuff, but I forgot to mention that wrapping elements in an anchor tag is only valid HTML if you have a HTML5 doctype.