| Author |
Rollover example with different stylesheet critique needed
|
|
|
|
|
|
| David Graham 2003-12-03, 7:23 pm |
|
"picayunish" <e_vdvaart@yahoo.co.uk> wrote in message
news:9EWmb.2596$2o2.18170@amstwist00...quote:
> Good day Girl and Boys,
>
> Could you give me some comment / critique about the "Rollover example with
> different stylesheet page".
Hi
I note that the horizontal list has a small defect in IE6 (also probably 5
and 5.5 but don't have them at the moment) in that the cursor has to be over
the text in the link before it can activate the link. This can be cured with
width: 100% and I think you can chuck in height: 100% for good measure in
a.horunord, a.horunord:visited {
display: block;
width: 100%;
height: 100%;
and also do this in the hover pseudo class (BTW - you forgot the display:
block bit in the hover rule)
bye
David
| |
| altamir 2003-12-03, 7:23 pm |
| "picayunish" <e_vdvaart@yahoo.co.uk> wrote in
news:9EWmb.2596$2o2.18170@amstwist00:
quote:
> Good day Girl and Boys,
>
> Could you give me some comment / critique about the "Rollover example
> with different stylesheet page".
> Please tear this page apart (don't be shy).
> http://www.semi-conductor.nl/test/rollover/
>
You don't have to use class atributes at all.
For example:
<div id="navhorunord">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
And:
#navhorunord {width: 100%;}
#navhorunord ul {
list-style: none;
margin-left: 0em;
padding-left: 0em;
}
#navhorunord li {float: left;}
#navhorunord a, #navhorunord a:visited {
text-align: center;
color : #fff;
background: #ff6666;
display: block;
padding-right: 2em;
padding-left: 2em;
text-decoration: none;
border-left: #ff9966 2px solid;
border-bottom: #000 2px solid;
border-right: #000 2px solid;
border-top: #ff9966 2px solid;
}
#navhorunord a:hover {
color : #000;
background: #ffcc99;
border-top: #000 2px solid;
border-right: #ffbb99 2px solid;
border-bottom: #ffbb99 2px solid;
border-left: #000 2px solid;
}
It's much clearer now.
--
altamir
| |
|
|
|
|
| picayunish 2003-12-03, 7:23 pm |
| David Graham wrote in
news:aU7nb.4135$xS2.2461202@newsfep2-win.server.ntli.net:quote:
> "picayunish" <e_vdvaart@yahoo.co.uk> wrote in message
> news:9EWmb.2596$2o2.18170@amstwist00...
> Hi
> I note that the horizontal list has a small defect in IE6 (also probably
> 5 and 5.5 but don't have them at the moment) in that the cursor has to
> be over the text in the link before it can activate the link. This can
> be cured with width: 100% and I think you can chuck in height: 100% for
> good measure in
>
> a.horunord, a.horunord:visited {
>
> display: block;
> width: 100%;
> height: 100%;
Tried it. This is how it looks with a width of 100%
http://www.semi-conductor.nl/img/rollover2.png 26.78 KB (27422 bytes)
However when I add the width 10% in li.horunord and only the width: 100%
and display block in the a:xx, then in IE6 will show the buttons perfect.
However not in Firebird, NS 7.1 and Moz.
When I change the width of #navhorunord into 100%. Add the width of the li
(19%) and us a width of 40% for the links.
The buttons will be shown correctly in IE with a window of 800x600.
In this case I don't advice to use width = 100%.
--
Edwin van der Vaart
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://members.chello.nl/e.vandervaart/ Experimental site
| |
| Bonnie Granat 2003-12-03, 7:24 pm |
|
"picayunish" <e_vdvaart@yahoo.co.uk> wrote in message
news:9EWmb.2596$2o2.18170@amstwist00...quote:
> Good day Girl and Boys,
>
> Could you give me some comment / critique about the "Rollover example with
> different stylesheet page".
> Please tear this page apart (don't be shy).
> http://www.semi-conductor.nl/test/rollover/
>
I like it. Simple, clear, bright, cheery -- why, why, it's perfection
itself. Who could ask for a better rollover?
--
Bonnie Granat
Granat Technical Editing and Writing
http://www.editors-writers.info
| |
| Bonnie Granat 2003-12-03, 7:24 pm |
|
"picayunish" <e_vdvaart@yahoo.co.uk> wrote in message
news:9EWmb.2596$2o2.18170@amstwist00...quote:
> Good day Girl and Boys,
>
> Could you give me some comment / critique about the "Rollover example with
> different stylesheet page".
> Please tear this page apart (don't be shy).
> http://www.semi-conductor.nl/test/rollover/
>
> --
Picky!!! You didn't say to read the page and test the examples!! Why didn't
you ask for that???
The color for the down button is not good. Wrong color.
I recommend using black letters on the orange, and use white letters on the
down button and make the button DARK.
--
Bonnie Granat
Granat Technical Editing and Writing
http://www.editors-writers.info
| |
| David Graham 2003-12-03, 7:24 pm |
|
"picayunish" <e_vdvaart@yahoo.co.uk> wrote in message
news:6RWnb.3354$2o2.18308@amstwist00...quote:
> David Graham wrote in
> news:aU7nb.4135$xS2.2461202@newsfep2-win.server.ntli.net:
>
> Tried it. This is how it looks with a width of 100%
> http://www.semi-conductor.nl/img/rollover2.png 26.78 KB (27422 bytes)
>
> However when I add the width 10% in li.horunord and only the width: 100%
> and display block in the a:xx, then in IE6 will show the buttons perfect.
> However not in Firebird, NS 7.1 and Moz.
>
> When I change the width of #navhorunord into 100%. Add the width of the li
> (19%) and us a width of 40% for the links.
> The buttons will be shown correctly in IE with a window of 800x600.
>
> In this case I don't advice to use width = 100%.
Hi
The example I was thinking of might have been a bit different to yours. The
addition of 19% width is essential because li.horunord is a float and all
floats must have an explicit width (or implicit for things like a floated
image.) The links need to be 40% as 100% plus the padding makes them too
wide.
The link below is of interest
http://css.maxdesign.com.au/listamatic/horizontal03.htm
This gets the width: 100% in on the ul which seems to get round the problem
of only the link text activating the link on hover.
This link is to a simple horizontal list
http://css.maxdesign.com.au/listamatic/horizontal02.htm
No floats used and no widths but works fine.
David
| |
| picayunish 2003-12-03, 7:24 pm |
| David Graham wrote in
news:xN4ob.52$ym1.114149@newsfep2-gui.server.ntli.net:quote:
> "picayunish" <e_vdvaart@yahoo.co.uk> wrote in message
> news:6RWnb.3354$2o2.18308@amstwist00...
> Hi
> The example I was thinking of might have been a bit different to yours.
> The addition of 19% width is essential because li.horunord is a float
> and all floats must have an explicit width (or implicit for things like
> a floated image.) The links need to be 40% as 100% plus the padding
> makes them too wide.
>
> The link below is of interest
> http://css.maxdesign.com.au/listamatic/horizontal03.htm
>
> This gets the width: 100% in on the ul which seems to get round the
> problem of only the link text activating the link on hover.
>
> This link is to a simple horizontal list
> http://css.maxdesign.com.au/listamatic/horizontal02.htm
>
> No floats used and no widths but works fine.
Thanx for the explanation.
I'll investigate those links and suggestions.
--
Edwin van der Vaart
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://members.chello.nl/e.vandervaart/ Experimental site
| |
| picayunish 2003-12-03, 7:24 pm |
| Bonnie Granat wrote in news:3fa0ac6c@andromeda.5sc.net:quote:
> "picayunish" <e_vdvaart@yahoo.co.uk> wrote in message
> news:9EWmb.2596$2o2.18170@amstwist00...
>
> I like it. Simple, clear, bright, cheery -- why, why, it's perfection
> itself. Who could ask for a better rollover?
I do ask for perfection. :-D
But thanx for the comment on my standard stylesheet.
--
Edwin van der Vaart
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://members.chello.nl/e.vandervaart/ Experimental site
| |
| picayunish 2003-12-03, 7:24 pm |
| Bonnie Granat wrote in news:3fa0ad28@andromeda.5sc.net:quote:
> "picayunish" <e_vdvaart@yahoo.co.uk> wrote in message
> news:9EWmb.2596$2o2.18170@amstwist00...
>
> Picky!!! You didn't say to read the page and test the examples!! Why
> didn't you ask for that???
But, but ...
I did ask to tear my page apart. So play around with my server side
stylesheet.
quote:
> The color for the down button is not good. Wrong color.
Okay wrong colour. It's a start.
quote:
> I recommend using black letters on the orange, and use white letters on
> the down button and make the button DARK.
So your suggestion is to have a light colour for the link and a dark hover
colour.
Let say: the link a yellow or orange colour with black text and a black
hover with white text.
--
Edwin van der Vaart
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://members.chello.nl/e.vandervaart/ Experimental site
| |
| Bonnie Granat 2003-12-03, 7:24 pm |
|
"picayunish" <e_vdvaart@yahoo.co.uk> wrote in message
news:kwdob.50$%W3.23@amstwist00...quote:
> Bonnie Granat wrote in news:3fa0ad28@andromeda.5sc.net:
>
> But, but ...
> I did ask to tear my page apart. So play around with my server side
> stylesheet.
>
>
> Okay wrong colour. It's a start.
>
>
> So your suggestion is to have a light colour for the link and a dark hover
> colour.
> Let say: the link a yellow or orange colour with black text and a black
> hover with white text.
> --
It should mimic a pushed down button on a real object (this helps users
because it is visual analogy and reminds them of what they have done
themselves, that is, they selected a button by pushing it down [clicking]),
so it should be dark. The reason I say black on the orange button is because
the white is pretty hard to read at that size. In a large size, white on
orange is good, but not here. (Don't increase the size, though. The page
looked great here with my Smallest setting in IE.)
--
Bonnie Granat
Granat Technical Editing and Writing
http://www.editors-writers.info
|
|
|
|
| Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |