Estil de la capçalera

Per realitzar el disseny de la capçalera és convenient que tingueu a mà el disseny que vàreu realitzar a la pràctica 4 del mòdul 3.

Aquí teniu un resum de les característiques del disseny i estructura de la capçalera:

  • Les mides que corresponen a la capçalera són:
    • Amplada: 960px (total d'amplada de la pàgina)
    • Alçada: 132px
  • Les mides de la caixa logotip són:
    • Amplada: 261px (equival a l'amplada del logotip).
    • Alçada: 132px (equival a l'alçada de la capçalera).
  • La imatge de logotip està alineada en relació a l'eix horitzontal de la caixa logotip.
  • La caixa del menú principal està alineada en relació a l'eix horitzontal de la caixa logotip i té un desplaçament de 326px (261px + 65px) des del lateral esquerra de la caixa capçalera.
  • El text del menú principal contempla les característiques següents:
    • color de la font: #6f6c61
    • mida de la font: 22px
    • tipus de font: Arial
  • La caixa del menú secundari està ubicada a la cantonada superior-dreta de la caixa capçalera i té les següents dimensions:
    • Amplada: 105px
    • Alçada: 21px
  • La caixa del menú secundari té un color de fons #8f8d86.
  • El text del menú secundari contempla les característiques següents:
    • color de la font: #fff
    • mida de la font: 12px
    • tipus de font: Arial

Veieu seguidament un esquema visual que relaciona les diferents caixes del disseny amb l'estructura de la pàgina:

<div id="capcalera"> <!-- inici de capçalera -->
    <img src="imatges/logotip.png" alt="Logotip de la pàgina"/>
    <ul id="menu_principal">
  	<li><a href="design.html">Design</a></li>
 	<li><a href="inspiration.html">Inspiration</a></li>
 	<li><a href="personal.html">Personal</a></li>
	<li><a href="tutorials.html">Tutorials</a></li>
    </ul>
    <ul id="menu_secundari">
  	<li><a href="about.html">About</a></li>
 	<li><a href="login.html">Login</a></li>
    </ul>
  </div> <!-- final de capçalera -->

Propietats visuals de la caixa capçalera

Obriu l'arxiu d227.css i afegiu les següents línies:

/*---- capçalera ----- */
 
#capcalera {
	position: relative;
        height: 132px;
 
} 

Aquest selector fa referència al ID de valor capcalera, és a dir, les propietats-valors que declareu que es trobin en aquest selector afectaran a la regió o divisió

<div id="capcalera">

Per què no heu declarat la propietat-valor width:960px?

Recordeu que la divisió ID capcalera es troba a un àmbit inferior de la divisió container, on vàreu especificar aquesta amplada. Per tant, la divisió capcalera té aquest valor com l'amplada màxima de la seva caixa.

Aquest selector conté dos propietas noves. Veieu què signifiquen:

height: 132px;

Amb la propietat height indiqueu l'alçada en termes absoluts (132px) de la caixa capcalera.

position: relative;

El llenguatge CSS disposa de cinc models de posicionament per a ubicar un element a la finestra del navegador: estàtic, absolut, fix, relatiu i flotant. Els quatre primers formen part de la propietat position, el cinquè, el model de posicionament flotant, pertany a la propietat float -que veureu més endavant.

El valor relatiu (relative) de la propietat position indica un desplaçament de l'element en relació a la seva ubicació original. Un element al que se li assigna el valor de posició relatiu és un element ubicat en el flux normal de posicionament dels elements del document.

Com es tradueix aquest desplaçament? Mitjançant les següents propietats:

  • top
  • right
  • left
  • bottom

Els valors d'aquestes propietats poden ser positius o negatius. Comproveu el següent exemple:

#capcalera {
	position: relative;
	height: 132px;
	left: 500px;
	top: -20px
}

i vegeu el resultat refrescant l'arxiu index.html al navegador.

A través de les propietats-valors left i top heu desplaçat la caixa capcalera 500px cap a l'esquerra (a partir del límit esquerra de la caixa container) i un desplaçament vertical negatiu, ja que heu restat 20px a través de la propietat top.

Per què heu afegit la propietat position sino cal cap desplaçament de la caixa capcalera?

És ben senzill: les coordenades d'un element en posició absoluta sempre es mesuren en relació a les coordenades de la pàgina -l'origen 0,0 es troba a la cantonada superior-esquerra-. Només es mesura en relació a la caixa que la conté quan aquesta està definida per una posició relativa o absoluta. Recordeu aquesta norma quan apliqueu el selector de la caixes del menú principal i secundari.

Propietats visuals del logotip

El logotip és una imatge de mides 261px d'amplada i 59px d'alçada. Si feu un simple càlcul ( alçada de la caixa - alçada de la imatge / 2 ) obtindreu la distància o marge que separa el límit superior de la imatge amb el límit superior de la caixa capcalera perquè la imatge estigui alineada horitzontalment.

#capcalera img {
	margin-top: 36.5px;
}

Refresqueu el navegador i observeu el desplaçament de la imatge:

Per què dos selectors enlloc de només un?

És possible anidar diferents selectors amb el propòsit d'associar una regla CSS a un element específic del document HTML. Cada selector està separat per un espai. En el exemple de la imatge del logotip heu declarat

#capcalera img {

enlloc de

img {

perquè aquesta propietat visual només afecti a totes les imatges (img) contingudes dins d'un element ID anomenat capcalera.

Propietats visuals del menú principal

Recupereu la informació de la caixa menu_principal: està alineada en relació a l'eix horitzontal de la caixa logotip i té un desplaçament de 326px (261px + 65px) des del lateral esquerra de la caixa capçalera.

En primer lloc desplaçareu la caixa 326px a la dreta:

#menu_principal {
	position: absolute;
	left: 326px;
}

El següent pas és modificar la condició d'element de bloc de cada ítem de la llista i fer que actuï com a un element en línia. Aquest canvi provocarà que tots els elements de la llista quedin disposats sobre una línia horitzontal imaginària.

Recordeu que els elements li són elements de bloc i, per tant, impliquen un salt de línia. En canvi, els elements en línia són elements que no interfereixen en el flux normal del text, és a dir, no provoquen un salt de línia.

Veieu com realitzar aquest canvi de comportament. Afegiu les següents línies al full d'estil:

#menu_principal li {
	display: inline;
}

Visualment, s'obté el següent resultat:

Aplicareu, a continuació, l'estil del text en relació a les característiques del disseny:

  • color de la font: #6f6c61
  • mida de la font: 22px
  • tipus de font: Arial
#menu_principal li a {
	font-family: Arial, sans-serif;
	color: #6f6c61;
	font-size: 22px;
	text-decoration: none;
	padding-right: 10px;
} 

El valor de la propietat font-family pot incloure un únic tipus o família de font, o bé més d'una diferents, sempre separades entre elles per una coma. El fet de definir més d'una font o família de fonts per la propietat font-family, planteja al navegador una jerarquia de valors, per la que prendrà el primer valor com a font a utilitzar en la visualització del document, però tindrà una o vàries alternatives en el cas de no trobar la font assignada com a principal. Tradicionalment, s'utilitzen els primers valors per a fonts específiques i, la resta, per a fonts genèriques que s'aproximin visualment a la primera.

La mida de la font ve regulada per la propietat font-size. D'altra banda, per defecte, els navegadors representen els enllaços subratllats i de color blau. Un cop activats, canvien a color lila, i finalment, mentre estan en actiu són de color vermell. En aquest cas s'ha eliminat el subratllat (text-decoration: none) i el color blau (color: #6f6c61;)

Quants estats diferents té un enllaç?

  • Passiu (link): quan l'enllaç encara no ha estat visitat per l'usuari.
  • Visitat (hover): quan l'enllaç ha estat visitat per l'usuari.
  • Flotant (hover): quan el cursor passa per sobre de l'enllaç.
  • Focalitzat (focus): quan l'enllaç es seleccionat per mitjà, per exemple, de la tabulació.
  • Actiu (active): quan l'enllaç està sent activat (proveu de mantenir premut el botó esquerre del ratolí sobre l'enllaç per comprovar-ne l'estat).

Finalment s'ha afegit un valor al farciment dret (padding-right) perquè hi hagi una separació entre els diferents ítems de la llista.

Veieu el resultat:

Ara que ja teniu definida l'alçada de la caixa del menú principal (22px), cal que la desplaceu fins a alinear-la amb l'eix horitzontal de la imatge. Heu de calcular el desplaçament vertical des del límit superior de la caixa capcalera fins a l'eix horitzontal de la imatge:

  • 36.5px de marge entre el límit superior de la capcalera i el límit superior de la imatge.
  • La imatge té una alçada de 59px, per tant, el seu eix horitzontal es troba a 29.5px.
  • Feu la suma (36.5 + 29.5) i resteu els 11px de l'alçada vertical que va del límit superior de la caixa del menú de navegació principal fins al seu eix horitzontal. obtindreu un desplaçament vertical de 55px.
#menu_principal {
	position: absolute;
	left: 326px;
	top: 55px; 
}

Comproveu el resultat:

Aquí teniu el full d'estil complert del menú de navegació principal:

/*---- capçalera ----- */
 
#capcalera {
	position: relative;
	height: 132px;
}
 
#capcalera img {
	margin-top: 36.5px;
}
 
#menu_principal {
	position: absolute;
	left: 326px;
	top: 55px; 
}
 
#menu_principal li {
	display: inline;
}
 
#menu_principal li a {
	font-family: Arial, sans-serif;
	color: #6f6c61;
	font-size: 22px;
	text-decoration: none;
	padding-right: 10px;
}

Propietats visuals del menú secundari

Recordeu les propietats visuals del menú secundari:

  • La posició de la caixa del menú secundari es troba a la cantonada superior-dreta de la caixa capcalera.
  • La caixa del menú secundari té un color de fons #8f8d86.
  • El text del menú secundari contempla les característiques següents:
    • color de la font: #fff
    • mida de la font: 12px
    • tipus de font: Arial

El procediment de realització és gairebé semblant al que heu realitzat amb el menú principal.

En primer lloc, desplaceu la caixa menu_secundari al límit superior-dreta de la caixa capcalera i transformeu la disposició vertical a horitzontal dels elements de la llista (elements de bloc a elements en línia):

#menu_secundari {
	position: absolute;
	right: 0px;
	top: 0px;
} 
 
#menu_secundari  li {
	display: inline;
}

Veieu la nova representació del menú secundari:


Afegiu les propietats del text i el color de fons de la caixa:

#menu_secundari {
	position: absolute;
	right: 0px;
	top: 0px;
	background-color: #8f8d86;
} 
 
#menu_secundari  li {
	display: inline;
}
 
#menu_secundari  li a {
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 12px;	
}

Si refresqueu la finestra del navegador comprovareu que el text no respira a dins de la caixa gris. Heu de proporcionar un cert farciment:

#menu_secundari {
	position: absolute;
	right: 0px;
	top: 0px;
	background-color: #8f8d86;
	padding-left: 10px; 
	padding-right: 10px;
	padding-bottom: 5px;
} 

El resultat visual seria el següent:

Recordeu que la traducció visual al llenguatge CSS és el més aproximat al disseny que vàreu realitzat al llarg del mòdul 3. En tot cas, no dubteu en provar altres mides per obtenir un producte el més semblant possible a l'original.

Fragment del codi CSS de la capçalera

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

/*---- capçalera ----- */
 
#capcalera {
	position: relative;
	height: 132px;
}
 
#capcalera img {
	margin-top: 36.5px;
}
 
#menu_principal {
	position: absolute;
	left: 326px;
	top: 55px; 
}
 
#menu_principal li {
	display: inline;
}
 
#menu_principal li a {
	font-family: Arial, sans-serif;
	color: #6f6c61;
	font-size: 22px;
	text-decoration: none;
	padding-right: 10px;
}
 
#menu_secundari {
	position: absolute;
	right: 0px;
	top: 0px;
	background-color: #8f8d86;
	padding-left: 10px; 
	padding-right: 10px;
	padding-bottom: 5px;
} 
 
#menu_secundari  li {
	display: inline;
}
 
 
#menu_secundari  li a {
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 12px;	
}