another fluid question: GUI

[jbonham]

Hi, noob here,

I am making a site that will have a GUI skin. Greetings header, one column content body, navigation footer. Basically, my site, GUI skin, will look like a capital I.

One column with a <div> block element with "overflow: auto" so my lengthy text content can be scrolled within the skin's body.

My layout idea is fairly basic. Fluid width-fluid height. But both will have maximum settings. Cross-browser compatibility possible? On screens 800x600 and 1024x768, the height would be 100%, and the width about 40%. But screens greater than 1024 the width would be about 50% and height about 80%.

What I need to figure out is how to allow the skin's graphics, with its block element body and header/footer to vertically and horizontally expand or contract, depending upon the user's resolution.

The website Ultrashock.com behaves exactly as I would like my capital I to behave, except that site is frames, while mine is being made with css. Ultrashock's GUI stretches and shrinks, depending upon the screen resolution, and is always centered.

I have considered using % values, but I don't know how to apply them to the skin's graphics properly. I am still not sure how to slice the interface, awaiting how to figure out the above first.

jbonham

 

[tgreer]

I'll just quickly note a couple of things. I'm still learning CSS myself, so hesitate to offer advice.

First, I want to praise you for such a well-constructed question. It's obvious what you want, you link to an example, and manage to convey a certain expertise/familiarity with web coding.

Second, the site you referenced doesn't have any "expanding graphics". The graphics remain constant, but the containers they are in expand or contract.



Thomas D. Greer

http://www.tgreer.com

Providing PostScript & PDF
Training, Development & Consulting

 

[ChrisHunt]

Rather than getting your graphics to "expand" or "contract", you have to be more sneaky. You need to use a background image that can be repeated, horizontally or vertically as appropriate, combined with other (foreground or background) images that put in the fixed-size content like logos and corners.

For example, to achieve the top part of the Ultrashock design - the top of a rounded corner box with the ultrashock logo in the middle of it - you'd make 4 images:

tlcorner.gif - The top left corner
trcorner.gif - The top right corner
logo.gif - The logo, and the section of the top edge that it overlays
topedge.gif - A narrow vertical slice through the top edge of the box.

All these images should be the same height, it's generally easiest to make one big image of the whole desired end result and slice it up into the bits you need.

Now an ugly but effective way of getting these images into your document is like this:

<div id="header"><div id="head1"><div id="head2">
<img src="/images/logo.gif" alt="Ultrashock" />
</div></div></div>

Your CSS gets the other images where you want them:

#header {
   width: 100%;
   text-align: center;  /* centers the logo */
   background: url(/images/topedge.gif) repeat-x bottom left;
}

#head1 {
   background: url(/images/tlcorner.gif) no-repeat bottom left;
}

#head2 {
   background: url(/images/trcorner.gif) no-repeat bottom right;
}

So the outermost <div> has a background of a horizontal stripe across the page, the two nested divs overlay this with the left and right corners, and the logo image sits on top of all of them.

Hopefully this will point you in the right direction. You might want to look at

http://www.alistapart.com/articles/customcorners2/

and its predecessor for more tips.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[dkdude]

jbonham,

The trick is (like Chris says) to have background images that will either:

[tt] [/tt]a) repeat
[tt] [/tt]or
[tt] [/tt]b) is "far to big"

For corners, headers, footers, sides, you could consider a layout like this:
[tt]
--------------------------------------
| Fixed | Fixed Height | Fixed |
| H & W | Expandable Width | H & W |
--------------------------------------
| Exp. | Expandable H & W | Exp. |
| Height | | Height |
| Fixed | | Fixed |
| Width | | Width |
| | | |
| | | |
--------------------------------------
| Fixed | Fixed Height | Fixed |
| H & W | Expandable Width | H & W |
--------------------------------------
[/tt]

... where areas are "Expandable" you need background graphics according to my initial description a) or b).

Does this help you at all?

Regards


Jakob

 

[jbonham]

thanks all, you guys are AWESOME!!!

Detailed answer with additional link to refer to for more info!

In particular, ChrisHunt regarding the corners and code, and dkdude, your diagram- matching my proposed layout to a T, or rather I- helped enormously.

I am going to start slicing my GUI and trying to code it, although I am not yet 100% certain how to code it, but you guys really helped.

thanks all!
jbonham

 

[dkdude]

No prob jbonham!

Do it in small steps - save frequently (new file name every time, so you can fall back when things fail on you).

Get back if you need more advice -and of course we'd like to see the outcome when it's ready

Happy Codin ;-)


Jakob