www.webdeveloper.com
Results 1 to 3 of 3

Thread: I'm a beginner, trying to figure out buttons.

  1. #1
    Join Date
    Apr 2014
    Posts
    14

    I'm a beginner, trying to figure out buttons.

    Well, I've pretty much gotten the basics down, I'm designing my website in Photoshop and then slicing the images. I'm writing all of the code myself (using Dreamweaver, but I'm not using the Design for anything but checking my work) however when it came to roll-over buttons I decided to just use the automated function that comes with Dreamweaver, this inserted some really, really nasty Java-script code into my source.

    My friend was doing web-development in highschool and tells me that the way I'm doing my buttons for my Nav-bar is a piss-poor way to do it. (I have an image for the button, and an Image for the roll-over button. The text is on the Image itself) He's telling me however that I shouldn't do it that way and that I should use CSS to draw the button as a certain size depending on the content that's inside of the button (Text).

    I'm not sure how to go about this, if you'd like to look at my website (First template ever made) you can do so here, please ignore the tossed in Javascript that Dreamweaver entered. My goal is to eventually be able to sell decent templates, but I don't want it to just look good and have poor programming behind it.

    http://Xenon-X.net/

    Thanks in advance for any help.

  2. #2
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,843
    Typically all the "bells and whistles" in deamweaver are pure garbage.
    CSS 2.x/3 has pseudo elements for :hover (mouseover), :focus (kb nav/onclick), :active (kb nav/onclick).
    These work clear back to IE 6/7, and best of all, will work with or without javascript enabled.

    Example:
    Code:
    .test {
        background-image: url(path/to/image/test-default.png);
    }
    .test:hover {
        background-image: url(path/to/image/test-hover.png);
    }
    .test:active,
    .test:focus {
        background-image: url(path/to/image/test-active.png);
    }
    Code:
    <span class="test"></span>

  3. #3
    Join Date
    Oct 2013
    Location
    3rd planet from the sun
    Posts
    177
    Here's an all CSS way of making buttons; no images required
    http://www.cssbuttongenerator.com/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles