Estil de la columna central

Per realitzar el disseny de la columna central és convenient que tingueu a mà el disseny que vàreu realitzar a la pràctica 5 del mòdul 3. Anem a pams.

Disseny de la columna central

La columna central té una amplada de 675px, és a dir:

#central {
	width: 675px;
} 

Un cop heu afegit aquesta línia al full d'estil, comprovareu que resta un espai (representat per un interrogant) a la dreta de la columna central per situar la columna lateral:

i que us portarà a la pregunta de com podeu traslladar el bloc que pertany a la columna lateral a l'espai adjacent de la columna central. Benvinguts a la propietat float.

La propietat float

La propietat float obliga a l'element a "flotar" sobre el flux normal de posicionament de la resta d'elements cap a una de les dues direccions possibles: esquerra (float: left) o dreta (float:right). Segons el W3C (ref.), els valors que pot prendre la propietat float són:

  • left: L'element flotant actua com a bloc i flota cap a l'esquerra. El contingut flueix per la dreta de la caixa flotant, començant per dalt.
  • right: Molt semblant al valor left, però flotant cap a la dreta. El contingut flueix per l'esquerra, començant per la part superior.
  • none: L'element no flota.

Referent a aquesta propietat es poden destacar alguns comportaments com els següents:

  • Quan un element flotant no es pot alinear horitzontalment amb un altre element flotant, s'ubicarà a sota d'aquest.
  • La posició d'un element flotant, la seva mida, marges, vores i padding, afecten a la posició dels altres elements flotants, com qualsevol altre contingut en línia adjacent.
  • Mai es pot predeterminar la ubicació precisa d'un element flotant.

Incorporeu la propietat-valor float: left; al selector #central

#central {
	width: 675px;
	float: left;
}

i actualitzeu la finestra del navegador:

En aquest moment, els blocs de la columna lateral i el peu de pàgina flotaran per l'espai dret de la columna central. Si és interessant que això sigui per al bloc lateral, no pas per al bloc peu, ja que ha de tornar al flux normal de disposició de les caixes.

La propietat clear anul·la l'efecte de la propietat float, retornant al flux normal del document. Pot prendre dos valors: left o right segons sigui el valor flotant de l'element precedent. Aquesta propietat la veureu en acció en la pràctica dedicada a la realització del full d'estil del peu de la pàgina.

Disseny del bloc article

El bloc article té una amplada 640px i un color de fons #fff:

.article {
	width: 640px;
	background-color: #fff;	
}

veieu el resultat al navegador:

El bloc de la data de publicació

Recordeu el disseny del bloc de la data de publicació? Aquesta es trobava adjacent al bloc article com ja vàreu realitzar en la realització del prototip visual.

La traducció visual a CSS d'aquest disseny passarà per emprar la propietat position: relative; per al bloc article i aplicar la propietat position: absolute; i un desplaçament a l'esquerra del .primer_bloc, que correspon a l'estructura de la data de publicació.

Aprofitareu també per afegir les característiques visuals del .primer_bloc:

  • Amplada: 50px
  • Alçada: 55px
  • Color: #00abef
.article {
	width: 640px;
	background-color: #fff;
	position: relative;
        margin-bottom: 25px;
}
 
.primer_bloc {
	position: absolute;
	top:25px;
	left: -50px;
	width: 50px;
	background-color: #00abef;
}

Refresqueu el navegador i visualitzeu els canvis:

Per finalitzar, creeu el selector del text de la data de publicació amb les següents propietats:

  • el text del dia ha de ser d'una mida de 34px.
  • el text del mes ha de ser d'una mida de 12px.
  • els dos són de color #ffffff
  • els dos han d'estar alineats amb l'eix vertical del rectangle blau.
.primer_bloc {
	position: absolute;
	top:25px;
	left: -50px;
	width: 50px;
	background-color: #00abef;
}
 
.primer_bloc p {
	font-family: Arial, sans-serif;
	font-size: 34px;
	text-align: center;
	color: #fff;
}
 
.mes {
	font-size: 12px;
}

Què signifca el selector .mes?

Per tal de diferenciar la mida de la font del dia i del mes, modifiqueu la línia del fitxer index.html

<p>28 de Juny</p>

per aquesta

<p>28 <span class="mes">de Juny</span></p>

Heu incorporat una etiqueta <span>. L'etiqueta <span> agrupa elements en línia com paraules o frases curtes. El seu propòsit és purament estructural però, a diferència de l'element div, només afecta a parts d'un element de bloc.

Si afegiu l'atribut class="mes", ja teniu un nou element el qual podeu identificar mitjançant un selector dins del full d'estil.

Comproveu el resultat refrescant la finestra del navegador.

Disseny del segon bloc

El segon bloc està format per la imatge, una capçalera de segon nivell i una sinopsi de l'article. Les característiques formals de cadascú d'aquests elements són:

  • La imatge es troba situada a 25px del marge superior i 25px del marge esquerra del bloc .article.
  • La capçalera del segon nivell està alineat amb el marge esquerra de la imatge i, per tant, es troba també situada a 25px del marge esquerra del bloc .article.
    • Mida: 34px
    • Tipus: Times New Roman
    • Estil: itàlica
    • Color #00abef
  • El text de la sinopsi està alineat amb el marge esquerra de la capçalera de segon nivell i, per tant, es troba també situada a 25px del marge esquerra del bloc .article.
    • Mida: 11px
    • Tipus: Arial
    • Color #333

Comenceu per la traducció al full d'estil de l'alineació dels tres elements:

.segon_bloc {
	padding-top: 25px;
	padding-left: 25px;
}

Els tres elements es troben dins del bloc .segon_bloc, per tant, si apliqueu un farciment en la part superior com en la part esquerra de la caixa de 25px obtindreu el resultat esperat. Veieu aquest esquema on la franja de color violeta correspon al farciment de 25px que heu assignat al bloc .segon_bloc:

Incorporeu finalment la resta de característiques visuals de la capçalera de segon nivell i del paràgraf que actua com a sinopsi de l'article.

.segon_bloc h2 {
	font-family: "Times New Roman", serif;
	font-size: 34px;
	font-style: italic;
	color: #00abef;
	margin-bottom: 10px;
	line-height:1.5;
	font-weight:normal;
}
 
.segon_bloc p {
	font-family: Arial, sans-serif;
	font-size: 11px;
	color: #3c3c3c;
	line-height:1.5;
}

Què significa la propietat line-height?

La propietat line-height defineix la distància vertical entre dos línies prenent coma a referent la part inferior de un tipus de caràcter no descendent, és a dir, es prendrà com a referència una o enlloc d'una q (recupereu la lectura sobre tipografia del mòdul 2). Les unitats de mesura que es poden utilitzar són idèntiques a les que determinen la mida de la font o, en el cas d'assignar un valor numèric, per exemple, 3, sense especificar la unitat de mesura, la distància entre línia serà la resultant de multiplicar el valor 3 pel valor de la mida de la font (font-size).

El resultat visual és el següent:

Disseny del tercer i últim bloc

El tercer bloc està format per una llista de descriptors i un enllaç. Recordeu abans les característiques generals del bloc:

  • Color de fons del bloc: #efefef
  • Línia de contorn del límit superior del bloc d'1px d'amplada i de color #dfdfdf.

Traduiu-les al llenguatge CSS:

.tercer_bloc {
	background-color: #efefef;
	border-top: 1px solid #dfdfdf;
} 

i verifiqueu els canvis:

Què significa la propietat border?

Les vores (border) treballen de manera idèntica a la propietat margin. Les característiques principals de la propietat border són:

  • El valor que indica el gruix de les vores no pot ser mai negatiu, ja que està limitat pels marges de la caixa.
  • Les vores que hi hagi entre dos blocs estàtics mai es coŀlapsen, com pot passar amb els marges.
  • Les vores esquerra i dreta d'un element en línia apareixen sempre al començament i al final d'aquest.
  • Les vores superior i inferior d'un element en línia poden solapar-se segons quin sigui el valor de la propietat line-height. Modificant aquest valor es pot corregir la superposició de les vores verticals.

Com les altres propietats del model de caixa, la propietat border es pot dividir en quatre propietats més, segons el costat seleccionat del model de caixa: border-top, border-right, border-bottom i border-left. A cada una d'elles, igual que a la propietat general border, s'han d'especificar els següents valors:

  • border: [amplada de la vora] [estil] [color]
  • border-right: [amplada de la vora] [estil] [color]
  • border-left: [amplada de la vora] [estil] [color]
  • border-top: [amplada de la vora] [estil] [color]
  • border-bottom: [amplada de la vora] [estil] [color]

L'estil de la vora es pot determinar per tres valors diferents: solid, sòlid; dotted, puntejat i dashed, discontinu.

Recuperem ara les característiques formals de la llista de descriptors i de l'enllaç:

  • Cada descriptor es troba a dins d'un rectangle de color #00abef amb un cert farciment respecte als límits del rectangle.
  • Cada descriptor té una mida de 12px i és de color #fff.
  • La disposició de la llista de descriptors és horitzontal, és a dir, idèntica en comportament a la del menú principal i secundari de la capçalera.

Una primera conversió del disseny al CSS seria la següent:

.tercer_bloc ul {
	margin-left: 25px;
 
}
 
.tercer_bloc ul li {
	display: inline;
	padding-right: 5px;
}
 
.tercer_bloc ul li a {
	background-color: #00abef;
	color: #fff;
	padding: 3px;
	font-family: Arial, sans-serif;
	font-size: 12px;
}

El resultat visual seria el següent:

Teniu els descriptors, però l'enllaç es troba encara sota els descriptors quan hauria d'alinear-se amb el marge dret del tercer bloc.

La millor estratègia per resoldre aquest problema es trencar el flux normal de disposició dels dos blocs (la llista de descriptors i l'enllaç). Com ja heu fet amb la columna central, aplicareu a la llista de descriptors la propietat-valor float:left;.

.tercer_bloc ul {
	float: left; 
	margin-left: 25px;
}

Aquesta propietat permetrà a l'enllaç ubicar-se al marge dret del límit de la llista dels descriptors:

Aprofiteu ara per assignar els valors estilístics de l'enllaç:

.tercer_bloc p {
	text-align: right;
	font-family: Arial, sans-serif;
	font-size: 12px;
	margin-right: 25px;
}  
 
.tercer_bloc p a {
	color: #3c3c3c;
} 

La propietat text-align determina l'alineació d'un bloc de text. Permet quatre valors diferents: left, text alineat a l'esquerra; center, text alineat al centre; right, text alineat a la dreta i, per últim, justify, que justifica el text pels dos costats, esquerre i dret. Per defecte, l'alineació és a l'esquerra.

Actualitzeu la vista del navegador:

Només us faltarà assignar un farciment vertical al tercer bloc perquè respiri la llista de descriptors i l'enllaç:

.tercer_bloc {
	background-color: #efefef;
	border-top: 1px solid #dfdfdf;
	padding-top: 15px;
	padding-bottom: 20px;
 
} 

i obtindreu, finalment, la realització del tercer bloc i, per extensió, la definició visual de l'article de la pàgina.

Fragment del codi CSS de la columna central

Finalment, què heu de veure al fitxer d227.css en acabar aquesta pràctica?

/*----- columna central ------*/
 
 
#central {
	width: 675px;
	float: left;
} 
 
.article {
	width: 640px;
	background-color: #fff;
	position: relative;
        margin-bottom: 25px;
}
 
.primer_bloc {
	position: absolute;
	top:25px;
	left: -50px;
	width: 50px;
	background-color: #00abef;
	color: #fff;
}
 
.primer_bloc p {
	font-family: Arial, sans-serif;
	font-size: 34px;
	text-align: center;
}
 
.mes {
	font-size: 12px;
}
 
 
.segon_bloc {
	padding-top: 25px;
	padding-left: 25px;
}
 
.segon_bloc h2 {
	font-family: "Times New Roman", serif;
	font-size: 34px;
	font-style: italic;
	color: #00abef;
	margin-bottom: 10px;
	line-height:1.5;
	font-weight:normal;
}
 
.segon_bloc p {
	font-family: Arial, sans-serif;
	font-size: 11px;
	color: #3c3c3c;
	line-height:1.5;
}
 
.tercer_bloc {
	background-color: #efefef;
	border-top: 1px solid #dfdfdf;
	padding-top: 15px;
	padding-bottom: 20px;
 
} 
 
.tercer_bloc ul {
	float: left; 
	margin-left: 25px;
}
 
.tercer_bloc ul li {
	display: inline;
	padding-right: 5px;
}
 
.tercer_bloc ul li a {
	background-color: #00abef;
	color: #fff;
	padding: 3px;
	font-family: Arial, sans-serif;
	font-size: 12px;
}
 
.tercer_bloc p {
	text-align: right;
	font-family: Arial, sans-serif;
	font-size: 12px;
	margin-right: 25px;
}  
 
.tercer_bloc p a {
	color: #3c3c3c;
}