Home › Discussions › Campaign Portal Building › CSS Oddity - Help Appreciated - Campaign Portal Building Discussions on Obsidian Portal Community Forums
CSS Oddity - Help Appreciated
Hi folks,
Long-time lurker, I *think* I have posted elsewhere in the forums prior to today, can't recall.
On to the real issue.
I am trying to reverse-engineer the hover effect shown on the dark queen of the west campaign (links at the bottom). I have been working with Gaaran, who has been great and sent me a copy of the HTML for the page and a link to the actual CSS being used (Firebug CSS content was rather huge and seemed more than the Pre-OP processed version). With the exact HTML and the exact CSS, one would think you would get the same results, but such is not the case. What I get instead seems to have the basic elements, but layout is all wrong and the hover element is completely missing, defeating the main objective (to reverse engineer how it was achieved).
Anyone have any idea as to why the exact same HTML and the exact same CSS produces different results? While my real goal is to get a disconnected hover result (unlike RobertKety's use in his awesome Dragonlance wiki), I am now also quite perplexed as to how identical inputs result in different outputs. I tried both Textile parsers, just in case, but no change (I don't believe any actual Textile code is used, actually). Looking through the settings, the only other change I could see being made is typekits, but that is all about custom font stuff so I have doubts that it would produce such a difference. So why might the layout, driven by the CSS, be different when my CSS comes directly from the CSS file of the other campaign?
Relevant addresses:
http://www.obsidianportal.com/campaign/the-dark-queen-of-the-west/wikis/main-page
http://www.obsidianportal.com/campaigns/the-dark-queen-of-the-west/themes/custom_css
http://www.obsidianportal.com/campaign/bels-test/wikis/main-page
Thanks in advance for any assistance provided, as I am at a loss for how to proceed otherwise.
Long-time lurker, I *think* I have posted elsewhere in the forums prior to today, can't recall.
On to the real issue.
I am trying to reverse-engineer the hover effect shown on the dark queen of the west campaign (links at the bottom). I have been working with Gaaran, who has been great and sent me a copy of the HTML for the page and a link to the actual CSS being used (Firebug CSS content was rather huge and seemed more than the Pre-OP processed version). With the exact HTML and the exact CSS, one would think you would get the same results, but such is not the case. What I get instead seems to have the basic elements, but layout is all wrong and the hover element is completely missing, defeating the main objective (to reverse engineer how it was achieved).
Anyone have any idea as to why the exact same HTML and the exact same CSS produces different results? While my real goal is to get a disconnected hover result (unlike RobertKety's use in his awesome Dragonlance wiki), I am now also quite perplexed as to how identical inputs result in different outputs. I tried both Textile parsers, just in case, but no change (I don't believe any actual Textile code is used, actually). Looking through the settings, the only other change I could see being made is typekits, but that is all about custom font stuff so I have doubts that it would produce such a difference. So why might the layout, driven by the CSS, be different when my CSS comes directly from the CSS file of the other campaign?
Relevant addresses:
http://www.obsidianportal.com/campaign/the-dark-queen-of-the-west/wikis/main-page
http://www.obsidianportal.com/campaigns/the-dark-queen-of-the-west/themes/custom_css
http://www.obsidianportal.com/campaign/bels-test/wikis/main-page
Thanks in advance for any assistance provided, as I am at a loss for how to proceed otherwise.
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
- Kallak
Just trying to help out.
First, let me clarify what I am looking to achieve. On the Dark Queen of the West main wiki page, hovering over an icon on the periphery displays a separate text box in the center, with content specific to the icon being hovered over. I am looking to use this in a number of ways, one example is having map info display in a legend box rather than on top of where someone is hovering. The DQotW page is the only example I have seen of this disconnected association done without scripting.
@Kallak: This is exactly what I have been looking for, thank you! After some trial and error, I have it figured out sufficiently. Awesome stuff, thank you again.
@Robert: What I was trying to do can be seen on my "hover test page.":http://www.obsidianportal.com/campaign/gurps-high-fantasy/wikis/hover-test
It's posted on my storage sandbox page because the test site is meant to be able to be blown away at any time as testing requires.
As for the differences between pages, the content was all there (for me) on my page but was displayed in a single column and didn't have that center element (or the hover effect I was trying for).
@Killervp: That was indeed my next step, but reading through the forums (been lurking for quite some time), there were comments from Rase that Gaaran did "most of the heavy lifting" as far as the site went, which is why I went to him first. As I stated above, he was quite helpful in trying to replicate the DQotW page.
For those interested in the hover effect, which is pretty darn handy, my hover test page (which won't be going away) has not only the results, but also the HTML code shown as well as the CSS code being used, so anyone can look through and see how to achieve the results.
Again, thanks to all who helped, and definite big thanks to Kallak.
NinjaFlashX, if you read this and put the adjacent sibling technique on the FAQ (which I recommend), definitely be sure to please credit Kallak for the victory.
- Kallak
Side question, how do you do your links in the forums? Hrefs don't work (or don't appear to in preview), and using the double brackets of textile seem to be limited to within a campaign rather than outside of one, like the forums are.
Thanks again for the great assistance in not only solving my issue but also in helping make the example an even better tool for others (and myself when I forget 6 months from now).
@"Google":http://www.google.com@
- Kallak