Hi, noob here,
I am making a site that will have a GUI skin. Greetings header, one column content body, navigation footer.
My layout idea is fairly basic. Fixed width-fluid height.
One column with a <div> block element with "overflow: auto" so my lengthy text content can be scrolled within the skin.
What I need to figure out is how to allow the skin's graphics, with its block element body to vertically expand or contract, depending upon the user's resolution.
jbonhamDid you try setting all values to %?I considered that, and can do it for the block element, but I am not sure how to deal with extending/contracting the skin's graphic.
I am setting up the skin so that there are 4 parts; the header, footer, left/right side of column.Set the height and width of the graphic to a % also. You can do it in the HTML or in the CSS.ok, i shall try and see how it works
thankswhat values are best used with %: ems, px ?I use px.You shouldn't be relying on the browser to resize images. It just won't turn out well. You're best bet is to tile your background images.
Also, I suggest using em, since IE users won't be able to resize their text if you use pixels. Many people browsing the web can't see all that well, and set their browser to increase text size so that it is legible for them, but in IE, it won't resize px, so use em.ok, using px now.
what I still can't figure out is how to 'chop-up' my GUI skin properly,
so that it expands and contracts in the right places.
I guess one site that I found that behaves exactly as I would like mine to behave is ultrashock (<!-- m --><a class="postlink" href="http://www.ultrashock.com">http://www.ultrashock.com</a><!-- m -->) , although that site is frames.
I am making a site that will have a GUI skin. Greetings header, one column content body, navigation footer.
My layout idea is fairly basic. Fixed width-fluid height.
One column with a <div> block element with "overflow: auto" so my lengthy text content can be scrolled within the skin.
What I need to figure out is how to allow the skin's graphics, with its block element body to vertically expand or contract, depending upon the user's resolution.
jbonhamDid you try setting all values to %?I considered that, and can do it for the block element, but I am not sure how to deal with extending/contracting the skin's graphic.
I am setting up the skin so that there are 4 parts; the header, footer, left/right side of column.Set the height and width of the graphic to a % also. You can do it in the HTML or in the CSS.ok, i shall try and see how it works
thankswhat values are best used with %: ems, px ?I use px.You shouldn't be relying on the browser to resize images. It just won't turn out well. You're best bet is to tile your background images.
Also, I suggest using em, since IE users won't be able to resize their text if you use pixels. Many people browsing the web can't see all that well, and set their browser to increase text size so that it is legible for them, but in IE, it won't resize px, so use em.ok, using px now.
what I still can't figure out is how to 'chop-up' my GUI skin properly,
so that it expands and contracts in the right places.
I guess one site that I found that behaves exactly as I would like mine to behave is ultrashock (<!-- m --><a class="postlink" href="http://www.ultrashock.com">http://www.ultrashock.com</a><!-- m -->) , although that site is frames.