« Etape 4 : Apport de styles par CSS aux balises de structure

Etape 5 : Apport des styles aux balises hors structure

Le 3 septembre 2005 par tanguy.romey

Tailles de polices, graisse, couleur, etc :

  • body
  • h1 à h6
  • ul, li,
  • a,
  • p

Sur les blocs :

  • Images de fond,
  • Couleur de fond,
  • Etc.

Nota : zone « primaryNavigation »

Des identifiants doivent être ajoutés sur chacune des balises de la liste afin d’apporter des styles différents quant aux images de fond.
La charte graphique prévoit une couleur spécifique par onglet, et une couleur spécifique pour l’onglet sélectionné.

      <div id="primaryNavigation">
          <ul id="accueilMenu">
            <li id="accueilLink">Accueil</li>
            <li id="recettesLink">Recettes</li>
            <li id="menusLink">Menus</li>*
            <li id="decouvrirLink">D&eacute;couvrir</li>
            <li id="marcheLink">March&eacute;</li>
         </ul>
      </div>

Nota : « hack » de la hauteur minimale de la zone « content »

La propriété « float » a pour effet d’empêcher le calcul de la hauteur de la zone « content » et, par héritage, de la zone « main ». Il faut donc forcer ce calcul en affectant une hauteur minimale à la zone content.

Internet Explorer dispose d’un mode de calcul des hauteurs minimales éloigné de la norme, ainsi, le fragment suivant montre une zone qui, sous IE, s’ajustera à son contenu, alors que la norme voudrait que la gestion du débordement « overflow » soit spécifiée explicitement.

#wrapper #main #content{width: 562px;margin: 0 0 0 160px;padding: 0;height:250px;}

Ce fragment de code doit donc se voir augmenté d’un fragment respectueux des srandards, mais non interprétable par Internet Explorer :

#wrapper #main div[id=content]{min-height:250px;height:auto !important;}

Nota : Le bloc de droite de la page d’accueil

  • Dans le flux HTML, l’image doit se trouver après le titre, car elle appartient au contenu que celui-ci précède. Le titre H1 devra donc recevoir un sélecteur « float :right ; » dans la CSS.
  • La juxtaposition de deux éléments de types « inline » les fait flotter côte à côte. La balise STRONG est de type « inline » ; elle sera portée en type « block » par CSS.

Restitution du bloc de droite de la page d’accueil.
bloc de droite

  • Dans le flux HTML, l’image doit se trouver après le titre, car elle appartient au contenu que celui-ci précède. Le titre H1 devra donc recevoir un sélecteur « float :right ; » dans la CSS.
  • La juxtaposition de deux éléments de types « inline » les fait flotter côte à côte. La balise STRONG est de type « inline » ; elle sera portée en type « block » par CSS. 
*{font-family:Arial,sans-serif;font-size:12px;}
[…]
#wrapper #content.home h1
	{font-size:1.3em;}
#wrapper #content.home h2
	{font-size:1.1em;}
#wrapper #content.home strong
	{display:block;}
[…]
#wrapper #content.home #homeRight h1
	{float:right;}
[…]

Feuille de style « default.css » 


body
{
width:100%;margin: 0;padding: 0;text-align: center;background-color: #6b4f2e;
font-size: 12px;line-height:1.6em;font-family:Arial, sans-serif;font-weight:normal;color: #000;
}
a,img{border:none;}
a, a:visited {color: #e74c13;font-weight: normal;text-decoration: underline;}
a:hover {text-decoration: none;color: #e76e42;}
h1 {font-size: 160%;}
h2 {font-size: 140%;}
h3 {font-size: 120%;}
h4 {font-size: 110%;}

#wrapper{width: 770px;margin: 0 auto;text-align: left;}

#wrapper #header
{
width: 770px;height:161px;margin: 3px 0 0 0;padding: 0;border:0px solid Red;
background-image: url(./header.jpg);background-repeat: no-repeat;background-position: bottom;
}
#wrapper #header a{display:block;padding: 4em 0 0 0.5em;}
#wrapper #header div.baseline {font-size: 110%;margin: 1em 0 1em 0.5em;}

#wrapper #header #upperNavigation
{position:absolute;top:10px;margin: 0;padding: 0;}
#wrapper #header #upperNavigation ul
{display:inline;margin: 0;padding: 0;}
#wrapper #header #upperNavigation ul li
{display:block;float:left;margin: 0;padding: 0 1em 0 0;list-style:none;}
#wrapper #header #upperNavigation ul li a
{display:inline;margin-top: 0;padding: 0;
color: #ffffff;text-decoration: none;}
#wrapper #header #upperNavigation ul li a:hover
{text-decoration: underline;}

#wrapper #header #fastNavigation *
{display:inline;margin: 0;padding: 0;}

#wrapper #primaryNavigation
{padding: 0;margin:  -29px 0 0 0;width:100%;height: 29px;}
#wrapper #primaryNavigation ul
{display:inline;padding: 0;margin: 0;height:100%}
#wrapper #primaryNavigation ul li
{display:block;float:left;padding: 0;margin: 0;list-style:none;height:100%;
background-repeat: no-repeat;background-position: left;}

#primaryNavigation ul#accueil li#accueil {background-image: url(./tab_accueil_accueil.gif);}
#primaryNavigation ul#accueil   li#recettes	{background-image: url(./tab_recette_accueil.gif);}

#primaryNavigation ul#recettes li#accueil {background-image: url(./tab_accueil.gif);}
#primaryNavigation ul#recettes li#recettes {background-image: url(./tab_recette_recette.gif);}
#primaryNavigation ul#recettes li#menus	{background-image: url(./tab_menu_recette.gif);}

#primaryNavigation ul#menus li#menus {background-image: url(./tab_menu_menu.gif);}
#primaryNavigation ul#menus li#decouvrir {background-image: url(./tab_decouvrir_menu.gif);}

#primaryNavigation ul#decouvrir li#decouvrir {background-image: url(./tab_decouvrir_decouvrir.gif);}
#primaryNavigation ul#decouvrir li#marche {background-image: url(./tab_marche_decouvrir.gif);}

#primaryNavigation ul#marche li#marche {background-image: url(./tab_marche_marche.gif);}

#primaryNavigation ul li#accueil {background-image: url(./tab_accueil.gif);background-color:#ffffff;}
#primaryNavigation ul li#recettes {background-image: url(./tab_recette.gif);background-color:#e7d752;}
#primaryNavigation ul li#menus {background-image: url(./tab_menu.gif);background-color:#a5be08;}
#primaryNavigation ul li#decouvrir {background-image: url(./tab_decouvrir.gif);background-color:#ff7500;}
#primaryNavigation ul li#marche	{background-image: url(./tab_marche.gif);background-color:#f0e8db;}

#primaryNavigation ul li a {
text-decoration: none;font-weight: normal;color: #38302b;display:block;padding: 7px 11px 0 33px;}
#primaryNavigation ul li a:hover {
color: #eb1e00;text-decoration: none;font-weight: normal;}

#wrapper #main{clear: left;width: 770px;padding: 0;margin: 0;background: #ffffff;color: #000000;border-top:1px solid #ffffff;}
#wrapper #main #secondaryNavigation{float: left;padding: 0;margin: 0 0 0 0;}
#wrapper #main #content{width: 562px;margin: 0 0 0 160px;padding: 0;height:250px;}
#wrapper #main div[id=content]{min-height:250px;height:auto !important;}

#wrapper #footer
{
clear: both;margin: 0;padding: 0;height: 23px;
background-color:Transparent;
background-image: url(./footer_bg.gif);
background-repeat:  no-repeat;
background-position: left;
}
#wrapper #footer ul{display:inline;padding: 0;}
#wrapper #footer ul li{display:block;float:left;margin: 0;padding: 0 10px 1px 3px;list-style:none;}
#wrapper #footer ul li a {text-decoration: none;}
#wrapper #footer ul li a:hover {text-decoration: none;}

#wrapper #colophon{clear:left;padding: 0;margin: 1em 0 0 auto;}
#wrapper #colophon ul{display:inline;float:right;}
#wrapper #colophon ul li{display:block;width:91px;text-align:right;float:left;padding: 0;margin: 0;list-style:none;}

.hiddenStructure
{
display:block;
background-color:transparent;
background-image:none;
border:none;
width:1px;
height:1px;
overflow:hidden;
padding:0 0 0 0;
margin:-1px 0 0 -1px;
list-style:none;
float:none;
/* IE 6 will otherwise show an empty line. */
position: absolute;
}
/* Compliant browsers. */
*[class=hiddenStructure]{position:relative !important;}

Restitution de la page intérieure

page intérieure

Feuille de style « home.css »
/* --------------------------------------------------------------- */
#wrapper #content.home
{padding:0;margin:0;background: #ffffff;color: #000000;}
#wrapper #content.home #homeLeft
{float:left;width:229px;padding:5px;margin:7px;}
#wrapper #content.home #homeMiddle
{float:left;width:229px;padding:5px;margin:7px;}
#wrapper #content.home #homeRight
{float:right;width:229px;padding:5px;margin:7px;}
#wrapper #content.home #homeRight h1
{float:right;}
#wrapper #content.home #homeBottom
{clear:both;padding:0;margin:0;height:200px;}
#wrapper #content.home #homeBottom ol
{display:inline;padding: 0;margin: 0;}
#wrapper #content.home #homeBottom ol li
{display:block;float:left;padding: 0 12px;width:130px;margin: 0;
text-align:left;list-style:none;background: #ffffff;color: #000000;}

Restitution de la page d’accueil

Restitution de la page d’accueil

2 Votes | Average: 5 out of 52 Votes | Average: 5 out of 52 Votes | Average: 5 out of 52 Votes | Average: 5 out of 52 Votes | Average: 5 out of 5 (2 votes, note : 5 sur 5)
Loading ... Loading ...
Tags : No Tags.
Bookmarkez cet article :   Souscrire au flux RSS Bookmarker avec Google Bookmarker avec del.icio.us Bookmarker avec Yahoo! Bookmarker avec Bloglines Subscribe in NewsGator Online Bookmarker avec Blogmarks Bookmarker avec Technorati Bookmarker avec netvibes
Imprimer cette page Recommander cet article !

0 Réponses to “Etape 5 : Apport des styles aux balises hors structure”

Flux RSS pour cet article Lien Trackback
  1. Pas de commentaires

Laisser un commentaire


« Etape 4 : Apport de styles par CSS aux balises de structure

Les Etapes de la Formation

Abonnement

S'abonner à nos flux RSS :

Technorati





  • Commentaires Récents

    • Chris: Bonjour, Je remarque que le tutoriel " tatatouille et Cie" date de décembre 2007. Va t-il y avoir la suite ?...
    • Clement: Sympa, mais il manque l'étape 4 avec l'ajout des images dans le site maintenant ....

  • Lectures

  • Sondage

    Ce blog vous paraît-il :


    Voir les résultats

    Loading ... Loading ...