Scribd Logo
Carica

Benvenuto in Scribd!

  • Css 8 Positioning

    Caricato da

    p_isaic989
    4 visualizzazioni2 pagine
    CSS si HTML

    Copyright

    © © All Rights Reserved

    Formati disponibili

    DOC, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    CSS si HTML

    Copyright:

    © All Rights Reserved
    Scarica in formato DOC, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    4 visualizzazioni2 pagine

    Css 8 Positioning

    Caricato da

    p_isaic989
    CSS si HTML

    Copyright:

    © All Rights Reserved
    Scarica in formato DOC, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 2

    fisa css 8

    Pozitionare <body>
    <h2 class="pos_abs">This is a heading with an
    position: relative absolute position</h2>
    <p>With absolute positioning, an element can be
    Pozitionarea se face in functie de pozitia normala a placed anywhere on a page. The heading below is
    elementului. Adica daca unui element i se specifica placed 100px from the left of the page and 150px from
    position:relative si left:20 px atunci elementul se va the top of the page.</p>
    pozitiona pe aceeasi linie dar 20 pixeli mai la dreapta. </body>
    Astfel un element nu se pozitioneaza relativ la
    elementul parinte cum exista uneori tendinta eronata de </html>
    a aplica aceasta metoda ci la modul normal de
    pozitionare (normal flow) indiferent unde s-ar afla.
    Clear.
    <html><head>
    <style type="text/css"> Clear este opusul lui float.
    h2.pos_left Ex float:left inseamna pozitionare spre stanga iar restul
    { elementelor de acelasi tip vor fi pozitionate avand
    position:relative; elementul precedent in stanga). In exemplul urmator
    left:-20px toate imaginile pornesc din stanga si fiecare element va
    } fi trimis spre stanga in functie de spatiul ramas liber
    h2.pos_right precum piesele de pe o tabla de remi.
    {
    position:relative; html>
    left:20px <head>
    } <style type="text/css">
    </style> img
    </head> {
    float:left;
    <body>
    <h2>pozitia normala</h2> }
    <h2 class="pos_left">s-a mutat cu 20 pixeli la stanga </style>
    fata de pozitia normala </h2> </head>
    <h2 class="pos_right">acesta s-a muta cu 20 pixeli la <body>
    dreapta fata de pozitia normala</h2>
    </body> <img src="logocss.gif" width="95" height="84" />
    <img src="logocss.gif" width="95" height="84" />
    </html> <img src="logocss.gif" width="95" height="84" />
    <img src="logocss.gif" width="95" height="84" />
    Position:absolute
    </body>
    Este cel mai simplu de inteles. Se specifica position: </html>
    absolute si pozitionarea in pagina se va face in functie
    de proprietatile top, left, right, bottom Modificati acum stilul astfel:

    <style type="text/css">
    <html> img
    <head> {
    <style type="text/css"> float:left;
    h2.pos_abs clear:left;
    { }
    position:absolute; </style>
    left:100px;
    top:150px Efectul este ca nici o imagine nu va accepta un alt
    } element in stanga.
    </style> De aceea div-urile header si footer din pagina web
    </head> urmatoare au clear:left – ca sa fie pozitionate din
    stanga ferestrei (nu pot avea nici un element in stanga
    lor)
    1
    fisa css 8
    <div class="container">
    Exemplu pentru o pagina realizata fara tabele, folosind
    doar div-uri <div class="header">
    <h1 class="header"> W3Schools.com</h1>
    <html> </div>
    <head>
    <style type="text/css"> <div class="left">
    <p>"Never increase, beyond what is necessary, the
    div.container number of entities required to explain anything."
    { William of Ockham (1285-1349)</p>
    width:100%; </div>
    margin:0px;
    border:1px solid gray; <div class="content">
    line-height:150%; <h2>Free Web Building Tutorials</h2>
    } <p>At W3Schools you will find all the Web-
    building tutorials you need,
    div.header,div.footer from basic HTML and XHTML to advanced
    { XML, XSL, Multimedia and WAP.</p>
    padding:0.5em; <p>W3Schools - The Largest Web Developers
    color:white; Site On The Net!</p>
    background-color:gray; </div>
    clear:left;
    } <div class="footer">Copyright 1999-2005 by
    Refsnes Data.
    h1.header </div>
    {
    padding:0; </div>
    margin:0;
    } </body></html>

    div.left Tipuri de cursor


    {
    float:left; <html>
    width:160px;
    margin:0; <body>
    padding:1em; <p>Move the mouse over the words to see the cursor
    } change:</p>
    <span style="cursor:auto">
    div.content Auto</span><br />
    { <span style="cursor:crosshair">
    margin-left:190px; Crosshair</span><br />
    border-left:1px solid gray; <span style="cursor:default">
    padding:1em; Default</span><br />
    } <span style="cursor:pointer">
    Pointer</span><br />
    </style> <span style="cursor:move">
    </head> Move</span><br />
    <body> <span style="cursor:text">
    text</span><br />
    <span style="cursor:wait">
    wait</span><br />
    <span style="cursor:help">
    help</span>
    </body>

    </html>

    Potrebbero piacerti anche