Layout: maintaining a div's ratio

started by Thriva on Nov 2, 2004 — RSS Feed

Thriva Thriva
Posts: 12

OK chaps, I wonder if you can help me... I'm giving my site a bit of an overhaul. The next stage is to get rid of the unnecessary Flash components. I now have a css alternative to my Flash navigation and I'm feeling very good about myself. But my Flash header (just lettering on a plain background) is a different kettle of fish. Its width is 100% of the browser window and I like it that way, so it's staying. I have had to compromise about the vertical space it takes up though... giving the container div a height in pixels so that it looks good in a 17" monitor at 1024x768, and reasonable in most others. But what I would really like is for the container div to have a height relative to its width so that it maintains its ratio no matter how wide the browser window.

So briefly my question is: Is there any way of creating a css box where the height is a proportion of the width?

Thanks
 

Joe Gillespie Joe Gillespie
Posts: 528

You seem to be fighting with the medium to do something that it doesn't want to do

You would have to use JavaScript to resize the aspect ratio div but it's a bad solution to a bad question. There is no way that I know of to lock the proportions of a div other than the rather crude percentage of browser width and height - and that's not reliable either.

Baxter Baxter
Posts: 157

To answer your immediate question, No. To answer the root of your question, I think you should really investigate sifr 2.0, a text to flash replacement technique that allows you to keep your scalable header, the height will control itself, and it degrades beautifully for non-flash users and spiders, leaving the original text in place. Hard to describe, but very cool.

Thriva Thriva
Posts: 12

Thanks Baxter. I came across sifr 2.0 a couple of weeks ago - it looked complicated but promising. I donít know whether you tried it out but I canít make it work in IE6. I tried again just now and, although I got a bit further with the scaling this time, still no joy in Explorer.


Forum Admin - I don't feel it's a 'bad question'. The only reason we don't have a css box that keeps its ratio is because it hasn't been taken up by a browser or written into the specification, not because it goes against the grain of css. We haven't always had rollover effects but javascript made them not only possible but a 'must have' for any site, and now we can do them with css! It's often only a matter of time before a technique, that might once have been thought of as a bit gimmicky, becomes standard. We don't really need rollovers but they're kind of pretty and tell the visitor that the site is reasonably up-to-date... that's all. I would argue that a scaleable header is just as worthy as a rollover... especially if your layout happens to be a liquid one like mine.  

Joe Gillespie Joe Gillespie
Posts: 528

thriva said:
The only reason we don't have a css box that keeps its ratio is because it hasn't been taken up by a browser or written into the specification


That seems to be a perfectly good reason not to use it. It doesn't exist! Whether it should or not is a different matter entirely. There are many 'features' I would like to see in CSS - like polygonal and oval divs - but I know that they are not available in CSS 2.0 and that's what most people have so I don't go there. It's hard enough getting what IS available to work across browsers!

Baxter Baxter
Posts: 157

thriva said:
Thanks Baxter. I came across sifr 2.0 a couple of weeks ago - it looked complicated but promising. I donít know whether you tried it out but I canít make it work in IE6. I tried again just now and, although I got a bit further with the scaling this time, still no joy in Explorer.


Stick with it. It will work, even in IE. Make sure your page validates, that you've got ALL the css rules where you need them, that you're not getting JS errors and that your padding matches between the stylesheet and js parameters. Then review the comments on Davidson's site to see if anyone else has had the same problem.

Thriva Thriva
Posts: 12

Figured out my IE problem - it always helps if you have the plug-in. Ooops. The only thing I can say in my defence is that it is a new computer on which I had immediately installed Moz as my default... So I've had a good look round sIFR now. Unfortunately the problem essentially remains the same - white space where it's not wanted. This is because the height of the container is fixed, defined by the font-size given to the text that you want to replace. Make the font-size too small and the text won't extend to the edge of the page. Make it too big (allowing it to shink to fit) and you get space top and bottom. Still, a valuable exercise and a neat solution for headings if you don't want to be stuck with core fonts.

There's a similar method - 'Dynamic Text Replacement' from A List Apart, which replaces text with PNGs. Each has their strengths: sIFR seams to be more flexible and can scale (shrink to fit), while with DTR the PNGs can be stored for later use, reducing loading times.

Thanks again.

Baxter Baxter
Posts: 157

sifr doesn't play particularly well with the line-height attribute, but that could be your answer, maybe... line-height:150% or something.

Alternately, you may want to try setting you h1 size to a known measurement then set h1 height to 200%. Then, you'd know  the top height is 200% of whatever you set the h1.

Alternately, you could use a browser window sniffer to reset the h1 size. See: http://www.themaninblue.com/experiment/ResolutionLayout/

Thriva Thriva
Posts: 12

Thanks for directing me to The Man In Blue. A browser window sniffer could be the solution. Not the perfect solution, but for my site it doesn't have to be perfect. I'd like it to be of course so I will be following up your other suggestions also.

I try to avoid using js wherever possible because I just don't speak the lingo... and heaven knows I've tried... Still the MIB script is mercifully short and I think I could just about get my head round it but js is so unforgiving... you might find me in the scripting forum before too long.

Are sniffers frowned upon? I get the feeling that folks think they're unreliable or somehow dodgy.

Joe Gillespie Joe Gillespie
Posts: 528

Are sniffers frowned upon? I get the feeling that folks think they're unreliable or somehow dodgy.


Yes, sniffers are almost totally useless because so many browsers are able to mimic others. If you use Opera or Safari, chances are that you won't be able to use them for Web banking so you set them to give an IE user agent. On my stats, a good 50% are marked as unreliable by the report software because their user agent strings are suspect.

You should be testing for an ability instead of a browser. eg

if(document.images)
if(document.getElementById)

Baxter Baxter
Posts: 157

To tell you the truth, me and javascript don't really get along either, but I usually muddle through. If it's too long and complex to figure out, it's usually too long and complex to be something I'd really want to use anyway.

Here's my modified, simplified version of  the browser size sniffer:

function getBrowserWidth() {
     if (window.innerWidth)      {
           return window.innerWidth;
     }
     else if (document.documentElement && document.documentElement.clientWidth != 0)      {
           return document.documentElement.clientWidth;
     }
     else if (document.body)      {
           return document.body.clientWidth;
     }
     return 0;
}

//that part above gets the window size. I can't say EXACTLY how, but it sorta makes sense. Copied directly from MIB

function setStyle() {
     var width = getBrowserWidth()
     if (width > 1000) {
           document.write('<link rel="stylesheet" type="text/css"  href="../css/S4big.css">n');
     }
     return true;
}
// this part is really simple. It just takes the first function, sees if "width" is greater than 1000 (or whatever size you like) and if it is, writes in a link to an extra stylesheet that contains any additional rules for the big-screen layout. You could, just as easily, flip it around and have a separate stylesheet for the smaller screens. You could even put in multiple lines, checking for 600, 800. 1000 or whatever.

Finally, at the BOTTOM of your page, after everything else, you put in a call to the setStyle function:
<script type="text/javascript">setStyle();</script>
The reason it has to be at the bottom is because everything has to load first.

Kk5st Kk5st
Posts: 15

thriva said

Its width is 100% of the browser window and I like it that way, so it's staying. I have had to compromise about the vertical space it takes up though... giving the container div a height in pixels so that it looks good in a 17" monitor at 1024x768, and reasonable in most others. But what I would really like is for the container div to have a height relative to its width so that it maintains its ratio no matter how wide the browser window.
I'm a bit confused.  Are you looking to keep a div that holds the flash object a constant aspect ratio?  If so, and I assume the flash object maintains its aspect ratio, leave the height property at the default.  It will simply wrap the flash.  The div naturally extends the full width of its container.  If not otherwise constrained, that's the viewport.  Height-wise it will extend to contain its content, the object.

cheers,

gary

Thriva Thriva
Posts: 12

Baxter, many many thanks for the simplified script. Your suggestions have been much appreciated. I've just got back from a trip so haven't had time to try it out yet but I'll keep you posted.

Gary, my experience has been that if no height is specified, the container div will expand to the height of the window regardless of the height of the movie. If there is a way around this then I've been beating myself up over nothing but I spent quite a while trying to get it to conform. Is it possible I've missed something really obvious?

Kk5st Kk5st
Posts: 15

Thriva said

Gary, my experience has been that if no height is specified, the container div will expand to the height of the window regardless of the height of the movie. If there is a way around this then I've been beating myself up over nothing but I spent quite a while trying to get it to conform. Is it possible I've missed something really obvious?
Hmmm.  That goes counter to my experience and understanding of how things work.  Would you be able to post a live link to a page that demonstrates your problem?  Better yet, create a minimal test case, a complete document that has the minimum code necessary to the demonstration (including the flash object), and give us a link.  I suspect  you are the victim of unintended consequence.

cheers,

gary

Thriva Thriva
Posts: 12

OK, here's a link... do with it what you can. I've given the header div a height so that you can see it in a gecko browser... it collapses otherwise. This is the opposite of what happens in IE where the div expands to the height of the window..

Cheers

Maskodok Eko Maskodok Eko
Posts: 171




Quick Reply:


Shortcuts:








Attach a File


.TXT file format only [ Cancel ]


Add Comment



TOP SEO | Jasa SEO Profesional RajaPoker88.com Agen Texas Poker Dan Domino Online Indonesia Terpercaya IDRPoker.COM Agen Texas Poker dan Domino Online Indonesia Terpercaya POKERSTAR88.com Agen Texas Poker Dan Domino Online Indonesia Terpercaya D

Kokokmas Kokokma Kokokmas Kokokma
Posts: 104

You know, Sim City Societies had a lot of potential, it was a great concept that was horribly developed and lacked any kind of depth. The idea of individualize buildings functioning independently playing its role in a largely diverse and thriving city.

The new Sim City appears to be the classic Sim City gameplay we saw with SC4, combined with a far better developed version of the Societies concepts. Looking great guys, don't let us down.


You must login to reply