HTML and CSS Reference
In-Depth Information
EXAMPLE
14.25
<html>
<head><title>Positioning</title>
1
<style>
2
.divStyle
{ background-color:lightblue;
3
position: absolute;
4
width: 250px; height: 150px;
border-style: solid;
border-color: darkblue;
}
5
.paraStyle
{ color:darkblue;
6
position: relative;
font-size:18pt;
}
</style>
</head>
<body>
7
<div style="left:50px; top:50px" class="divStyle">
8
<p style="left:15%; top:20%" class="paraStyle">
This is a paragraph.
</p>
</div>
</body>
</html>
EXPLANATION
1
The style sheet starts here.
2
A style class called
divStyle
is defined for the
div
element.
3
The
div
box will be absolutely positioned in terms of the browser window.
4
The dimensions of width and height of the
div
box are set. The border around the
div
container is a solid, dark blue border.
5
A style class called
paraStyle
is defined for the paragraph (
p
) element. The color
of the text will be dark blue.
6
The position will be relative to the
div
box where the paragraph is contained. If
top
and
left
properties are not defined, the paragraph will be in the top, left corner
of the box, position 0,0 relative to the
div
container where it is placed.
7
An inline style is set for the
div
element, placing the box 50 pixels from both the
top and the left side of the browser window.
8
An inline style is set for the
p
element, placing the paragraph at a percentage of
15% from the left and 30% from the top based on the dimensions of the
div
box.
See Figure 14.28.
