mouseover problem

Hi,

If you go to http://inetgate.ch/new/test/template.htm and move the mouse
over the links on the left top, you see that the text background stays the
same as on mouse out. if i just add a text backgnd on hovr, it just lights
up the text backgnd when i'm over the image...how cam i make the text
backgnd transparent that it's always the same as the div behind?
Thank you!
roN

On 2007-01-06, roN <NOspam@example.comwrote:

Quote:

Hi,
>
If you go to http://inetgate.ch/new/test/template.htm and move the mouse
over the links on the left top, you see that the text background stays the
same as on mouse out. if i just add a text backgnd on hovr, it just lights
up the text backgnd when i'm over the image...how cam i make the text
backgnd transparent that it's always the same as the div behind?

Just use background: transparent on .nav_point a instead of the colour,
and delete the background-color line from .nav_point a:hover.

roN wrote:

Quote:

>
If you go to http://inetgate.ch/new/test/template.htm and move the mouse
over the links on the left top, you see that the text background stays the
same as on mouse out.

Why are you doing this with JavaScript, not CSS :hover rules? There is
no effect at all when JS is disabled.

--
Berg

Bergamot wrote:

Quote:

roN wrote:

Quote:

>>
>If you go to http://inetgate.ch/new/test/template.htm and move the mouse
>over the links on the left top, you see that the text background stays
>the same as on mouse out.

>
Why are you doing this with JavaScript, not CSS :hover rules? There is
no effect at all when JS is disabled.
>

how do i hover the whole div then? thank you for that hint!

roN

roN wrote:

Quote:

Bergamot wrote:
>

Quote:

>roN wrote:

Quote:

>>>
>>If you go to http://inetgate.ch/new/test/template.htm and move the mouse
>>over the links on the left top

>>
>Why are you doing this with JavaScript, not CSS :hover rules?

>
how do i hover the whole div then? thank you for that hint!

Start with better code.

First off, your DOCTYPE is triggering quirks mode in all browsers, so
results can be unpredictable. Try HTML 4.01 Strict instead.
http://hsivonen.iki.fi/doctype/

Second is the code is invalid, which doesn't help get consistent results
across browsers. You cannot have a <divinside an <aelement. <ais
inline and can only contain other inline elements. <divis block.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

The effect you are trying to achieve is also known as CSS buttons. There
are oodles of examples on the web, several can be found at
http://css.maxdesign.com.au/listamatic/

Note that using unordered lists for navigation menus has become the
norm, as it's generally considered semantically more correct than just a
series of anonymous <aelements.

--
Berg

Bergamot wrote:

Quote:

roN wrote:

Quote:

>Bergamot wrote:
>>

Quote:

>>roN wrote:
>>>>
>>>If you go to http://inetgate.ch/new/test/template.htm and move the
>>>mouse over the links on the left top
>>>
>>Why are you doing this with JavaScript, not CSS :hover rules?

>>
>how do i hover the whole div then? thank you for that hint!

>
Start with better code.
>
First off, your DOCTYPE is triggering quirks mode in all browsers, so
results can be unpredictable. Try HTML 4.01 Strict instead.
http://hsivonen.iki.fi/doctype/
>
Second is the code is invalid, which doesn't help get consistent results
across browsers. You cannot have a <divinside an <aelement. <ais
inline and can only contain other inline elements. <divis block.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
>
The effect you are trying to achieve is also known as CSS buttons. There
are oodles of examples on the web, several can be found at
http://css.maxdesign.com.au/listamatic/
>
Note that using unordered lists for navigation menus has become the
norm, as it's generally considered semantically more correct than just a
series of anonymous <aelements.
>

Okay,

thank you very much for those hints! I've tuned it a little and uploaded it
again to: http://inetgate.ch/new/test/template.htm and i have another
question: is there an html property to ad a small space between the <li>
elements? I would like to separate them a little just by 1 or 2 pixels.
Thanbk you!

roN wrote:

Quote:

Bergamot wrote:
>

Quote:

>>Second is the code is invalid, which doesn't help get consistent results
>>across browsers. You cannot have a <divinside an <aelement. <ais
>>inline and can only contain other inline elements. <divis block.
>>http://validator.w3.org/
>>http://jigsaw.w3.org/css-validator/
>>

Quote:

>
Okay,
>
thank you very much for those hints! I've tuned it a little and uploaded it
again to: http://inetgate.ch/new/test/template.htm and i have another
question: is there an html property to ad a small space between the <li>
elements? I would like to separate them a little just by 1 or 2 pixels.

Not an HTML property, but a CSS property, like those you are already
using in abundance. Try:
#navcontainer li { margin-bottom: 1px; }

BTW: Note that your absolute positioning will suffer when text grows (in
quantity or font size), and with or without content, the fixed-width
approach might not work as well as you hope.

I didn't look at your original code, but I've seen it now. I presume you
know you can move all your styling to the external stylesheet. Yes?

You've still (at this moment) got a few validation errors.

GL! HTH
--
John

John Hosking wrote:

Quote:

>
Note that your absolute positioning will suffer when text grows

Absolute positioning is a boon to designers, but a bane to users. :-(

--
Berg

Bergamot wrote:

Quote:

John Hosking wrote:

Quote:

>>
>Note that your absolute positioning will suffer when text grows

>
Absolute positioning is a boon to designers, but a bane to users. :-(
>

Hm yeah but before i was told NOT to design with tables anymore and to use
divs instead, even in this newsgrounp... that's confusing me a bit
now... :o
--
roN

Bergamot <bergamot@visi.comwrote:

Quote:

>Absolute positioning is a boon to designers, but a bane to users. :-(

In practice absolute positioning is often mis/badly understood and
misused which results in very fragile code. But absolute positioning is
an excellent tool if understood and used properly.

--
Spartanicus

roN wrote:

Quote:

>
before i was told NOT to design with tables anymore and to use
divs instead, even in this newsgrounp... that's confusing me a bit

Not everything needs to be specifically positioned. Letting stuff fall
where it does naturally (a.k.a. static positioning, or Normal flow) is
often the best thing to do. Sometimes all you need is an extra container
to hold multiple divs, then (some) things can take care of themselves.

For the rest, see:
http://www.w3.org/TR/CSS21/visuren.h...tioning-scheme

--
Berg

Hi,

To fully support CSS 1.0 and 2.0, etc.. while designing your website
don't use tables. Simple as that, using tables and css is just simple
unprofessional. :)

Just my two pickles in a jar.

--
CatBones

XHTMLIT.COM - PSD TO
XHTML/CSS CONVERSION SERVICE (\"HTTP://WWW.XHTMLIT.COM\")
Get your Design (.PSD or .PNG) converted into valid XHTML & CSS fast
and easy.
We cut, crop and professionally hand code it within 24 hours or your
money back guaranteed.
Visit http://www.hostingforum.ca today

mouseover problem

re: mouseover problem

re: mouseover problem

re: mouseover problem

re: mouseover problem

re: mouseover problem

re: mouseover problem

re: mouseover problem

re: mouseover problem

re: mouseover problem

re: mouseover problem

re: mouseover problem

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about