Character Info Repository

Planning to create or to revamp a shrine and need some help or a second eye with your content? Post away!
Forum rules
The usual guidelines in Constructive Criticism apply, and you have the option to flag your topic as "Sweet".
Robin
Events Staffer
Posts: 3072
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Re: Character Info Repository

Post by Robin »

Destinie wrote:Much better than the Dossier-theme you were going for, Robin! IMO I used to see that manilla folder design in so many things forever ago that it just seems so cliched and I don't think it really catered to your content. Definitely, something like this looks much easier to read.
nyxmidnight wrote:Everything Destinie said is true.
Yeah, I designed the original theme back in '09 when I was 1) horribly depressed 2) trying and failing to get back into hobby webdesign 3) trying to be cool. For all those reasons and more, it just didn't work no matter how much time I put into tweaking it :/ I'm glad this particular theme looks better and reads better! :D :D
Lethe wrote:All of dubiousdisc's input is gold. :Db I've already told you I like your new layout! I think I would like it more if the padding between text and border of the white part were a bit bigger, so that it's the same as the padding in the black part. I like how you've linked newest/featured characters as well, including their epithets. For the navigation on the characters page itself, I definitely second listing titles and a short description - perhaps even make a small headshot icon for each of them with the screenshots you have. If the game has different kinds of classes (tanks, mages, healers, etc.), I think it would also be nice to group them on the overview. :D

I agree that if the presentation looks good, a giant wall of text shouldn't turn people away....... Or so I hope....... /sweats. Either way, like dubiousdisc, I prefer the sections I'm going to read to be visible right away; at the very least, the main part of the text should be visible right away. The length of Origin + Creation Story combined looks good to me. If you decide to leave Costumes in the main content space rather than in the sidebar, I think Theme Songs and Costumes (the "extras"/optional parts, so to speak) could be presented like horizontal tabs at the bottom of the page, combined with collapsible divs? Wikis, for example, sometimes have galleries in an additional tab.

I'm looking forward to seeing your character sidebar!
dubiousdisc wrote:Nice, Robin! Keep at it!

Just one thing - remember to have the same amount of padding in the content box as you have in the sidebar.
YAY :D

Omg, the padding issue...honestly, I didn't even see that when I made the screenshot. Granted, I had just spent 15 minutes screaming at the sidebar and content divs for bumping each other out of the way ^_^;. My only worry is that making the content div have 15px padding like the sidebar will make the content div too narrow-looking. But I'll hack around with the widths of the divs and see what works. Right now everything together is 600px, so I could probably go up to 700px without much visual difference except a bit more text breathing room. And I agree, the black sidebar definitely looks better than the white content area, now that I'm not raging and going "OK FINE F*CK IT BE THAT WAY JUST DISPLAY LIKE I ASKED YOU TO SDLFKJSDLKFJ" ....ROFL

Also, each character page already has a 120x120px headshot in the top right corner (right where people aren't even going to look according to information flow theory -_-) so I am likely going to plunk those straight into the sidebar for each character ^o^. (I've tried it already on my hero template tinkering page and it looks pretty cool--will take screenshot tomorrow when I am more finished with tinkering xD) I might include the headshots on the main page as well, but not certain yet. Hmmmmmmm maybe I could also use the icons in some kind of decorative black&white or sepia-tone footer piece or something... :O

I'm also planning at the moment to put the small costume thumbnails into the sidebar as well, so that you see it as you scroll down the page a bit, but if that approach doesn't work out, I can definitely put them at the bottom of the character page. No worries! I just hope the costume shots and the software will play nice together xD
~ a dream is a wish your heart makes ~
withinmyworld.org
Robin
Events Staffer
Posts: 3072
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Re: Character Info Repository

Post by Robin »

HOKAY, SO, HERE'S THE SITE...IT'S CHILLING...

Not officially ready to plug the new site in its own thread, but I got everything new uploaded...click button below to see:

Image

Right now, I'm checking for divs bumped out of place, weird font rendering, information missing that you'd like to see, etc. Also, if there are better ways I can design some of the heading typographies to play nicely together (especially on each character's page), let me know.

KNOWN ISSUES
- I am aware of the costume thumbnails not all being the same width...short of getting in Photoshop and manually changing them all (which I am not willing to do), I can't really fix that at the moment. It's an "eh...good enough" moment. LOL!
- The sidebar and content divs not expanding to be the same height is driving me absolutely BATTY but I have never been able to fix it, in all the years I've been building floated div layouts like this. The sidebar just WILL NOT expand down to match the content div...slkdjfasjdf my rage is exhausted tonight from other things, otherwise I would hulk smash. LOLOL
~ a dream is a wish your heart makes ~
withinmyworld.org
dubiousdisc
Administrator
Posts: 2535
Joined: Thu Jun 21, 2012 5:49 pm
Contact:

Re: Character Info Repository

Post by dubiousdisc »

Robin wrote: - The sidebar and content divs not expanding to be the same height is driving me absolutely BATTY but I have never been able to fix it, in all the years I've been building floated div layouts like this. The sidebar just WILL NOT expand down to match the content div...slkdjfasjdf my rage is exhausted tonight from other things, otherwise I would hulk smash. LOLOL
Eehhh...I know how to solve it but it would require pretty much recoding half of it... D:
Robin
Events Staffer
Posts: 3072
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Re: Character Info Repository

Post by Robin »

*curiosity roused* :O ?

This isn't the first layout I've had this trouble with, so it might just pay to know how to fix it even just for future reference :)
~ a dream is a wish your heart makes ~
withinmyworld.org
dubiousdisc
Administrator
Posts: 2535
Joined: Thu Jun 21, 2012 5:49 pm
Contact:

Re: Character Info Repository

Post by dubiousdisc »

Alright, this is a solution:

HTML

Code: Select all

<div id="wrapper">
          <div id="innerwrapper">
                    <div id="column">
                    I am a column!
                    </div>

                    <div id="content">
                    I am the content!
                    </div>
          </div>
</div>
CSS

Code: Select all

#wrapper
{
width:900px;
margin: 0 auto;
}

#innerwrapper
{
position: absolute;
}

#column
{
width: 300px; /* all these width numbers are currently bullshit, replace with whatever you need */
position: absolute;
height: 100%;
}

#content
{
width: 600px;
position: relative;
height: 100%;
margin-left: 300px; /* same as the #column width, recalculate later if you add padding etc. */
}
Explanation:
#wrapper is the element that positions everything in the center.
#innerwrapper is absolutely positioned.
#column is absolutely positioned and 100% height. Because of the way absolute positioning works, this means that the 100% height will be that of the last absolutely positioned element, which is #innerwrapper!
#content is, however, relatively positioned, so to stretch #innerwrapper to the height needed, since that is the point of reference we're using to stretch the column. To position it correctly, there's margin-left as needed according to what width you gave to your column.

When you add padding to this model, I recommend doing it in percentile and subtracting that from the height. Example: if your column has a padding of 2%, its height becomes 100% - 2% x2 (top and bottom) = 96%.

There's a lot of other ways to achieve this, but this is a fast one and also seems like it'd match more what you've already made :)

If you need any further explanation, don't be shy!
Last edited by dubiousdisc on Mon Aug 08, 2016 3:19 pm, edited 1 time in total.
Reason: RELATIVE POSITIONING ON THE CONTENT. RELATIVE, NOT ABSOLUTE. WOW, SELF. WHAT THE FUCK.
Robin
Events Staffer
Posts: 3072
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Re: Character Info Repository

Post by Robin »

Oooooooo WOW. I would have never thought that absolute positioning would work like that!! (I've been using floated divs so long I forgot about it honestly XD)

I think I understand everything you've laid out (very well) above, but if I hit any troubles I will say so...either that or you will hear a shout of joy from thousands of miles away XD
~ a dream is a wish your heart makes ~
withinmyworld.org
Robin
Events Staffer
Posts: 3072
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Re: Character Info Repository

Post by Robin »

OK, I modified my stylesheet to match, and I got the columns working beautifully! OMG! <3 I had to make the wrapper and mini-wrapper the same width and tinker with the content block's width, otherwise it was left-aligned, too skinny, and looked yucky...but it works! MAN IVE NEVER HAD MATCHING COLUMNS I FEEL STYLISH -^o^-

Only problem is, one of my characters' origin stories is ridiculously long compared to the others, and so I've had to set the min-height to like 10000 px or something to get that one to be readable. That, in turn, seems to have thrown the footer off and there's all this random extra space at the bottom...? (Not to mention that said footer is actually hiding behind the content and sidebar divs now, for absolutely no reason that I can see.......LOL)
~ a dream is a wish your heart makes ~
withinmyworld.org
dubiousdisc
Administrator
Posts: 2535
Joined: Thu Jun 21, 2012 5:49 pm
Contact:

Re: Character Info Repository

Post by dubiousdisc »

OH WOW I'm an idiot.

Remove the min-height from #miniwrap.
#content needs to be relative, not absolute, else how is the miniwrap going to know what size the content is! I'M SO DUMB sorry

IN FACT UH LET ME EDIT THE ABOVE POST IN CASE SOMEONE USES THAT ADVICE

(Advice for self: never post right after writing something, let it sit so that you can come back to it later and be like wait what that's dumb)
Robin
Events Staffer
Posts: 3072
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Re: Character Info Repository

Post by Robin »

LOL! No worries, Dubs! I just thought it was user error on my part xD Thank you for going back and explaining/fixing that!! :D (And I hear ya on the "let it sit" advice--I literally let everything I write sit at least overnight before doing anything with it because I am prone to writing stuff that doesn't make much sense later. Brain y u do dis)

I applied the fix you suggested and it works much better! What do y'all think??
~ a dream is a wish your heart makes ~
withinmyworld.org
dubiousdisc
Administrator
Posts: 2535
Joined: Thu Jun 21, 2012 5:49 pm
Contact:

Re: Character Info Repository

Post by dubiousdisc »

(I try to let writing sit whenever possible but...I'd imagine I'd be able to write a COHERENT FORUM POST and reply quickly like the cool kids. SIGH).

Alright, now that the layout works!
I think it's pretty good-looking and pretty well-organized. I've only got one thing:

On my screen, the background ends on either side of the screen, leaving two white columns at the sides. My suggestion is to add background-size: cover; to make it work for sure at any size. It will stretch a little bit at high resolutions, but since it's a background texture nobody will be able to tell.
I realized just now by snooping into the code that this was not an effect you intended XD I thought you wanted to have a white border around the layout, lol
Post Reply