Re: [css-d] Fixed div and Anchors
Nic Pulford wrote: Your right, it does work with anchors. My solution does not work in IE 6, and the problem with your solution is that it changes the layout of the rest. I don't know anything about your layout, so it doesn't surprise me that something that isn't built for and/or tested and tweaked to fit, doesn't. Your solution Only works in IE 6 if the anchor contains something ie 'testing'. IE6 treats anchors like that no matter how they're styled, IIRC. In the old days I used to put in a no-breaking space to solve that problem, and control the anchor's visual size and effects on its surroundings with 'overflow: hidden'. Any ideas? Maybe ... if I get to see the actual layout that needs them. BTW: here's the Named Anchors and Fixed Headers? posts from last year... http://archivist.incutio.com/viewlist/css-discuss/93615 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] Fixed div and Anchors
Hi Georg, That was helpful. Sharing my problem I'm working on a large existing site, 200+ pages, which was put together by the owners. I'm doing some style changes without changing page content. Each page has about 4 anchors and being lazy I do not want to edit each one and make the changes with purely style changes. I know what I have to do, due to lack of consistency of the pages I have no choice but to edit each page. At least they will be consistent. Thanks for the help. Nic -Original Message- From: Gunlaug Sørtun [mailto:[EMAIL PROTECTED] Sent: 22 June 2008 09:34 To: [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] Fixed div and Anchors Nic Pulford wrote: Your right, it does work with anchors. My solution does not work in IE 6, and the problem with your solution is that it changes the layout of the rest. I don't know anything about your layout, so it doesn't surprise me that something that isn't built for and/or tested and tweaked to fit, doesn't. Your solution Only works in IE 6 if the anchor contains something ie 'testing'. IE6 treats anchors like that no matter how they're styled, IIRC. In the old days I used to put in a no-breaking space to solve that problem, and control the anchor's visual size and effects on its surroundings with 'overflow: hidden'. Any ideas? Maybe ... if I get to see the actual layout that needs them. BTW: here's the Named Anchors and Fixed Headers? posts from last year... http://archivist.incutio.com/viewlist/css-discuss/93615 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] Fixed div and Anchors
Hi Georg, It took some working out as it does not work with an anchor, you need a div Then if the height of the header is 50px then the div style should be margin-top: -50px; height: 50px; width: 1px; it then goes fine for right at the top. By increasing both values you can bring the anchor point down a bit which is good. Thanks for that. Nic -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Gunlaug Sørtun Sent: 20 June 2008 18:24 To: [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] Fixed div and Anchors Nic Pulford wrote: Some time ago, about a year I think, there was some discussion about using fixed divs to fix a header at the top of the page and allow the main content to scroll under it, this requires a spacer at the top of the content to make the viewable start of the page below the header. The problem comes when the site uses anchors the browsers of course make sure the anchor is at the top of the page, which is under the header. Is there a good solution to making the anchor appear so you can see it. I've solved the problem in one particular case [on CSS-D] by styling the anchor with an invisible top-extension - 1px wide and as tall as the fixed header + the part you want to see. That'll let the browsers align the anchor at the top and keep the relevant content down where it's visible. I can probably dig up my local demo-case again (one day) if necessary, but it shouldn't be too hard to style an in-page anchor to achieve such an offset effect. (I prefer fixed footers and sidebars myself, so I don't run into the problem.) 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/ __ 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] Fixed div and Anchors
Nic Pulford wrote:
It took some working out as it does not work with an anchor, you need
a div Then if the height of the header is 50px then the div style
should be margin-top: -50px; height: 50px; width: 1px; it then goes
fine for right at the top. By increasing both values you can bring
the anchor point down a bit which is good.
It does work with an anchor if the display property is set correctly.
Both 'display: block' and 'display: inline-block' will make an anchor
controllable.
Try this...
#item4 {display: inline-block; padding-top: 100px!important; width: 10px; }
a id=item4 testing /a
...and you'll get the desired effect in all supporting browsers.
Add offset that suits the actual layout.
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] Fixed div and Anchors
Hi Georg,
Your right, it does work with anchors. My solution does not work in IE 6,
and the problem with your solution is that it changes the layout of the
rest.
Your solution Only works in IE 6 if the anchor contains something ie
'testing'.
Any ideas?
Nic
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Gunlaug Sørtun
Sent: 21 June 2008 11:52
To: [EMAIL PROTECTED]
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Fixed div and Anchors
Nic Pulford wrote:
It took some working out as it does not work with an anchor, you need
a div Then if the height of the header is 50px then the div style
should be margin-top: -50px; height: 50px; width: 1px; it then goes
fine for right at the top. By increasing both values you can bring
the anchor point down a bit which is good.
It does work with an anchor if the display property is set correctly.
Both 'display: block' and 'display: inline-block' will make an anchor
controllable.
Try this...
#item4 {display: inline-block; padding-top: 100px!important; width: 10px; }
a id=item4 testing /a
...and you'll get the desired effect in all supporting browsers.
Add offset that suits the actual layout.
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/
__
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/
[css-d] Fixed div and Anchors
Some time ago, about a year I think, there was some discussion about using fixed divs to fix a header at the top of the page and allow the main content to scroll under it, this requires a spacer at the top of the content to make the viewable start of the page below the header. The problem comes when the site uses anchors the browsers of course make sure the anchor is at the top of the page, which is under the header. Is there a good solution to making the anchor appear so you can see it. Regards Nic __ 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] Fixed div and Anchors
Nic Pulford wrote: Some time ago, about a year I think, there was some discussion about using fixed divs to fix a header at the top of the page and allow the main content to scroll under it, this requires a spacer at the top of the content to make the viewable start of the page below the header. The problem comes when the site uses anchors the browsers of course make sure the anchor is at the top of the page, which is under the header. Is there a good solution to making the anchor appear so you can see it. I've solved the problem in one particular case [on CSS-D] by styling the anchor with an invisible top-extension - 1px wide and as tall as the fixed header + the part you want to see. That'll let the browsers align the anchor at the top and keep the relevant content down where it's visible. I can probably dig up my local demo-case again (one day) if necessary, but it shouldn't be too hard to style an in-page anchor to achieve such an offset effect. (I prefer fixed footers and sidebars myself, so I don't run into the problem.) 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/
