Difference between revisions of "CSS"
m |
m (→See also) |
||
| (5 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
| − | + | {{glossary}} | |
| − | '''C'''ASCADING '''S'''TYLE '''S'''HEETS. A web technology to | + | '''C'''ASCADING '''S'''TYLE '''S'''HEETS. A web technology to separate [[content]] from [[presentation]] |
| − | |||
| + | == Control over minimum & maximum width == | ||
| + | In CSS2 the ''min-width'' and ''max-width'' properties can be used to impose constraints onto an elements width. This is very useful for allowing a site's content area to float in the middle of the page between a pair of margins, but if the clients browser window is too narrow, the content area will not shrink beyond a certain size and instead the margins will shrink. Conversely if the clients window is extremely large, it may not be desirable in terms of the sites layout for the content area to grow beyond a certain width, and instead the margins should grow instead. | ||
| − | [[ | + | Unfortunately IE does not support the ''min-width'' and ''max-width'' properties, but an IE-only CSS method called ''expression'' can be used to create the same effect. Here's an example where the width of the content area is set to 75% of the total page width, but is not allowed to be less than 600 pixels wide, or more than 900 pixels. |
| + | <css> | ||
| + | width: 75%; | ||
| + | max-width: 900px; | ||
| + | min-width: 600px; | ||
| + | width: expression(document.body.clientWidth > 1200 ? "900px" : document.body.clientWidth < 800 ? "600px" : "75%" ); | ||
| + | </css> | ||
| + | The final line is the IE hack which achieves the same result as the first three lines, but is ignored by non-IE browsers. | ||
| + | |||
| + | == Using templates in CSS's == | ||
| + | |||
| + | == See also == | ||
| + | *[[MW:Extension:CSS]] | ||
| + | *[[wikipedia:Cascading Style Sheets]] | ||
Latest revision as of 04:08, 23 July 2011
|
CASCADING STYLE SHEETS. A web technology to separate content from presentation
Control over minimum & maximum width
In CSS2 the min-width and max-width properties can be used to impose constraints onto an elements width. This is very useful for allowing a site's content area to float in the middle of the page between a pair of margins, but if the clients browser window is too narrow, the content area will not shrink beyond a certain size and instead the margins will shrink. Conversely if the clients window is extremely large, it may not be desirable in terms of the sites layout for the content area to grow beyond a certain width, and instead the margins should grow instead.
Unfortunately IE does not support the min-width and max-width properties, but an IE-only CSS method called expression can be used to create the same effect. Here's an example where the width of the content area is set to 75% of the total page width, but is not allowed to be less than 600 pixels wide, or more than 900 pixels. <css> width: 75%; max-width: 900px; min-width: 600px; width: expression(document.body.clientWidth > 1200 ? "900px" : document.body.clientWidth < 800 ? "600px" : "75%" ); </css> The final line is the IE hack which achieves the same result as the first three lines, but is ignored by non-IE browsers.
