Re: [css-d] Named Anchors and Fixed Headers?
Add...
#content p a {margin-top: -100px; padding-top: 100px; width: 1px;
.display: block;}
...and the anchor will appear 100px below top of window and nicely below
the fixed header.
The anchor is actually around 115px tall and 1px wide with this styling,
but that won't bother any of the browsers that support 'position: fixed'
in the first place. The narrow width is set to prevent the anchor
covering any of the image-links above it.
Tested in IE7, Opera 9, Firefox 2 - perfect result.
regards
Georg
Thank you! That's working wonderfully so far, I'll have to find more
browsers to test it in. I assume that if I end up wanting text links within
the p tag inside the content DIV then I just need to make a class
'unstyle' the margins? Something like:
p.fixlink margin-top: 0px; padding-top: 0px;}
~Sarah
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Named Anchors and Fixed Headers?
Sarah Heinemann wrote:
Thank you! That's working wonderfully so far, I'll have to find more
browsers to test it in. I assume that if I end up wanting text links
within the p tag inside the content DIV then I just need to make a
class 'unstyle' the margins? Something like:
p.fixlink margin-top: 0px; padding-top: 0px;}
Not quite as you have written it, as that'll affect the paragraph, not
the link.
Unstyling the link, like so...
p.fixlink a {margin-top: 0px; padding-top: 0px; width: auto; display:
inline;}
...will work in all browsers.
A better solution might be to set a class on the relevant anchors that
_need_ that top-offset, so you don't have to worry about unstyling
other links.
Such a rule might look like...
#content p a.offset {margin-top: -100px; padding-top: 100px; width: 1px;
.display: block;}
...with class=offset on target anchors.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Named Anchors and Fixed Headers?
Dragoness wrote:
http://www.ladyofdragons.com/test/gallery/art-archive.htm
1) My header is fixed and stretches over my left menu div and middle
content div.
2) My left menu contains sub-links (2003, 2002, etc...) to
corresponding named anchors dispersed throughout the content in the
main body div.
3) When you scroll the content, it’s designed to “fade out” and
disappear beneath the fixed header. That works! (Except in IE6 *sigh*)
3) BUT, If you want to skip to a section instead of scroll, using the
sub-menu links on the left, the appropriate named anchor jumps to the
top of the page... placing it, partially hidden, UNDER the fixed header
layer.
Is there a way around this? A way to set where the named anchors jump
to so the content appears lower on the page, not hidden by the
header?
Add...
#content p a {margin-top: -100px; padding-top: 100px; width: 1px;
display: block;}
...and the anchor will appear 100px below top of window and nicely below
the fixed header.
The anchor is actually around 115px tall and 1px wide with this styling,
but that won't bother any of the browsers that support 'position: fixed'
in the first place. The narrow width is set to prevent the anchor
covering any of the image-links above it.
Tested in IE7, Opera 9, Firefox 2 - perfect result.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
