Help with button mouseover

HTML & CSS
1

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 :slight_smile:

2

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:


<!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

Paul, you know I’m essentially trying to make a living off your code snippets right?!! :wink:

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 :slight_smile:

4

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 :slight_smile:

Thanks so much Paul :smiley:

5

Glad you are making progress :slight_smile: