Les chatons de Minou

Un heureux événement

chatonMinou a donné naissance à de nouveaux chatons.  La naissance s'est très bien passée et les chatons sont en parfaite santé.

Ils sont tellement mignons que nous avons décidé de leur consacrer un site entier pour que vous puissiez profiter de la bonne nouvelle.

La mère les allaite toute la journée sauf quand ils dorment.

La mère est aussi sur ce site, mais nous ne savons pas où se trouve le père.
C'est la vie! 

Elle les lèche pour leur faire la toilette. Ils ont maintenant les yeux bien ouverts et propres. Ils commencent à s'amuser entre eux avec des gestes un peu maladroits. 

Question propreté nous comptons sur Minou pour leur apprendre les bonnes manières.

Attributions

Cette fois-ci Minou a eu une portée de cinq chatons, deux mâles et trois femelles.
Nous savons à peu près à  qui nous les donnerons dès qu'ils seront sevrés et un peu éduqués.

  1. notre voisine de palier adopera une femelle
  2. notre tante de Baixas prendra aussi une femelle
  3. ma copine de bureau prendra un mâle
  4. la cousine de Baho pendra un mâle
  5. et enfin notre femme de ménage héritera de la dernière
    femelle

Alimentation

Quand ils seront un peu plus grands nous commencerons à les alimenter progressivement avec du lait et des aliments pour chats dont Minou raffole.


Intégrer une vidéo sur YouTube :  


Haut de page

Tutoriel

A - Structure de base

Nous utiliserons, dans cet exercice, et à l'intérieur de body, une div ayant l'identifiant #wrapper ( = enveloppe) englobant les blocs structurants.

structure de base de la pageLe bloc h1 remplace #header

body

bloc #wrapper

bloc h1

menu flottant à gauche

bloc #menu

bloc #content

bloc #footer

Pour l'ensemble du site, les liens sont de couleur rouge moyen foncé, les titres et les liens survolés : rouge moyen clair. Les paragraphes sont justifiés. Les images ont une bordure arête de 1px.

B - Menu vertical réactifmenu réactif étape1

Stylage de  #menu ul

Pour bien voir le bloc ul dans la div #menu, donnons-lui une bordure.

Nous ne voulons pas de puce type et pour palier au problème d'affichage différent suivant les navigateurs  mettons le padding gauche à zéro et le margin gauche à 5px pour décoller un peu le bloc menu du bord de son parent  #wrapper.
Nous voulons un texte centré, en Times et un peu plus grand.
Pour simuler un effet de relief de tout le bloc donnons un bordure pleine, claire de 2 px de large.

Stylage de #menu a

Pour pouvoir rendre le menu réactif au survol de la souris, nous demandons que les liens (normalement de type en ligne) se comportent comme des blocs, nous leur donnons des dimensions, une couleur de fond, une bordure pour mieux les visualiser et, si nous voulons espacer les boutons, appliquons une marge basse de 2px. 

Stylage de #menu a:hover

menu réactif étape 4Au survol de la souris, pour un meilleur contraste, le fond s'obscurcit très légèrement alors que le texte s'éclaircit; de plus le lien survolé est souligné.

C - Rédaction du  #content

Liste numéroté Attributions

Ecrire les 5 items l'un sous l'autre en faisant à chaque Entrée
Sélectionner les 5 items et cliquer sur l'outil Liste numérotée
Dans la feuille de style interne faire une class listeAttrib pour pouvoir affiche l'image d'arrière plan

Dans la barre des taches, appliquer cette class à la liste ol

appliquer la classListe imbriquée Alimentation

Quand la liste de premier niveau est faite
Dans la feuille de style interne faire une class listeAlim pour changer les puces, afficher l'image d'arrière plan et positionner les blocs afin d'avoir un bon affichage.
Dans la barre des taches, appliquer cette class à la liste imbriquée.

D - Rédaction du #footer

Lien Retour vers la liste des exercices 2009-2010Haut de page