Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: Buttons

  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Buttons

    Alright I have searched everywhere and cannot find this. First go here:

    http://xio.net78.net/

    Look at the buttons. See that you can edit the text on them, and when you hover your mouse over them they change.

    I can design my own buttons and stuff, but I just need to learn how to do that. Does anyone have a link that teaches how? Thank you.

  • #2
    Regular Coder
    Join Date
    Jul 2010
    Posts
    271
    Thanks
    3
    Thanked 40 Times in 40 Posts
    They are using CSS.
    This is the code that does it.
    Read up on cascading style sheets.
    This is the HTML
    <div id="container">
    <div id="menu">
    <ul>
    <li class="current">
    <a href="index.html"><span>home</span></a>
    </li>

    <li >
    <a href="register.html"><span>register</span></a>
    </li>

    <li >
    <a href="download.html"><span>download</span></a>
    </li>

    <li >
    <a href="support.html"><span>support</span></a>
    </li>

    <!--<li >
    <a href="forum.html"><span>forum</span></a>
    </li>-->
    <li >
    <a href="forum"><span>forum</span></a>
    </li>

    <!--<li class="btn_login">
    <a href="#" id="toggle-login"><span>login</span></a>
    </li>-->
    </ul>
    </div>
    This is the CSS:
    #menu a{position: relative; float: left; display: block; background: url("../images/menuLink.gif") bottom left no-repeat; padding: 6px 0px 0px 0px; height: 25px; text-decoration: none; font-size: 15px; color: #afafaf;}
    #menu span{position: relative; display: block; margin: -6px 5px 0px 5px; padding: 4px 15px 0px 10px; height: 27px; background: url("../images/menuSpan.gif") bottom right;}

    #menu a:hover{background: url("../images/menuLink.gif") top left no-repeat; color: #252525;}
    #menu a:hover span{ background: url("../images/menuSpan.gif") top right;}

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Decker, you do know you can view code of any page you visit. Well html and CSS. Right click ona page and click view source. This is a good way to get ideas and learn from other's coding. Also if you use firefox, download their web tools as add ons...They have lots of good tools for web development to help learn.

  • #4
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Doesn't work. I copied and pasted them codes, and even got the correct images and it doesn't work.

  • #5
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    see teedoff's post. go to that page you linked to and save it to your desktop or somewhere you choose.

    using your fav text editor, remove the page bit by bit until you are only left with the css and the menu you are interested in. See how the css relates to that html code and understand how it works.

    That's the easiest and best way to understand.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #6
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Alright i've got pretty far but there is like a bullet thing beside one of the buttons, I don't know what it is, look:



    Can you tell me how to get rid of that?

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Add list-style:none; to ul and li in CSS

    Off topic: Please follow #2 of http://www.codingforums.com/postguide.htm, regarding thread titles.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Decker (08-26-2010)

  • #8
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Lol it worked, thanks alot.


  •  

    Posting Permissions

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