Crearea de la zero a unui layout CSS (II)


Materialul de mai jos NU este scris de mine ci doar tradus. În original a apărut pe Subcide.com, autorul, Steve Dennis, fiind atât de amabil încât să ne permită preluarea. Când mi-a dat acceptul mi-a spus că deja articolul lui a apărut şi în alte limbi. Iată-l şi în română. Eu am fost interesat de el şi m-am gândit să îl traduc pentru a îl face accesibil la cât mai mulţi. Mulţumim Steve! Prima parte a apărut aici.

A se respecta © Steve Dennis.

Mergem deci mai departe.

7. Structuri suplimentare

Acum că am pus div-urile de bază putem să adăugăm restul structurii care va da "osatura" sitului. Principalele lucruri de care avem nevoie sunt:

  • Legăturile pentru navigare
  • Titlurile (pentru sit şi pentru conţinut)
  • Conţinutul
  • Informaţiile la subsol (copyright, navigare alternativă)

Pentru a începe să implementăm acestea fără să rupem layout-ul paginii, vom crea o mică clasă numită "hidden" (ascuns). Adăugaţi următoarele lunii la începutul stylesheet-ului, după definiţia pentru tagul body:

.hidden {
	display: none;
}

De înseamnă? Putem să definim acum orice element ca fiind din clasa "hidden" iar el nu va fi afişat în pagină. Este foate util. Pentru moment atât. Să vorbim acum despre titluri. Titlurile într-un document HTML se definesc prin taguri de la <h1> la <h6> în ordinea importanţei în document. De exemplu <h1> pentru numele sitului, <h2> pentru principalele secţiuni ş.a.m.d. Vom adăuga un <h1> în div-ul header pentru numele companiei, Enlighten Design în acest caz.

<div id="header">
	<h1>Enlighten Designs</h1>
</div>

Dacă reîncărcaţi pagina veţi sesiza că Enlighten Designs este scris cu litere mari în antet, dar acum există şi mult spaţiu alb în jurul titlului. Aceasta datorită marginilor implicite ale tagului <h1>. Trebuie deci să "curăţim" marginile şi o vom face scriind următoarele în stylesheet:

h1 {
	margin: 0;
	padding: 0;
}

Acum vom adăuga navigarea. Despre funcţionarea acestei părţi ne vom ocupa în partea a 11-a. Navigarea va fi structurată ca o listă de definiţii (<dl>) cu câte un id individual relevant pentru fiecare element de navigare cu definiţia de termen (<dt>). Aceste definiţii de termen vor avea legături spre secţiunile majore ale sitului. Dacă nu sună clar, adăugaţi simplu următorul cod în div-ul main-nav:

<div id="main-nav">
	<dl>
		<dt id="about"><a href="#">About</a></dt>
		<dt id="services"><a href="#">Services</a></dt>
		<dt id="portfolio"><a href="#">Portfolio</a></dt>
		<dt id="contact"><a href="#">Contact Us</a></dt>
	</dl>
</div>

Notă: Majoritatea oamenilor preferă liste neordonate pentru navigare, dar pentru acest sistem de navigare pe un singur nivel eu folosesc liste de definiţii pentru că pot fi făcute mult mai uşor să meargă şi în IE. Există câteva bug-uri CSS enervante cu listele neordonate în IE. Cu mici modificări, o listă neordonată va merge la fel de bine.

Pentru a fi mai clar, <dl> acţionează ca un container, iar <dt>-urile sunt identificatori unici pentru fiecare element de navigare, iar legăturile sunt… legături. Vom folosi aceşti identificatori unici mai târziu, când vom face sistemul de navigare să arate aşa cum trebuie. Dar mai târziu. Acum, dacă reîncărcaţi pagina va arăta cam urât, aşa că pentru moment vom ascunde navigaţia adăugând clasa "hidden".

<div id="main-nav">
	<dl class="hidden">
		<dt id="about"><a href="#">About</a></dt>
		<dt id="services"><a href="#">Services</a></dt>
		<dt id="portfolio"><a href="#">Portfolio</a></dt>
		<dt id="contact"><a href="#">Contact Us</a></dt>
	</dl>
</div>

Şi s-a dus… Acum vom sări la subsol pentru că este relativ uşor. Există două părţi la footer: copyright şi nişte legături, apoi sistemul alternativ de navigare la dreapta. Dorim să facem ca navigarea alternativă să plutească la dreapta, aşa că facem ca la sidebar şi content, începând cu acest div. Teoretic nu ar trebui să conteze ordinea, dar datorită unor bug-uri din IE e mai bine să punem mai întâi elementele plutitoare. Introducem deci un div cu un id unic:

<div id="footer">
	<div id="altnav">
		<a href="#">About</a> - 
		<a href="#">Services</a> - 
		<a href="#">Portfolio</a> - 
		<a href="#">Contact Us</a> - 
		<a href="#">Terms of Trade</a>
	</div>
</div>

Apoi, după acest div, punem copyright-ul şi legăturile necesare.

<div id="footer">
	<div id="altnav">
		<a href="#">About</a> - 
		<a href="#">Services</a> - 
		<a href="#">Portfolio</a> - 
		<a href="#">Contact Us</a> - 
		<a href="#">Terms of Trade</a>
	</div>
	Copyright &copy; Enlighten Designs
Powered by <a href="http://www.enlightenhosting.com/">Enlighten Hosting</a> and <a href="http://www.vadmin.co.nz/">Vadmin 3.0 CMS</a>
</div>

Cam atât cu subsolul pentru moment. Pentru a fi sigur că faceţi bine ce faceţi, iată cum ar trebui să arate:

img118

Trecând la aria principală cu conţinut, să punem acolo ceva. Luăm conţinut direct din designul de la pasul 2. Folosim <h2> pentru titlurile "About" şi "Contact Us". Închidem textul între paragrafe cu <p></p> şi folosim <br /> pentru linii noi.

<div id="content">
<h2>About</h2>
<p><strong>Enlighten Designs</strong> is an Internet solutions provider that specialises in 
front and back end development. To view some of the web sites we have created view our portfolio.</p>
<p>We are currently undergoing a ’face lift’, so if you have any questions or would 
 like more information about the services we provide please feel free to contact us.</p>
	
<h2>Contact Us</h2>
<p>Phone:   (07) 853 6060<br />
Fax:     (07) 853 6060<br />
Email:   <a href="mailto:info@enlighten.co.nz">info@enlighten.co.nz</a><br />
P.O Box: 14159, Hamilton, New Zealand</p>
<p><a href="#">More contact information...</a></p>
</div>

Reîncărcaţi pagina şi veţi vedea că apare un spaţiu alb pe lângă div-ul content. Aceasta pentru că există margini implicite la tagurile <h2> şi <p>. Trebuie să le eliminăm, dar nu vrem pentru fiecare paragraf sau titlu secundar din sit, aşa că folosim selectorii CSS pentru "copii". Toate elementele în HTML au o relaţie "părinte-copil" între ele. Dacă un tag a este într-un tag b, atunci tagul b este părintele la tagul a. În codul de mai sus, tagul <h2> şi tagul <p> sunt ambele copii ai div-ului content. Dacă dorim să selectăm elementele copii ale unui părinte anume, separăm cu un spaţiu ca mai jos:

#content h2 {
	margin: 0;
	padding: 0;
}

#content p {
	margin: 0;
	padding: 0;
}

Astfel regulile de mai sus se vor aplica doar la tagurile <h2> şi <p> care sunt în div-ul content. Acum să facem textul să arate puţin mai bine.


Pagini: 1 2 3

Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (7 evaluări, media: 5,00 din 5)
Loading...Loading...

4 comentarii

  1. jürgen.toth spune:

    Foarte bun articolul. Insa am intampinat o problema. Dupa introducerea regulii CSS „body” – punctul 8 – nu a ramas doar navigarea rosie si restul alb, ci au ramas toate culorile. Textul in schimb a devenit, cum sa spun „reflectorizant”. Ce s-a intamplat? Am urmarit in detaliu pasii prezentati.

  2. radu.capan spune:

    Te rog sa imi trimiti un zip cu stadiul respectiv, in care apare problema si promit ca ma uit. Eu recunosc ca doar chestiunile cu floating le-am testat ca ma interesau mai urgent.

  3. tape spune:

    jürgen.toth –> trebuie sa stergi ce ai pus la inceput

    #sidebar-a{

    background:darkgreen; !asta stergi
    }

    si la content faci la fel. si la footer.
    mai lasi doar la cel rosu. main menu:)

  4. bogdan spune:

    Ar fi fost frumos si o arhiva cu fisierele html/css/imagini precum si un screenshot cu rezultatul final, dar oricum de apreciat efortul.


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *