Estil de la columna lateral

Per realitzar el disseny de la columna lateral és convenient que tingueu a mà el disseny que vàreu realitzar a la pràctica 6 del mòdul 3. En termes generals, la columna general té una amplada de 276px i consta de dos blocs:

  • Bloc anomenat Latest tweets
  • Bloc anomenat Tags

El bloc Latets tweets té les següents característiques:

  • Color de fons: #fff
  • Capçalera del bloc:
    • Mida: 23px
    • Tipus: Times New Roman
    • Color: #00ABEF
    • Estil: itàlica
  • text de la llista dels tweets:
    • Mida: 12px
    • Tipus: Arial
    • Color: #333
    • Estil: normal

Realitzeu a continuació la traducció a CSS del disseny original:

#lateral {
	float: right;
	width: 276px;
} 

La propietat float: right; obligarà a la columna lateral a ubicar-se a l'extrem dret del límit de la caixa general (container). És important que defineu també la mida d'amplada (width: 276px).

Modifiqueu el valor de la propietat clear del ID a both. És a dir, enlloc de:

#peu {
	clear: left;
} 

ha de ser:

#peu {
	clear: both;
} 

D'aquesta manera no només anuŀleu l'efecte de la propietat float de la columna central (float:left;), sino també la de la columna lateral ((float:left;).

Incorporeu el següent parell de selectors:

#latest_tweets, #tags  {
	background-color: #fff;
	padding-top: 15px;
	padding-left: 25px;
	padding-bottom: 15px;
	padding-right: 10px;
	margin-bottom: 20px;
}

Recordeu que diferents selectors poden compartir una mateixa regla (els selectors han d'anar separats per comes).

i comproveu el resultat al navegador:

Per acabar, afegiu els selectors que afecten la representació del continguts dels dos blocs.

#latest_tweets h3 , #tags h3  {
	font-family: "Times New Roman", sans-serif;
	font-size: 23px;
	font-style: italic;
	color: #00abef;
	line-height:1.5;
	font-weight:normal;
}
 
#latest_tweets ul li {
   	list-style-type: none;
	margin-bottom: 10px;
	font-family: Arial, sans-serif;
	font-size: 12px;
	color: #333;
}
 
#latest_tweets ul li a {
	color: #333;
}

Refresqueu el navegador i visualitzeu els canvis:

L'estil visual dels descriptors

A la pràctica anterior vàreu treballar l'estil dels descriptors que acompanyen a un article. Recupereu aquest estil i afegiu-lo al bloc Tags:

/*-- tags --*/
 
#tags ul li {
	display: inline;
	list-style-type: none;
	padding-right: 10px;
 
}
 
#tags ul li a {
	font-family: Arial, sans-serif;
  	background-color: #00abef;
  	color: #fff;
  	padding: 3px;
  	line-height: 36px;
}

i obtindreu un resultat visualment idèntic als descriptors de l'article.

El problema ve quan necessitem que les mides d'aquests descriptors variïn en funció del número d'articles que s'han registrat sota una determinada etiqueta. A més número d'articles associats a un descriptor, més gran serà la mida d'aquest. Per aconseguir aquest efecte, heu de modificar una part de l'estructura. Obriu l'arxiu index.html i incorporeu a cada descriptor una class amb un valor (petit, mitjà, gran i sgran).

	<div id="tags">
  	 <h3>Tags</h3>
  	 <ul>
 	  <li><a class="petit" href="descriptors.html?q=lorem">Lorem</a></li>
 	  <li><a class="mitja" href="descriptors.html?q=ipsum">Ipsum</a></li>
 	  <li><a class="sgran" href="descriptors.html?q=dolor">Dolor</a></li>
          <li><a class="mitja" href="descriptors.html?q=amet">Amet</a></li>
  	  <li><a class="petit" href="descriptors.html?q=mauris">Mauris</a></li>
  	  <li><a class="gran" href="descriptors.html?q=morbi">Morbi</a></li>
 	 </ul>
	</div>

Aquests valors de l'atribut class estaran associats a un estil definit a l'arxiu CSS, és a dir, un estil que només modifica la mida de la font del descriptor.

.petit {
	font-size: 8px;
}
 
.mitja {
	font-size: 12px;
}
 
.gran {
	font-size: 24px;
}
 
.sgran {
	font-size: 36px;
}

Deseu els canvis i actualitzeu la finestra del navegador:

Fragment del codi CSS de la columna lateral

/*------ columna lateral ---------*/
 
 
#lateral {
	float: right;
	width: 276px;
} 
 
#latest_tweets, #tags  {
	background-color: #fff;
	padding-top: 15px;
	padding-left: 25px;
	padding-bottom: 15px;
	padding-right: 10px;
	margin-bottom: 20px;
}
 
#latest_tweets h3 , #tags h3  {
	font-family: "Times New Roman", sans-serif;
	font-size: 23px;
	font-style: italic;
	color: #00abef;
	line-height:1.5;
	font-weight:normal;
}
 
#latest_tweets ul li {
   	list-style-type: none;
	margin-bottom: 10px;
	font-family: Arial, sans-serif;
	font-size: 12px;
	color: #3c3c3c;
}
 
#latest_tweets ul li a {
	color: #333;
} 
 
/*-- tags --*/
 
 
#tags ul li {
	display: inline;
	list-style-type: none;
	padding-right: 10px;
 
}
 
#tags ul li a {
	font-family: Arial, sans-serif;
  	background-color: #00abef;
  	color: #fff;
  	padding: 3px;
  	line-height: 36px;
}
 
.petit {
	font-size: 8px;
}
 
.mitja {
	font-size: 12px;
}
 
.gran {
	font-size: 24px;
}
 
.sgran {
	font-size: 36px;
}