Block elements and borders

Positioning elements in CSS

Properties
Posizionare degli elementi con CSS Posicionar elementos graças ao CSS Mit CSS Elemente positionieren Positionner des éléments grâce aux CSS Posicionamiento de los elementos en CSS
Using style sheets along with the <SPAN> and <DIV> tags, you can specify the location of text or images down to the pixel.
This is possible with versions 4 and higher of Netscape and Internet Explorer; however, the technique is still problematic and may cause some compatibility issues.

Relative and absolute positioning

Absolute positioning {position: absolute} is determined relative to the upper-left corner of the browser window. The coordinates of a point are given from top to bottom (top) and from left to right (left).

Relative position is defined in relation to other page elements, meaning that the elements contained in the DIV or SPAN tags will be positioned based on the HTML elements preceding them.

Positioning text

Let's place the text "How does it work?" 80 pixels from the top of the window and 100 pixels from the left: 

<HTML>
<BODY>
<SPAN style="position: absolute; top: 80 px; left: 100 px;">

How does it work?
</SPAN>
</BODY>
</HTML>

There are other ways to do this, such as: 

<HTML>
<HEAD>
<STYLE>
<!--
.test{position: absolute; top: 80px; left: 100px; color: black; font-size: x-large}
-->
</STYLE>
</HEAD>
<BODY>
<DIV class=test>
How does it work?
</DIV>
</BODY>
</HTML>

Positioning an image

Let's place the image "test.jpg" 80 pixels from the top of the window and 100 pixels from the left (the image is 103x61): 

<HTML>
<BODY>
<SPAN style="position: absolute; top: 80 px; left: 100 px;width: 103px; height: 61px">
<IMG SRC="test.jpg" >
</SPAN>
</BODY>
</HTML>

It is important to specify the size of the image in style sheets, to reduce the risks of browser incompatibility.

Superimposing elements

Let's superimpose the text "How does it work?" on top of the image "test.jpg": 

<HTML>
<BODY>
<SPAN style="position: absolute; top: 30 px; left: 100px;width: 103px; height: 61px">
<IMG SRC="test.jpg" >
</SPAN>
<SPAN style="position: absolute; top: 50 px; left: 100 px;">
How does it work?
</SPAN>
</BODY>
</HTML>

Using this syntax, you can superimpose both text elements and images.

Last update on Thursday October 16, 2008 02:43:13 PM.This document entitled « Positioning elements in CSS » from Kioskea (en.kioskea.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the licence, as this note appears clearly.

Best answers for « Positioning elements in CSS » in :
Declaring a style sheet (CSS) Show Declaring a style sheet Style sheets are not directly integrated into the W3C's HTML recommendations. For this reason, you need to include elements in the HTML code indicating both the type of document, meaning the version of the HTML and CSS...
Style syntax (CSS) Show Defining a style Defining a style is done using simple text rules for describing the aspects of page elements. A CSS rule is characterised by two main elements: A type selector, for specifying which tags in the document the style applies to; A...
Change the appearance of the cursor in CSS Show Chance the appearance of yhe cursor with CSS The cursor property allow you to change the appearance of the cursor on an element of a web page. The client will automatically display the cursor on his computer that matches the type of...
Remove the underline under the links in HTML/CSS ShowRemove the underline under the links in HTML/CSS Using CSS Using CSS via a class Using CSS online AS you may have noticed, hyperlinks are underlined in HTML (by default) It is possible to remove the underline by using the CSS Using...
Remove the border on an image in a link in HTML / CSS ShowRemove the border on an image in a link in HTML/CSS HTML You made a clickable image by using the IMG tag within a link and the browser displays a frame or more precisely a border around the image. There are two ways...
[VB6] Knowing the absolute position of the mouse. Show[VB6] Knowing the absolute position of the mouse The Module Declaring the function Creating the function This feature allows you to know exact the position of the mouse from the screen and irrelevant from the sheet or control it...
CSS - Style sheets ShowFont properties Property Value Description font-family Specific font (Arial, Times, Verdana) Familly (serif, sans-serif, fantasy, monospace, cursive) Defines one or more font names or font families. If multiple fonts are defined,...
Style classes (CSS) ShowClasses and IDs Classes A web designer might want to assign different styles to the same tags. For this reason, the CSS specifications introduced the concept of classes. The definition of classes is as simple as that of styles. It involves...
CSS - Style sheets ShowIntroduction to style sheets The concept of style sheets first appeared in 1996 when the W3C published a new recommendation entitled "Cascading Style Sheets", or CSS for short. The principle behind style sheets involves using a single document to...
They need your help