html frameset/table questions

PolyHertz

I'm trying to figure out how to make a set of 3 frames where the middle one is locked at a specific pixel width and the side columns can stretch to fill the rest of the browser. Right now I have it as something like this:

<frameset cols="20%,60%,20%" frameborder="0" border="0" framespacing="0">
<frame src="background.html">
<frame src="scripts.html" name="middlep">
<frame src="background.html">
</frameset>

This is obviously wrong, but am not sure how to go about it. Any html gurus out their can help?

Snader

I'm not sure how to do that, but I think it's not needed.

Are you just trying to get a centered column? Could you show us a PS mockup or something, because it sounds like there's a way easier solution.

PolyHertz

Sure:




First pic is of the template, second of how I figure it'll have to be sectioned. The checker pattern needs to be able to encompass any area that isnt taken by the brown area (hence scalable frames). the brown area isnt a repeating pattern obviously so it needs to be seperate. I could have it as a table but I want it to go all the way from the top of the window to the bottom, and for tables I can only get them to be 24pixels away from the top or bottom by percentage. the black area would be a 4th frame sense it needs to be able to expand when the + boxes are checked for additional info via javascript page expansion. the name and links at the top would be in a 2 column table.

Going with a table for the brown area would make the most sense but again I cant seem to get that to stretch to the top/bottom fully, hence why I'm looking at frames instead.

SyncViewS

Hi Greg, do not use frames or frameset unless you're still in the nineties
CSS layout is definitely the way to go. I put together a super simple example, that should get you started. Get it here.

For the full CSS reference look here:
http://www.w3schools.com/css/css_reference.asp

I highly recommend to download and use the Firefox Add On "Web Developer"
http://chrispederick.com/work/web-developer/

MoP

Yeah, what SyncViewS said, you should not have to worry about that anymore, use CSS containers for your layout, it's much more flexible (and modern ).

Snader

Agree with those comments.

For the images I would do this:
checkerboard image with X/Y tile, make the image about 200x200 pixels or something (fairly small filesize, and not so much tiling/redraw) and if its just 2 colours, *.png
the brown/yellow would be easiest with a 1000x25px tiled Y.

Farfarer

Yeah, it's best to avoid frames (and tables if you can). Frames make it very hard to link to specific pages of a folio site as each page's address is hidden away. Tables aren't as bad, but they don't lead to very accessible websites as they're very rigid in their design.

Some DIVs and CSS is your best bet (divs are pretty much like table cells, except that you can arrange them however you like and have far more control over them).

Giving the central content div the CSS value of overflow: scroll; will give the same scrollbar effect as you get with that central frame, should the content overrun the height of it.

Lamont

Watch out for some CSS tags as FireFox and IE are not on the same level. Test in both browsers. Get used to the idea of using shim-divs to fix some IE nastyness. DIV placement in relation to the parent is important as some tags are void.

CSS makes things MUCH faster.

Farfarer

IE8's pretty much up to speed with CSS standards these days.

According to Google Analytics, only 2.8% of the visitors to my folio use IE6 (which is the main offender when it comes to adhering to CSS standards) and I imagine that's probably fairly representative of most game art portfolios.

So, if it's a lot of effort to work around that, you could probably ignore that demographic without too much repercussion...

MoP

It's definitely worth installing Firefox, Chrome, and latest version of IE and check your site on all of them.
Even if your CSS/HTML is fully W3C validated, you may still find quirks between different browsers (eg. defaults not being overriden, different initialisation of CSS values) that can make your site appear messed up in one or more browsers.

Chrome uses webkit so it's a fairly decent test for Opera compatibility too, if you don't want to install Opera as well

Snader

And after you've ran a few tests on your own system with several browsers, throw the site into http://browsershots.org/ to get a pretty expansive test.

PolyHertz

Thanks guys. And thanks for the examples Sync, gotta get out of the 90s sometime