Jeroen wrote:
>I've been learning CSS for a while and am now translating a
>photoshop/illustrator design to CSS.
>[...]
>Example: http://www.home.intellit.nl/np/test
>[...]
>BTW: If someone has IE5.5 handy, i would love to hear if it renders
>correctly with the fix in place. (or a mac for that matter).
>
>Thanks!
>
>
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.
Happy Days!
francky
PS: For seeing the (static) result in a browser/OS I don't have, I use
the online Browsershots.org <http://browsershots.org/>
______________________________________________________________________
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/
