Using containers to specify display styles, Positioning...

Using Containers to Specify Display Styles

Container elements allow you to apply CSS rules to the contents of an HTML page. An example of this use of a cascading style sheet is shown below:

& lt;! DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // EN " 1 -transitional.dtd & gt; & gt;

& lt; html & gt;

& lt; head & gt;

& lt; style style = text/css & gt; & gt;

body {font-family: Verdana; font-size: 9pt; text-align: right;}

div {font-family: Georgia;}

.important {background-color: #ffffde; border: thin black ridge;}

& lt;/style & gt; & lt;/head & gt;

& lt; body & gt; Here begins the body text of the page.

& lt; div & gt; A here is the text of the div container. This text is written in a different font. & Lt;/div & gt; The body of the page continues with & lt; span & gt; in a span container & lt;/span & gt; and ends here.

& lt; div class = important '' & gt; This is very important information in another div container! & lt;/div & gt; And here the body text of the page ends.

& lt;/body & gt;

& lt;/html & gt;

The browser displays this page as shown in Fig. 1.8.

Displays an HTML page using the stylesheet described in it

Fig. 1.8. Displaying an HTML page using the stylesheet described in it

Positioning of page elements

When the browser receives data from the server, it displays them on the page in the order in which they are written. This order is called a normal thread, that is, the browser receives an element, calculates its dimensions, and places it behind the previous element. When processing data from a normal stream, the browser displays the data line by line, adding a line break when the structure block appears. In this connection, in particular, with the help of standard HTML code it is impossible to organize the output, for example, of several columns of text. Initially, tables (table elements) with zero boundary thickness (ie, tables on the screen were not shown) were used on the screen to specify the relative location of the parts of the web page on the screen. The cells of the table host the sections of the HTML page.

However, using cascading CSS stylesheets, it became possible to specify not only the design of elements of the HTML document, but also the relative positioning (positioning) of its individual parts (blocks). Positioning is specified using the position property. There are two ways to position the block in a normal thread: relative and static. The static method is used by default and performs standard formatting, leaving the block in a normal thread. The relative method allows to shift the position of the block relative to the position it occupies in the normal flow. For example, if position: relative; left: 20px; color: green; then the position of the left edge of the block is shifted by 20 pixels relative to the previous element in the normal stream, as a result of which the block itself is shifted to the right. If you specify a negative offset, the block will move to the left. Similarly, you can move the block vertically - it uses the top property.

In addition, there is another way of positioning - absolute positioning, which allows you to specify the location of the block on the page. In this case, the block is withdrawn from the normal thread placement and placed by the browser at a specified location on the screen. Using absolute positioning is quite convenient in strict sites with a fixed page size. The most typical situation is when the page is divided into several absolutely positioned blocks within which relative positioning is used (and since the nested blocks are positioned relative to the parent, the page structure is preserved).

Another way of positioning is the "floating positioning": float. Floating blocks behave very similar to images with the specified align tag: they are pressed to the specified edge of the container, causing the normal stream them to flow around. Such blocks are rather convenient for organizing the so-called rubber layout when several floating blocks are specified, which are arranged one after the other horizontally (if their total width exceeds the width of the page). To make the block display below the floating block, you must use the clear attribute with both.

If you are using floating blocks, you must always specify their width (otherwise they will stretch to the width of the container) and, in addition, it is desirable to define the fields for the body element, otherwise large fields around the floating block may appear in some browsers.

thematic pictures

Also We Can Offer!

Other services that we offer

If you don’t see the necessary subject, paper type, or topic in our list of available services and examples, don’t worry! We have a number of other academic disciplines to suit the needs of anyone who visits this website looking for help.

How to ...

We made your life easier with putting together a big number of articles and guidelines on how to plan and write different types of assignments (Essay, Research Paper, Dissertation etc)