 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / November 2007Fluid container with tiling background
One thing that has always annoyed me, and I just design around it, is having a tile that you want to use for your background image that doesn't seamlessly tile, in a container that you want to be fluid. I had a go at it, but had to use JavaScript: http://nrkn.com/fluidTiling/ Question, anyone have *any* ideas about how you could do it without the JS? > One thing that has always annoyed me, and I just design around it, is > having a tile that you want to use for your background image that doesn't > seamlessly tile, in a container that you want to be fluid. I had a go at > it, but had to use JavaScript: > > http://nrkn.com/fluidTiling/ > Question, anyone have *any* ideas about how you could do it without the > JS? Notice that you have to "do" stuff to make this happen. More precicely you have to *do* stuff to certain margins on browser resize. Since neither HTML nor CSS actually *do* stuff, but merely describe how other stuff is layed out (they are not programming, despite the L in HTML), you are IMHO out of luck. BTW it does work in IE6 and IE5.5 but with horrendous flashing as the page is made wider. These browsers fire onresize after every mouse move, not at the end of the resize operation - a page re-layout re-paint after every pixel and the repaint is not smart, it erases the canvas to white and then paints the new content.  SignatureRichard. >> One thing that has always annoyed me, and I just design around it, is >> having a tile that you want to use for your background image that doesn't [quoted text clipped - 11 lines] > layed out (they are not programming, despite the L in HTML), you are IMHO > out of luck. Yeah, I thought as much, but I also thought that maybe some jiggery pokery magic with percentage widths, negative margins etc. might be able to hack together into something that works. Haven't thought that approach through far enough to know for sure but I suspect that it wouldn't be possible. > BTW it does work in IE6 and IE5.5 but with horrendous flashing as the page > is made wider. These browsers fire onresize after every mouse move, not at > the end of the resize operation - a page re-layout re-paint after every > pixel and the repaint is not smart, it erases the canvas to white and then > paints the new content. Yuck. > One thing that has always annoyed me, and I just design around it, is > having a tile that you want to use for your background image that [quoted text clipped - 4 lines] > > Question, anyone have *any* ideas about how you could do it without the JS? I can think of a couple of ways to do that without Javascript, but all of them are far less elegant than just using the JS :P Jeremy > > One thing that has always annoyed me, and I just design around it, is > > having a tile that you want to use for your background image that [quoted text clipped - 7 lines] > I can think of a couple of ways to do that without Javascript, but all > of them are far less elegant than just using the JS :P What are these ways? Signaturedorayme >>> One thing that has always annoyed me, and I just design around it, is >>> having a tile that you want to use for your background image that [quoted text clipped - 8 lines] > > What are these ways? OK, here is one (I can't resist a good CSS challenge) http://www.duckwizard.com/ciwas/square.html Here's how it works (Like I said, FAR worse than the JS solution - don't say I didn't warn you): 1) Outer box with tiling background image (the image is 32px square). This box floats so as to adjust to the width of its non-positioned contents. 32px padding to make room for background image to show through. 2) Inner box which floats as well, and is relatively positioned so that it can be the positioning parent for the content box. 3) Content box which is absolutely positioned and is set to take up most of the width of the parent (using all of top, bottom, left, and right attributes is a substitute for padding here) 4) Inside the inner box, there are several hundred (heh) floating 32x32 boxes which make room for the content. Since they float, when put together, they will always make heights and widths that are multiples of 32. This space they create will expand the inner box, which will expand the outer box and the content box. Yeah, pretty ugly (and not a real solution by any means). But hey, you asked :-) Tested in Gecko, IE, and Opera. Jeremy > >>> One thing that has always annoyed me, and I just design around it, is > >>> having a tile that you want to use for your background image that [quoted text clipped - 13 lines] > > http://www.duckwizard.com/ciwas/square.html OK, looks quite clever an attempt. I guess it would be tricky to adjust to the surrounding not overlaying the text at the bottom (in my FF and Safari) when the font size is upped a notch or two by the user? It fails a bit in Safari, the right vertical col is not clean (it is one and a bit 'question boxes' wide. So still not up to Nick's js in simple performance. Not yet at any rate. <g> My swim is coming up soon. Got to go. Signaturedorayme > OK, looks quite clever an attempt. I guess it would be tricky to > adjust to the surrounding not overlaying the text at the bottom [quoted text clipped - 6 lines] > > My swim is coming up soon. Got to go. Yeah - text size adjustment is the least of the problems. The bigger problem is that you have to calculate for each content box how many floating squares you need to pad the box out enough. And then - like you said - it will break if someone has a text size that doesn't mesh with yours. I tried this with 32em width and height to account for this (which theoretically should work to some degree, as the grid boxes will always be a multiple of 32px IF the font size is an integer) - not only was the quantization level much too great for it to be useful, but the text size is apparently NOT always an integral number of pixels (which surprised me). Anyway, I don't think a CSS solution exists that would be more elegant than a good Javascript solution. Javascript is great for adding extra decoration features - as long as it's unobtrusive and gracefully degrades. Jeremy >>>> One thing that has always annoyed me, and I just design around it, is >>>> having a tile that you want to use for your background image that [quoted text clipped - 37 lines] > Yeah, pretty ugly (and not a real solution by any means). But hey, you > asked :-) Still, very cool. Breaks in some situations, but I think we have gone beyond real world usage here anyway :) Now I'm gonna have to try and think of another out-of-left-field way to do it... > Still, very cool. Breaks in some situations, but I think we have gone > beyond real world usage here anyway :) Now I'm gonna have to try and > think of another out-of-left-field way to do it... I think a Javascript solution is your best bet; it may not look terrific for the fraction of people with JS disabled, but the page will still function correctly and that's the important thing. However, there are a couple of things you could do to improve the JS solution, particularly for IE. One thing I can think of is using a short timeout to update the box, and canceling the timeout if it hasn't already occurred by the next resize. That way you will avoid the constant redrawing that causes it to look so bad in IE during the resize (essentially making it behave like Firefox does, where it only updates when you stop resizing). But that's getting off topic (and you probably already know you can improve the JS). By the way, your page works fine in IE6. Jeremy |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.