WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1Accespted Position Tue Nov 30, 2010 11:48 pm

Unknown Data

Unknown Data
Registered Member
Registered Member
Position
Learn CSS - part 14


The Positions
The "position" attribute describes how you can positionate your element. The method you use can either be "relative" or "absolute" for best experiences.

Absolute position is calculated from the upper left corner of the element it is in.
Relative position is calculated from the element's current position. Element can be displaced by position relative to this position.

The CSS2 positioning context is calculated from the rectangular box principle. W3C uses the term "containing block", in other words, it has been through absolute position that could place an element in the document.
The absolute positioning is based on the top left corner of the document (component) and by the absolute positioning model, an item will be placed (offset) relative to the element which it finds itself in.

The following values are possible for use in connection with position: top, bottom, left and right.

Absolute position
In the example have I placed an element (2) inside another (1).
We are using Inline style to make it more simple.
Code:
<html>
<head>
<title>Absolute position</title>
</head>
<body> <div style="position: absolute; top: 50px;
width: 100px; height: 100px; border: 1px solid red;">Box number 1
<div style="position:absolute; top: 10; left: 110;
width: 100px; height: 100px; border: 1px solid green;">Box number 2</div>

</div>
</body>
</html>
The body element contains the elements div ID 1 and 2, and thus can be said to be "containing block" for these two elements. Div id 1 is a further "containing block" for the element div id 2.

Relative position
I have chosen to illustrate, with some source, the relative positioning with the following small example.

We have desiced to place two boxes side by side with spacing of 5px from the boxes. Agian are we using an Inline style to make it more uncluttered.
Code:
<html>
<head>
<title>Relative position</title>
</head>
<body> <div style="width: 100px; height: 100px; border: 1px solid red;">Box 1</div> <div style="width: 100px; height: 100px; border: 1px solid green;">Box 2</div>
</body>
</html>
Using relative position, am I wishing to place the boxes side by side. The code is shown below.
Code:
<html>
<head>
<title>Relative position/title>
</head>
<body> <div style="width: 100px; height: 100px; border: 1px solid red;">Box 1</div> <div style="position: relative; top: 0px; left: 105px; width: 100px; height: 100px; border: 1px solid green;">Box 2</div>
</body>
</html>
What's now happening? Well, box number 2 dosen't got moved to top 0px and left 105px. The box isn't moved by the y-axis but in the x-axis. So it was moved relative to its original position.

To place the boxes side by side with relative position, should the x/y coordinates be specified as shown below.
Code:
<html>
<head>
<title>Relative position</title>
</head>
<body> <div style="width: 100px; height: 100px; border: 1px solid red;">Box 1</div> <div style="position: relative; top: -100px; left: 105px; width: 100px; height: 100px; border: 1px solid green;">Box 2</div>
</body>
</html>
Fixed position
The fixed value works as it sounds. It will fix (cliam) your content, were you wan't it to be displayed. Ie. will it be on the same place all the time, also with scrolling.

If we take a look at a example.
Code:
<html>
<head>
<title>Fixed position</title>
<style>
body {
height: 2000px;
}
</style>
</head>
<body> <div style="position: fixed; top: 50px; left: 50px;
width: 100px; height: 100px; background: green;">Box 1</div>
</body>
</html>
As you surely had noticed will the box stay were it should be placed.

Z-index
By using the z-index can we put different element on eachother. To this can you use positive and negative numbers.

When you use integers, can you manage the placement itself. It is also possible to use 'auto', this will subsequently be defined if the elements are superimposed elements which were defined earlier. Zero (0) is the starting point. Items defined with a high number will be placed on top of elements with a lower number.

Float
The float defines were the element should float. Here can we use right, left and none.

By using the float, is it possible to place two equal element tags in a single line, one that floats to the right and one that flows to the left.
An example is shown below.
Code:
p.left {
width: 40%;
float: left;
}
p.right {
width: 200px;
float: right;
}
Saved as float.css
Code:
<html>
<head>
<title>Float</title>
<link rel="stylesheet" type="text/css" href="float.css" />
</head>
<body>
<p class="left">Floating content to left</p>
<p class="right">Floating content to right</p>
</body>
</html>
That was all about these elements and CSS. In the next lesson (that's also the last one) are we going to validate and optimize our stuff.

Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.



Last edited by Unknown Data on Thu Dec 09, 2010 11:02 pm; edited 1 time in total

http://woops.dk

2Accespted Re: Position Wed Dec 01, 2010 2:12 am

Emilio

Emilio
Registered Member
Registered Member
Good job as always Unknown!

http://www.graphilicious.forumotion.Com

3Accespted Re: Position Wed Dec 01, 2010 10:20 pm

Guest


Guest
I really like his tutorials, if you guys follow them you will learn HTML and CSS fast!

Good job Wink

4Accespted Re: Position Wed Dec 01, 2010 10:40 pm

Unknown Data

Unknown Data
Registered Member
Registered Member
Thanks bros! Very Happy

http://woops.dk

5Accespted Re: Position Thu Dec 09, 2010 2:55 am

Guest


Guest
Really like it,great job Wink

Spoiler:

6Accespted Re: Position Thu Dec 09, 2010 10:24 pm

Unknown Data

Unknown Data
Registered Member
Registered Member
Thanks. Very Happy

Well I dosen't think it was so necersary agian, because the fixed value says it all.

UPDATE! Will add it soon.

http://woops.dk

7Accespted Re: Position Sat Dec 11, 2010 6:31 am

WHITESABBATH


Registered Member
Registered Member
Gotta lot out of that. can't wait for that update Smile Thanks Unknown

8Accespted Re: Position Sat Dec 11, 2010 5:26 pm

Unknown Data

Unknown Data
Registered Member
Registered Member
Thanks. Very Happy

http://woops.dk

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum