Marie-Philippe Gill: PI + Projet Perso

Bonjour !
Aujourd'hui, j'ai fais le menu déroulant de mon blog.
Les couleurs et tout ne sont pas permanent pour l'instant.
J'ai décidé de commencer par la partie "Livres" de mon blog.

Au prochain cours, je vais chercher comment faire un diaporama d'images horizontal afin d'y afficher les derniers livres qui seront ajoutés sur mon blog! :)

Temps: 1h00

le code html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
   <title>Bienvenue sur mon site !</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" media="screen" type="text/css" title="Mécanique" href="design.css" />
   
   <link rel="alternate stylesheet" media="screen" type="text/css" title="Rose pour les filles" href="design_poney_rose.css" />
   <link rel="alternate stylesheet" media="screen" type="text/css" title="Sombre et terrifiant" href="sombre.css" />
   <link rel="alternate stylesheet" media="screen" type="text/css" title="Aquatique" href="aquatique.css" />
</head>
   <body>
       
 <div id="en_tete">

</div>

<li>
                <a href="#">Accueil</a>
        </li>
        
        <li>
                <a href="#">News</a>
                <ul>
                        <li><a href="#">Ania-x</a></li>
                </ul>
        </li>
        
        <li>
                <a href="#">Photos</a>
                <ul>
                        <li>
                                <a href="#">Livres</a>
                                <ul>
                                        <li><a href="#">Séries</a></li>
                                        <li><a href="#">Critiqués</a></li>
                                </ul>

</li>
                        <li>
                                <a href="#">Auteurs</a>
                        </li>
                </ul>
        </li>
        
        <li>
                <a href="#">Liens</a>
                <ul>
                        <li><a href="#">Sites intéressants</a></li>
                        <li><a href="#">Mes autres blogs</a></li>
                </ul>
        </li>
        
        <li>
                <a href="#">Plus</a>
                <ul>
                        <li><a href="#">Livre d'or</a></li>
                        <li><a href="#">Nos bannières</a></li>
                        <li><a href="#">Partenaires</a></li>
                        <li><a href="#">Suggestions</a></li>
                </ul>
        </li>
        
</ul>
</div>
 <div id="menu">

<h3>Livres</h3>
  <ul>
   <li><a href="page1.html">Lien</a></li>
   <li><a href="page2.html">Lien</a></li>
   <li><a href="page3.html">Lien</a></li>
  </ul>
 
  </div>

<h3>Biographies</h3>
  <ul>
   <li><a href="page4.html">Lien</a></li>
   <li><a href="page5.html">Lien</a></li>
   <li><a href="page6.html">Lien</a></li>
  </ul>
  </div>

<h3>Films</h3>
  <ul>
   <li><a href="page1.html">Lien</a></li>
   <li><a href="page2.html">Lien</a></li>
   <li><a href="page3.html">Lien</a></li>
  </ul>
 
  </div>

</div>

<div id="corps">
  <h1>Chez Marie</h1>

<p>
       Bienvenue sur mon super site !<br />
       Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :-D
   </p>
 
   <h2>A qui s'adresse ce site ?</h2>    
   <p>
       A tout le monde ! Si je commence à privilégier certaines personnes, on va m'accuser de discrimination ;o)<br />
       Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
   </p>
   
   <h2>L'auteur</h2>    
   <p>
       L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
       Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs, de les rendre accros à mon site, puis de les mettre en mon pouvoir.<br />
       Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
   </p>

</div>

<div id="pied_de_page">
  <p>Copyright "Chez Marie", tous droits réservés</p>
 </div>
   </body>
</html>

le code css

/*
Design d'exemple du Site du Zér0
Réalisé par zaz, venom et mateo21
<lien url="http://www.siteduzero.com">http://www.siteduzero.com</lien>
*/

body
{
   width: 760px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;    
   background-image: url("images/fond.png");
}

/* L'en-tête */

#en_tete
{
   width: 963px;
   height: 311px;
   background-image: url("images/banniere2.png");
   background-repeat: no-repeat;
   margin-bottom: 10px;
}

/* Le menu */

#menu
{
   float: left;
   width: 120px;
 margin-top: 9px;
}

.element_menu
{
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
   
   border: 2px solid black;
   
   margin-bottom: 20px;
}

/* Quelques effets sur les menus */

.element_menu h3
{    
   color: #B3B3B3;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}

.element_menu ul
{
   list-style-image: url("images/puce.png");
   padding: 0px;
   padding-left: 20px;
   margin: 0px;
   margin-bottom: 5px;
}

.element_menu a
{
   color: #B3B3B3;
}

.element_menu a:hover
{
   background-color: #B3B3B3;
   color: black;
}

/* Le corps de la page */

#corps
{
   margin-left: 140px;
   margin-bottom: 20px;
 margin-top: 40px; /* Position du corps par rapport au deroulant */
   padding: 5px;
   
   color: #B3B3B3;
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
   
   border: 2px solid black;
}

#corps h1
{
   color: #B3B3B3;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
   height: 30px;

background-image: url("images/titre.png");
   background-repeat: no-repeat;
   
   padding-left: 30px;
   color: #B3B3B3;
   text-align: left;
}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
   padding: 5px;
   clear: both;

text-align: center;

color: #B3B3B3;
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
   
   border: 2px solid black;
}

/* MENU DEROULANT !!!!!!!!!!!!!!!!! */

#deroulant, #deroulant ul /* Liste */     
{
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 21px; /* on définit une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
}

#deroulant /* Ensemble du menu */
{
        font-weight : bold; /* on met le texte en gras */
        font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
        font-size : 12px; /* hauteur du texte : 12 pixels */
}

#deroulant a /* Contenu des listes */
{
        display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
        padding : 0; /* aucune marge intérieure */
        background : #000; /* couleur de fond */        
        color : #fff; /* couleur du texte */
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
        width : 151px; /* largeur */
}

#deroulant li /* Éléments des listes */      
{ 
        float : left; 
        /* pour IE qui ne reconnaît pas "transparent" */
        border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #deroulant li
{
        border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}

#deroulant li ul /* Sous-listes */
{ 
        position: absolute; /* Position absolue */
        width: 144px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoie loin du champ de vision */
}

#deroulant li ul li /* Eléments de sous-listes */
{
        /* pour ie qui ne reconnaît pas "transparent" (comme précédemment) */
        border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous-liste */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #deroulant li ul li                
{
        border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}

#deroulant li ul ul 
{
        margin    : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-left     : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */      
}

/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul                
{
        border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}

#deroulant a:hover /* Lorsque la souris passe sur un des liens */    
{
        color: #000; /* On passe le texte en noir... */
        background: #fff; /* ... et au contraire, le fond en blanc */
}

#deroulant li:hover ul ul, #deroulant li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}

#deroulant li:hover ul, #deroulant li li:hover ul, #deroulant li.sfhover ul, #deroulant li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}

javascript

jeudi 20 octobre 2011

PI + Projet Perso

Aucun commentaire:

Enregistrer un commentaire