|
| |
|
|
JBW
Posts: 54 Joined: 3/18/2004 Status: offline
|
Negative margin 3 column layout with internal links - 6/10/2008 8:03:36
Hi all, Long time since I've posted here! However, I have a problem with a 3-column CSS layout and I'm hoping somebody here may be able to help. I am using the negative margin approach, which works great. The problem occurs if I have internal links in the page (i.e. using href="#link" to scroll to an anchor of that name on the same page). The content scrolls to the anchor required, but not in the way desired. I have attached a very stripped down version of the code to demonstrate my problem. Open the html page and try clicking on the top link in the page and you should see what I mean. I am hoping that there is a way to get it to scroll to the desired link instead of losing most of the page! Alterantive methods of rendering a 3 column layout would be welcome but the golden bullet would be if the attached code could be remedied. The reason being that the code is already in widespread use and a bottom-up rewrite is not practical. Many thanks in advance, John.
Attachment (1)
|
|
|
|
JBW
Posts: 54 Joined: 3/18/2004 Status: offline
|
RE: Negative margin 3 column layout with internal links - 6/10/2008 8:59:06
Hi Tailslide, I have put a version of the template here. It is difficult to say exactly what the problem is except to say that the content does not scroll correctly when using an internal link. Instead of scrolling down to the desired anchor, the top of the content is lost - effectively, the content is cut off above the anchor. Hopefully the demo should make it a little clearer. Many thanks for looking into this. John.
|
|
|
|
JBW
Posts: 54 Joined: 3/18/2004 Status: offline
|
RE: Negative margin 3 column layout with internal links - 6/10/2008 9:51:51
Thanks Tailslide, Your changes do fix the link problem. However, they break the template - the columns continue way below the end of the content. The huge padding and negative margins, plus overflow: hidden on the container div means that the 3 columns should be of equal length and as long as the longest column (so as long as whichever has the most content). Anyway, this all leads me to believe that internal links like that are an inherent problem with the negative margin approach. It seems that it can only be remedied by changing the layout principle; and that there are two solutions: 1 - Go with your approach you mentioned above (or any other 3 column layout). 2 - Avoid using internal links in a template like this. Any more input would be appreciated, but if it looks like this is going to be a headache to fix then I wont ask anyone to lose sleep over it! Thanks again, John.
|
|
|
|
JBW
Posts: 54 Joined: 3/18/2004 Status: offline
|
RE: Negative margin 3 column layout with internal links - 6/10/2008 10:12:03
Many thanks again, Tailslide. I will have a look...
|
|
New Messages |
No New Messages |
Hot Topic w/ New Messages |
Hot Topic w/o New Messages |
Locked w/ New Messages |
Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|