Revising my wiki

gnunn

This past weekend I started playing around with the look of the "Westerlands Wiki":http://www.obsidianportal.com/campaign/the-westerlands/wikis/main-page, which is something I should have done a while ago. I was finally driven to get my rear in gear after poking around "Arsheesh's sites":http://www.obsidianportal.com/campaign/age-of-legends/wikis/main-page, which I can confidently say are some of the most beautifully presented wikis on OP.

In a fit of envious inspiration, I started tinkering with button images, fonts and graphics. I revamped my main page as a test, though I'm not sure I'm satisfied with the direction its going. I like the clean look of the body layout and text. I also like the font I found for my revamped sidebar. However, I'm not sold on the look of the sidebar. I feel like the sidebar background looks a little too tablet-y.

I'm also having trouble with the inline-block attribute for lining up the sidebar and the content. I've always found this particular attribute to be a bit temperamental. For example, while the sidebar and text line up properly in all browsers on my computer at work and at home, when I view it on my GF's computer, the format breaks and the body text appears directly below the sidebar.

I encountered similar breakage just now when trying to add a border to the body content of the main page. When I added a 2px gray border, it caused the fields to stack, even if I reduced the width of the content area by 5px (i.e. more than any added width from the border) To make matters more confusing, everything appeared normal in OP's preview window, but broke when I saved it and viewed the page.

Anyone have tips for making inline block more reliable?

gnunn

Here's the code


































This is where the content goes

gnunn

Stupid forums killed my pretty html staggering :(

Also, I discovered it was the padding attribute within the body content div that was breaking the alignment for some reason, which is odd since it shouldn't affect the outside width of the div. I managed to solve the issue by setting up the body content with the border and then creating a separate div inside it with just the padding attribute. It's ugly, but seems to work... weird.

ChainsawXIV

If memory serves, in standards compliant browsers the height and width represent the usable space of the element, with both padding and margins added to the values to determine the overall size of the element. As I recall however, border width is not specifically called out in the standard, and is included in some browsers' size calculations, and not in others. In practice, the exterior dimensions are usually more important, but that's the way the standard is written, so you have to do the math on your own.

gnunn

Okay, that makes sense. Meaning, I understand it, not that I agree with it from a design standpoint, but then I don't make the rules. Any idea what would cause discrepancies between computers operating the same browser? My wiki renders fine in IE and firefox on my computer & my work computer, but shows up screwy on my GF's computer at home.

arsheesh

Hey Gnunn,

First off, thanks for the shout out. Second, I rather like the new side bar you've developed. I don't really see a problem with it being "tablet-y", but hey, you make the call on that one. Also, I like the new font and page format that you've chosen. It adds to the distinctiveness of your site. I'm also glad that you switched the background image. The previous image tended, in my opinion, to make the site feel too "busy" and distracting (the reader's attention kept being drawn towards the background rather than the content of the page). The new background is much more subtle. Looking forward to seeing what else you've got in store for the site.

Cheers,
-Arsheesh

FrankSirmarco

I, for one, will be very upset if you remove Charlton Heston from your wiki page. He instantly classes up a wiki.

gnunn

I'm sure I can figure out a way to keep him in there.

DarkMagus

Very nice! Very nice indeed.

I didn't think there was room for improvement on such a great site, but you have raised the bar even higher Gnunn.

Poutine_Paladin

Nice clean look, Gnunn. Looking forward to it's "completion" so I can go wandering around in it for a few hours one bored afternoon between classes.

Beaumains

Aye; The Westerlands looks good - I'll have to peruse it (and *arsheesh's* campaign) after I've finished (much) more of my own.