CSS Rollovers, Specified Width?

**Richard** · Jul 21 '05, 01:02 AM

Re: CSS Rollovers, Specified Width?

On Fri, 04 Feb 2005 16:26:21 -0800 Tyrone Slothrop wrote:
[color=blue]
> OK, I give up![/color]
[color=blue]
> I am trying to convert a JavaScript rollover button script to CSS. It
> is composed of background colors and font colors with the current page
> displaying the "over" state. I understand the basics and have
> accomplished a navigation bar that looks good and is functional.[/color]
[color=blue]
> However, my client is very fussy about layout and requires that the
> nav bar be a specific width, with the buttons spreading across that
> width evenly, but each button not of an equal width.[/color]
[color=blue]
> For example:[/color]

|| Home | Contact | Faq's | Contact Us | Sign Up |
[color=blue]
> With tables and JS, I can specify a width for each button to fill that
> width. However, I cannot see a way to do this in CSS. Padding will
> expand the width of each button but not exactly the width I need and
> the width is different between displays in IE and Firefox (Firefox is
> wider). I can add the styles to the table and the cell lights up, but
> is clickable only over the text (of course!).[/color]
[color=blue]
> Any assistance would be most appreciated![/color]

have you tried <div onclick="dothis ">??
If you're using <a href="#" onclick="dothis ">text</a> then yeah, only the
text is clickable.

**Barbara de Zoete** · Jul 21 '05, 01:02 AM

Re: CSS Rollovers, Specified Width?

On Fri, 04 Feb 2005 16:26:21 -0800, Tyrone Slothrop <ts@paranoids.c om> wrote:
[color=blue]
> OK, I give up!
>[/color]

Unfortunately, though you describe _the effect_ you wish to accomplish, you do
not explain how you tried this. Maybe a URL would be helpful.
[color=blue]
> | Home | Contact | Faq's | Contact Us | Sign Up |
>[/color]

What is the difference between [Contact] and [Contact Us] may I ask?

Anyway, Markup:

<div id="nav">
<ul>
<li><a href="home.html ">Home</a></li>
<li><a href="contact.h tml">Contact</a></li>
<li><a href="faqs.html ">Faq's</a></li>
<li><a href="Contact-us.html">Contac t Us</a></li>
<li><a href="sign-up.html">Sign Up</a></li>
</ul>
</div>

Styles:

div, ul, li {
padding:0;margi n:0;border:0; }

div {
width:35em; /*menu items times width set for them*/
margin:0 auto; /*if wanted centerd*/ }

ul {
text-align:center; }

li {
float:left;
width:7em; /*what ever you need them to be*/ }

a, a:link, a:visited {
display:block;
width:100%;
/*other styles, like colors, borders and backgrounds*/
color:yellow;
background:blac k;
border:outset .2em grey; }

a:hover, a:focus, a:active {
display:block;
width:100%;
/*other styles specific for menu item that has focus et cetera,
like colors, borders and backgrounds*/
color:black;
background:yell ow;
border:outset .2em orange; }

Not tested, but might work.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

**Barbara de Zoete** · Jul 21 '05, 01:02 AM

Re: CSS Rollovers, Specified Width?

On Sat, 05 Feb 2005 10:55:20 +0100, Barbara de Zoete <b_de_zoete@hot mail.com>
wrote:
[color=blue]
> On Fri, 04 Feb 2005 16:26:21 -0800, Tyrone Slothrop <ts@paranoids.c om> wrote:
>
>[color=green]
>> | Home | Contact | Faq's | Contact Us | Sign Up |
>>[/color]
>[/color]

Meanwhile I've put up a live example at
<http://home.wanadoo.nl/b.de.zoete/_test/voorbeeld_horiz ontaal-menu.html>. Could
be of use to you.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

**Tyrone Slothrop** · Jul 21 '05, 01:02 AM

Re: CSS Rollovers, Specified Width?

On Fri, 4 Feb 2005 23:09:01 -0600, "Richard" <Anonymous@127. 001>
wrote:
[color=blue]
>On Fri, 04 Feb 2005 16:26:21 -0800 Tyrone Slothrop wrote:
>[color=green]
>> OK, I give up![/color]
>[color=green]
>> I am trying to convert a JavaScript rollover button script to CSS. It
>> is composed of background colors and font colors with the current page
>> displaying the "over" state. I understand the basics and have
>> accomplished a navigation bar that looks good and is functional.[/color]
>[color=green]
>> However, my client is very fussy about layout and requires that the
>> nav bar be a specific width, with the buttons spreading across that
>> width evenly, but each button not of an equal width.[/color]
>[color=green]
>> For example:[/color]
>
>|| Home | Contact | Faq's | Contact Us | Sign Up |
>[color=green]
>> With tables and JS, I can specify a width for each button to fill that
>> width. However, I cannot see a way to do this in CSS. Padding will
>> expand the width of each button but not exactly the width I need and
>> the width is different between displays in IE and Firefox (Firefox is
>> wider). I can add the styles to the table and the cell lights up, but
>> is clickable only over the text (of course!).[/color]
>[color=green]
>> Any assistance would be most appreciated![/color]
>
>have you tried <div onclick="dothis ">??
>If you're using <a href="#" onclick="dothis ">text</a> then yeah, only the
>text is clickable.[/color]

I am trying to avoid JS here. The trick with making the entire cell
clickable:

<td align="center" width="100" height="16" onclick="window .location
('page.html');" onMouseover="th is.className='n av1';"
onMouseout="thi sClassname='nav 0';" style="cursor:p ointer"
class="nav0">Pa ge</td>

But you can see how clunky this is. To top it off, I have some PHP
code in there that does evaluation of the current page which
determines the lit state of the class="". It goes like this:
class="<? if ($thispage == 'page') { ?>nav1<? } else { ?>nav0<? } ?>"

I am going to post the current code under Barbara's response.

**Tyrone Slothrop** · Jul 21 '05, 01:02 AM

Re: CSS Rollovers, Specified Width?

>On Sat, 05 Feb 2005 10:55:20 +0100, Barbara de Zoete <b_de_zoete@hot mail.com>[color=blue]
>wrote:
>[color=green]
>> On Fri, 04 Feb 2005 16:26:21 -0800, Tyrone Slothrop <ts@paranoids.c om> wrote:
>>
>>[color=darkred]
>>> | Home | Contact | Faq's | Contact Us | Sign Up |
>>>[/color]
>>[/color]
>
>Meanwhile I've put up a live example at
><http://home.wanadoo.nl/b.de.zoete/_test/voorbeeld_horiz ontaal-menu.html>. Could
>be of use to you.[/color]

Thank you for your effort - I really sppreciate it. However, it does
not address the width issue or, perhaps, I am blind to something very
basic here. (Wouldn't be the first time. ;-) )

This code works. However, the entire cell is not clickable in IE, but
works 100% in Firefox.

From CSS file (not optimized yet, so a bit sloppy):
..mo {
background-color: #566166;
border-left: 1px #FFFFFF solid;
color: #FFFFFF;
display: block;
font-family: Arial,Helvetica ,sans-serif;
font-size: 11px;
font-weight: bold;
line-height: 16px;
text-align: center;
text-decoration: none;
}

..mo a:link, .mo a:visited {
border-left: 1px #FFFFFF solid;
color: #FFFFFF;
display: block;
font-weight: bold;
line-height 16px; font-size: 11px;
text-decoration: none;
}

..mo a:hover {
color: #566166;
display: block;
line-height 16px; background-color: #FFFFFF;
}

..mo0, .mo0 a:hover, .mo0 a:link, .mo0 a:visited {
color: #566166;
font-size: 11px;
font-weight: bold;
line-height 16px; background-color: #FFFFFF;
text-align: center;
text-decoration: none;
}

Here is the navigation bar:

<table cellpadding="0" cellspacing="0" width="700" height="16"
border="0" class="mo">
<tr>
<td<?php if ($thispage == 'idx') { ?> class="mo0"<?ph p } ?>
onclick="ex=0;" width="71" height="16"><a
href="idx.shtml ">Home</a></td>
<td<?php if ($thispage == 'application') { ?> class="mo0"<?ph p }
?> onclick="ex=0;" width="101" height="16"><a
href="applicati on.shtml">Apply Now</a></td>
<td<?php if ($thispage == 'testimonials') { ?> class="mo0"<?ph p }
?> onclick="ex=0;" width="115" height="16"><a
href="testimoni als.shtml">Test imonials</a></td>
<td<?php if ($thispage == 'q_and_a') { ?> class="mo0"<?ph p } ?>
onclick="ex=0;" width="67" height="16"><a
href="q_and_a.s html">Q&A</a></td>
<td<?php if ($thispage == 'compare') { ?> class="mo0"<?ph p } ?>
onclick="ex=0;" width="143" height="16"><a href="compare.s html">Price
Comparison</a></td>
<td<?php if ($thispage == 'affiliates') { ?> class="mo0"<?ph p }
?> onclick="ex=0;" width="95" height="16"><a
href="affiliate s.shtml">Affili ates</a></td>
<td<?php if ($thispage == 'contact') { ?> class="mo0"<?ph p } ?>
onclick="ex=0;" width="106" height="16"><a
href="contact.s html">Contact Us</a></td>
<td width="1" height="16" bgcolor="#fffff f" style="font-size:
1px;"> </td>
</tr>
</table>

Excuse the mess - you can ignore the PHP code which determines the
"lit" state and the onClick.

Can you see why the entire cell is not clickable in IE and why it is
in Firefox? Is there a simpler way to accomplish this precise
formating of button widths without tables, or writing a bunch more
styles (which would not really reduce the complexity that much)?

**Barbara de Zoete** · Jul 21 '05, 01:02 AM

Re: CSS Rollovers, Specified Width?

On Sat, 05 Feb 2005 07:37:50 -0800, Tyrone Slothrop <ts@paranoids.c om> wrote:
[color=blue][color=green]
>> On Sat, 05 Feb 2005 10:55:20 +0100, Barbara de Zoete <b_de_zoete@hot mail.com>
>> wrote:
>>[color=darkred]
>>> On Fri, 04 Feb 2005 16:26:21 -0800, Tyrone Slothrop <ts@paranoids.c om> wrote:
>>>
>>>
>>>> | Home | Contact | Faq's | Contact Us | Sign Up |
>>>>
>>>[/color]
>>
>> Meanwhile I've put up a live example at
>> <http://home.wanadoo.nl/b.de.zoete/_test/voorbeeld_horiz ontaal-menu.html>.
>> Could
>> be of use to you.[/color]
>
> Thank you for your effort - I really sppreciate it. However, it does
> not address the width issue or, perhaps, I am blind to something very
> basic here. (Wouldn't be the first time. ;-) )
>[/color]

Try look harder then.

[color=blue]
> This code works. However, the entire cell is not clickable in IE, but
> works 100% in Firefox.
>
> From CSS file (not optimized yet, so a bit sloppy):[/color]

So, I put effort in a clean code, and you, the one with the problem, do not.
Now, why would I look at code that is 'a bit sloppy'?
[color=blue]
> Here is the navigation bar:
>
> Excuse the mess - you can ignore the PHP code which determines the
> "lit" state and the onClick.
>[/color]

Know what? I'll just ignore all of it. Bye bye, good luck with your life.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

**Els** · Jul 21 '05, 01:02 AM

Re: CSS Rollovers, Specified Width?

Tyrone Slothrop wrote:
[color=blue]
> This code works. However, the entire cell is not clickable
> in IE, but works 100% in Firefox.
>
> .mo a:link, .mo a:visited {
> border-left: 1px #FFFFFF solid;
> color: #FFFFFF;
> display: block;
> font-weight: bold;
> line-height 16px; font-size: 11px;
> text-decoration: none;
> }
> Can you see why the entire cell is not clickable in IE and
> why it is in Firefox?[/color]

Just add width:100% to the link styles.

--
Els

Locus Meus

http://locusmeus.com/

Blog and other pages, mostly outdated.

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

**Els** · Jul 21 '05, 01:02 AM

Re: CSS Rollovers, Specified Width?

Els wrote:
[color=blue]
> Just add width:100% to the link styles.[/color]

I just saw the example Barbara gave. If you saw it work in IE,
why didn't you take the effort to discover what in her styles
made it happen? This is not a "please find it for me" helpdesk,
you're supposed to do your share at least.

--
Els

Locus Meus

http://locusmeus.com/

Blog and other pages, mostly outdated.

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

**Barbara de Zoete** · Jul 21 '05, 01:02 AM

Re: CSS Rollovers, Specified Width?

On 5 Feb 2005 16:21:00 GMT, Els <els.aNOSPAM@ti scali.nl> wrote:
[color=blue]
> Els wrote:
>[color=green]
>> Just add width:100% to the link styles.[/color]
>
> I just saw the example Barbara gave. If you saw it work in IE,
> why didn't you take the effort to discover what in her styles
> made it happen? This is not a "please find it for me" helpdesk,
> you're supposed to do your share at least.
>[/color]

Did you see the last question he askes?
[color=blue]
> In message <h2n901pc4vv1ek 6p0m10ui6c2ougu ue874@4ax.com>,
> On Sat, 05 Feb 2005 07:37:50 -0800,
> Tyrone Slothrop <ts@paranoids.c om> wrote:
>[color=green]
>> Is there a simpler way to accomplish this precise
>> formating of button widths without tables, or
>> writing a bunch more styles (which would not really
>> reduce the complexity that much)?[/color][/color]

I get this feeling mister Slothrop doesn't read anything, unless he easily
recognizes a quick and dirty solution for his problem. What else would explain
him not noticing the ever so much 'simpler way' provided by the example page? It
is staring in his face, screeming 'here I am, pick me, pick me!' Still he
doesn't see.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

**Els** · Jul 21 '05, 01:02 AM

Re: CSS Rollovers, Specified Width?

Barbara de Zoete wrote:
[color=blue]
> On 5 Feb 2005 16:21:00 GMT, Els <els.aNOSPAM@ti scali.nl>
> wrote:
>[color=green]
>> Els wrote:
>>[color=darkred]
>>> Just add width:100% to the link styles.[/color]
>>
>> I just saw the example Barbara gave. If you saw it work in
>> IE, why didn't you take the effort to discover what in her
>> styles made it happen? This is not a "please find it for
>> me" helpdesk, you're supposed to do your share at least.
>>[/color]
>
> Did you see the last question he askes?[/color]

Yup :-)
[color=blue][color=green]
> > In message <h2n901pc4vv1ek 6p0m10ui6c2ougu ue874@4ax.com>,
> > On Sat, 05 Feb 2005 07:37:50 -0800,
> > Tyrone Slothrop <ts@paranoids.c om> wrote:
> >[color=darkred]
> >> Is there a simpler way to accomplish this precise
> >> formating of button widths without tables, or
> >> writing a bunch more styles (which would not really
> >> reduce the complexity that much)?[/color][/color]
>
> I get this feeling mister Slothrop doesn't read anything,
> unless he easily recognizes a quick and dirty solution for
> his problem. What else would explain him not noticing the
> ever so much 'simpler way' provided by the example page? It
> is staring in his face, screeming 'here I am, pick me,
> pick me!' Still he doesn't see.[/color]

Yup, you're right. I noticed (again after I posted :S) that
you even stated the relevant bit of code right there above the
example. Okay, I saw it too late - but he doesn't seem to see
it at all.
(I'm quite surprised he doesn't toppost actually ;-) )

His keyword is "voorgekauw d" <g>

--
Els

Locus Meus

http://locusmeus.com/

Blog and other pages, mostly outdated.

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

**Barbara de Zoete** · Jul 21 '05, 01:02 AM

Re: CSS Rollovers, Specified Width?

On 5 Feb 2005 16:52:44 GMT, Els <els.aNOSPAM@ti scali.nl> wrote:
[color=blue]
> His keyword is "voorgekauw d" <g>
>[/color]

lol

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

**Tyrone Slothrop** · Jul 21 '05, 01:02 AM

Re: CSS Rollovers, Specified Width?

On Sat, 05 Feb 2005 18:03:39 +0100, "Barbara de Zoete"
<b_de_zoete@hot mail.com> wrote:
[color=blue]
>On 5 Feb 2005 16:52:44 GMT, Els <els.aNOSPAM@ti scali.nl> wrote:
>[color=green]
>> His keyword is "voorgekauw d" <g>
>>[/color]
>
>lol[/color]

Easy with the flames. If you want elegant code in PHP or Perl, ask
me. CSS I am trying to learn while spending eight or more hours a day
scripting in other languages. This example I was trying to figure out
in the 15th hour of a 16 hour day.

All I missed was the width: 100%; line. That did the trick. For that,
I thank you.

And, yes, I probably deserved the flame. I am humbled in the presence
of CSS gods. :-)

CSS Rollovers, Specified Width?

CSS Rollovers, Specified Width?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment