www.webdeveloper.com
Results 1 to 4 of 4

Thread: Quick question about hyperlinks

  1. #1
    Join Date
    Jul 2008
    Posts
    16

    Quick question about hyperlinks

    Hey guys,

    I'm trying to figure out how to do something that is probably pretty simple, but I'm not quite sure how to make it work. In the following link, the text that says "1", "2", and "3" is clickable.

    http://thebestinfo.org/test123.html

    What I'd like to do is make the entire red area of each of the 3 parts clickable. For example, the entire top red area should hyperlink to 1.html, the entire middle red area should hyperlink to 2.html, and the entire bottom red area should hyperlink to 3.html.

    Does anyone know what I would have to change to make this work?

    Here is the entire HTML code for that page...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html>
    
    <head>
    	
    	<style type="text/css">
    
            body {
            background: white;
            }
    
            #nav ul {
            list-style: none;
            }
    
            #nav li {
             background: Red;
             width: 50%;
             margin: auto;
             height: 2em;
             text-align: center;
             padding-top: 1em;
            }
    
            #nav li a {
            text-decoration: none;
            color: White;
            }
    
        </style>
    			
    </head>
    	
    <body>
    
    	<div id="nav">
    		
    		<br />
    		
    	 	  <ul>
    	 	  	<li><a href="1.html">1</a></li><br />
    	 	  	<li><a href="2.html">2</a></li><br />
    	 	  	<li><a href="3.html">3</a></li><br />
    	 	  </ul>	
    		  
    	</div>
    		
    </body>
    	
    </html>

    Thanks!

  2. #2
    Join Date
    Feb 2012
    Location
    Bokaro Steel City (Jharkhand), India!
    Posts
    194
    You may use:
    HTML Code:
    #nav li a {
            text-decoration: none;
            color: White;
    
    	display: list-item; /* this creates a block for the list box */
    /* you may also use 'display: block;' to cause the element to generate a block box */
    }
    "It will never rain roses: when we want to have more roses, we must plant more roses." - George Eliot

  3. #3
    Join Date
    Jul 2008
    Posts
    16
    Quote Originally Posted by TheAliveWinner View Post
    You may use:
    HTML Code:
    #nav li a {
            text-decoration: none;
            color: White;
    
    	display: list-item; /* this creates a block for the list box */
    /* you may also use 'display: block;' to cause the element to generate a block box */
    }
    Awesome. Thank you!

  4. #4
    Join Date
    Feb 2012
    Location
    Bokaro Steel City (Jharkhand), India!
    Posts
    194
    Quote Originally Posted by BMAN99 View Post
    Awesome. Thank you!
    You are welcome! B-)
    "It will never rain roses: when we want to have more roses, we must plant more roses." - George Eliot

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles