CSS- Dimensioning and Positioning of Elements by pptfiles


									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. • Example: <div style=”width:100px; height:50px;

CSS Width and Height Spacing Example
<b>Width and Height Demo:</b><br /> <?xml version="1.0" encoding="UTF-8"?> You have two rectangular text areas. This one is <!DOCTYPE html PUBLIC "-//W3C//DTD positioned at the top left hand corner XHTML 1.0 Frameset//EN" (0px,0px), with 100 pixels wide. The height is set to auto. "http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd"> </div><br /> <html xmlns="http://www.w3.org/1999/xhtml" <div style="position:absolute;top:100px;left:300px; xml:lang="en" lang="en"> width:auto; height:100px; background-olor:#ffff00"> <head><title>Width and Height Space <b>Width and Height Demo:</b><br /> Demo</title></head> You have two rectangular text areas. This one is <body style="font-family:arial;fontpositioned at (100px,300px) from the top left size:14pt;color:#000000"> hand corner, with 100 pixels in height. The width <div style="font-family:'Comic Sans is set to auto. MS',times;font-size:24pt; </div><br /> color:#000088;font-weight:bold;textalign:center"> </body> Width and Height Demo <br /> </html> </div> <div style="color:#ffffff;position:absolute;top:0px;l eft:0px;width:100px; height:auto; background-color:#880000">

CSS - Table Cell Padding
<body style="font-family:arial;fontsize:14pt;color:#000000"> <div style="font-family:'Comic Sans MS',times;font-size:24pt; color:#000088;font-weight:bold;textalign:center"> Padding Demo <br /> </div> <div style="margin:25px;color:#ffffff;position:absolu te;top:50px;left:10px; paddingtop:20px;background-color:#880000"> This paragraph is indented 25 pixels from the margins. It is padded only from the top by 20 pixels. </div><br /> <div style="margin:25px;position:absolute;top:150p x;left:10px; padding-right:5cm;background-color:#ffff00"> This paragraph is indented 25 pixels from the margins. It is padded only from the right by 5cm. </div><br /> <div style="margin:50px;position:absolute;top:200 px;left:10px; paddingbottom:15pt;background-color:#ccffff"> This paragraph is indented 50 pixels from the margins. It is padded only from the bottom by 15 point. </div><br /> <div style="margin:25px;position:absolute;top:300 px;left:10px; 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 PositionMore 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.

<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; position:absolute;top:50px;left:10px;padding:10px;backgroundcolor:#880000"> 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 from the top-left corner at (250px,150px). </div><br />

<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 from the 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 from the 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.

Absolute and relative positioning Example
<body style="font-family:arial;font-size:14pt;color:#000000; background-color:#ccffcc"> <div class="bSt" style="position:absolute;top:400px;left:25px"> <i>Practical Web Technology</i> <br /> </div> <div style="position:absolute;top:100px;left:10px"> <img alt="pic" src="logo2.gif" width="250" height="150"> </div> <div style="position:absolute; top:150px;left:400px; width:200px;height:auto"> You can use the element box as a convenient 'grid' for positioning a block of text by leaving out the background color of the element box. <br /></div> <div style="font-size:28;position:absolute;top:30px;left:350px"> <b>The Positioning Demo</b></br /> <img alt="pic" src="hline.gif" width="300" > </div> </body>

One Element Behind Another One - z-index
• 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.

Z – index example
<body style="font-family:arial;font-size:14pt;color:#000000;backgroundcolor:#ccffcc"> <div class="bSt1" style="position:absolute;top:380px;left:40px;color:#ffff00;z-index:-1"> <i>Practical Web Technology</i> </div> <div class="bSt1" style="position:absolute;top:390px;left:35px;color:#00ffcc;z-index:1"> <i>Practical Web Technology</i> </div> <div class="bSt1" style="position:absolute;top:400px;left:30px"><i>Practical Web Technology</i> </div>

Z-index example (cont‟d)
<div style="position:absolute; top:300px;left:150px;padding:15px;backgroundcolor:#00ffff;z-index:4"> This paragraph has z-index = 4. <br /></div> <div style="position:absolute; top:260px;left:200px;padding:15px;backgroundcolor:#ffcccc;z-index:3"> This paragraph has z-index = 3. <br /></div> <div style="position:absolute; top:255px;left:450px;padding:15px;backgroundcolor:#ff0000;z-index:2"> This paragraph has z-index = 2. <br /></div> <div style="position:absolute; top:220px;left:250px;padding:15px;backgroundcolor:#ffff00;z-index:-1"> This paragraph has z-index = -1. <br /></div>

Other Design Techniques with CSS Style
• Changing Cursor Shape with CSS
– It is useful to alter the browser‟s environment by changing the browser‟s cursor when the mouse passes over a given element. – To change the shape of a cursor with CSS is to define the style attribute with the cursor keyword. – The following are the 16 frequently used cursor shapes defined in the CSS1.
• • • • • • • • cursor:auto cursor:default cursor:move cursor:ne-resize cursor:n-resize cursor:sw-resize cursor:w-resize cursor:wait cursor:crossbar cursor:hand cursor:e-resize cursor:nw-resize cursor:se-resize cursor:s-resize cursor:text cursor:help

Changing Cursor Shape with CSS - Example
• • • • • • • • • • • • • • • • • • <table style="font-size:18pt;font-family:arial;color:#000000"> <tr> <td style="width:200px"><span style="cursor:auto">Auto</span></td> <td><span style="cursor:crosshair">Crosshair</span></td></tr> <tr> <td><span style="cursor:default">Default</span></td> <td><span style="cursor:hand">Hand</span></td></tr> <tr> <td><span style="cursor:move">Move</span></td> <td><span style="cursor:e-resize">e-resize</span></td></tr> <tr> <td><span style="cursor:ne-resize">ne-resize</span></td> <td><span style="cursor:nw-resize">nw-resize</span></td></tr> <tr> <td><span style="cursor:n-resize">n-resize</span></td> <td><span style="cursor:se-resize">se-resize</span></td></tr> <tr> <td><span style="cursor:sw-resize">sw-resize</span></td> <td><span style="cursor:s-resize">s-resize</span></td></tr> <tr> <td><span style="cursor:w-resize">w-resize</span></td> <td><span style="cursor:text">text</span></td></tr> <tr> <td><span style="cursor:wait">wait</span></td> <td><span style="cursor:help">help</span></td></tr> </table>

Display XML Pages with CSS
• 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.

Display XML Pages with CSS Example
<?xml version="1.0"?> <?xml-stylesheet type="text/css" href="css-xml.css" ?> <page> <contents> <myPar>Display XML Document with CSS. </myPar> <myPar>www.pwtex.com</myPar> </contents> </page> myPar { display: inline; display: block; margin-left: 40pt; font-family:arial; font-size: 22pt; font-weight: bold; color: #000088; margin-bottom: 30pt; text-align: left; line-height: 30px; text-indent: 0px; }

To top