I'm trying to move a table-based design to css layout, and I have a
few questions.  I'm not trying to make it a perfect match (I'm not the
designer) but I want to get it close, and use it to answer a few
questions I have.

Here's the table layout that was given to me:

    http://hank.org/demos/bannertable.html
    http://hank.org/demos/global.css


Here's the css version:

    http://hank.org/demos/banner.html
    http://hank.org/demos/banner.css


My main questions are how should the layout change with window resizing
and with font changes?  And how to best implement that.



1) The table version has an explicit width and so shrinking the window
doesn't effect the design (just requires scrolling).  In the css
version the "DO SOMETHING" links starts wrapping.  I'm not really sure
what the "correct" behaviour is (guess it depends on the client).

This seems like a reasonably common design, so any suggestions how you
would lay this out to best deal with font changes and window resizing?


2) If I do set a width, is it better to use em instead of px for the
width, so the width adjusts with the font sizes?


3) The bottom 1/2 of the banner has two div's, the "DO SOMETHING" text
and links, and the search box.  Is there a way to get the text from
both divs to line up on the same center line (vertically)?  Or is it a
matter of just adjusting both until they match?


4) With the css version, making the font size larger (ctrl+ in
firefox) makes the search box grow, but the containing orange box
doesn't grow to contain it.  The containing box is height: 40px,
again, would it be better to use em in that case?



Thanks,






-- 
Bill Moseley
[EMAIL PROTECTED]

______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to