Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post

    Simple underline link task?

    Hello

    I am trying to use white text on a black background and wanted to show a link as underlined when the mouse hovered over the link. I am using this in my HTML document:

    Code:
    <style type="text/css">
     A:link {text-decoration: none}
     A:visited {text-decoration: none}
     A:active {text-decoration: none}
     A:hover {text-decoration: underline; color: white;}
     </style>
    The text itself is as follows:
    we can edit it,
    adding <a href="effects.asp">special effects</a>, text, and
    I can't see anything wrong with that, but the text with the link is not visible on the Web page (it is visible if I remove the link).

    I am attaching a little graphic to illustrate what I mean and the page itself is here: http://www.bayingwolf.com/

    Basically, what I would like is normal white text that shows a white underline when the mouse is placed over that white text which is a link.

    Thanks.
    Attached Thumbnails Attached Thumbnails Simple underline link task?-missingtext.jpg  

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,783
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    Your image means nothing to me. Show us your entire code please.

  • #3
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Thanks for your reply, VIPStephan

    This is the paragraph:

    <p>We can ....... or we can edit it, adding <a href="effects.asp">special effects</a>, text, and sound to make your movie catch the eye.
    </p>
    In the same HTML doc I have:

    Code:
    <style type="text/css">
     A:link {text-decoration: none}
     A:visited {text-decoration: none}
     A:active {text-decoration: none}
     A:hover {text-decoration: underline; color: white;}
     </style>
    There is also a stylesheet which I am attaching and the HTML code (less meta tags, footers, etc) for that page is this:

    Code:
    <!DOCTYPE html>
    
    <html lang="en">
    
    <head>
          <script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
    
    
    
    <style type="text/css">
     A:link {text-decoration: none}
     A:visited {text-decoration: none}
     A:active {text-decoration: none}
     A:hover {text-decoration: underline; color: white;}
     </style>
    
    </head>
    
    <body>
    
    <!--#include file ="myDate.asp"-->
    
      <div id="main">
         <header>
           <div id="banner">
    	   <div id="welcome">
    			<img src="images/wolf_howling2.jpg" width="85" height="85" alt="logo">
    		<h1>bayingWolf <span>Productions</span></h1>
                            </div><!--close welcome-->
    	         <div id="welcome_slogan">
    	    
    	    </div><!--close welcome_slogan-->			
    	  </div><!--close banner-->
    		
    	</header>
    
    
    
    	<nav>
    	  <div id="menubar">
            <ul id="nav">
              <li class="current"><a href="index.asp">Home</a></li>
              <li><a href="ourwork.asp">Our Work</a></li>
              <li><a href="testimonials.asp">Testimonials</a></li>
              <li><a href="effects.asp">Effects</a></li>
              <li><a href="contact.asp">Contact Us</a></li>
            </ul>
          </div><!--close menubar-->	
        </nav>	
        
    	<div id="site_content">	
    
          <div class="slideshow">
    	    <ul class="slideshow">
           <li class="show"><img width="900" height="250" src="images/home_1.jpg" alt="main image"/></li>
             
            </ul> 
    	  </div>
    	
    	
    	  <div id="content">
            <div class="content_item">
    		  <h1>Welcome to bayingwolf Productions</h1> 
    
    <p><h2>Header here</h2></p>
              
    <p>We can etc or we can edit it, adding <a href="effects.asp">special effects</a>, text, and sound to make your movie catch the eye.
    </p>   		
    		  
    		  <div class="content_imagetext">
    		   
    <div class="content_image">
     <object type="text/html" data="http://www.youtube.com/embed/lCeVwRm5bUs?rel=0" width="280" height="240">
     </object>
    </div>
    
    
    
        
    		    <p>Text </p>
    		  </div><!--close content_imagetext-->
    		  
    		  <div class="content_container">
    		    <p>Text<p>
    		  	<div class="button_small">
    		      <a href="#">Read more</a>
    		    </div><!--close button_small-->
    		  </div><!--close content_container-->
              <div class="content_container">
    		    <p>Text</p>          
    		  	<div class="button_small">
    		      <a href="#">Read more</a>
    		    </div><!--close button_small-->		  
    		  </div><!--close content_container-->		
              <div class="content_container">
    		    <p>Text</p>          
    		  	<div class="button_small">
    		      <a href="#">Read more</a>
    		    </div><!--close button_small-->		  
    		  </div><!--close content_container-->	
    		  
    		</div><!--close content_item-->
          </div><!--close content-->   
    	</div><!--close site_content-->  	
      </div><!--close main-->
      
        
      <!-- javascript at the bottom for fast page loading -->
      <script type="text/javascript" src="js/jquery.js"></script>
       
    </body>
    </html>
    Thank you.
    Attached Files Attached Files

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello SteveH,
    There's a couple things happening here. First of all, you are not specific enough in targeting the white anchor in your .content p because this bit of CSS is styling it as well.

    See specificity here.

    The easiest way to fix this would be to give the anchors in your text some CSS that would more accurately target them. Try making your CSS look like this:
    Code:
    #content p a:link,
    #content p a:visited {
    color: #fff;
    text-decoration: none;
    }
    #content p a:hover,
    #content p a:active {text-decoration: underline;}
    ------------

    Another thing I noticed is the link attributes are presented in the wrong order. It should be more like this:
    link, visited, hover, active
    A good way to remember that is the LoVeHAte rule.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    SteveH (11-10-2013)

  • #5
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello Excavator

    Wow! Many thanks for that - it works (of course!).

    I would never have thought specificity was responsible - I was just perplexed as to why the text didn't appear.

    I have saved the link you kindly posted and will attempt to be a bit more careful in future.

    Many thanks again.

    Steve


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •