SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: Buttons

  1. #1
    SitePoint Member
    Join Date
    Jul 2009
    Location
    South Africa
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Buttons

    After using the following element <a href="index.html">Home<a/>

    What element do I use to add a button to this link?

    Your help is appreciated

    Regards

    Paul Oliver

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi Paul. I gather what you want to do is make this link look like a button, which is quite easy. You can use CSS to style the link any way you like, or you can use an image instead. What do you want it to look like?

  3. #3
    SitePoint Member
    Join Date
    Jul 2009
    Location
    South Africa
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph,
    That is exactly it-make the link look like a button. I would like the button to be rectangular.

    Thanx for your help Ralph.

    Regards

    Paul

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    OK, that's easy enough, but it would be handy to know the context. Is this button on its own or in a sentence or ...? What is the surrounding code?

    Basically, you can do something like put padding on the <a>, a background color, a border etc. Very straightforward. Happy to provide an example with more information (or a creen shot etc.)

  5. #5
    SitePoint Member
    Join Date
    Jul 2009
    Location
    South Africa
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph,


    <h4>
    <a href="Home.html">WATERPROOF HOME</a>
    <a href="Systems.html">WATERPROOF SYSTEM</a>
    <a href="Contact.html">WATERPROOF CONTACT</a>
    </h4></br>

    I hope this helps

    Regards

    Paul

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    And are those to be vertical or horizontal? Either way, the markup to use is as follows:

    Code:
    <ul>
        <li><a href="Home.html">WATERPROOF HOME</a></li>
        <li><a href="Systems.html">WATERPROOF SYSTEM</a></li>
        <li><a href="Contact.html">WATERPROOF CONTACT</a></li>
    </ul>
    Here's an example of those links styled as a horizontal menu:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Menu</title>
    	
    <style media="all">
    .menu {list-style: none; margin: 0; padding: 0; overflow: hidden;}
    .menu li {float: left;}
    .menu li + li {border-left: 2px solid #fff;}
    .menu a {display: block; line-height: 2em; padding: 0 30px; background: #e7e7e7; text-decoration: none; color: #30353b;}
    .menu a:hover, .menu a:focus {background: #30353b; color: white;}
    </style>
    	
    </head>
    <body>
    
    <ul class="menu">
    	<li><a href="Home.html">WATERPROOF HOME</a></li>
    	<li><a href="Systems.html">WATERPROOF SYSTEM</a></li>
    	<li><a href="Contact.html">WATERPROOF CONTACT</a></li>
    </ul>
    
    </body>
    </html>
    Paste that code into a .html file and open it in your browser to see the results. Hope that helps.

  7. #7
    SitePoint Member
    Join Date
    Jul 2009
    Location
    South Africa
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph,

    Thanks for the help. I resolved this issue I place this element in the wrong position <BUTTON TYPE="button"> </BUTTON> this must be in an inline position.

    Take care

    Paul

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Buttons are not the best element for this. Do have a look at the code above, as this is the preferred code for a menu.

  9. #9
    SitePoint Member
    Join Date
    Jul 2009
    Location
    South Africa
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thankx Ralph I'll test the code

    Thanks for your help

    Regards

    Paul


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
  •