SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with button mouseover

    Hi,

    I'm working on a site that will have a vertical main menu made up of chunky different coloured buttons like this:

    http://samcampsall.chrisfulton.co.uk/cornersdemo.html

    This is more or less fine, but if you look at the styling (it's all in that html page at the moment) you'll see that each button has it's own ID, meaning lots of repetitive styling in the final page (there'll be at least five buttons in this menu, each a different colour).

    I tried doing this by creating Classes to style the different coloured buttons but couldn't get it how I wanted. I could set only the text as a link but then the icon (background image) would change before the text as the mouse pointer moved across the div to the text, and this looked a bit rubbish:

    http://samcampsall.chrisfulton.co.uk/corners.html

    Besides, the whole button should be a link, not just the text, and I couldn't get the Classes I created to work when I set the <a> tag outside the <div> tag.

    The question is then, is there a way to get the results of my first link using classes and less styling code?

    Thanks all

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The anchor is an inline element and must be inside the div. Just set it to display:block and then you can style it like you did with the div.

    The code can be reduced in half by using a couple of classes like this:

    Code:
    <!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>Untitled Document</title>
    <style type="text/css">
    a {text-decoration:none;}
    .button{width:178px;height:58px;margin:10px 0}
    .button a {
        display:block;
        width:110px; /* 170 *minus* padding-left */
        height:50px;
        color: #0271B9; /* blue */
        border:4px solid #FCFBA9; /* yellow */
        font-family:Arial;
        font-weight:bold;
        font-size:35px;
        background:url(http://samcampsall.chrisfulton.co.uk/HomeIconswap.png) no-repeat 0 0;
        padding-left:60px; /* 170 *minus* width */
        line-height:50px; /*align text vertically */
        -moz-border-radius-topleft:20px 25px;
        -moz-border-radius-topright:20px 25px;
        -moz-border-radius-bottomright:20px 25px;
        -moz-border-radius-bottomleft:20px 25px;
        border-top-left-radius:20px 25px;
        border-top-right-radius:20px 25px;
        border-bottom-right-radius:20px 25px;
        border-bottom-left-radius:20px 25px;
    }
    .news a{background-image:url(http://samcampsall.chrisfulton.co.uk/NewsIconswap.png);}
    .home a,.home a:visited {color: #0271B9;}
    .home a:hover, .home a:active {color: #00267F;}
    .news a,.news a:visited {color: #8DC542;}
    .news a:hover,.news a:active {color: #63BD63;}
    .button a:hover {background-position:0px -50px;}
    </style>
    </head>
    <body>
    <div class="button home"><a href="cornersdemo.html">Home</a></div>
    <div class="button news"> <a href="cornersdemo.html">News</a></div>
    </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, you know I'm essentially trying to make a living off your code snippets right?!!

    I'm still really getting to grips with things, but I can see how this totally makes sense now - display:block is just what I was missing. I'll have a play with this tomorrow hopefully and post back with the results.

    Much obliged to you sir

  4. #4
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's the work in progress:

    DIAL

    I'm aware the links are broken + the graphic images need serious tidying up! This is just an unfinished mockup but your advice has been put to good use on my buttons

    Thanks so much Paul

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Glad you are making progress


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
  •