quick question

[Edwin van der Vaart]

G'day,

I'm working on a menu on http://www.evandervaart.nl/

My question is...
Looks the menu (rollout) okay in different browsers under Windows?

 

[Edwin van der Vaart]

Edwin van der Vaart schreef:

G'day,

I'm working on a menu on http://www.evandervaart.nl/

--^--
Oops I mean at

 

[Els]

Edwin van der Vaart schreef:
--^--
Oops I mean at

I keep looking, but I can't find the difference between this url
and the one your previous post actually...

Look okay yes, Firebird shows the same as IE: the menu
overlapping a bit into the content area. Opera shows it staying
inside the brown background on the left. In which browser/OS did
you look at it yourself? (So that we know what to compare it
with)

 

[Edwin van der Vaart]

Edwin van der Vaart wrote:




I keep looking, but I can't find the difference between this url
and the one your previous post actually...



Look okay yes, Firebird shows the same as IE: the menu
overlapping a bit into the content area. Opera shows it staying
inside the brown background on the left. In which browser/OS did
you look at it yourself? (So that we know what to compare it
with)

I tested with Firefox 1.0PR and Galeon on a Linux/Mandrake 9.2
If I know how to make a screen shot with the menu roll-out in Mandrake
9.2, then I had shown you a picture. :-(

 

[Els]

I tested with Firefox 1.0PR and Galeon on a Linux/Mandrake
9.2 If I know how to make a screen shot with the menu
roll-out in Mandrake 9.2, then I had shown you a picture.
:-(

No need, the menu rollout looks okay in itself on both
Firebird and IE and Opera, as well as in Firefox and Konqueror
on Linux SuSE.

Btw, I managed a Firefox on SuSE screenshot with menu folded
out, don't know how it works in Mandrake, but Snapshot in SuSE
can be configured to use a delay. Then first press the
snapshot, then hover over the menu and wait for the flash ;-)

http://locusmeus.com/temp/edwin.jpg

See how the menu (before folding out) overlaps into the white
area? It's like that on all browsers (as far as I tested that
is), but not on Opera. Opera shows it inside the brown part.

 

[Edwin van der Vaart]

Edwin van der Vaart wrote:



No need, the menu rollout looks okay in itself on both
Firebird and IE and Opera, as well as in Firefox and Konqueror
on Linux SuSE.

Thanx for testing the rollout.

Btw, I managed a Firefox on SuSE screenshot with menu folded
out, don't know how it works in Mandrake, but Snapshot in SuSE
can be configured to use a delay. Then first press the
snapshot, then hover over the menu and wait for the flash ;-)

How if I may ask

http://locusmeus.com/temp/edwin.jpg

See how the menu (before folding out) overlaps into the white
area? It's like that on all browsers (as far as I tested that
is), but not on Opera. Opera shows it inside the brown part.

Sorry, I got a 404

 

[Els]

[...]
[...]

Btw, I managed a Firefox on SuSE screenshot with menu
folded out, don't know how it works in Mandrake, but
Snapshot in SuSE can be configured to use a delay. Then
first press the snapshot, then hover over the menu and
wait for the flash ;-)

How if I may ask

In the Snapshot window there's a little tickbox, saying delay,
and just fill in 5 sec or something.

[snip wrong url]

Sorry, I got a 404

Cause I automatically wrote jpg, but Snapshots are png....
http://locusmeus.com/temp/edwin.png should do it.

 

[Edwin van der Vaart]

Btw, I managed a Firefox on SuSE screenshot with menu folded
out, don't know how it works in Mandrake, but Snapshot in SuSE
can be configured to use a delay. Then first press the
snapshot, then hover over the menu and wait for the flash ;-)

Succeeded, I use a key combination.
http://www.evandervaart.nl/news/test.png (215 KB)

 

[Edwin van der Vaart]

[snip wrong url]

Cause I automatically wrote jpg, but Snapshots are png....

Every one can make a mistake.

http://locusmeus.com/temp/edwin.png should do it.

I see. Your browser window is 1280x978 (full screen??).
Okay, I need to figure that out later. I tested the page with a 800x600
browser window.

I think that I have to put on the left hand side a div with the wooden
background image and put an empty div and the menu in it. On the right
hand side the title and the content divs.

 

[Els]

I see. Your browser window is 1280x978 (full screen??).

No, full screen is 1280x1024 most of the time.

Okay, I need to figure that out later. I tested the page
with a 800x600 browser window.

I think that I have to put on the left hand side a div with
the wooden background image and put an empty div and the
menu in it. On the right hand side the title and the
content divs.

Just don't say 24% in #menu{width:24%}.
Give it a width in em instead.

 

[Edwin van der Vaart]

Just don't say 24% in #menu{width:24%}.
Give it a width in em instead.

Why in 'em' instead of '%' ?

 

[Els]

Why in 'em' instead of '%' ?

% is of the width of the window, means 24% of 1600px is much
wider than 24% of 800px.

em is relative to the font-size, not the window size.

Means that unless the viewer changes their font-size, the width
of the menu won't change when the window does.

 

[Edwin van der Vaart]

Edwin van der Vaart wrote:




% is of the width of the window, means 24% of 1600px is much
wider than 24% of 800px.

em is relative to the font-size, not the window size.

Means that unless the viewer changes their font-size, the width
of the menu won't change when the window does.

I never thought of that.
Thank for the explanation.

 

[Toby Inkster]

Why in 'em' instead of '%' ?

For navigation sidebars you probably don't want them to be really giant on
wide screens and really narrow on smaller screens. You probably want them
to be about the same width no matter how wide the screen is.

Ideally you might use something like:

width: 25%;
min-width: 10em;
max-midth: 20em;

i.e. Try to be 25%, except never get any narrower than 10em or wider than
20em.

 

[Edwin van der Vaart]

Edwin van der Vaart wrote:




For navigation sidebars you probably don't want them to be really giant on
wide screens and really narrow on smaller screens. You probably want them
to be about the same width no matter how wide the screen is.

Ideally you might use something like:

width: 25%;
min-width: 10em;
max-midth: 20em;

i.e. Try to be 25%, except never get any narrower than 10em or wider than
20em.

Thanks, I'll try it.