Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5

Thread: a fill

  1. #1
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times

    a fill

    ive come across this before. when making a button link actually getting the whole area to click and not just the text. but for some reason the way i resolved it before makes a mess of it this time

    ive played around with it a good bit but came up short so i just stripped it back to the way it was before i tried to fix it with the first method

    Code:
    <!doctype html>
    <html>
    <head> 
    <link rel="stylesheet" href="../css/box.css">
    </head>
    
    <body>
    
    <div class="wrap">
    
    	<div class="nav">
    		<ul>
    		    <li> <a href="#"> Sales </li>
    		    <li> <a href="#"> Servive </li>
    		    <li> <a href="#"> Parts </li>
    		</ul>
    	</div>
    
     </div>
    
    </body>
    
    </html>
    Code:
    .wrap {
    position: relative;
    display: block;
    height: 50px;
    width: 1000px;
    background:-webkit-gradient(linear,left top,left bottom,from(rgb(40,40,40)),to(rgb(90,90,90)));
    background:-moz-linear-gradient(top,rgb(40,40,40),rgb(90,90,90));
    background: -ms-linear-gradient(top,rgb(40,40,40),rgb(90,90,90));
    border-bottom-right-radius: 10px;
    }
    
    ul {
    height: 50px;
    line-height: 50px;
    text-decoration: none;
    list-style-type: none;
    }
    
    a {
    text-decoration: none;
    list-style-type: none;
    }
    
    li {
    margin: 0 auto;
    width: 120px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    background-color: white;
    display: inline-block;
    border-radius: 20px;
    }

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,139
    Member #
    27197
    Liked
    959 times
    You have to set the <a> to display:inline-block, and the width and height to 100%.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    thats what i did first but it went outside the laws of the li :/ and so they ended up on top of each other

  5. #4
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    still stuck here :/

  6. #5
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    can anyone figure this out?


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:41 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com