On 12/24/06, francky <[EMAIL PROTECTED]> wrote: > H(o)i Jeroen, > While the question is answered yet, I've some other css philosophical > remarks. > Translating a painted design (illustration) to css has it's pitfalls, > because paper and screen are 2 ways of thinking! > > * See: 'The Graphical Designer and the CSS Zen Guru' story > <http://home.tiscali.nl/developerscorner/guru-1.htm> > > In your case, there is a fixed area for the content part by means of the > background image <http://www.home.intellit.nl/np/test/background.jpg>. > No way to escape from this area! - This will have disadvantages for the > greater screen resolutions (and/or for browser sidebars turned on/off). > If the visitor has a 800x600px resolution, the content is about 60% of > the available screen. > If the visitor is viewing the page with a 1280x1024px monitor, the used > 'message part' of the screen is only ... 16%. > > * See annotated screenshot 1280x1024 > > <http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-intellit.png> > > So I should strongly advise to start with a more flexible model, letting > the screen of the visitor determine the width and/or height. > This will invoke new questions to solve! For instance: > > * Q: what to do with the background? > A: I should make a background without the "transparent part" in > it, and make it seamless repeatable. Then at large reso's there is > no white around. Compressing the jpg can save 52 of the 66kB's, > which is downloaded 4.5 times faster: example of 14kB > > <http://home.tiscali.nl/developerscorner/css-discuss/images/intellit-background-new.jpg> > * Q: how to make the top bar 'playing now:' flexible and extending / > shrinking if needed? > A: this can be done with a Sliding Doors technique, for instance > the method of Liquid Round Corners > > <http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm> > The same image can be used for the left and right part: recycled > by css! See new top bar > > <http://home.tiscali.nl/developerscorner/css-discuss/images/nowplaying_xbmc-new.gif> > > * Q: how to get transparency in the content part? > A: I see 2 ways: (1) using a small semitransparent white png image > as background image; then there has to be added the rather bits > eating "IE png hack"; example: test page > > <http://home.tiscali.nl/developerscorner/transparency/png-gradient-proefje.htm>. > Or (2) using the css3-property "opacity", which is supported > already by almost all modern browsers. Exception is ... IE, but IE > can be made happy by using an IE-only filter. - old IE5.0 and > Konqueror are degrading to a white background. > If you want the content part to have rounded corners, the same (1) > or (2) has to be applied to them. The top and bottom parted can be > glued as well in one image > > <http://home.tiscali.nl/developerscorner/css-discuss/images/corners-intellit2000x10.gif> > * Q: how to get the sidebar scrollable too? > A: by giving the sidebar the {overflow:auto} property too, or, > what I should prefer, canceling the overflow of the #content, and > putting it to the container of the sidebar and the content; then > they are scrolling together. > > As a Dutch proverb says "More ways are leading to Rome". > To illustrate: > > * Horizontal css flexibilized testpage > > <http://home.tiscali.nl/developerscorner/css-discuss/test-intellit-a.htm>. > :-) > * Some comments inside. > * Link to screenshots: in the page. >
Hi Francky, Thanks a lot for your insight. It was very interesting to read your CSS Zen Guru article (nicely written ;)) although this design does actually what it should do, because the content area is actually more then big enough for the content that will be placed there (I.e. year/genre/link to lyrics etc). When i would use your scaled layout, my opinion is, ithere will be too much room for this little content. But i definitely learned from your comments, thanks! I use actually a resolution of 1680x1050, and it was designed for 1024x768 and up. But still i agree, when using a large resolution normally the empty space would be a waste, but in this case is as designed. About the JPG compression, true, i could do a bit more. I think around 40kb would still have a reasonable quality. Thanks again, and happy holidays! -- Jeroen ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
