MEMBER LOGIN   |   Username: Password:
Twitter: (The Twitter thing is temporarily down due to a Twitter-related bug or something!)
Recent Updates: The New Site is now open! (6 years ago) Which of [these facial express... Vulpin Adventure OST| "Blast to the past!", a review of Plazma Burst 2 by Rating Orb Duogduogduog
...
Pseudolonewolf`s Avatar Ugh, CSS/HTML issues! Fri 26th Aug 2011 11:48pm

Category: The New Site

I've decided to do a complete rethink in regards to the layout of the new version of the site, due to the other one being cramped on smaller resolutions, and because I didn't think it was all that appealing in general, really...

So here's a screenshot of the general layout that I've come up with now: [LINK]

As you can see, it's quite different.

Each page would be constructed out of these 'blocks' of different sizes and colours; the magenta ones on that page wouldn't carry over onto other pages or anything; only the dark header and footer would act as a template between all pages.
Each block could be a link, and it'd lighten when you rolled your mouse over it. It feels sort of sleek and fancy in action.

It's far from a complete picture though, and it'll likely continue to evolve visually and stuff as I work more on it; I only started building it a few hours ago.

But there's a stupid problem with the layout, and I'm sort of in need of assistance from people *who actually know about web design*. If you aren't familiar with concepts like 'CSS' or 'display:table-cell' and so on, then the section below is not for you.

If you DO know about that stuff though, then, uh... I'll explain what's going on.

Firstly, I should explain that for this layout, I saw no option but to use tables, but every web designer worth their salt would tell me never to use tables for layout, and that divs are better.

So I've gone half way and used divs, but with display properties that force them to render like table elements. That is, display:table, display:table-cell, and display:table-row.

It's resulted in a hideous mess of nested divs just to get the layout working at all, but at least it mostly DOES work and I doubt I could have done this without loads of ugly hacks without these display properties.

They seem to work... weirdly though. Compare these two screenshots:

Here's the first, which I linked to earlier in the post: [LINK]

And here's the second; the only difference here is that there's a h1 tag added at the top of the main content area: [LINK]

You may notice that the right column has shifted down a bit; this is the problem. And it doesn't make any sense to me! It's like it's linked to the main content area in some bizarre way, and it doesn't appear to have any margin or padding in that empty bit, or at least none that Chrome's Element Inspector can detect...

Rather than explaining the code or anything, I'll just link directly to an interactive example, which you can inspect the elements of and alter them in order to try to get the problem to go away. I've coloured the column that contains the nested table in green to show that it is being draw correctly as a column, but the nested table is being shifted down according to the content of the left column thing...

Here's the example thing: [LINK]

Also, if you try altering the padding of the main content area - the 'block milkchoc' one - that creates weird effects, too. The text itself isn't affected by altering the padding-right value, and greater padding-top values shift the right column down more and more.

It seems to be a result of how CSS pseudo-tables work in general, and I'm not sure there IS a solution... But if anyone can help to solve this bizarre issue, I'd greatly appreciate it! I've been working at it for several hours now with no success, and I've tried many different things.

So yes. I only want help from people who actually know what they're talking about from quite a bit of experience with web design, please; not obvious suggestions from people who've maybe casually once made a quick webpage or done a class about this in school or something...

Ideally I'd like you to experiment yourself using something like Chrome's Element Inspector, which can be used to alter the content of the page without accessing the code directly. That way, you can implement your ideas yourself and see if they work, rather than merely suggesting them.

The goal, just to be absolutely clear, is to prevent that right column from moving down based on the content of the wider column to the left; there should be no part of the temporary green area visible behind it at the top.

Anyway, hopefully I can overcome this and continue making progress with non-layout stuff... And hopefully people won't hate this new layout. o_O
12 comments

 

12 Commentson 6 roots

Friendly Fox`s Avatar
Rating Orb Friendly Fox 15 Brazil MelancholicPhlegmatic 50C 0F
6 years ago | (0)
Actually, I'd say this one layout looks more like a "mobile" site. No offense, of course. There is nothing wrong with mobile sites. Just that I think that new one would be kind of... Small. Maybe too... Minimalist. You have some more space to work with, Pseudo. Of course, there are the ones with the smallish monitors. But those are a minority. Sorry, but how about focusing on the biggest part of the active community? It's hard to see a monitor with less than at least 1024x768 these days.
Friendly Fox`s Avatar
Rating Orb Friendly Fox 15 Brazil MelancholicPhlegmatic 50C 0F
6 years ago | (0)
... To be very honest, I'd prefer seeing the site like it is right now instead of like that. Sorry, but I think it's very nice and is even better than those new site projects you've been working on.
Blaze12`s Avatar
Rating Orb Blaze12 13 United States SanguinePhlegmatic 18C 1F
6 years ago | (2)
I honestly liked the old one better. It had more of a (I'm sorry!!!!!) professional format and looked better in a fighunterish way.
Brilliand`s Avatar
Rating Orb Brilliand 23 United States MelancholicPhlegmatic 27C 6F
6 years ago | (2)
As for the padding-right on the main content area - that corrects itself if you switch tabs and switch back. It's a bug in Chrome - Firefox doesn't have that problem. It shouldn't cause you too much trouble, since the problem only shows up if your change the right padding while viewing the page; the right-padding that's set when the page loads will work fine.
Brilliand`s Avatar
Rating Orb Brilliand 23 United States MelancholicPhlegmatic 27C 6F
6 years ago | (5)
Vertical-align:top on the div with 35% width also fixes it, as does setting the first heading to the same font size as the first line of text on the right. Setting the text on the right to a larger font size than the headings causes the reverse problem.
Brilliand`s Avatar
Rating Orb Brilliand 23 United States MelancholicPhlegmatic 27C 6F
6 years ago | (4)
In fact any vertical-align setting other than "baseline" (the default) on either the 35% div or the 65% div causes the problem to go away. That explains the problem, I suppose; the browser has to go to some rather unintuitive lengths to decide what counts as the "baseline" for those cells. I recommend that you set vertical-align to something else in your * rules - "top" would probably be best for your table cells, but images usually look best with "middle" (so a separate rule for img).
ThirdParty`s Avatar
Rating Orb ThirdParty 28 United States MelancholicCholeric 11C 2F
6 years ago | (0)
I tested this in Safari and concur with Rating Orb Brilliand. The baseline of the top row of text on the left was aligning with the baseline of the top row of text on the right; since the text on the left was taller than the text on the right, this caused the left-hand column to stick up higher than the right-hand column. Adding "vertical-align:top" to the .block class fixes the problem.
Pseudolonewolf`s Avatar
Rating Orb A β Pseudolonewolf 23 United Kingdom MelancholicPhlegmatic 2257C 559F
6 years ago | (0)
Wow, great! This fixes it! Thanks so much!
I never thought to try this for some reason, but I suppose it does make a lot of sense... o_O
I'm just used to vertical-align not doing much at all, though with these table-cell things I suppose it works like on a normal table...
Fierfek`s Avatar
Rating Orb Fierfek 18 United States 1C 0F
6 years ago | (4)
I personally like the first format better, it is more familiar
LiadyC`s Avatar
Rating Orb LiadyC 21 Israel MelancholicSanguine 287C 65F
6 years ago | (0)
I agree with you.. Looks WAY better then this format somehow..
SavageWolf`s Avatar
Rating Orb β SavageWolf 17 United Kingdom CholericMelancholic 533C 105F
6 years ago | (3)
I'm not sure why, but putting &ly;div style='height:0px;'>&nbsp;</div> Above the H1s seems to work...
kidupiscean`s Avatar
Rating Orb kidupiscean 31 Hong Kong 5C 0F
6 years ago | (3)
Yes, the code suggested by SavageWolf works for me too. I'm using Firefox.

But the logo isn't showing, and the time-stamps (i.e. 20 years ago, 4 seconds ago) also go into the bottom right of the website. Maybe this is just the test site, and I can see they were properly shown in your screenshot, so maybe I shouldn't worry about this...

You did mention in another blog post that you would make the website layout more game-like, so will it be done in the next stage or...?

By the way, is the problem with your games (AS2 issue) now fixed? Or do we have to wait for a Flash update before your games can be played again?

Many thanks.
Page 1 of 1: