#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Posts
    9
    Rep Power
    0

    Trying to make a clickable box with non-underlined text


    I'm trying to make a small box that is entirely clickable with text inside that is not underlined. Could someone explain to me why this code does not work, and what I need to do to fix it?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    	<title></title>
    	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    	<style type="text/css">
    		* {
    			margin: 0;
    			padding: 0;
    		}
    		
    		body {
    			font-family: helvetica;
    			padding: 30px;
    		}
    		
    		.box {
    			width: 250px;
    			height: 75px;
    			padding: 40px 10px 10px 25px;
    			background: #FFCE4E url('images/gradient_bg.jpg') repeat-x;
    			border-radius: 5px;
    			border: 1px solid #E8A935;
    		}
    		
    		.box h3 {
    			font-size: 19px;
    			color: #333;
    			padding-bottom: 5px;
    		}
    		
    		.box p {
    			font-size: 14px;
    			color: #CC0000;
    			font-style: italic;
    		}
    		
    		a .box {
    			text-decoration: none;
    		}
    	</style>
    </head>
    <body>
    	<a href="#">
    	    <div class="box">
    	        <h3>Main text goes right here.</h3>
    	        <p>Smaller italicized text goes here.</p>
    	    </div>
    	</a>
    </body>
    </html>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    129
    Rep Power
    16
    Try putting the <a> tag inside of the div. <a> is an inline element and <div> is a block element.

    Then in your css do

    .box a {
    display: block;
    width: 100%;
    height: 100%;
    }

    That should do the trick
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    721
    Rep Power
    446
    text-decoration is being applied to the a, not the div, so removing the text decoration isn't going to have an effect. If you add a class to the a, you should be able to remove it, i.e. <a class="boxHolder"> .boxHolder {text-decoration: none}
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Posts
    9
    Rep Power
    0
    Thanks very much.

IMN logo majestic logo threadwatch logo seochat tools logo