Thoughts? Too Distracting?

24

Comments

  • arsheesh
    arsheesh
    Posts: 850
    Thanks for that clarification Curufea, I'm sort of a rank amateur when it comes to coding.
  • Curufea
    Curufea
    Posts: 161
    No prob. I only read that part of the schema last week myself :)
    Although it was to help answer someone's question on the style attribute for a tag (again you can't do pseudo classes)
  • gaaran
    gaaran
    Posts: 740 edited October 2010
    I have a question, I'm having trouble making a background image load behind the side bar, but i don't see a difference in that part of the code from your code. the page is "here":http://www.obsidianportal.com/campaign/melekar/wikis/test-page

    i tried putting the background image in it's own div, because i had that work in the past once, but no dice on that either.
    Post edited by gaaran on
  • gaaran
    gaaran
    Posts: 740
    Also, i just downloaded google chrome, and this doesn't work in chrome, the sidebar appears over the body of the page, rather than off to the left.
  • arsheesh
    arsheesh
    Posts: 850
    Yep, I just downloaded Google Chrome and verified what Gaaran pointed out. Anyone out there HTML savvy enough to know if there is a work-around?
  • Curufea
    Curufea
    Posts: 161
    Firstly, I wouldn't put in so many divisions - just use one division with all the styles in a single attribute-


    Secondly, I'd put in display block and put in the direct URL to the image, not the Flickr page-
    http://farm5.static.flickr.com/4113/5066647827_39d0ed39d9.jpg
  • Curufea
    Curufea
    Posts: 161 edited October 2010
    Here's some fiddling to "have a look at":http://www.obsidianportal.com/campaign/paradox-diaspora/wikis/test-page

    Also note - try to use only double and single quotes - not angled quotes (ie don't copy and paste from this forum which converts to angled quotes).
    Post edited by Curufea on
  • SkidAce
    SkidAce
    Posts: 830
    Hmmm, when I first tried it, it floated on the way left. and I could scroll my page up and down and it would stay off to the side floating (which I assume is the intended effect).

    When I replaced the lines of code Chainsaw suggested to bring it in a bit, now its embedded within the page and scrolls with it.

    Unconquered Kingdoms, July 2016 CotM

  • arsheesh
    arsheesh
    Posts: 850 edited October 2010
    _Curufea_, thanks for your assistance, however your "fiddling" example stays fixed at the top of the screen, whereas the beauty of the original design is that the menu positioning is relative, so when you scroll up and down the screen, it automatically repositions itself relative to the _current_ top of the screen.

    _Gaaran_, At any rate, I found that if you just flip the two div tags, such that the "position:fixed" div tag is above the the "position:relative" tag, the the menu floats to the far left of the screen in Google.Chrome; e.g.:




    Hope that helps.
    Post edited by arsheesh on
  • Curufea
    Curufea
    Posts: 161
    True - I think the main problem was just using the flickr image's page rather than the direct link to the image :)
  • gaaran
    gaaran
    Posts: 740
    good call, when i grabbed the link, i thought it WAS the direct link, thanks for that.

    also, is there a tag for not tiling an image for the backgrounds? although i suppose i know the size of what the image should be, so i can just adjust the .jpg

    thanks for the help
  • arsheesh
    arsheesh
    Posts: 850 edited October 2010
    This should work:

    background-repeat:no-repeat;

    *EDIT*: Here's an example:
    Post edited by arsheesh on
  • gaaran
    gaaran
    Posts: 740
    I saw what arsheesh was working on, so i stole his idea for tabs as well. i thought i'd see what people thought, and also if anyone was having problems in particular browsers. I know the code is messy, but every time that i try to clean it up i break something. "here":http://www.obsidianportal.com/campaign/melekar-test/wikis/main-page it is!
  • RaseCidraen
    RaseCidraen
    Posts: 890 edited October 2010
    IN REVERSE CHRONOLOGICAL ORDER!:

    Gaaran: That is absolutely gorgeous. I think it works marvellously. I wonder if there may be an option in the future to replace the existing tabs with user created images. I mean, it'd be the same functionality, but we'd get to be able to produce the same effect on our own! The only thing I might suggest is replacing the "background" on your image with 202020, which is the same color as the background of Obsidianportal. Other than that it looks bloody fantastic.

    Arsheesh: Hooray for no-repeats! Darnit: in deference to your decision to flip the tags, now I must go and re-update my whole site with that update you concocted! Also, the new site layout you've come up with is pure flash, absolutely incredible. I've got to get my innovating shoes on to keep up, only I left them at home!

    I have to say I'm quite proud that something I originally created because I was being lazy turned into something that the rest of the world has turned into pure awesome.

    *EDIT:* Arsheesh, you crafty little bugger. I almost didn't realize what you had done to the background of the page until I scrolled down all the way. That idea puts mine to shame, sir. I salute you.
    Post edited by RaseCidraen on
  • Grokkit
    Grokkit
    Posts: 23
    Thanks Arsheesh for the correction... now the Nav works for Chrome and Safari!
  • arsheesh
    arsheesh
    Posts: 850
    Rase and Grokkit, thanks but I was just tinkering with code already set in place by others. In the case of the nav menu, we all have Rase to thank for that. As far as the background image, I got the idea from someone else. I wasn't lying when I said earlier that I'm not all that savvy with HTML. I'm just glad there are others out there that are so that I can try to figure out how to improve my own sites by backwards engineering the foundation that they've laid.
  • Duskreign
    Duskreign
    Posts: 1,085
    Gah! I am so lost in all this fancy, dancy, chancy, plantzy code! (I made most of that last part up, but not the confusion part). I want to integrate some of these ideas, but as I have a metric f#$@ton of wiki pages to change once I settle on something, I want to make sure it's done right. I want to incorporate a bank of images on the floating-over-the-left-edge-of-the-wiki sidebar, and I also want to figure out how to pretty-up my navigation buttons beneath the campaign banner, but after a few days monkeying around, I threw my hands up and realized I wasn't going to figure it out on my own.

    I am so impressed by all this. Arsheesh, Rase, will you adopt me? Because I want to be just like you when I grow up.
  • RaseCidraen
    RaseCidraen
    Posts: 890
    Never grow up! Never surrender! Dusk, just send me an idea of what you want done, and I'll try and hash out the code for you, complete with some graphicalization editing if necessary. I'll have to nip into one of the other's pages to nab the code for replacing the nav buttons, but I think I've got a good idea about that... Hazarding a guess, they used an Image map, or single images strategically placed over a background. Some creative Z-Stacking and it'll be looking good as new! Hit me up when you'd like me to get started!
  • Duskreign
    Duskreign
    Posts: 1,085
    Thanks Rase! You hooked me up with some lessons in html, and I wound up trying something new on "my home page.":http://www.obsidianportal.com/campaign/wyrmshadow I am interested in hearing your thoughts on it. I am not 100% sold on the idea, honestly.

    Also, I tried the floating sidebar, and I can't get it to work right. No matter what I do, it seems to prevent me from clicking anything within a few inches to the right of the sidebar, which infuriates me with the power of a thousand furious suns.
  • RaseCidraen
    RaseCidraen
    Posts: 890
    Dusk, that looks absolutely fantastic. I definitely like the way it looks, and it may work there. You lose a bit of modularity going with a static image, but image mapping is a heck of a lot easier than getting HTML to be your friend in many cases.

    Oh, and Dusk? Bob's your uncle. For the sidebar: First line of code, shrink the div to 10px wide. That'll KO the linking problem. Savvy?
  • Kassious
    Kassious
    Posts: 5 edited November 2010
    I'm probably going to blush in shame over this, but being the AWESOME programmer I am I need the help. For some reason my side-bar will not leave the Wiki pane.

    Edit: Let's add "my page":http://www.obsidianportal.com/campaign/tiers-of-the-shadow-walker/wikis/test-page shall we?
    Post edited by Kassious on
  • RaseCidraen
    RaseCidraen
    Posts: 890 edited November 2010
    Quick, Kassious, before it explodes!

    "Here!":http://www.obsidianportal.com/campaign/ragged-vestiges/wikis/rases-testing-area

    Took some fiddling, but at a guess - did you copy/paste from here, or from a page? Here gives slanty " marks, which makes them break. I hope this code works for you!

    *Edit:* I didn't know HTML had an insert laughter command. All I could ever get my code to do was snigger. At me.
    Post edited by RaseCidraen on
  • Kassious
    Kassious
    Posts: 5 edited November 2010
    *mutter* Stupid OP hate...

    Anyhow, it worked great, thank you. I actually pulled it off of I think it was Gnunn's PDF guide.
    Post edited by Kassious on
  • RaseCidraen
    RaseCidraen
    Posts: 890 edited November 2010
    Ahhh - Gnunn actually inspired me to do this. I'm glad to see we have another practitioner of the arts here! I like the cheat sheets you have. If you need linked status effect pages (You're running 3.5, so they should be the correct descriptions.) I have them on my wiki.
    Post edited by RaseCidraen on
  • AdamDray
    AdamDray
    Posts: 10
    Do you mean for the sidebars to float over the main page text? This is very distracting, even disruptive to reading.

    Here's what the various campaign pages look like on my monitor: "Kassious":http://cdn.obsidianportal.com/assets/30200/op-sidebar-1.jpg and "Rase Cidraen":http://cdn.obsidianportal.com/assets/30201/op-sidebar-2.jpg ...

    You might consider raising the transparency level so you can see the text behind them but I still think that'd be crowded and messy.
  • RaseCidraen
    RaseCidraen
    Posts: 890
    Adam - Not sure what's causing that. It may be a browser incompatibility combined with a zoom level issue. The sidebars are designed to sit to the left of the page. I wonder what's causing it. Does it still cause the issue on "this":http://www.obsidianportal.com/campaign/planescape-campaign/wikis/sigil page? I wonder if it's the div arrangement.
  • gaaran
    gaaran
    Posts: 740
    Your Planescape page is fine Rase. but the test page show up the same for me as well, it's an issue with chrome and safari with the order of the position divs. I think if you flip them around it will work.
  • arsheesh
    arsheesh
    Posts: 850 edited November 2010
    I think this is just a simple case of needing to reverse the "position relative" and "position fixed" div tags (see my earlier comment). The side bar code for both the Ragged Vestiges and Kassious's page had these tags in the wrong order and consequently when I tested them out in Google Chrome I saw what AdamDray did. However the sidebar in your Planescape campaign displays just fine in Google Chrome Rase.

    Cheers,
    -Arsheesh

    *EDIT*: Looks like Gaaran was quicker on the draw!
    Post edited by arsheesh on
  • RaseCidraen
    RaseCidraen
    Posts: 890
    Thanks a ton for sorting out the browser incompatibility, guys. The one issue that this isn't good with, is that it renders a portion of the left side of the wiki pages un-clickable. I solved it using images, but I can't figure it out (without swapping the divs and breaking chrome) using div containers. :(
  • arsheesh
    arsheesh
    Posts: 850
    Rase you have the width of your "position:fixed" div tag set at 125px. Try setting it at 10px, that ought to solve your problem.
Sign In or Register to comment.

April 2024
Season of Strife

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

Categories