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 |

Element Dimensions - CSS

In addition to positioning elements, CSS rules can specify the actual dimensions of each page element. Figure 5.9 demonstrates how to set the dimensions of elements.

Element Dimensions

 

In addition to positioning elements, CSS rules can specify the actual dimensions of each page element. Figure 5.9 demonstrates how to set the dimensions of 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.9: width.html -->

 

      <!-- Element dimensions and text alignment. -->

 

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

 

      <head>

 

      <title>Box Dimensions</title>

 

        <style type = "text/css">

 

div { background-color: #aaccff;

margin-bottom: .5em;

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

        </style>

 

        </head>

 

        <body>

 

        <div style = "width: 20%">Here is some

 

        text that goes in a box which is

 

        set to stretch across twenty percent

 

        of the width of the screen.</div>

        <div style = "width: 80%; text-align: center">

 

        Here is some CENTERED text that goes in a box

 

        which is set to stretch across eighty percent of

 

        the width of the screen.</div>

        <div style = "width: 20%; height: 150px; overflow: scroll">

 

        This box is only twenty percent of

 

        the width and has a fixed height.

 

        What do we do if it overflows? Set the

 

        overflow property to scroll!</div>

 

        </body>

 

</html>


Fig. 5.9 |  Element dimensions and text alignment.

The inline style in line 17 illustrates how to set the width of an element on screen; here, we indicate that the div element should occupy 20 percent of the screen width. The height of an element can be set similarly, using the height property. The height and width values also can be specified as relative or absolute lengths. For example,

 

width: 10em

 

sets the element’s width to 10 times the font size. Most elements are left aligned by default; however, this alignment can be altered to position the element elsewhere. Line 22 sets text in the element to be center aligned; other values for the text-align property include left and right.

 

In the third div, we specify a percentage height and a pixel width. One problem with setting both dimensions of an element is that the content inside the element can exceed the set boundaries, in which case the element is simply made large enough for all the con-tent to fit. However, in line 27, we set the overflow property to scroll, a setting that adds scroll bars if the text overflows the boundaries.

 

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


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