Floating side bars casting shadows that block links

kenurion
kenurion
edited November 2013 in Campaign Portal Building
I'm having trouble with my floating sidebar blocking links.

"https://saga-of-jaraah.obsidianportal.com/wikis/kingdoms":https://saga-of-jaraah.obsidianportal.com/wikis/kingdoms

As you scroll down the page, the links that overlap with the floating sidebar get blocked. It's as if the sidebar has a shadow on the left hand side of the page and blocks the links as it floats down while you scroll. Make any sense? I noticed the same problem on other campaigns with floating sidebars.

"For example":https://planescape-campaign.obsidianportal.com/wikis/sigil

Thanks!

Kenurion

Comments

  • Langy
    Langy
    Posts: 364
    I remember this problem! I had the same issue a good while ago; let me see if I can remember how it was fixed. Gimme a few moments...
  • Langy
    Langy
    Posts: 364 edited November 2013
    Ah, right. Remember how to fix it now. Anyways, your sidebar is currently composed of two divs that look like this:
    Post edited by Langy on
  • Keryth987
    Keryth987
    Posts: 1,018
    Since Langy brought it up, I have to ask.

    Is it possible to do a side nav bar, like kenurion has in his site, through CSS now?

    And if so, HOW????

    I had to remove my Div based one after the reforge, to get my site back to functionality, but I'd like to put it back

    Keelah Se'lai,
    Keryth
    "Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
    "Campaign of the Month - July 2013":http://blog.obsidianportal.com/shadows-over-new-york-julys-campaign-of-the-month/

  • Langy
    Langy
    Posts: 364 edited November 2013
    Through *just* CSS? No. We've never been able to do that through just CSS, and never will - CSS can't add new elements or alter links, as those are considered 'content'.

    You can use CSS to style a div, though. You do it via something like:

    @

    Sidebar content goes here

    @

    Then in your custom CSS file you use:

    @.sidebar-top{
    position:fixed;
    width:0px;
    top:50px;
    }
    .sidebar-left{
    position:relative;
    right:220px;
    }@

    That'll allow you to control the styling of the sidebar via the CSS file, but you'll have to still add the div's manually into every page you want them to show.
    Post edited by Langy on
  • kenurion
    kenurion
    Posts: 80
    Awesome! That fixed it!

    Kenurion
  • Aenor
    Aenor
    Posts: 20 edited November 2013
    I'm having the same problem with the sidebar blocking other links. I tried the trick shown by Langy, but nothing has changed. The left side of the content area is still a "dead zone". Cannot... comprehend...

    https://campaign-52444.obsidianportal.com/wikis/the-nations

    I'm not even sure if this is caused by the sidebar.
    Post edited by Aenor on
  • Langy
    Langy
    Posts: 364
    That's not caused by your sidebar (though your sidebar could have caused the same issue).

    It's caused by the extra div's you're using for the other images in that six-link block in the middle of the page. For the divs containing the links to Aenoria, Osric, etc., just change the widths to 0px.
  • Aenor
    Aenor
    Posts: 20
    D'oh! Thanks man.
  • Aenor
    Aenor
    Posts: 20 edited November 2013
    This is a bit (a lot) beside the point, but if I want sidebars like these: https://campaign-52444.obsidianportal.com/wikis/the-nations on my every page, which I could just copy/pase every time with minimum time spent, how would it be done?

    (yes, I have no computer skills whatsoever)

    Any help would be appreciated.

    + is there any way of getting rid of the default links on the left side? I already tried to cover them with the sidebars but that won't work.
    Post edited by Aenor on
  • Langy
    Langy
    Posts: 364
    You can just cover up the links on the left if you like. Make sure one of the divs you have the sidebars under has z-index:4 or higher in its properties; that'll make it so the sidebar is displayed above the default links.

    I don't recommend doing that unless you replace the dashboard and settings links, though, since both of those are useful.

    If you want to just copy/paste them onto every page, just copy and paste the code you used for them onto every page. There's no other way to do it.
  • Aenor
    Aenor
    Posts: 20
    Ok, please bear with me here. Can the z-index thingie be accomplished via HTML? (I'm not ascendant)

    When I copy/paste the sidebar code into my other pages it goes all over the place:

    https://campaign-52444.obsidianportal.com/wikis/feinns-wheel
    https://campaign-52444.obsidianportal.com/wikis/vod-hin

    I assume that is because everything in the code is in relation to the original content? I don't want floating sidebars, I want them locked down tight.
  • Langy
    Langy
    Posts: 364
    Yeah, the z-index thing can be accomplished via HTML. Just stick it in the same place you put all the other styling (with the style="" area of your div definition).

    The sidebars floating around can be a problem, but that shouldn't happen if you put the sidebar stuff at the _top_ of each page, rather than the bottom. Alternatively, you can make the 'upper' div be position:absolute instead of position:relative, which should make it independent of the location of the rest of your content.
Sign In or Register to comment.

February 2023
The Domain of Dread Council Meeting

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions