Home arrow Style Sheets arrow Page 3 - Designing Web Pages without Tables
STYLE SHEETS

Designing Web Pages without Tables


Many "tricks" were developed before the days of CSS in order to display neat-looking web pages. The main trick is to use tables (with the property border = 0) in order to put menus and other similar content on the page. This article will teach one how to stop using those messy tables and enter the world of design with CSS.

Author Info:
By: Sasha Slutsker
Rating: 3 stars3 stars3 stars3 stars3 stars / 81
August 09, 2004
TABLE OF CONTENTS:
  1. · Designing Web Pages without Tables
  2. · No Tables for Layout
  3. · Absolute Positioning, Add Borders and Margins
  4. · Lack of Browser Support

print this article
SEARCH DEVARTICLES

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 */

}


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials