Iniţiere în coding #4 – Aranjarea în pagină şi footer-ul

Începutul tutorialului îl găsiţi la #1, #2 şi #3.

Dacă totul a ieşit până acum aşa cum trebuia, înseamnă că prindeţi repede, lucru care mă bucură.

Astăzi vă voi arăta cum să aşezaţi textul în pagină (pentru că, momentan, arată aiurea de tot lipit de marginea aia) şi cum să faceţi footer-ul să arate ca în formatul Photoshop al template-ului.

Începem prin a modifica style.css. De atât avem nevoie pentru ca textul să fie frumos aşezat în pagină. Modificările le va suporta atât div-ul #container cât şi cel de .post şi .entry. Ele se ocupă în mod special de text. Acum, în style.css, secţiunea unde div-ul container este declarat, avem aşa:

#container{
	float: left;
	width: 600px;	
	background: #EAE8C6;
	text-align: justify;
}

Dacă vă amintiţi de la orele de informatică, profesoara vă spunea mereu că textele lungi trebuie aranjate cu justify în Microsoft Word, pentru a arăta mai bine în pagină. Exact acelaşi lucru l-am făcut şi noi cu textul nostru. Trecem la .post şi .entry, unde avem:

.post{
	padding: 10px 0 10px 0;
	color: #5d5b35; 
	clear: both;
}

.post h2{
	font-family: Georgia, Sans-serif;
	font-size: 18px;
	padding: 5px 0 0 20px;
	color: #5d5b35;
}

.post h2 a:link{ 
text-decoration: none;
color: #5d5b35;	
}

.post h2 a:visited{ 
text-decoration: none;
color: #5d5b35;	
}

.post h2 a:hover{
text-decoration: underline;
color:#5d5b35;
}

.entry{
	line-height: 18px;
	padding: 5px 0 30px 15px;
}

Am adăugat un padding atât la titlu cât şi la textul în sine şi am modificat culoarea link-ului din titlu, ca să arate ca în template-ul din Photoshop. Am adăugat un efect care subliniază titlul atunci când cursorul mouse-ului trece peste el.

Parcă acum arată mai mult a blog, nu? Să trecem la footer!

Vă mai amintiţi cum am obţinut fundalul header-ului în partea a doua a tutorialului? Dacă nu, aruncaţi un ochi acolo şi reveniţi.

Vom tăia o bucăţică din footer, astfel încât s-o putem folosi ca background. O salvăm cu numele footerbg.gif şi o salvăm în folderul „img” al themei. Apoi, o declarăm în style.css. Aşa:

#footer{
	clear: both;
	float: left;
	width: 940px;
	padding: 10px;
	background: #7d9c1f url('img/footerbg.gif') repeat-x;
	}

#footer p{
	line-height: 18px;
	color: #FFFFFF;
}

#footer a {
color: #FFFFFF;
text-decoration: underline;
}

Observaţi că am dat şi culoare textului, apoi am făcut şi link-urile albe şi le-am subliniat.

Acum, zic eu, arată ca versiunea din Photoshop.

Încheiem aici. A fost scurt tutorialul de astăzi dar, zic eu, util. Sper că vă descurcaţi!

Lasă un comentariu

2 comentarii

  • A.Dragos 11 Ian 2010, ora 10:06

    Multumim si pentru partea asta, foarte bine scris ! :)

    • Grim_Cris 11 Ian 2010, ora 15:42

      @A.Dragos, sper sa foloseasca cuiva, candva