Go Back   Web Design & SEO Company > Knowledgebase

Knowledgebase Articles and information about running a website, cPanel and various hints and tips. Here you will find tutorials on php, MySql, .htaccess, cron, SEO, Search Engines, CHMOD, FTP, CSS, HTML and various other hints and tips on running and Administrating a website.

Reply
 
  #1  
Old 04-04-2007, 11:35 AM
Admin's Avatar
Administrator
 
Join Date: Jan 2007
Location: Taree
Posts: 612
Default CSS - Positioning

This tutorial teaches you how to use CSS to position images, text, and other elements on your Web pages. Essential reading for anyone who wants to start using CSS for layout.
In this tutorial we show you how to position images, text, and other elements on your page using CSS.
If you've been building Web pages for some time, it's likely that you use HTML tables for laying out your pages. This used to be the only way to control the position of elements on the page. However, CSS2 (CSS level 2, the latest version of CSS at the time of writing) provides new ways to control positioning. CSS gives you control down to the pixel level, and it can also do some things which were harder or impossible to do with tables.
For example, the coloured blocks below are all positioned using CSS:
Sage
Oh the moon, the moon.



Try doing that using tables! ;-)
Accessibility

One of the great advantages of using CSS for layout is that it is fully standards compliant. This means that your site will be much more accessible for people using alternative browsing methods such as handheld devices, braille browsers, or text only browsers.
These users will appreciate being able to get at the content of your Web pages without having to wade through layers of presentation tables, and in fact will have a similar view to those using older browsers that don't support CSS2. Users with older browsers will still be able to read your pages, but will not see all the fancy formatting you've applied.
Because of this, it's a good idea to place the items that you want to appear at the top of the page at the top of the HTML code, and so on through to the bottom of the page. This way, older browsers will display your page content in the correct order.
Older browsers

The techniques used in this tutorial will work in Internet Explorer 5+ and Netscape 6+ (around 93% of Web users according to recent statistics).
Internet Explorer 4 and Netscape 4 provide partial support for CSS2. Some techniques will display correctly in these browsers while others will not. For example, Netscape 4 fails to display the background-color of a div tag.
Now let's take a look at how to position stuff with CSS!
Containers

The block example near the top of this tutorial uses three containers which are positioned using CSS. Containers can contain other HTML elements such as images, text, tables, and so on. In the example above, two of the containers hold text, while the other one is empty. Generally we use the HTML tag <div> to specify containers, and we use ids to refer to each container within our stylesheet.
Example:

<div id="mydiv">This text is large and bold and uses small capitals.</div>We can then apply styles to our container by using the # selector in our style sheet:
#mydiv {font-variant: small-caps; font-size: 1.5em; font-weight: bold; }to produce something like this:
This text is large and bold and uses small capitals.
Positioning

The position property is used to determine what kind of positioning we want to use for the container. The most useful values are:
position: absolute; Positions an element at an arbitrary location in the page position: relative; Positions an element relative to its usual position in the page Absolute positioning is the easiest to understand, so we'll start with that!
Absolute positioning

Absolute positioning allows us to remove a container from the context of the other elements around it and position it wherever we want on the page. We tell the browser exactly where we want the container to appear using the top, left, right, and/or bottom properties.
The top property defines how far from the top of the page we want the top of our container to appear. If we use a positive value, then our container is moved down from the top of the page, whereas a negative value would move our container up from the top of the page.
The left property defines how far from the left edge of the page we want the left edge of our container to appear.
The right property defines how far from the right edge of the page we want the right edge of our container to appear.
The bottom property defines how far from the bottom edge of the page we want the bottom edge of our container to appear.
In all cases, if we don't want to offset the container in a particular direction, we can just leave the property out of our style sheet.
The allowed values for top, left, right, and bottom are:
ValueExamplelength{ top: 0px; }percentage{ left: 10%; }
length values are specified using the CSS length units such as px, em, and cm.
percentage values are relative to the parent element's dimensions. In our next two examples this would be the entire Web page.
Examples

Our first example uses the bottom and right properties to absolutely position a copyright notice on a Web page, as shown below:
Taree Internet 2007

To do this, we define a container called copy to hold our copyright notice:
<div id="copy">&copy; ELATED 2006<div>We then position it in the bottom-right corner using CSS:
#copy { position: absolute; right: 10px; bottom: 10px; }(Remember that we use the # in a style sheet to refer to an element which has been given an id.)
For our second example, imagine that you want to build a page that looks like the one below:

home | diary | photo gallery | contact
Welcome

to my site...


You would split the page into three containers - header, menu, and content:
<div id="header"><img src="header_image.jpg"width="100%" height="50" alt="header image"></div><div id="menu">home | diary | photo gallery | contact</div><div id="content"><h1>Welcome</h1><p>to my site...</p></div>The style sheet would position them one underneath the other using CSS like this:
#header { position: absolute; top: 0px; left: 0px; width: 100%; }#menu { position: absolute; top: 50px; left: 0px; width: 100%; height: 10px; background-color: #333366; color: #FFFFFF"}#content { position: absolute; top: 65px; left: 0px; width: 100%; background-color: #FFFFFF; color: #000000"}Relative positioning

With relative positioning the container is positioned relative to its usual position on the page.
As with the absolutely positioned containers, we can use the left, right, top and bottom properties to modify the position. However, these modifiers work in a slightly different way with relative positioning. The main things to remember are:
  • We always measure from its usual position on the page. (Absolute positioning measures from the top-left of the page.)
  • We always offset the top-left of the container. (Absolute positioning offsets different edges depending on which property you're using to offset the container.)
The top property defines how far from the top of its usual position we want the top of our container to appear. If we use a positive value, then our container is moved down from the usual position, whereas a negative value would move our container up from the usual position.
The left property defines how far from its usual position we want the left of our container to appear. Positive values will move the container right, and negative values will move it left.
The right property defines how far from its usual position we want the left hand edge of our container to appear (not the right hand edge, as you might expect!). Setting right: -5px is the same as setting left: 5px with relative positioning.
Similarly, the bottom property defines how far from the usual position we want the top of the container to appear. Setting bottom: 50px is the same as setting top: -50px when using relative positioning.
The examples below use cross-hairs to show what would be the normal position of the container on the page. This is the point that the left, right, top and bottom properties are measured from. We've also given the containers a background colour, so that you can see more easily how they're offset from their top-left corner.
Examples

#mydiv { position: relative; top: 0px; left: 0px; } This text is positioned where it would usually appear on the page. Notice that the top-left corner is at the centre of the cross-hairs.

#mydiv { position: relative; top: 0px; left: 50px } This text is positioned 50 pixels right of where it would usually appear.

#mydiv { position: relative; top: 5px; } This text is positioned 5 pixels below where it would usually appear.

#mydiv { position: relative; bottom: 5px; right: 10px; } This text is positioned 5 pixels above and 10 pixels to the left of where it would usually appear. (Remember that we're offsetting the top-left corner of our container.)

Absolute isn't always absolute!

When explaining absolute positioning above, we assumed the containers are being positioned absolutely within the entire Web page. In fact, absolute positioning is a little more complex, and containers can actually be positioned absolutely within another container that has been positioned on the page.
Our absolutely positioned examples above actually make use of this advanced positioning concept, in order to show you the examples inline, instead of using a new HTML page for each example. To do this, we absolutely positioned our example containers within relatively positioned containers. This has the effect we want because:
  1. The relatively positioned element will appear at the appropriate position in the document (i.e. within the document flow).
  2. With absolute positioning the browser doesn't reserve space within the document flow for the container. This means that if you wanted to mix absolutely positioned items with some normal text on the page, one would overlap and obscure the other - not much use for our examples!>
  3. On the other hand, relatively positioned containers work much more like the HTML elements you're used to, in that they do take up space within the document flow.
In the example below, the relatively positioned element appears within the document flow as well as taking up the space needed to display it, so we end up with absolutely positioned elements shown inline.
#container {position: relative; width: 100%; height: 125px;}#copy {position: absolute; right: 10px; bottom: 10px;}<div id="container"> <div id="copy"> &copy; ELATED 2006 <div><div>Taree Internet 2007




Controlling the size of a container

You should now know how to position your containers on the page. Now we'll explain how you can control the size of your containers.
The width and height propertes are used to determine how large a container is. These are specified using the CSS length units such as px, em, and %.
Examples:

#mydiv1 { width: 250px; height: 50px; }This container is 250px wide and 50px high. It has a background colour so that you can see the dimensions.
#mydiv1 { width: 75%; height: 50px; }This container is 75% wide and 50px high. When using percentage units, the dimensions are calculated as a percentage of the parent element - in this case a <td>.
Additionally, the overflow property can be used to determine what happens when the container is filled to over-flowing. The allowed values are:
overflow: auto; Automatically displays scrollbars if the content overflows the container overflow: hidden; Clips the element and hide any content which overflows the container overflow: visible; Displays all content, including any that overflows the container overflow: scroll; Always displays scrollbars within the container Examples:

#mydiv1 { position: absolute; left: 25%; width: 50%; height: 50px; overflow: auto; }mydiv1's overflow property is set to auto. A scrollbar will be displayed only if there is too much text to display. This example should show a scrollbar. Try it out - scroll down to see all the text.




#mydiv2 { position: absolute; left: 25%; width: 50%; height: 50px; overflow: hidden; }mydiv2's overflow property is set to hidden. When there is too much text to display the content is clipped and the overflowing text is not displayed. Try to see the text at the bottom of this container!




#mydiv3 { position: absolute; left: 25%; width: 50%; height: 50px; overflow: visible; }mydiv3's overflow property is set to visible. When these containers have too much text to display, it will be displayed anyway. This example text should overflow the area that has been allocated to it.




#mydiv4 { position: absolute; left: 25%; width: 50%; height: 50px; overflow: scroll; }mydiv4's overflow property is set to scroll. The scrollbars are always visible, whether the content overflows or not!




Layering up

When displaying containers that overlap, you might sometimes want to specify which container lies on top of another. The property z-index allows us to do this. The allowed values are:
ValueExampleauto{ z-index: auto; }integer{ z-index: 2; }
auto will use the same stacking level as the parent element.
integer defines the stacking level of the element. An element with a higher stacking level will be displayed on top of one with a lower stacking level. Negative integers may also be specified.
Examples:

#mydiv1 { z-index: 1; }#mydiv2 { z-index: 2; }I'm underneath!
I'm on top because I have a higher z-index
Reply With Quote
Top SEO Tool
Harvester and Mass Blog Commenter
Blog Comment Software

  #2  
Old 01-24-2009, 08:21 AM
Banned
 
Join Date: Jan 2009
Location: USA
Posts: 3
Default

I have still intrested in CSS.
Reply With Quote
Top SEO Tool
Harvester and Mass Blog Commenter
Blog Comment Software

SEO - Top



Web Design & SEO Forums