E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale CSS

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DESIGN  /  CSS  /  Diverse (5)

Out of the box

22.04.2008
Out of the box

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.

Total vizualizari: 11972 11972 afisari   |   Comentarii  0   |   Rating   |   (8 voturi)   |   Timp necesar: 30 min 30 min   |   Nivel de cunostiinte necesar: Incepator  Incepator

Sursa:  Sitepoint.com  
Autor:  E-learn.ro
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
« 1 2 34567 »
comenteaza printeaza


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 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 content-secondary) se muta la dreapta. content-primary apare primul in structura, si deci asta este directia in care se vor alinia coloanele una langa cealalta.

Out of the box - img2


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)

Out of the box - img3


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:

* {
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;
}


Out of the box - img4


Dupa cum vezi trebuie sa avem wireframe-ul la locul lui - cu culorile si continutul adaugate.

Pagina:
« 1 2 34567 »
comenteaza printeaza
Alte tutoriale CSS:
Noteaza acest tutorial
Rating tutorial
 
(8 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
4175
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4085
Tutoriale scrise de kheops
kheops Rang utilizator kheops - Mediu
4084
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4055
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
3875
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
SWF Verilog Fireworks Word Swift 3D Python PSD Dreamweaver Ruby on Rails Action Script Powerpoint Illustrator Flash AJAX Javascript Outlook SEO Sony Vegas COREL DRAW Photoshop Java Lightroom Excel HTML PHP MySQL Bridge RoR CSS Vista Fotografie JSON Gimp XHTML StyleSheet XML
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software