Designing Web Pages without Tables - Absolute Positioning, Add Borders and Margins
(Page 3 of 4 )
Absolute Positioning means that you define exactly where on the screen your element to appear. This is done by defining top, bottom, left, and right attributes like so:
div.content{
background: white;
color: black;
position: absolute; /* Says which positioning we are using */
left: 17%; /* 17% from the left side of the screen */
width: 69%; /* This is the width */
}
Note that only the left property was defined. This is okay! You do not need to define all the properties, but for more flexibility, you might want to. For example, you may want to add a menu on the right:
div.rightnav{
background: white;
color: black;
position: absolute;
left: 83%;
width: 10%;
top: 80px; /* 80 pixels from the top */
}
Basically, in absolute positioning, the elements mean this:
left: distance from left side of screen, usually percent
right: distance from right side of screen, usually percent
top: distance from top of screen, usually pixels
bottom: distance from bottom screen, usually pixels
Note that bottom is rarely used, but it is needed sometimes. If you do use all four (or at least three) of the elements, you should be able to put the div tag anywhere you want. Also, it is important to note that there are more ways to position an element besides absolute positioning, but not all browsers support those ways. For example, there is also fixed positioning, but this is not supported by Internet Explorer (IE). Therefore, you should probably just use absolute positioning.
Adding Borders
You may want to space your element a little from the sides of the screen or something. Borders are good for this, but remember to test your code in different browsers as this can be a little tricky. More information about that is on the next page, though. On this page you will just find out about how to make the borders.
div.rightnav{
background: white;
color: black;
position: absolute;
left: 83%;
width: 10%;
top: 80px; /* 80 pixels from the top */
border-color: white; /* Keep the border invisible */
border-style: solid; /* It is a solid invisible line which is fine */
border-bottom-width: 2px; /* These attributes are pretty self-explanatory */
border-top-width: 2px;
border-left-width: 3px;
border-right-width: 4px;
}
Adding Margins
Margins are a great tool for any CSS Website. Basically, you can put something in the center by putting it a certain percentage from both margins. Here is how it is done:
div.content{
background: white;
color: black;
margin-left: 20%; /* 20% from the left side of the screen */
margin-right: 20%; /* 20% from the right side of the screen */
}
Next: Lack of Browser Support >>
More Style Sheets Articles
More By Sasha Slutsker
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
