web sites design: cascading style sheet (css) (cont’d)
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
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; background-color:yellow”></div>
CSS Width and Height Spacing - Example
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-
frameset.dtd"><html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en"><head><title>Width and Height Space
Demo</title></head><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">
Width and Height Demo <br /></div><div
style="color:#ffffff;position:absolute;top:0px;left:0px;width:100px; height:auto; background-color:#880000">
<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.
</div><br />
</body></html>
CSS - Table Cell Padding <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">
Padding Demo <br /></div><div
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.
</div><br /><div
style="margin:25px;position:absolute;top:150px;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:200px;left:10px; padding-bottom: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:300px;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 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;
position:absolute;top:50px;left:10px;padding:10px;background-color:#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 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.
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;background-color:#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;background-
color:#00ffff;z-index:4">This paragraph has z-index = 4.<br /></div><div style="position:absolute; top:260px;left:200px;padding:15px;background-
color:#ffcccc;z-index:3">This paragraph has z-index = 3.<br /></div><div style="position:absolute; top:255px;left:450px;padding:15px;background-
color:#ff0000;z-index:2">This paragraph has z-index = 2.<br /></div>
<div style="position:absolute; top:220px;left:250px;padding:15px;background-color:#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:crossbar• cursor:default cursor:hand• cursor:move cursor:e-resize• cursor:ne-resize cursor:nw-resize• cursor:n-resize cursor:se-resize• cursor:sw-resize cursor:s-resize• cursor:w-resize cursor:text• cursor:wait 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.pwt-ex.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;}
