Jon Hughes wrote:
>http://www.phazm.net/stamps/products.html
>
>If you view this page in FF it's fine,
>
Hi Jon,
It's fine ... until the visitor is enlarging the font-size with one or
more steps (then the placeholders are shifting away) ...
Screenshot-1
<http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-stampdepot_scale-1-up.gif>
... or is scaling down (then the placeholders are gluing together) ...
Screenshot-2
<http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-stampdepot_scale-1-down.gif>
... or has a screen of 1280x1024 or bigger (then the used area is only
30% or less of the available screen area)...
Screenshot-3
<http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-stampdepot_1280x1024.gif>
>but IE kinda... doesn't like it.
>I have no idea what's wrong with it though (still learning the IE hacks)
>- can someone help me? (I use digest, so please reply to my email
>directly if you can) [EMAIL PROTECTED]
>
>Also, if you can tell me how to bring the "Next Page" up a bit, I would
>appreciate it :)
>
>(if you see any other problems not related to what my post is about,
>please let me know, I'm trying to learn to code GOOD compliant
>xhtml/css. So I need to know if I'm making a mistake.)
>
>Thanks!
>
>- Jon
>
>
... but is is not yet a week after the Graphical Designer came to the
CSS Guru, and he has some more weeks to go. ;-) [1]
I'm not a Guru, but while time is going on, maybe I can provide you with
some hints in the meantime.
In general I use my "7 Golden Rules of Webdesign":
1. Work in the TOP-DOWN approach of a page, and write the css in the
same order.
2. Do it STEP-BY-STEP (and first the model, the beautiful
content-styles you have in mind - the real stuff things - have to
wait ...). If working on an existing page, comment out all
elements you don't work on yet (maybe they have styles which are
disturbing the rest, or have styles which have to be a part of the
rest, but aren't there). Take no risk!
3. With TESTING-AND-TESTING-AND-TESTING at each small step, you'll
never find surprises at the end!
Testing: the html-validator every now and then, the css-validator
(mostly the warnings can wait), the font-scaling, the resolution.
So testing at (almost) EACH STEP: "Is it still working what I made
before?".
4. Paste all STYLES IN THE HEAD as long as the work is not finished,
is easy adapting, and a condition for:
5. the personal archive: SAVE EVERY STEP with an OWN VERSION NUMBER!
(If you don't, and notice an error after say 5 steps, you have to
remember all changes you made in between. My experience is: I
always forget some... "I had such a beautiful solution, but it
doesn't work anymore. - Where did I change things, and what was
the last step before it went wrong?").
6. For each step: DEVELOP IN FIREFOX (or OPERA), as that is nearly
standards compliant. And if it's working as you want it, then
CORRECT FOR IE afterwards. - The other way, first working for IE
and "correcting" for other browsers is almost impossible, due to
the 1000's of IE-only proprietary rules and all known and
mysterious IE-errors and IE-bugs...
7. To see where you are: use TEMP BACKGROUND COLORS for the
div-boxes, ul's, li's and other elements. Sometimes a TEMP
{border: 1px dashed red;} can do the same, but that is a bit more
risky, because adding/removing borders can influence the layout.
And don't forget to play with margins and paddings: see what happens!
Now in practice. I think the elements in your page need some more space
to breathe. How can we make your page more liquid?
I started with your original, threw the html-validator on it, and got
the following:
Testpage-1
<http://home.tiscali.nl/developerscorner/css-discuss/test-stampdepot-1.htm>
Html-validator and css-validator congratulate. - To get rid of the
(only) 500px width of the model, we can adapt the #wrap. Then the width
becomes relative to the screen width, and the page uses the same
relative width in each resolution. See (and see the comments in the
source code):
Testpage-2
<http://home.tiscali.nl/developerscorner/css-discuss/test-stampdepot-2.htm>
Html-validator and css-validator still congratulate. - Changing
resolution to 800x600 and to 1280x1024: no problems with this model. But
now the header (image), the sidebar, the content and the footer have
wrong places. And in IE the placeholders are still not besides each other.
In the top-down approach we forget the rest, and start with the header.
The right top-corner is somewhere in the center, doesn't belong there!
Taking the right corner away of the image, we can put it apart as a
background image, liquid moving on the right side. We get something like:
Testpage-3
<http://home.tiscali.nl/developerscorner/css-discuss/test-stampdepot-3.htm>
Html-validator and css-validator still congratulate. - Changing window
size: the header and the top corners are walking with us as a good boy. :-)
That is hopeful for the rest: we have to adapt the width of the sidebar
and the content-div.
But first a bit of sleep ...
To be continued!
Success and greetings,
francky
[1] http://home.tiscali.nl/developerscorner/guru-1.htm
In case you missed my post of 19 Oct. because of your digest.
______________________________________________________________________
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/
