Doriți să reacționați la acest mesaj? Creați un cont în câteva clickuri sau conectați-vă pentru a continua.

Tutorial complect CSS part 6

2 participanți

 :: Tutoriale :: Tutoriale Web :: CSS

In jos

Tutorial complect CSS part 6 Empty Tutorial complect CSS part 6

Mesaj Scris de Pein Lun Iul 26, 2010 3:05 am

Pozitionare

Pozitionarea permite asezarea unui obiect intr-un anume loc folosind
coordonatele. Totodata obiectele pot fi pozitionate pe straturi
diferite, unul deasupra celuilalt. Atat pozitionarea absoluta (ASOLUTE) cat si cea relativa (RELATIVE) folosesc proprietatile LEFT si TOP exprimate in px (pixeli), in (inci), pt (puncte), ems, procentaje sau cm (centimetri). 8.1 Pozitionare absoluta plaseaza obiectul in pagina exact in locatia data de left si top. Astfel poate fi creat un element liber fata de celelalte din pagina. Obiectul poate fi orice, de exemplu text sau imagine. Exemplu: am aplicat pozitionarea absoluta etichetei h4
Cod:

 [/i]<html>
 <head>
 <title>Exemplu 8_1</title>
 </head>
 <body>
 <h4 style="position: absolute; left: 50px; top: 50px">Text 1</h4>
 <h4 style="position: absolute; left: 100px; top: 200px">Text 2</h4>
 <script type="text/javascript">//<![CDATA[
                  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
                  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
                 //]]></script>
                 <script type="text/javascript">//<![CDATA[
                     try
                     {
                        var pageTracker = _gat._getTracker("UA-6105650-13");
                        pageTracker._setDomainName("none");
                        pageTracker._setAllowLinker(true);
                        pageTracker._trackPageview();
                     }
                     catch(err){}
                 //]]></script></body>
 </html>
[i]
8.2 Pozitionare relativa este pozitia normala pe care o ocupa
un element, dupa elementele anterioare si inaintea celor urmatoare.
Poate fi deplasat fata de aceasta pozitie folosind proprietatile [i]left si top.
Exemplu: am folosit doua obiecte unul pozitionat absolut celalalt relativ
Cod:

 
 
 
<html>
 <head>
 <title>Exemplu 8_2</title>
 <style type="text/css">
 <!--
 .absolut {position: absolute; left: 200px; top: 150px;}
 .relativ {position: relative; left: 50px; top: 50px;}
 -->
 </style>
 </head>
 <body>
 <div class="absolut">Pozitionare absoluta, independent de celelate obiecte din pagina</div> Text
 <div class="relativ">Pozitionare relativa, dupa "Text"</div> <script type="text/javascript">//<![CDATA[
                  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
                  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
                 //]]></script>
                 <script type="text/javascript">//<![CDATA[
                     try
                     {
                        var pageTracker = _gat._getTracker("UA-6105650-13");
                        pageTracker._setDomainName("none");
                        pageTracker._setAllowLinker(true);
                        pageTracker._trackPageview();
                     }
                     catch(err){}
                 //]]></script></body>
 </html>


8.3 Pozitionarea tridimensionala
Elementele sunt
pozitionate pe ecran pe o suprafata bidimensionala dar pot fi asezate
si unul deasupra celuilalt, intr-o stiva utilizand un indicativ
(index-z) incepand cu 0, urmatorul 1 si tot asa in continuare.
Elementul cu indexul cel mai mare este asezat deasupra. Exemplu: am folosit doua obiecte unul pozitionat absolut celalalt relativ

Cod:

 <html>
 <head>
 <title>Exemplu 8_3</title>
 <style type="text/css">
 <!--
 .element1 {position: absolute; left: 30px; top: 30px; z-index: 3}
 .element2 {position: absolute; left: 50px; top: 50px; z-index: 2}
 .element3 {position: absolute; left: 70px; top: 70px; z-index: 1}
 -->
 </style>
 </head>
 <body>
 <div class="element1"><img src="poza.jpg"></div> <div class="element2"><img src="poza.jpg"></div> <div class="element3"><img src="poza.jpg"></div> <script type="text/javascript">//<![CDATA[
                  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
                  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
                 //]]></script>
                 <script type="text/javascript">//<![CDATA[
                     try
                     {
                        var pageTracker = _gat._getTracker("UA-6105650-13");
                        pageTracker._setDomainName("none");
                        pageTracker._setAllowLinker(true);
                        pageTracker._trackPageview();
                     }
                     catch(err){}
                 //]]></script></body>
 </html>
Pein
Pein
Fondator
Fondator

<b>Sex</b> Sex : masculin
<b>Mesaje</b> Mesaje : 617
<b>Credite</b> Credite : 5951
<b>Varsta</b> Varsta : 30
<b>Localizare</b> Localizare : Campina
<b>Respectarea Regulamentului</b> Respectarea Regulamentului : Tutorial complect CSS part 6 0w11

https://help-forums.all-up.com

Sus In jos

Tutorial complect CSS part 6 Empty Re: Tutorial complect CSS part 6

Mesaj Scris de God Joi Oct 07, 2010 1:57 am

De acum pot spune ca sunt maestu in csS?
God
God
Member
Member

<b>Sex</b> Sex : masculin
<b>Mesaje</b> Mesaje : 91
<b>Credite</b> Credite : 5251
<b>Varsta</b> Varsta : 30
<b>Localizare</b> Localizare : Home
<b>Respectarea Regulamentului</b> Respectarea Regulamentului : Tutorial complect CSS part 6 0w11

http://Gods.forumz.ro

Sus In jos

Sus

- Subiecte similare

 :: Tutoriale :: Tutoriale Web :: CSS

 
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum