|
|
Posted by Jose on 02/15/06 00:10
> Would you be able to help me with *where* I change
> the pixels to % as I am still new to all this CSS.
Dunno. I'm new to CSS too. But that won't stop me. This is Usenet. :)
Basically, wherever you use px, don't. If you want space based on the
text (for example, margins), use ems. If you want space based on the
entire window (for example, column width), use percent.
Just a quick stab:
> ul
> {list-style:circle; margin:15px 0 20px 0; font-size:0.9em;}
instead of 15px and 20px, try 1em or 2em (or maybe 1.5em). Whatever
value you choose will depend on the size of your em, but once you have
settled on an "exchange rate", all the spacing will become relative to
the font size, and will increase or decrease as the user changes the
font size in their browser.
> li
> {margin:0 0 8px 25px;}
Same here. instead of 8px and 25px, try 1em and 4em. This way the
margin size will expand and shrink with the font size, should the user
need to or want to enlarge or shrink it.
> img
> {float:center; margin:0 15px 15px 0; padding:1px; border:0px solid
> #d0d0d0;}
15px -> 2em. 1px maybe could stay as is (why is it there?)
> #sidebar
> {position:absolute; top:0; left:0; width: 220px; height:100%;
> overflow:auto; background:#e0e0e0 url(images/sidebarbg.gif) top right
> repeat-y; text-align:right;}
Here's the killer. In this case, the sidebar width (220px) is probably
based on the size of YOUR window. I'm guessing you are using an 800x600
display? Other people aren't, and the page will still insist on 220
pixels even if that's all the user offers your site for the entire page.
Change it to 25% so that the column changes width as the window does.
> #sidebar h1
> {margin:20px 18px 0 5px; color:#008fd8; font-size:1.6em;
> letter-spacing:-2px; text-align:right;}
20px -> 3em... etc. Keep hunting down px values and replacing them!
> #menu a
> {display:block; width: 202px; padding:5px 18px 5px 0; color:#606060;
> background:#e0e0e0 url(images/sidebarbg.gif) top right repeat-y;
> font-size:1.8em; font-weight:normal; text-decoration:none;
> letter-spacing:-2px;}
202px should be replaced by a percent (20% for instance) and the padding
should be expressed in ems. Letter spacing should also be expressed in
ems, so that the spacing scales with the text.
Skipping a bit...
> #content
> {width: 520px; margin:0 0 0 240px; padding:20px 0; background:#fafafa;}
The width should be in percent... maybe 70% or so. You'll have to
decide based on your layout and content. Widths should all add up to
100%. The padding should probably be in ems.
Just go through the whole stylesheet this way, and see how it works out.
Jose
--
Money: what you need when you run out of brains.
for Email, make the obvious change in the address.
Navigation:
[Reply to this message]
|