SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,921
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Creating Button out of Link

    Need some help refactoring here...

    Currently I have a hyperlink that Paul O' helped me style into a really cool button that looks like it uses JavaScript.

    Here is my HTML code...
    HTML Code:
    <ul class="button2">
    	<li>
    		<a class="testButton" href="' . BASE_URL . 'members/create_account.php">Create Account</a>
    	</li>
    </ul>

    Here is part of my CSS...
    Code CSS:
    .button,
    .button2 a{
    	border: 1px solid #326985;
    	height: 29px;
    	line-height: 27px;
    	padding: 0 2em;
    	width: auto;
    	overflow: visible;
    	background: #3181bc url(/buttons/buttonGradientBlue.gif) repeat-x 0 0;
    	color: #FFF;
    	font-size: 12px;
    	text-align: center;
    	-webkit-border-radius: 3px;
    	-moz-border-radius: 3px;
    	border-radius: 3px;
    	margin: 2em 0 1em 0;
    	display: block;
    	text-decoration: none;
    }
     
    .button2 a{
    	margin-top: -5px;			/* NEW */
    	height: 27px;
    }
     
    .button:hover,
    .button2 a:hover{
    	background-position: 0 -27px;
    }

    I am trying to eliminate the UL and LI because in most cases they are unnecessary.

    Is it possible to add an ID or CLASS to my ANCHOR element and use the same styles above, or do I need a "parent" <div> to wrap the <a> and thus apply the styles to create a button?

    Thanks,


    Debbie

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Yep. Looks like it. You can do what I just did and test it.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>{ visibility: inherit; } Testing</title>
    <style type="text/css">
    <!--
    a {
    border: 1px solid #326985;
    height: 29px;
    line-height: 27px;
    padding: 0 2em;
    width: auto;
    overflow: visible;
    background: #3181bc url(/buttons/buttonGradientBlue.gif) repeat-x 0 0;
    color: #FFF;
    font-size: 12px;
    text-align: center;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin: 2em 0 1em 0;
    display: block;
    text-decoration: none;
    margin-top: -5px; /* NEW */
    height: 27px;
    }
    a:hover{
    background-position: 0 -27px;
    }
    -->
    </style>
    </head>
    <body>

    <a href="' . BASE_URL . 'members/create_account.php">Create Account</a>

    </ul>
    </body>
    </html>

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,921
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Eric,

    When I tried your code, the button spans the entire width of my screen.

    I tried something similar to your code, except I had this...
    HTML Code:
    <a class="testButton" href="' . BASE_URL . 'members/create_account.php">Create Account</a>
    ...and I have the same issue?!


    Why didn't that happen when I had the styles tied to the <ul> ??


    Debbie

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Hi. I imagine the ul had a width which contained the button. You could give the anchor a width. Or float it instead. Or give it display inline block. All inplace or addition to display block. Because its display block it will span full width.

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,921
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Hi. I imagine the ul had a width which contained the button. You could give the anchor a width. Or float it instead. Or give it display inline block. All inplace or addition to display block. Because its display block it will span full width.
    Yeah, I just caught that myself.

    Thanks,


    Debbie


Bookmarks

Posting Permissions

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