Re: [css-d] Display block?

[~davidLaakso]

Tanya Renne wrote:
> I'm having trouble getting the top navigation of a site to behave.
> http://www.orchidsuites.net/lucid/lucid3.html
> -Tanya-
You've got a complicated little package on your server.
Cursory tested only in xp ie/6.0, ff, and opera.

~dL


-- 
http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] display block a hover menu problem

[~davidLaakso]

Sander van Surksum wrote:
> I have a menu with a fixed width and on a hover the background changes
> color but this isn't working well. Can someone please help me out. 
> preview http://www.johnsten.com/css/menu_block.html 
> Sander
No need to re-invent the wheel, Sander. Try the vertical list on this 
page, you may be good to go: 

Best,
~dL
PS Code to compliant browsers (ff, opera, safari-- among others, with 
/frequent/ check-backs to our friend the 'evil one' -- ie)

-- 
http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] display block a hover menu problem

[Sander van Surksum]

Thanks a lot it works fine in IE and FF



-Original Message-
From: Rob Wilmshurst [mailto:[EMAIL PROTECTED] 
Sent: donderdag 21 september 2006 16:07
To: Sander van Surksum
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] display block a hover menu problem

If you remove the padding from the  and apply it to the , the 
entire background will change.  That's fine if all of the list elements 
are going to be links.
h3 { ... padding: 0; ... }
a { ... padding: 4px 0 0 8px; }

If you want to keep some non-link elements there, then you'll need to 
keep the padding inside the  and use negative margins to line the 
s up:
h3 { ...
padding: 4px 0 0 8px;
...}
a { ...
padding: 4px 0 0 8px;
 margin: -4px 0 0 -8px;
...}

This second example is probably better as it allows you the flexibility 
to unlink text at a later date.

I've tested this in Firefox 1.5 without any problems; I can't test in IE

at the moment because I've broken it (stupid multiple IE installs :) but

it should work OK.

-Rob


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] display block a hover menu problem

[Rob Wilmshurst]

Sander van Surksum wrote:
> The problem is that the a hover takes the padding from the normal h3 selector 
> and I
> think that why he isn't changing the whole background on a hover. 

If you remove the padding from the  and apply it to the , the 
entire background will change.  That's fine if all of the list elements 
are going to be links.
h3 { ... padding: 0; ... }
a { ... padding: 4px 0 0 8px; }

If you want to keep some non-link elements there, then you'll need to 
keep the padding inside the  and use negative margins to line the 
s up:
h3 { ...
padding: 4px 0 0 8px;
...}
a { ...
padding: 4px 0 0 8px;
 margin: -4px 0 0 -8px;
...}

This second example is probably better as it allows you the flexibility 
to unlink text at a later date.

I've tested this in Firefox 1.5 without any problems; I can't test in IE 
at the moment because I've broken it (stupid multiple IE installs :) but 
it should work OK.

-Rob


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] display block a hover menu problem

[Sander van Surksum]

Thanks Rob for the quick answer 

I've changed the a selector but still the same problem. The problem is
that the a hover takes the padding from the normal h3 selector and I
think that why he isn't changing the whole background on a hover. 

But how can I fix this?

See http://www.johnsten.com/css/menu_block.html

Regards,

Sander

-Original Message-
From: Rob Wilmshurst [mailto:[EMAIL PROTECTED] 
Sent: donderdag 21 september 2006 15:39
To: Sander van Surksum
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] display block a hover menu problem


Sander,

The main problem is that you're applying the display:block to the :hover

  section:
#navcontainer h3 a:hover {
...
display: block;
text-decoration: none;
...
}
This needs to be moved to the 'a' selector:
#navcontainer h3 a {
...
display: block;
...
}

That allows you to apply the width to the  element, making the whole 
thing clickable.

Are the links meant to be slightly off-center like they are?

- Rob

--
Rob Wilmshurst
[EMAIL PROTECTED]



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] display block a hover menu problem

[Rob Wilmshurst]

Sander,

The main problem is that you're applying the display:block to the :hover 
  section:
#navcontainer h3 a:hover {
...
display: block;
text-decoration: none;
...
}
This needs to be moved to the 'a' selector:
#navcontainer h3 a {
...
display: block;
...
}

That allows you to apply the width to the  element, making the whole 
thing clickable.

Are the links meant to be slightly off-center like they are?

- Rob

--
Rob Wilmshurst
[EMAIL PROTECTED]



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/