Website C&C!

[Ryan Timothy B]

The website is still viewed at a higher vertical height than what my browser and resolution can fit. So I still have a browser scroll bar plus the iframe scroll bar.  Makes it awkward.
Perhaps having a min-height for the page resolution.  Since anything lower than that minimum would obviously break the page if the vertical height was too low.

As it is now. It gives me that Geocities website made by random kids back in the day, feel.

[InCreator]

Well, it'd help to know WHAT your vertical resolution is.

Widescreen laptops - indeed can have even lower v-res than my 768px page would fit into (add browser toolbars etc), I didn't think about it.

So what size would work?

Also, I don't think I'll be using iframe scrolling really. Simply sort longer-than-frame pages into numbered links, 1,2,3 etc

[Ryan Timothy B]

Well my resolution is 1600x900 but my viewing height in the browser (with all the tabs and such) is actually 707.
So with a 768 vertical resolution (which is roughly the smallest vertical resolution nowadays), the min-height with how my browser is setup should be 575. But everyone's browser is setup differently.

The scrolling issue with the page being larger than browser, happens with both IE 8 and Firefox 3.6.8.

Also with IE, the page isn't horizontally centered anymore.

[Peder 🚀]

Id drop the iframe and just do it like this:
http://www.johnsendesign.com/enclosed/

I would of build up the site differently too since the "frame" is basically "locked" in one size, but I dont have time to show you how Id do it myself but shouldent be too hard...

[straydogstrut]

The site looks really good, but yeah, ditch the iFrames. I'm sure i've left a few Geocities sites of my own in my wake.

Correct me if i'm wrong, but Peder have you just used a php include there? I was going to suggest that, but i'm no expert.

I get some of the content on the About page bleeding past the bottom image in Safari/FF/Chrome. Peder's suggestion of building with relative sizes would help there as the content area would grow to fit the content. Might have to change some of your graphics - you probably should anyway, since you don't really need to have all those; alot of it could be tiled. If you want to stick with scroll bars, the CSS overflow property would let you do that.

Looking good so far=)

[InCreator]

Well, that's pretty much the point: I LIKE my graphics. It's very similar to graphics in game.

* I WANT whole page area to be framed. iFrames or not, it looks much better than all "normal" div pages, which have nothing but one-colored box going down to infinity. Might be professional, I say boring.

* Out of gazillion websites and tutorials I've tried, none shows how to link frames to main text box so they'd repeat CSS-given background correctly until the bottom of the content. But only that would eliminate need for middle frame or additional scrolling.

* So unless someone has an idea or usable tutorial on how to actually do this, I won't be ditching iframes.
What I need is portrayed on this picture:



I cannot believe that it would be impossible to force those two DIVs to have vertical height according to middle DIV (dynamically) and repeat their background so there would be no gaps. I found out how to automatically make footer (bottom frame) position correctly though.
But so far, I have no clue how to do this. "Ditch iframes" won't help if you cannot point to a better-working alternative.  

Or maybe it's possible via javascript only, which I cannot code much beyond copypasting.

[straydogstrut]

I'm really sorry, I didn't mean to cause offence!

I'm no expert and i'm as surprised as you that there isn't an obvious alternatives to Iframes, it's been years since I last used them. All i've found so far are php includes. Nowadays I do all my messing around in Wordpress templates which makes things so much simpler.

Also, there's nothing wrong with your graphics aesthetically. I really like them. I only meant to suggest you might be able to get away with less or at least smaller, repeatable ones, but really I don't have much to base that on so please ignore me.

I didn't intend to say "don't do it like that" without at least offering an alternative, sorry. My web design skills are a bit rough around the edges but i'll try to help you out as best I can. Looking at the image you posted above, it now looks like you're happy for the content to stretch down so long as your images tile with it. It's essentially the typical three column layout. The only stumbling block for me is your navigation and the fact it doesn't have a repeatable image like the rest of the sidebar. I would normally use clear: both; in my style sheet to get the footer underneath everything - you've probably done that - but it leaves a gap if the content of one of the columns is shorter than the others.

I've had a quick Google for "three column css layout" from the past year to see what's new these days. One of the links I found is quite promising as it aims to solve the issue i've just described above. I'd thought of using two divs for the sidebar and that's what it looks like they're doing. It's actually not new, it's from 2007/8, but it's one of many similar ones out there, just search for "three column css layout". I've only skimmed it, but it might be useful to you.

The Perfect 3 Column Liquid Layout

Article on equal height columns explaining how it works

I'll have a play with it myself when I get a chance. Of course, without the iFrame, you're back to the problem of how to have a single navigation across all pages (without having to edit each page) and the only simple solution i'm aware of are the includes. If I can find you a better solution, i'll post back (unless someone who knows more about this can chime in, please). I really like the website your trying to build, keep at it.

[InCreator]

Huh, I gave up.  Feeling a bit sad about abandoning initial design  :'(
Seriously, dynamic image framing a simple page is alien technology beyond simple minds of hairy dudes who created HTML.

So anyway, I went to a more spartan layout, which it works quite nicely... and is actually more comfortable.

http://www.enclosedtd.com

And after some "wtf-am-i-copy-pasting" got official approval from Hairy Dude Committee also...
groovy!

So all's fine... except that:

1) Pages that need scrolling shift contents to the left by browser scrollbar size (Firefox,IE).

I'm not sure if I should really try to do anything about this. Solving such issues feel like pixel hunting quests in games already.

2) Changing page results in ugly page refresh moment (IE8). Maybe it's only my IE, but those milliseconds page changes, everything's bright white.

Then again, who the hell uses IE anyway... besides housewives?

[straydogstrut]

Aw, don't feel sad, I hope I didn't upset you=S

The new design still looks really good! It's straight to the point and easy to navigate - among the main goals of web design. Your little footer is missing in this one though - you should still be able to add it to get your previous box look and still have your main div stretching down to fit the content.

1) I had a quick Google on the scrollbar problem as i've never really noticed it before. This article seems to suggest it's a side effect of fixed width layouts. One solution, they suggest, is to add the following to your style sheet so that your pages all have 1px of scrollable area, even if they don't need it, so that  the scroll bar always shows. I've tried it on your site using Firebug and it works, but if I find you a more elegant solution (ie. not having to show the scrollbar!), i'll let you know. Just add it to the top of your stylesheet:

Code: ags

html { min-height: 100%; margin-bottom: 1px; }

Edit: I should suggest it might be wiser to just live with it. Seems quite a few people are put off by unneeded scrollbars from what i'm reading=S

2) Yeah I get a white flash in IE8 too when I reload, so it's not just you. I use Chrome/Safari/FF though so it's no problem for me, but I don't have a solution for you yet though.

Edit: seems to be a bug with IE (surprise, surprise!). Only suggestion that might help is to set the background colour of your page to a colour close to the main colour of your site so that the flicker is less visible than it is with white. Your main content area is #333439, something around that might help.

Good work, I look forward to the finished game, it's looks really good=)

[Ryan Timothy B]

I simply copied this a while back to always have the scrollbar there even when you don't need it. It'll be disabled though, but it won't shift your pages over when there isn't enough content to have a scroll bar. I believe it works for firefox only, but what do I know?

Code: ags

html { 
	overflow: -moz-scrollbars-vertical;
}

[Peder 🚀]

If I remember right Ryan that one will only work because of the -moz part.
This is another way to do it that should work cross browser.

Code: ags

html {
overflow-y:scroll;
}

Seems quite a few people are put off by unneeded scrollbars from what i'm reading=S

I think people would be more annoyed by the whole website moving to the left as soon as the scrollbar does come up.

[InCreator]

Done!

[straydogstrut]

Looks good and, yeah, the disabled scrollbar being there doesn't bother me, it's much better than jumping to the left.

Thanks for helping out Peder=)

[Peder 🚀]

You should also consider putting all the CSS in a seperate file, saves loading time etc .

[InCreator]

Done also!

Thanks alot for everything