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: 12875 12875 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:
« 1234 5 67 »
comenteaza printeaza


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) .

Out of the box - img8


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

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:

Out of the box - img9


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

Out of the box - img10


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

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