Chapter: Internet & World Wide Web HOW TO PROGRAM - The Ajax Client - Cascading Style Sheets (CSS)

| Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail |

Positioning Elements - CSS

Before CSS, controlling the positioning of elements in an XHTML document was difficult—the browser determined positioning.

Positioning Elements

 

Before CSS, controlling the positioning of elements in an XHTML document was difficult—the browser determined positioning. CSS introduced the position property and a capability called absolute positioning, which gives authors greater control over how doc-ument elements are displayed. Figure 5.6 demonstrates absolute positioning.

 

      <?xml version = "1.0" encoding = "utf-8"?>

 

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 

      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

      <!-- Fig. 5.6: positioning.html -->

 

      <!-- Absolute positioning of elements. -->

 

      <html xmlns = "http://www.w3.org/1999/xhtml">

 

      <head>

 

      <title>Absolute Positioning</title>

 

<style type = "text/css">

.bgimg    { position: absolute;

     top: 0px;

     left: 0px;   

     z-index: 1    }

.fgimg    { position: absolute;

     top: 25px;   

     left: 100px;

     z-index: 2    }

.text     { position: absolute;

     top: 25px;   

     left: 100px;

     z-index: 3;  

 

 

     font-size: 20pt;

     font-family: tahoma, geneva, sans-serif }

        </style>

 

        </head>

 

        <body>

 

        <p><img src = "bgimg.gif" class = "bgimg"

 

        alt = "First positioned image" /></p>

 

        <p><img src = "fgimg.gif" class = "fgimg"

 

        alt = "Second positioned image" /></p>

 

        <p class = "text">Positioned Text</p>

 

        </body>

 

</html>



Fig. 5.6 |  Absolute positioning of elements.

Normally, elements are positioned on the page in the order that they appear in the XHTML document. Lines 11–14 define a style called bgimg for the first img element (i.gif) on the page. Specifying an element’s position as absolute removes the element from the normal flow of elements on the page, instead positioning it according to the dis-tance from the top, left, right or bottom margins of its containing block-level element (i.e., an element such as body or p). Here, we position the element to be 0 pixels away from both the top and left margins of its containing element. In line 28, this style is applied to the image, which is contained in a p element.

 

The z-index property allows you to layer overlapping elements properly. Elements that have higher z-index values are displayed in front of elements with lower z-index values. In this example, i.gif has the lowest z-index (1), so it displays in the background. The .fgimg CSS rule in lines 15–18 gives the circle image (circle.gif, in lines 31–32) a z-index of 2, so it displays in front of i.gif. The p element in line 34 (Positioned Text) is given a z-index of 3 in line 22, so it displays in front of the other two. If you do not specify a z-index or if elements have the same z-index value, the elements are placed from background to foreground in the order they are encountered in the document.

 

Absolute positioning is not the only way to specify page layout. Figure 5.7 demon-strates relative positioning, in which elements are positioned relative to other elements.

 

    <?xml version = "1.0" encoding = "utf-8"?>

 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

    <!-- Fig. 5.7: positioning2.html -->

 

    <!-- Relative positioning of elements. -->

 

    <html xmlns = "http://www.w3.org/1999/xhtml">

 

    <head>

 

<title>Relative Positioning</title>

      <style type = "text/css">

 

p{ font-size: 1.3em;

 

                        font-family: verdana, arial, sans-serif }

span   {           color: red;

                        font-size: .6em;

                        height: 1em }

.super {           position: relative;                 

                        top: -1ex }                  

.sub    {           position: relative;                 

                        bottom: -1ex }                       

.shiftleft          {           position: relative;                 

                        left: -1ex }                  

.shiftright {     position: relative;                 

                        right: -1ex }

      </stye>

 

      </head>

 

      <body>

 

      <p>The text at the end of this sentence

 

      <span class = "super">is in superscript</span>.</p>

 

      <p>The text at the end of this sentence

 

      <span class = "sub">is in subscript</span>.</p>

 

      <p>The text at the end of this sentence

 

      <span class = "shiftleft">is shifted left</span>.</p>

 

      <p>The text at the end of this sentence

 

      <span class = "shiftright">is shifted right</span>.</p>

 

      </body>

 

</html>


Setting the position property to relative, as in class super (lines 16–17), lays out the element on the page and offsets it by the specified top, bottom, left or right value. Unlike absolute positioning, relative positioning keeps elements in the general flow of ele-ments on the page, so positioning is relative to other elements in the flow. Recall that ex(line 17) is the x-height of a font, a relative-length measurement typically equal to the height of a lowercase x.

Inline and Block-Level Elements

 

We introduce the span element in line 28. Lines 13–15 define the CSS rule for all span elements. The height of the span determines how much vertical space the span will occu-py. The font-size determines the size of the text inside the span.

 

Element span is a grouping element—it does not apply any inherent formatting to its contents. Its primary purpose is to apply CSS rules or id attributes to a section of text. Element span is an inline-level element—it applies formatting to text without changing the flow of the document. Examples of inline elements include span, img, a, em and strong. The div element is also a grouping element, but it is a block-level element. This means it is displayed on its own line and has a virtual box around it. Examples of block-level elements include div, p and heading elements (h1 through h6). We’ll discuss inline and block-level elements in more detail in Section 5.9.

 

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.