471,337 Members | 985 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,337 software developers and data experts.

Would like sanity check on CSS rollover buttons and implementation

Hello CSS and StyleSheet members,

I have decided to move away from Dreamweaver javascript rollover
buttons, in favor of
a CSS type rollover button. (hope that is ok).

I plan to use PHP to include the page with the rollover buttons as a
php include in a
div for navigation buttons (left side of web page). I have cobbled
together some code complements of http://sophie-g.net/jobs/css/e_buttons.htm.

There is a class (button) with some refs to the <atags, etc.

I would like to use the same class for each button - i will have 9
total.
I have added the background images via the id="home", id="findUs", and
setting the
background url to the appropriate gif file.

The code is below: This is just starter code. I would like to check
with you members,
to see if I have the correct idea here (I mean use an id tag for each
different type of button (really gif images) and using the same
"button" class throughout. My both button states are on a single gif
file.

CODE:
<html>
<head>
<style type="text/css">

a.button, a.buttonDis {
display: block;
background-color: transparent;
/*background-image: url(images/gifs/DualButtonFindUs.gif);*/
background-repeat: no-repeat;
width: 165px;
height: 29px;
margin: 5px auto;
padding: 5px 0 0 0;
/*text-align: center;
font-family: Helvetica, Calibri, Arial, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;*/
}
a.button:link, a.button:visited {
/*color: #002577;*/
}

a.button:hover, a.button:active {
background-position: 0 -39px;
/*color: #FF7200;*/
/*background-image: url(images/gifs/DualButtonFindUs.gif);*/
}

#fleft { float: left; }

#home { background-image: url(images/gifs/DualHome.gif); }

#findUs { background-image: url(images/gifs/DualButtonFindUs.gif); }

</style>
</head>
<body>
<div id="fleft">
<a href="index.htm" class="button" id="home"><span class="icon"></
span></a>
<a href="how_to_find_us.htm" class="button" id="findUs"><span
class="icon"></span></a>
</div>

</body>
</html>

Any suggestions will be helpful,

Thanks,

eholz1
Dec 13 '07 #1
2 2913
eholz1 wrote:
Hello CSS and StyleSheet members,
FYI, this isn't some google forum, it's a Usenet newsgroup. There are no
"members".
http://www.faqs.org/faqs/usenet/what-is/part1/
I have decided to move away from Dreamweaver javascript rollover
buttons, in favor of
a CSS type rollover button. (hope that is ok).
What if we said "no"? :)
I have cobbled
together some code complements of http://sophie-g.net/jobs/css/e_buttons.htm.

I would like to check
to see if I have the correct idea here (I mean use an id tag for each
different type of button (really gif images) and using the same
"button" class throughout.
Their sample doesn't scale very well, but this is generally a good way
to do it. A class defines common properties for all the buttons, and the
id defines those specific to a particular button.
CODE:
Don't post code. Make a test page and put it on a publicly accessible
server along with your graphics. Then post the URL. Make it easy for us
to help you and you'll get a better response. Posting code is not the
way. Posting a URL is. Besides, we can't see your graphics, which are an
integral part of this scenerio.

I will comment on a few things, though.
<html>
Where is your DOCTYPE? Without it, browsers automatically go into quirks
mode, so results will be inconsistent and unpredictable.
http://hsivonen.iki.fi/doctype/
Stick with HTML 4.01 Strict.
a.button, a.buttonDis {
height: 29px;
font-size: 100%;
}
You get kudos for font-size:100%, but how do you know 29px is an
adequate height? How will the result look at enlarged or reduced text
sizes? What happens if the text wraps to multiple lines? This is what I
mean by scalability.
<div id="fleft">
That's not a very good id name. Use something that describes the
content, not the style. id="navigation" is a lot more meaningful.
<a href="index.htm" class="button" id="home"><span class="icon"></
span></a>
<a href="how_to_find_us.htm" class="button" id="findUs"><span
class="icon"></span></a>
You have a serious accessibility problem here, which is an issue with
most image replacement methods. Your navigation becomes unusable When
the visitor cannot see the image. For example, when image loading is
disabled, or by blind users. That's illegal in some parts of the world.

Look into descendant selectors. It will help you avoid setting a class
name on every element, a.k.a. "classitis". So on the above code, you can
drop the class="button" on each <aand class="icon" on each <span>. Use
selectors that are descendants of #fleft/navigation, e.g.
#navigation a {rules for the "button" class}
#navigation a span {rules for the "icon" class}

It keeps your HTML much leaner. See also
http://css.maxdesign.com.au/listamatic/
--
Berg
Dec 13 '07 #2
On Dec 13, 4:56 am, Bergamot <berga...@visi.comwrote:
eholz1wrote:
Hello CSS and StyleSheet members,

FYI, this isn't some google forum, it's a Usenet newsgroup. There are no
"members".http://www.faqs.org/faqs/usenet/what-is/part1/
I have decided to move away from Dreamweaver javascript rollover
buttons, in favor of
a CSS type rollover button. (hope that is ok).

What if we said "no"? :)
I have cobbled
together some code complements ofhttp://sophie-g.net/jobs/css/e_buttons.htm.
I would like to check
to see if I have the correct idea here (I mean use an id tag for each
different type of button (really gif images) and using the same
"button" class throughout.

Their sample doesn't scale very well, but this is generally a good way
to do it. A class defines common properties for all the buttons, and the
id defines those specific to a particular button.
CODE:

Don't post code. Make a test page and put it on a publicly accessible
server along with your graphics. Then post the URL. Make it easy for us
to help you and you'll get a better response. Posting code is not the
way. Posting a URL is. Besides, we can't see your graphics, which are an
integral part of this scenerio.

I will comment on a few things, though.
<html>

Where is your DOCTYPE? Without it, browsers automatically go into quirks
mode, so results will be inconsistent and unpredictable.http://hsivonen.iki.fi/doctype/
Stick with HTML 4.01 Strict.
a.button, a.buttonDis {
height: 29px;
font-size: 100%;
}

You get kudos for font-size:100%, but how do you know 29px is an
adequate height? How will the result look at enlarged or reduced text
sizes? What happens if the text wraps to multiple lines? This is what I
mean by scalability.
<div id="fleft">

That's not a very good id name. Use something that describes the
content, not the style. id="navigation" is a lot more meaningful.
<a href="index.htm" class="button" id="home"><span class="icon"></
span></a>
<a href="how_to_find_us.htm" class="button" id="findUs"><span
class="icon"></span></a>

You have a serious accessibility problem here, which is an issue with
most image replacement methods. Your navigation becomes unusable When
the visitor cannot see the image. For example, when image loading is
disabled, or by blind users. That's illegal in some parts of the world.

Look into descendant selectors. It will help you avoid setting a class
name on every element, a.k.a. "classitis". So on the above code, you can
drop the class="button" on each <aand class="icon" on each <span>. Use
selectors that are descendants of #fleft/navigation, e.g.
#navigation a {rules for the "button" class}
#navigation a span {rules for the "icon" class}

It keeps your HTML much leaner. See alsohttp://css.maxdesign.com.au/listamatic/

--
Berg
Thanks for the information. I see that I might have to check into
some things - like the image replacement scheme. I am planning to use
code like this in a php page, via the include statement.

I will also check the sight above.

I will try to get a "public" web site where i can reference a url.
That is an issue for me, though.

Thanks,

eholz1
Dec 15 '07 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by Matt | last post: by
reply views Thread by Gepi Solo | last post: by
1 post views Thread by mckrooks101 | last post: by
2 posts views Thread by smokeyd | last post: by
2 posts views Thread by Casimir | last post: by
reply views Thread by rosydwin | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.