HTML and CSS Reference
In-Depth Information
Table 7-5 Position Property Values
Property Values
Value Description
absolute
Generates an absolutely positioned element, positioned relative to the first parent
element that has a position other than static
fixed
Generates an absolutely positioned element, positioned relative to the browser window
relative
Generates a relatively positioned element, positioned relative to its normal position,
so “left: 10” adds 10 pixels to the element's left position
static
Default; no position; the element occurs in the normal flow
inherit
Specifies that the value of the position property should be inherited from the parent
element
When you add the list-style: none property in line 21, you turn off the display of
the disc that is the default bullet for an unordered list. The margin: 2px 5px 5px 0 code
is a shorthand property statement for margins. When you set the display: block style on
lines 23 and 25, the ul element will generate a block box (line break) before and after
the element. On line 30 (shown below) you will create a class named “whitepipe”:
30 .whitepipe {color: white;}
The whitepipe class sets the color of the pipe symbol used in between the menu options
to white. We set that pipe symbol to white so that it will display against the dark
background.
In the final section of the embedded style sheet (lines 32 through 35) you will set
the styles for the content (text and image) that displays beneath the navigation bar.
32
p.box {width: 400px; margin-left: 20px; margin-top: 50px;
border-radius: 5px;
33
background-color: white; padding: 10px; color:
#303032;}
34
35
img.posit {position: relative; left: 460px; top: -270px;}
Lines 32 and 33 create a paragraph class named “box” that describes the style of the box
surrounding the paragraph of text. The width of the box is 400 pixels with a left margin of
20 pixels and a top margin of 50 pixels as shown in Figure 7-7a. The border-radius is set
to 5 pixels which gives the box rounded corners. The background color is white with gray
(#303032) text. Line 35 creates a class named “posit” that positions the image in a relative
position from the left by 460 pixels and from the top at -270 pixels. Figure 7-7b shows
the same image positioned from the bottom of the paragraph box by 50 pixels.
