Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • E Learn6

    Загружено:

    Daniela Lutic
    3 просмотров20 страниц

    Оригинальное название

    E-learn6

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    3 просмотров20 страниц

    E Learn6

    Загружено:

    Daniela Lutic

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 20

    E-learn.

    ro

    http://www.e-learn.ro/printare-tutorial/css/out-of-the-box/73/1/44.htm

    Out of the box

    22.04.2008

    Este adevarat ca CSS se bazeaza foarte mult pe grid-uri - totul urmeaza coordonate xy, dar asta nu inseamna ca designul este neinteresant. Daca intelegi cum functioneaza un grid poti sa fragmentezi sau sa abstractizezi pentru a face layout-ul mai dinamic si mai interesant. 7540 afisari 0 Rating (8 voturi) 30 min

    Este adevarat ca CSS se bazeaza foarte mult pe grid-uri - totul urmeaza coordonate xy, dar asta nu inseamna ca designul este neinteresant. Daca intelegi cum functioneaza un grid poti sa fragmentezi sau sa abstractizezi pentru a face layout-ul mai dinamic si mai interesant. Descarca fisierele folosite pentru acest tutorial. Griduri si wireframe "Trebuie sa cunosti regulile inainte sa le incalci" Daca ai luat cursuri de tipografie sau layout vei sti ca gridul e unul din elementele esentiale in design. Totusi daca nu esti familiarizat cu acest concept iata o introducere: Un grid ofera organizare. Un grid poate sa reprezinte macheta layoutului. Gridurile bine concepute pot sa creeze un efect estetic placut si organizeaza continutul. Un grid poate sa defineasca mai multa informatie. Un layout bine organizat ofera constanta de la o pagina la alta si defineste ce tip de informatie este oferita in diferite momente.( de exemplu: o zona laterala poate oferi informatie secundara; informatia despre copyright si informati juridice etc pot fi plasate la finanlul paginii etc) Un grid poate uni serii. Daca ai un ghid planificat pentru plasarea logourilor, titlurilor, imaginilor si/sau a textului in orice domeniu (carti de vizita, reclame, layout-uri pentru pagini web) iti va fi mai usor sa "legi" toate elementele. Deci gridul poate fi un element foarte important pentru un brand. Pentru web-design, wireframes sunt folosite pentru a planifica un grid. Wireframe-ul este un ghid vizual de baza folosit pentru a sugera layout-ul si plasarea elementelor fundamentale de design din interfata. Wireframe-urile sunt o modalitate foarte buna de a crea layout-ul site-ului fara sa te lovesti de detalii artistice. Ele permit sa te concentrezi pe plasarea continutului (navigarea, titluri, continut). Aceasta tehnica este practicata si in designul pentru imprimare. Daca site-ul are un layout multi-coloana (o zona de continut si una sau doua zone laterale) poti folosi elemente de structura (markup) (de obicei un tag div,desi asta poate varia in functie de continut) pentru a defini zonele respective, formatandu-le in coloane, randuri sau ce trebuie in functie de wireframe. Poti sa adopti aceeasi abordare pentru a formata antetul si zona de jos a paginii. Incepi crearea

    1 of 20

    2/16/2013 9:45 AM

    E-learn.ro

    http://www.e-learn.ro/printare-tutorial/css/out-of-the-box/73/1/44.htm

    Aici ai un exemplu de grid pe care l-ai putea vedea in mod obisnuit la un site.

    Am impartit la 5 latimea de 960px si am folosit rezultatul de 192px ca unitate la grid - coloanele vor avea aceasta latime si toate celelalte elemente de design vor fi proportionale cu ea. Antetul are inaltimea tot de 192px. Elementele de structura (markup) si formatarile pentru acest layout pot fi foarte directe si ar arata probabil ca acest HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Example Layout</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <paginatie_link type="text/css" rel="stylesheet" href="style.css"/> </head> <body> <div id="page"> <div id="header"> <p>Header content</p> </div> <div id="content-primary"> <p><strong>Primary content.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse pharetra, arcu in dapibus sagittis, felis leo rhoncus erat, non porttitor urna libero vitae nibh. Ut convallis eros sed magna.</p> <p>Aenean enim purus, adipiscing a, vehicula ut, tempor vitae, justo. Nam laoreet mauris vitae elit. Vivamus eros quam, euismod bibendum, pellentesque ut, tristique ut, nisl. <a href="#">Vestibulum ante ipsum primis</a> in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse non metus. Nullam tempor dictum sapien. Duis enim. In ligula. Cras ut enim. Sed dapibus ante in eros. Nulla facilisi. In rhoncus eleifend nunc. Sed risus nulla, pretium in, porta eget, lacinia

    2 of 20

    2/16/2013 9:45 AM

    E-learn.ro

    http://www.e-learn.ro/printare-tutorial/css/out-of-the-box/73/1/44.htm

    eu, nunc. In hac habitasse platea dictumst. Vestibulum feugiat lectus et justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed aliquet dolor nec ipsum.</p> <p><a href="#">Ut erat nibh</a>, aliquet ut, congue at, tempus in, nunc. Ut aliquet leo et lectus volutpat molestie. Vivamus nunc. Nulla facilisi. Suspendisse dictum nunc tempus elit. Nullam urna quam, bibendum quis, tincidunt a, nonummy euismod, metus. Etiam convallis, dui venenatis feugiat elementum, justo lacus lobortis libero, vel iaculis nibh lectus eu urna. Vivamus arcu. In facilisis quam et lacus. Suspendisse sit amet neque ac enim lobortis ullamcorper. Etiam faucibus sapien ut nunc. Nullam consectetuer vehicula arcu.</p> </div> <div id="content-secondary"> <p><strong>Secondary content.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse pharetra, arcu in dapibus agittis, felis leo rhoncus erat, non porttitor urna libero vitae nibh. Ut convallis eros sed magna. Aenean enim purus, adipiscing a, vehicula ut, tempor vitae, justo. Nam laoreet mauris vitae elit. This is interesting information. Ut erat nibh, aliquet ut, congue at, tempus in, nunc. Ut aliquet leo et lectus volutpat molestie. Vivamus nunc. <a href="#">Read&nbsp;more&nbsp;&rarr;</a> </p> </div> <div id="footer"> <p>Footer</p> </div> </div> </body> </html>

    CSS-ul este urmatorul: *{ margin: 0; padding: 0; } body { text-align: center; } #page { margin: 0 auto; width: 960px; text-align: left; } #header { height: 192px; } #content-primary { float: right; width: 768px; } #content-secondary { float: right; width: 180px; } #footer { clear: right; } .clear { clear: both; }

    Marginile si stilul padding sunt resetate la toate elementele folosind asterisc ( * ). Aceasta seteaza formatarile sa fie

    3 of 20

    2/16/2013 9:45 AM

    E-learn.ro

    http://www.e-learn.ro/printare-tutorial/css/out-of-the-box/73/1/44.htm

    aplicate tuturor elementelor. In acest exemplu folosim o metoda standard de centrare a designului. Am setat text-align:center (alinierea textului in centru) pentru corpul principal, margin: 0 auto, o latime (width: in acest caz 960px) si text-align:left pentru containing div caruia i-am zis "page". Mai departe, div-urile de continut (content-primary si contentsecondary) se muta la dreapta. content-primary apare primul in structura, si deci asta este directia in care se vor alinia coloanele una langa cealalta.

    Adaugarea fundalurilor Vom activa cateva fundaluri pentru a vedea granitele mai clar. Retine ca, pentru acest exemplu, folosim tehnica fax-column pentru a crea coloane. Tehnica ia practic o imagine de fundal si o reprezinta vertical pentru a crea primele doua culori de coloane (pentru a evita inaltimi diferite)

    CSS-ul care realizeaza acest lucru il gasim in selectorul #page: #page { margin: 0 auto; width: 960px; background: url(page.gif) repeat-y; text-align: left; }

    Acum ca avem structura de baza, vom adauga margini si padding coloanelor pentru a crea spatiu alb. Latimea paginii noastre - 960px - se imparte exact la 12 si vom folosi aceasta valoare ca baza pentru margini si padding (si mai tarziu o vom folosi pentru marimea fontului). Pentru a avea mai mult spatiu vom folosi 24px pentru margini. Spatiu alb este important. Vom scadea 48px din fiecare coloana pentru a potrivi noile margini. Iata CSS-ul:

    4 of 20

    2/16/2013 9:45 AM

    E-learn.ro

    http://www.e-learn.ro/printare-tutorial/css/out-of-the-box/73/1/44.htm

    * { margin: 0; padding: 0; } body { background: #eee; text-align: center; } #page { margin: 0 auto; width: 960px; background: #fff url(page.gif) repeat-y; text-align: left; } #header { height: 192px; background: #966; } #header p { padding: 24px; } #content-primary { float: right; margin: 24px; width: 720px; } #content-secondary { float: right; margin: 24px; width: 144px; } #footer { clear: right; background: #333; } #footer p { padding: 24px; } .clear { clear: both; }

    5 of 20

    2/16/2013 9:45 AM

    E-learn.ro

    http://www.e-learn.ro/printare-tutorial/css/out-of-the-box/73/1/44.htm

    Dupa cum vezi trebuie sa avem wireframe-ul la locul lui - cu culorile si continutul adaugate. Introducerea continutului Vom adauga imagini, antete si alte elemente. Iata HTML-ul: <div id="page"> <div id="header"> <p>Header content</p> <ul> <li><a href="#">paginatie_link</a></li> <li><a href="#">paginatie_link</a></li> <li><a href="#">paginatie_link</a></li> </ul> </div> <div id="content-primary"> <h1>Welcome to my awesome website.</h1> <h2>Indeed, this is an awesome website.</h2> <p><strong>Primary content.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse pharetra, arcu in dapibus sagittis, felis leo rhoncus erat, non porttitor urna libero vitae nibh. Ut convallis eros sed magna.</p> <img src="photo.jpg" alt="" /> <p>Aenean enim purus, adipiscing a, vehicula ut, tempor vitae, justo. Nam laoreet mauris vitae elit. Vivamus eros quam, euismod bibendum, pellentesque ut, tristique ut, nisl. <a href="#">Vestibulum ante ipsum primis</a> in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse non metus. Nullam tempor dictum sapien. Duis enim. In ligula. Cras ut enim. Sed dapibus ante in eros. Nulla facilisi. In rhoncus eleifend nunc. Sed risus nulla, pretium in, porta eget, lacinia eu, nunc. In hac habitasse platea dictumst. Vestibulum feugiat lectus et justo. Cum sociis natoque penatibus et magnis dis parturient

    6 of 20

    2/16/2013 9:45 AM

    E-learn.ro

    http://www.e-learn.ro/printare-tutorial/css/out-of-the-box/73/1/44.htm

    montes, nascetur ridiculus mus. Sed aliquet dolor nec ipsum.</p> <h2>Oooh, more copy&hellip;</h2> <p><a href="#">Ut erat nibh</a>, aliquet ut, congue at, tempus in, nunc. Ut aliquet leo et lectus volutpat molestie. Vivamus nunc. Nulla facilisi. Suspendisse dictum nunc tempus elit. Nullam urna quam, bibendum quis, tincidunt a, nonummy euismod, metus. Etiam convallis, dui venenatis feugiat elementum, justo lacus lobortis libero, vel iaculis nibh lectus eu urna. Vivamus arcu. In facilisis quam et lacus. Suspendisse sit amet neque ac enim lobortis ullamcorper. Etiam faucibus sapien ut nunc. Nullam consectetuer vehicula arcu.</p> </div> <div id="content-secondary"> <h3>Important Information</h3> <p><strong>Secondary content.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse pharetra, arcu in dapibus sagittis, felis leo rhoncus erat, non porttitor urna libero vitae nibh. Ut convallis eros sed magna. Aenean enim purus, adipiscing a, vehicula ut, tempor vitae, justo. Nam laoreet mauris vitae elit. This is interesting information. Ut erat nibh, aliquet ut, congue at, tempus in, nunc. Ut aliquet leo et lectus volutpat molestie. Vivamus nunc. <a href="#">Read&nbsp;more&nbsp;&rarr;</a> </p> </div> <div id="footer"> <p>Photograph by <a href="http:/jinabolton.com">Jina Bolton</a>.</p> </div> </div>

    Aici a fost adaugat un meniu (un sistem de navigare). Am adaugat si niste titluri si o fotografie. Acum vom adauga niste formatari estetice. Iata CSS-ul: * { margin: 0; padding: 0; } body { background: #eee; font: 12px/18px "Lucida Grande", Verdana, sans-serif; text-align: center; color: #333; } a:paginatie_link, a:visited { color: #633; } a:hover { color: #966; } h1 { margin-bottom: 11px; padding-top: 15px; padding-bottom: 21px; border-bottom: 1px solid #ccc; font: normal italic 1.5em/18px Georgia, serif; color: #633; } h2, h3{ font-weight: normal;

    7 of 20

    2/16/2013 9:45 AM

    E-learn.ro

    http://www.e-learn.ro/printare-tutorial/css/out-of-the-box/73/1/44.htm

    font-size: 1em; line-height: 18px; } h2 { padding-top: 10px; padding-bottom: 20px; font-size: 1.25em; text-transform: uppercase; color: #999; } h3 { padding-bottom: 6px; font-weight: bold; text-transform: uppercase; letter-spacing: -1px; color: #633; } #page { margin: 0 auto; width: 960px; background: #fff url(page.gif) repeat-y; text-align: left; } #header { height: 192px; background: #966; } #header p { float: left; padding: 60px 24px 24px 24px; font-size: 1.5em; line-height: 1em; color: #fff; } #header ul { padding-top: 62px; padding-right: 12px; text-align: right; list-style: none; } #header li { display: inline; margin: 0 12px; } #header li a { font-size: 1.25em; line-height: 1em; text-decoration: none; color: #fff; } #header li a:hover { color: #300; } #content-primary { float: right; margin: 24px; width: 720px; } #content-primary p { padding-bottom: 18px; } #content-primary img { float: left; margin: -6px 18px 0 -6px; padding: 3px; border: 3px solid #eee; background: #fff;

    8 of 20

    2/16/2013 9:45 AM

    E-learn.ro

    http://www.e-learn.ro/printare-tutorial/css/out-of-the-box/73/1/44.htm

    } #content-secondary { float: right; margin: 24px; width: 144px; font-size: 11px; color: #300; } #content-secondary p { padding-bottom: 18px; } #footer { clear: right; height: 192px; background: #333; font-size: 10px; line-height: 1em; text-shadow: 1px 1px 1px #333; color: #fff; } #footer a:paginatie_link, #footer a:visited { color: #c99; } #footer p { padding: 24px; } .clear { clear: both; }

    Pe langa setarea tipurilor de formatari, am si ajustat spatierea pentru a crea mai mult spatiu. Zona de jos a paginii are inaltimea de 192px (nu numai pentru conformitate dar pentru ca arata mai bine). Elementului img i s-au dat margini negative astfel incat padding-ul si marginile se vor extinde inafara granitelor, aliniandu-se mai frumos.

    9 of 20

    2/16/2013 9:45 AM

    E-learn.ro

    http://www.e-learn.ro/printare-tutorial/css/out-of-the-box/73/1/44.htm

    Deocamdata designul este plicticos. Impartirea grid-ului Daca sti sa imparti cum trebuie un grid, designul poate deveni foarte energetic. Pentru a imparti gridul corect trebuie sa ti cont de proportii. Am imparit coloanele si mutand obiectele putin inafara marginilor. Pentru acest exemplu putem folosi o imagine decalata si sa aplicam o margine in stanga continutului principal (pentru a obtine mai mult spatiu alb).

    10 of 20

    2/16/2013 9:45 AM

    E-learn.ro

    http://www.e-learn.ro/printare-tutorial/css/out-of-the-box/73/1/44.htm

    Rezultatul de mai sus este usor de obtinut folosind o margine negativa. #content-primary { float: right; margin: 12px 24px 60px 24px; width: 528px; } #content-primary img { float: left; margin: -6px 18px 0 -114px; padding: 3px; border: 3px solid #eee; background: #fff; } #content-secondary { float: right; margin: 30px 216px 60px 24px; width: 144px; font-size: 11px; color: #300; }

    Mai intai am aplicat cateva reguli de formatare care exista numai din ratiuni de estetica - poti decide sa sari peste acest pas. Am vrut ca liniile inferioare ale coloanelor sa se alinieze cum trebuie. Pentru a face asta am ajustat marginile de sus ale #content-primary si #content-secondary pana cand liniile de jos s-au aliniat asa cum am

    11 of 20

    2/16/2013 9:45 AM

    E-learn.ro

    http://www.e-learn.ro/printare-tutorial/css/out-of-the-box/73/1/44.htm

    intentionat. Apoi am setat marginea mai mare (de 60px) la baza celor doua coloane. Mai departe, am redus latimea #content-primary ca in imaginea cu wireframe. Acum putem da imaginii o margine negativa de 114px, ceea ce va permite imaginii sa se extinda pana la jumatatea marginii. Din moment ce am facut #content-primary mai mic, trebuie sa ii dam lui #content-secondary o margine de dreapta mai mare astfel incat sa stea in stanga. Am extins si granita h1 in margine pentru a crea un echilibru. h1 { margin-bottom: 11px; margin-left: -108px; padding: 15px 0 21px 108px; border-bottom: 1px solid #ccc; font: normal italic 1.5em/18px Georgia, serif; color: #633; }

    Padding-ul din stanga a fost setat sa egaleze marginea negativa, astfel incat textul sa ramana pe loc, dar marginea sa se extinda. O alta tehnica pe care o poti folosi pentru a scapa de infatisarea grosolana este de a aplica o imagine de fundal ornamentala care se poate extinde si ea in margini. Cream aceasta infatisare folosind cam aceeasi abordare ca mai sus: h2 { margin-left: -204px; padding: 10px 0 20px 204px; background: url(h2_ornament.gif) 3px 0 no-repeat; font-size: 1.25em; text-transform: uppercase; color: #999; }

    12 of 20

    2/16/2013 9:45 AM

    E-learn.ro

    http://www.e-learn.ro/printare-tutorial/css/out-of-the-box/73/1/44.htm

    Aplicarea elementelor abstracte Pentru layout-ul nostru #header si #footer sunt destul de simple asa ca vom adauga niste imagini de fundal de efect. Vom incepe cu sectiunea de jos a paginii (footer) .

    Iata CSS-ul: #footer { clear: right; height: 192px; background: #333 url(footer.gif) top no-repeat; font-size: 10px; line-height: 1em; text-shadow: 1px 1px 1px #333; color: #fff; }

    13 of 20

    2/16/2013 9:45 AM

    E-learn.ro

    http://www.e-learn.ro/printare-tutorial/css/out-of-the-box/73/1/44.htm

    Putem crea iluzia ca imaginea de jos se extinde inafara granitelor div-ului #page (div-ul care are atribuita clasa page) creand o imagine de fundal pentru sorpul paginii. Aceasta imagine va extinde zona, putand sa fie o imagine simpla repetata pe orizontala. body { background: #eee url(bg.gif) 0 100% repeat-x; font: 12px/18px "Lucida Grande", Verdana, sans-serif; text-align: center; color: #333; }

    Acum avem o zona inferioara care este mai placuta din punct de vedere vizual:

    Vom face acelasi lucru si la antet. Mai intai vom adauga o imagine de fundal care intrerupe aparenta de linie dreapta a layoutului.

    Aceasta imagine va fi pozitionata catre partea de jos a antetilui si vom folosi o culoare de fundal pentru a umple restul spatiului. #header { height: 192px; background: #966 url(header.gif) bottom no-repeat;

    14 of 20

    2/16/2013 9:45 AM

    E-learn.ro

    http://www.e-learn.ro/printare-tutorial/css/out-of-the-box/73/1/44.htm

    Formatarea pentru padding: #header p { float: left; padding: 60px 24px 24px 126px; font-size: 1.5em; line-height: 1em; color: #fff; }

    Putem folosi aceasta metoda de aplica o imagine de fundal suplimentara pentru a face antetul sa para ca se extinde inafara #page. Pentru a face asta cu usurinta putem incadra cu un div pagina si sa folosim optiunea cand aplicam imaginea de fundal (din moment ce body foloseste deja o imagine pentru #footer) Iata HTML-ul final: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Example Layout</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <paginatie_link type="text/css" rel="stylesheet" href="style.css"/> </head> <body> <div id="wrap"> <div id="page"> <div id="header"> <p>Header content</p> <ul> <li><a href="#">paginatie_link</a></li> <li><a href="#">paginatie_link</a></li> <li><a href="#">paginatie_link</a></li> </ul> </div> <div id="content-primary"> <h1>Welcome to my awesome website.</h1> <h2>Indeed, this is an awesome website.</h2> <p><strong>Primary content.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse pharetra, arcu in dapibus sagittis, felis leo rhoncus erat, non porttitor urna libero vitae nibh. Ut convallis eros sed magna.</p> <img src="photo.jpg" alt="" /> <p>Aenean enim purus, adipiscing a, vehicula ut, tempor vitae, justo. Nam laoreet mauris vitae elit. Vivamus eros quam, euismod bibendum, pellentesque ut, tristique ut, nisl. <a href="#">Vestibulum ante ipsum primis</a> in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse non metus. Nullam tempor dictum sapien. Duis enim. In ligula. Cras ut enim. Sed dapibus ante in eros. Nulla facilisi. In rhoncus eleifend nunc. Sed risus nulla, pretium in, porta eget, lacinia eu, nunc. In hac habitasse platea dictumst. Vestibulum feugiat lectus et justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed aliquet dolor nec ipsum.</p> <h2>Oooh, more copy&hellip;</h2> <p><a href="#">Ut erat nibh</a>, aliquet ut, congue at, tempus in, nunc. Ut aliquet leo et lectus volutpat molestie. Vivamus nunc. Nulla facilisi. Suspendisse dictum nunc tempus elit. Nullam urna quam, bibendum quis, tincidunt a, nonummy euismod, metus. Etiam

    15 of 20

    2/16/2013 9:45 AM

    E-learn.ro

    http://www.e-learn.ro/printare-tutorial/css/out-of-the-box/73/1/44.htm

    convallis, dui venenatis feugiat elementum, justo lacus lobortis libero, vel iaculis nibh lectus eu urna. Vivamus arcu. In facilisis quam et lacus. Suspendisse sit amet neque ac enim lobortis ullamcorper. Etiam faucibus sapien ut nunc. Nullam consectetuer vehicula arcu.</p> </div> <div id="content-secondary"> <h3>Important Information</h3> <p><strong>Secondary content.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse pharetra, arcu in dapibus sagittis, felis leo rhoncus erat, non porttitor urna libero vitae nibh. Ut convallis eros sed magna. Aenean enim purus, adipiscing a, vehicula ut, tempor vitae, justo. Nam laoreet mauris vitae elit. This is interesting information. Ut erat nibh, aliquet ut, congue at, tempus in, nunc. Ut aliquet leo et lectus volutpat molestie. Vivamus nunc. <a href="#">Read&nbsp;more&nbsp;&rarr;</a> </p> </div> <div id="footer"> <p>Photograph by <a href="http://jinabolton.com">Jina Bolton</a>.</p> </div> </div> </div> </body> </html>

    Apoi adaugam CSS-ul necesar: #wrap { background: url(wrap.gif) repeat-x; }

    Aici este CSS-ul final: * { margin: 0; padding: 0; } body { background: #eee url(bg.gif) 0 100% repeat-x; font: 12px/18px "Lucida Grande", Verdana, sans-serif; text-align: center; color: #333; } a:paginatie_link, a:visited { color: #633; } a:hover { color: #966; } h1 { margin-bottom: 11px; margin-left: -108px; padding: 15px 0 21px 108px; border-bottom: 1px solid #ccc; font: normal italic 1.5em/18px Georgia, serif; color: #633; } h2, h3{ font-weight: normal; font-size: 1em; line-height: 18px; } h2 { margin-left: -204px;

    16 of 20

    2/16/2013 9:45 AM

    E-learn.ro

    http://www.e-learn.ro/printare-tutorial/css/out-of-the-box/73/1/44.htm

    padding: 10px 0 20px 204px; background: url(h2_ornament.gif) 3px 0 no-repeat; font-size: 1.25em; text-transform: uppercase; color: #999; } h3 { padding-bottom: 6px; font-weight: bold; text-transform: uppercase; letter-spacing: -1px; color: #633; } #wrap { background: url(wrap.gif) repeat-x; } #page { margin: 0 auto; width: 960px; background: #fff url(page.gif) repeat-y; text-align: left; } #header { height: 192px; background: #966 url(header.gif) bottom no-repeat; } #header p { float: left; padding: 60px 24px 24px 126px; font-size: 1.5em; line-height: 1em; color: #fff; } #header ul { padding-top: 62px; padding-right: 12px; text-align: right; list-style: none; } #header li { display: inline; margin: 0 12px; } #header li a { font-size: 1.25em; line-height: 1em; text-decoration: none; color: #fff; } #header li a:hover { color: #300; } #content-primary { float: right; margin: 12px 24px 60px 24px; width: 528px; } #content-primary p { padding-bottom: 18px; } #content-primary img { float: left; margin: -6px 18px 0 -114px; padding: 3px; border: 3px solid #eee; background: #fff; }

    17 of 20

    2/16/2013 9:45 AM

    E-learn.ro

    http://www.e-learn.ro/printare-tutorial/css/out-of-the-box/73/1/44.htm

    #content-secondary { float: right; margin: 30px 216px 60px 24px; width: 144px; font-size: 11px; color: #300; } #content-secondary p { padding-bottom: 18px; } #footer { clear: right; height: 192px; background: #333 url(footer.gif) top no-repeat; font-size: 10px; line-height: 1em; text-shadow: 1px 1px 1px #333; color: #fff; } #footer a:paginatie_link, #footer a:visited { color: #c99; } #footer p { padding: 132px 24px 0 24px; } .clear { clear: both; }

    Iata rezultatul:

    18 of 20

    2/16/2013 9:45 AM

    E-learn.ro

    http://www.e-learn.ro/printare-tutorial/css/out-of-the-box/73/1/44.htm

    Taking it further Mult mai mult se poate face pentru a sparge tiparul plictisitor. Ce s-a discutat acum a fost o abordare de baza a notiunilor.

    19 of 20

    2/16/2013 9:45 AM

    E-learn.ro

    http://www.e-learn.ro/printare-tutorial/css/out-of-the-box/73/1/44.htm

    Copyright 2008-2010 E-LEARN.ro. Toate drepturile rezervate. Conceput si realizat de Neokinetics Software.

    20 of 20

    2/16/2013 9:45 AM

    Вам также может понравиться