El redisseny que he aplicat manté la mateixa estructura, si es volgués mantenir l'estètica antiga només s'haurien de substituir les imatges i ajustar alguns paràmetres del CSS sense haver de tocar per res l'XHTML.

L'únic que no permet mantenir la estructura original és la secció del Rebost, ja que he preferit millorar la estructura utilitzant un element dl. Si és volgués fer exacte, afegint un identificador a cada dt n'hi hauria prou.

El body i el div contenidor

Les sentències resaltades són hacks per l'internet explorer.

body {
   font-family : Verdana, Arial, Helvetica, sans-serif;
   background-color: #cec5b2;
   font-size : 10px;
   color: #555;
   padding: 0;
   margin: 20px 0;
   _text-align:center;
}
div#contenidor {
   margin: auto;
   width: 697px;
   _text-align: left;
}	

Al body queda definit el tipus de lletra per tota la pàgina ja que la propietat font-family és hereditaria (exeptuant les taules per IE/Win.).

El declarar el tamany de lletra base en pixels pot donar algun problema d'accessibilitat a persones amb visió reduida però fer-ho amb unitats relatives dóna més problemes que alegries (properament ho explicaré en detall).

El més rellevant és la sentència text-align: center; que únicament serveix perquè IE/Win. ,en compatibilitat inversa amb els estàndards, centri el contingut.

A la regla següent s'aplica un text-align: left; com a correcció d'aquest hack i un margin: auto per fer el centrat correctament.

Per últim remarcar que l'amplada total del layout serà de 697px.

La capçalera

div#cap {
   background-image: url(../images/cap.png);
   background-repeat: no-repeat;
   background-color: #fff;
   height: 137px;
   position: relative;
   margin-bottom: 0;
}
div#cap h1 {
   background-image: url(../images/logotip.png);
   background-repeat: no-repeat;
   height: 0 !important;
   width: 104px;
   position: absolute;
   top: 51px;
   left: 300px;
   overflow: hidden;
   padding: 97px 0 0 0;
   margin: 0;
   height /**/: 97px;
}
div#cap p {
   color: #fff;
   width: 220px;
   margin: 20px 20px 0 0;
   float: right;
   text-align: justify;
}

La capçalera consta de tres elements, la caixa que engloba, el títol i un paràgraf.

La caixa id="cap" té una imatge de fons que dóna l'estètica de cantonades arrodonides. L'alçada fixe és únicament perquè es vegi la imatge de fons i un espai blanc extra ja que el contingut de la caixa té una alçada menor.

S'utilitza la tècnica RIR per ocultar el text i mostrar el logotip. Per colocar-lo al centre té una position: absolute amb les coordenades top,left i, perquè aquestes coordenades siguin respecte la caixa id="cap" aquesta té la propietat position: relative

El paràgraf explicatiu ha quedat reubicat a la dreta amb un float:right.

El menú

div#menuprincipal ul {
   list-style: none;
   margin: 25px 0 -39px 0;
   padding: 0;
   float: left;
   background-color: #fff;
   border: 8px solid #fff;
   border-bottom: 0;
}
html > body div#menuprincipal ul/**/ {
   margin: 25px 0 0 0;
}
div#menuprincipal ul li {
   margin: 0;
   padding: 0;
   float: left;
}	

Per donar estil al llistat del menú només amb la propietat float:left de la última regla i el list-style: none n'hi hauria prou però per posicionar-lo exactament al lloc on és s'ha de jugar amb els marges independentment per IE/Win. que per la resta.

El float:left declarat a l'ul és només perquè la caixa englobi el contingut (en Internet Explorer no caldria).

Per fer el contorn blanc es podria utilitzar indistintament un border o un margin. Com que els margin són delicats perquè poden col·lapsar he optat pel border.

div#menuprincipal ul li a:link,
div#menuprincipal ul li a:visited {
   margin: 0;
   padding: 5px 10px 2px 3px;
   display: block;
   background-color: #a09d4d;
   color: #fff;
   border-bottom: 5px solid #a09d4d;
   text-decoration: none;
   font-weight: bold;
}	
div#menuprincipal ul li a#ultim {
   padding-right: 16px;
}	
div#menuprincipal ul li a:hover,
div#menuprincipal ul li a.actiu {
   border-bottom: 5px solid #ffffcb;
}

Per fer que tota la zona de l'ítem sigui clicable cal donar un display:block als enllaços.

El border-bottom està declarat a tots els estats de l'enllaç per conseguir de manera fàcil l'efecte desitjat.

Identificar l'últim ítem del menú permet tractar els seus marges apart cosa que facilita quadrar el menú.

El cos

div#cos {
   background-color: #ffffcb;	
   border: 8px solid #fff;
   border-bottom: 0;
   margin: 30px 0 0 0;
   padding-bottom: 20px;
}
div#esquerra {
   float: left;
   width: 145px;
   padding: 20px 5px 5px 5px;
}
div#dreta {
   float: right;
   width: 145px;
   padding: 5px;
}
div#contingut {
   margin: 0 160px 0 160px;
   padding-top: 20px;
}
html > body div#contingut/**/ {
   padding-top: 48px;
}

La propietat del div id="cos" border segueix la mateixa idea que al menú, fer el marge blanc. Com que el menú i el cos queden solapats el border superior del cos no es veurà. El border-bottom queda definit a 0 perquè el marc blanc quedarà tancat amb el div id="peu"

El margin superior de 30px és l'espai que queda entre la capçalera i el menú + cos. S'ha d'especificar aquí ja que el menú és un objecte flotant i no repercuteix en la posició del cos.

Per fer les tres columnes hi ha tres propietats. El float:left del div id="esquerra", el float:right del div id="dreta" i el margin del div id="contingut"

La lògica és fàcil, un div es fa flotar a l'esquerra, un altre a la dreta i el que queda al mig se li dona un marge esquerra i un marge dret igual a l'amplada dels dos primers div. En aquest cas el marge és major perquè les columnes no quedin massa juntes.

Els padding ajuden a crear el marge necessari perquè no quedi tot massa junt. Només remarcar que El marge superior del div id="contingut" cal especificar-lo separat per IE/Win que per la resta per diferències de comportament amb els float que l'envolten.

El contingut

Per tractar els títols de les seccions he aplicat el mètode RIR altre vegada.

h2 {
   height: 0 !important;
   background-repeat: no-repeat;
   background-position: 0 0;
   padding: 26px 0 0 0;
   overflow: hidden;
   height/**/: 26px;
}
div#articles h2 {
   background-image: url(../images/titol_articles.png);
   margin-top: 10px;
}
div#forum h2 {
   background-image: url(../images/titol_forum.png);
   margin-top: 10px;
}

Com que a tots els h2 se'ls hi ha d'aplicar el mètode RIR és declarar les propietats comuns en una regla genèrica.

El peu

div#peu {
   clear: both;
   border: 8px solid #fff;
   border-top: 0;
   margin: 0;
}
div#peu address {
   padding: 5px 20px 5px 5px;
   background-color: #a09d4d;
   color: #fff;
   text-align: right;
}
html > body div#peu address/**/ {
   padding: 5px;
}

Amb el peu queda tancat el contorn blanc de 8 pixels. Les propietats d'aquesta part no tenen cap misteri, marges i aliniació de text.

La resta de regles del CSS no les he inclós perquè no m'han semblat rellevants pel taller. Per qualsevol dubte o divergència els comentaris seran benvinguts.

L'exemple el podeu veure directament o descarregar-lo.