Css 8 positioning

Administrator Data inscrierii: 07/Dec/2013 Mesaje: 1103

Citat:

Pozitionare

Position: relative

Pozitionarea se face in functie de pozitia normala a elementului. Adica daca unui element i se specifica position:relative si left:20 px atunci elementul se va pozitiona pe aceeasi linie dar 20 pixeli mai la dreapta.
Astfel un element nu se pozitioneaza relativ la elementul parinte cum exista uneori tendinta eronata de a aplica aceasta metoda ci la modul normal de pozitionare (normal flow) indiferent unde s-ar afla.

<html><head>
<style>
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>

<body>
<h2>pozitia normala</h2>
<h2>s-a mutat cu 20 pixeli la stanga fata de pozitia normala </h2>
<h2>acesta s-a muta cu 20 pixeli la dreapta fata de pozitia normala</h2>
</body>
</html>

Position:absolute

Este cel mai modest de inteles. Se specifica position: absolute si pozitionarea in pagina se va face in functie de proprietatile top, left, right, bottom
<html>
<head>
<style>
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>

<body>
<h2>This is a heading with an absolute position</h2>
<p>With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.</p>
</body>

</html>

Clear

Clear este opusul lui float.
Ex float:left inseamna pozitionare spre stanga iar restul elementelor de acelasi tip vor fi pozitionate avand elementul precedent in stanga). In exemplul urmator toate imaginile pornesc din stanga si fiecare element va fi trimis spre stanga in functie de spatiul ramas deschis cum ar fi piesele de pe o tabla de remi.

html>
<head>
<style>
img
{
float:left;
}
</style>
</head>
<body>

<img src="logocss.gif" width="95" height="84">
<img src="logocss.gif" width="95" height="84">
<img src="logocss.gif" width="95" height="84">
<img src="logocss.gif" width="95" height="84">

</body>
</html>

Modificati acum stilul astfel:
<style>
img
{
float:left;
clear:left;
}
</style>
Efectul este ca nici o imagine nu va accepta un alt element in stanga.
De aceea div-urile header si footer din pagina web urmatoare au clear:left – ca sa fie pozitionate din stanga ferestrei (nu pot avea nici un element in stanga lor)
Exemplu pentru o pagina realizata fara tabele, folosind doar div-uri
<html>
<head>
<style>

div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;
width:160px;
margin:0;
padding:1em;
}
div.content
{
margin-left:190px;
border-left:1px solid gray;
padding:1em;
}
</style>
</head>
<body>

<div>

<div>
<h1> W3Schools.com</h1>
</div>

<div>
<p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p>
</div>

<div>
<h2>Free Web Building Tutorials</h2>
<p>At W3Schools you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>W3Schools - The Largest Web Developers Site On The Net!</p>
</div>

<div>Copyright 1999-2005 by
Refsnes Data.
</div>

</div>

</body>
</html>

Tipuri de cursor

<html>
<body>
<p>Move the mouse over the words to see the cursor change:</p>
<span>
Auto</span><br>
<span>
Crosshair</span><br>
<span>
Default</span><br>
<span>
Pointer</span><br>
<span>
Move</span><br>
<span>
text</span><br>
<span>
wait</span><br>
<span>
help</span>
</body>
</html>