David Roberts wrote: >>>> Hi DL, >>>> > > As I am quite new to using CSS your comment - I think it may be a > little over-coded and relying on brittle positioning- would have been > more helpful if you had explained what you actual meant. > > I am interested in learning from my mistakes or wrong way of doing > something, it is the only way I will hopefully improve my skills. >
Fair enough. > Thanks for your help, anyway. > David > In reference to your uri: <http://www.campbeltowngrammar.org.uk/> It is brittle in the sense that it does not hold font-scaling well. A simple structural layout test is to check a page with +2 or +3 font-scaling in FF, and text-size largest in IE. These tests can be used to check for horizontal and vertical text-overlapping and float drops. It is usually a good idea to layout a page with user discretion in mind from the beginning. One never quite knows what goofy thing they might do. Experience and testing (with or without experience) from now until forever is the name of the game. Your content text-size is smaller that the font-size of most of your navigation links. At higher screen resolutions (1280 and up), some users *may* want to scale the fonts for readability. When the content-text is brought up in size, the navigation links increase proportionately as well. This causes the search button and the horizontal nav at the very top to overlap horizontally. And the vertical nav to break out the bottom of the header image (and shoot left behind the logo). You have to be careful in the layout stage when placing something that scales (text) on top of an image (static) -- or within an element of a fixed height dimension. This can sometimes be corrected with CSS. A better solution is to lay it out so that it does not need to be corrected in the first place. But that is a personal opinion. Using CSS, these changes /may/ help keep the very top h-nav and the search bar from overlapping at +2 in FF: #links{ font: bold 0.75em "Lucida Grande", Lucida, Verdana, sans-serif; } << reset font-size to 0.75em /and/ <input name="q" type="text" size="25" /> <<< tweak size="25" downward A similar (fast and dirty) method that /may/ help keep the v-menu in place and not shoot the bottom is: #secondnav {font-size:/*1.3em*/1em;margin:25px -250px 0 0;} <<reset the margin-left and the font size /and/ use no break space between the words in the list items: <li>list item</li> <li>list item</li> <li>list item</li> In regard to over-coding, you may find (for example) that these lists accomplish the job with a little less coding: <http://css.maxdesign.com.au/>. And in some cases those lists can be done with a little more efficient use of "CSS shorthand-properties." [1] Just make sure you check the browser compatibility list for any you might use. The page I put on my server yesterday was simply an example of one in a zillion ways one might be lay out your stuff differently to achieve the above goals. [1] <http://www.456bereastreet.com/archive/200502/efficient_css_with_shorthand_properties/> Best wishes, ~dL -- http://chelseacreekstudio.com/ ______________________________________________________________________ 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/
