473,378 Members | 1,411 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,378 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 3023
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Matt | last post by:
i know more-or-less zero about javascript, but my client wants a rollover and he created this code, which doesn't work. All comments are appreciated. 1. the tag: <td align="center" width="66"...
6
by: AJBopp | last post by:
I'm wrestling with CSS variations between Firefox and IE. I'm trying to create rollover buttons in a menu frame. It is working perfectly in Firefox but in IE only the first button is properly...
0
by: Gepi Solo | last post by:
Hi, I'm a python newbie, coming from PHP & Perl. I'm developing client-server applications with a GUI. I'm trying to realize rollover buttons with images as background. I mean... I want to create a...
1
by: mckrooks101 | last post by:
My problem is that I have a javascript cycling banner at the top of my page and navigation buttons about 20 pixel underneath that both have external js files but the banner doesn't work when I...
2
by: smokeyd | last post by:
i am trying to create a simple image button rollover.. i have searched this forum and found a number of solutions but none seem to work. i am just trying to get the onmouseover to swap the image...
2
by: Casimir | last post by:
I am looking into making pure CSS image rollovers. Do you have any clever (and robust) CSS rollover-tricks? Or links to such "in the wild"? I have figured out two methods for this, but have...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

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.