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)
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.
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
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.
_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.:
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
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!
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.
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.
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.
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!
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.
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?
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?
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.
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.
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.
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.
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.
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!
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. :(
Comments
Although it was to help answer someone's question on the style attribute for a tag (again you can't do pseudo classes)
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.
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
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).
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
_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.
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
background-repeat:no-repeat;
*EDIT*: Here's an example:
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.
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.
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.
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?
Edit: Let's add "my page":http://www.obsidianportal.com/campaign/tiers-of-the-shadow-walker/wikis/test-page shall we?
"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.
Anyhow, it worked great, thank you. I actually pulled it off of I think it was Gnunn's PDF guide.
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.
Cheers,
-Arsheesh
*EDIT*: Looks like Gaaran was quicker on the draw!