Web sites Design: Cascading Style Sheet (CSS) (Cont’d) • Dimensions and Position of Elements – Width and Height Space – Table Cell Padding – Left and Top Position – Positing a Group of Elements – One Element Behind Another One • Other Design Techniques with CSS Style – Changing Cursor Shape with CSS – Display XML Page with CSS – Generating a Text Background with Scripts
25
Embed
Web sites Design: Cascading Style Sheet (CSS) (Cont’d) Dimensions and Position of Elements –Width and Height Space –Table Cell Padding –Left and Top Position.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Web sites Design: Cascading Style Sheet (CSS) (Cont’d)
• Dimensions and Position of Elements – Width and Height Space– Table Cell Padding– Left and Top Position– Positing a Group of Elements– One Element Behind Another One
• Other Design Techniques with CSS Style – Changing Cursor Shape with CSS– Display XML Page with CSS– Generating a Text Background with Scripts
CSS- Dimensioning and Positioning of Elements
• Before CSS, support for element layout is limited to images, tables, frames and some element’s aligning attributes. It lacks advanced formatting features and event handling functionalities.
• The CSS position element and its associated properties allow you to define exactly where your element boxes will appear.
• CSS positioning attributes z-index provides you with a tool to create “layers” to perform some simple but effective textual effects.
• CSS styles and properties are constantly used to combine with scripting to create dynamic HTML pages
Frequently used CSS positioning and its related elements
CSS Width and Height Spacing
• All CSS document elements generate a “rectangular box” called element box. This box describes the amount of space that an element and its associated properties occupy in the layout of the document.
• The CSS elements width and height set the distances from the left and right edges and the top and bottom edges respectively.
• These CSS properties can also be applied to an individual element.
<b>Width and Height Demo:</b><br />You have two rectangular text areas. This one is positioned at the top left hand corner (0px,0px), with 100 pixels wide. The height is set to auto.
</div><br /><div style="position:absolute;top:100px;left:300px;width:auto; height:100px; background-olor:#ffff00"><b>Width and Height Demo:</b><br />You have two rectangular text areas. This one is
positioned at (100px,300px) from the top left hand corner, with 100 pixels in height. The width is set to auto.
style="margin:25px;color:#ffffff;position:absolute;top:50px;left:10px; padding-top:20px;background-color:#880000">This paragraph is indented 25 pixels from the margins. It is padded only from the top by 20 pixels.
padding:1cm;background-color:#66ffcc">This paragraph is indented 25 pixels from the
margins. It is padded on all sides by 1cm.</div><br /></body>
CSS - Left and Top Position-More details
• The left and top CSS elements describe the ‘offset’ of a positioned element’s sides with respect to its element block.
• <div style=”left:100px; top:50px; padding:5px; background-color:red”></div>defines the position of the division element to be at (50px,100px) from the top-left corner. It also defines a red background with a padding of 5 pixels on all sides of the element.
Example<body style="font-family:arial;font-size:14pt;color:#000000"><div style="font-family:'Comic Sans MS',times;font-size:24pt;
color:#000088;font-weight:bold;text-align:center">Left and Top Position Demo <br /></div><div style="border-style:double;border-color:#000000; margin:25px; color:#ffffff;
This paragraph is indented 25 pixels from the margins. It is positioned from the top-left corner at (50px,10px) with padding 10 pixels on all sides.</div><br /> <div style="border-style:solid;border-color:blue;width:350px;margin:25px;position:absolute;top:250px;left:150px;padding:5px;background-color:#00ccff;z-index:-1">This paragraph has width 350 pixels and is positioned fromthe top-left corner at (250px,150px).</div><br />
Example<div style="border-style:solid;border-color:blue;width:350px;margin:25px;position:absolute;top:200px;left:350px;padding:5px;background-color:#ffff00;z-index:-2">This paragraph has width 350 pixels and is positioned fromthe top-left corner at (200px,300px).</div><br /><div style="border-style:solid;border-color:blue;width:250px;margin:25px;position:absolute;top:60%;left:-15px;
padding:5px;background-color:#00ff33">This paragraph has width 250 pixels and is positioned fromthe left side by a negative value.</div><br /></body>
The z-index allows you to ‘stack’ different element blocks together and to provide you with ‘depth’ information. The effect of using negative values allows you to position an element outside its element block.
CSS - Positioning a Group of Elements
• Positioning elements together with its associated properties, gives you total, pixel level control over the layout of your Web pages.
• You can specify easily how your Web pages should be rendered by Web browsers.
• position:absolute will position an element absolute to the top-left corner at a co-ordinate
• For position:relative, the element box will be positioned relative to the placement of the previous element box on the page.
• The CSS property z-index gives you the control you need to alter the way, or order, in which elements overlap each order.
• z-index property takes an integer value. An element with a high z-index value is closer to the front, or top, than those with lower z-index values.
• You can assign any integer value, including negative, of any size to z-index. – For example, a value of –1 means that the associated element
will be placed behind the default text on the page. This is a useful feature in many situations. For instance you could use this feature to set a background layer containing images so that your text can appear over it.
– Similarly a very high z-index value may be used if you want to be fairly certain that an element will always stay in front of everything else.
• The Extensible Markup Language (XML) is a meta programming language that can used to create data format for structured document interchange. How to display an XML page on the Web is a big issue.