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: 12418 12418 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:
« 12345 6 7 »
comenteaza printeaza

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;
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;
}
#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:

Out of the box - img11


Pagina:
« 12345 6 7 »
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
4690
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4610
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4510
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4425
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4305
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
AJAX Lightroom Ruby on Rails CSS Sony Vegas Illustrator Verilog Powerpoint SEO JSON XHTML Fotografie PHP Outlook MySQL COREL DRAW RoR StyleSheet Java PSD Vista Flash Fireworks Word XML Swift 3D Excel Photoshop Python Gimp Dreamweaver Action Script Javascript HTML Bridge SWF
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