Home › Discussions › General Archive › Floating Sidebar Help - General Archive Discussions on Obsidian Portal Community Forums
Floating Sidebar Help
Good health and long life to you, oh mighty html wizards - mere mortal here, beseeching your aid and succor.
In creating my latest wiki, I boldly used some code that I saw in an old thread which I can no longer locate to create a lefthand sidebar that floats off to the side of the main wiki-space. Unfortunately, it seems to be causing an issue which blocks links on the left side of the screen within the width of the main wiki-space, which means that users have to scroll the page to move those links above or below the range of the sidebar in order to use them. Obviously, this is bad.
I've tinkered with the code, but I don't see any way to fix it, and my html is quite weak to begin with.
My question is this: is there any way to salvage my floating sidebar, or must I abandon it for an in-line one? Links to articles, threads, and other potential sources of answers are also welcome.
Thanks for listening.
Amen.
"House Corinthyen is here.":http://www.obsidianportal.com/campaigns/housecorinthyen
In creating my latest wiki, I boldly used some code that I saw in an old thread which I can no longer locate to create a lefthand sidebar that floats off to the side of the main wiki-space. Unfortunately, it seems to be causing an issue which blocks links on the left side of the screen within the width of the main wiki-space, which means that users have to scroll the page to move those links above or below the range of the sidebar in order to use them. Obviously, this is bad.
I've tinkered with the code, but I don't see any way to fix it, and my html is quite weak to begin with.
My question is this: is there any way to salvage my floating sidebar, or must I abandon it for an in-line one? Links to articles, threads, and other potential sources of answers are also welcome.
Thanks for listening.
Amen.
"House Corinthyen is here.":http://www.obsidianportal.com/campaigns/housecorinthyen
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
This problem gets brought up in the the thread as well. The reason your having issues with your sidebar interfering with the other links on your page is that width (within the div tag that says "position: fixed") is set high enough that it overlaps the content on the wiki page. If you scale back the width to say, 10px, this will solve the problem of overlap, and allow you to click on all the links on your wiki pages. However this solution comes with another problem: reducing the with of your sidebar will simultaneously reduce the width of the color of the links within the sidebar (though not the text itself). I'm not sure if there is a good solution to this problem when using wiki links in your sidebar.
However, there is an alternative to wiki links. You could insert text images (e.g. graphics of text) into the sidebar and then link them to their corresponding pages. Reducing the width of the sidebar does not seem to have any effect on the text images within the sidebar. This is the method I use at my sites. I have a "Templates":http://www.obsidianportal.com/campaign/age-of-legends/wikis/html-templates-for-age-of-legends page over at my Age of Legends site that explains how to do this in a bit more depth and offers a look at the HTML template I'm using. Course you already have your own sidebar template now, but if you are thinking about using the method I mentioned it might be worth your while to check out the code I'm using.
Cheers,
-Arsheesh
I knew it did, I just couldn't find it. I suspected that might be the issue, but apparently I didn't make the value small enough to notice the difference. In fact, making that change solves all my problems by itself - the fact that I'm using Textile links instead of wiki links might have something to do with the lack of issues in the menu.
Thanks again for pointing me to that, and providing such a succinct solution.
Cheers,
-Arsheesh
Sounds like you don't need to worry about it, but it was just a thought to fix that issue for others without worrying about messing with the size of the div in pixels.