Marie-Philippe Gill: décembre 2011

Passion Lecture !

Projet Intégrateur

Pour transférer de l'école à la maison... Puisque j'ai perdu ma clé USB...

Ce code contient cela:

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>

<head>
  <title>Passion Lecture</title>

</div>

<div class="menu">
<h2>Navigation</h2>

<h3>Graphiques</h3>
<ul align="left">

<li class="navigation"><a href="">Background</a></li>

</ul>

</div>

<div class="content">
<h1>Bienvenue sur Passion Lecture!</h1>
<p>Site web optimisé pour Safari! 
En cours de développement pour Firefox. :) 
</p>
<br />
<h2>Blabla</h2>
<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina exultans ut in tuto iam locata mariti salute muneratam vehiculoque inpositam per regiae ianuas emisit in publicum, ut his inlecebris alios quoque ad indicanda proliceret paria vel maiora.

Quibus ita sceleste patratis Paulus cruore perfusus reversusque ad principis castra multos coopertos paene catenis adduxit in squalorem deiectos atque maestitiam, quorum adventu intendebantur eculei uncosque parabat carnifex et tormenta. et ex is proscripti sunt plures actique in exilium alii, non nullos gladii consumpsere poenales. nec enim quisquam facile meminit sub Constantio, ubi susurro tenus haec movebantur, quemquam absolutum.

Sed cautela nimia in peiores haeserat plagas, ut narrabimus postea, aemulis consarcinantibus insidias graves apud Constantium, cetera medium principem sed siquid auribus eius huius modi quivis infudisset ignotus, acerbum et inplacabilem et in hoc causarum titulo dissimilem sui.

Utque proeliorum periti rectores primo catervas densas opponunt et fortes, deinde leves armaturas, post iaculatores ultimasque subsidiales acies, si fors adegerit, iuvaturas, ita praepositis urbanae familiae suspensae digerentibus sollicite, quos insignes faciunt virgae dexteris aptatae velut tessera data castrensi iuxta vehiculi frontem omne textrinum incedit: huic atratum coquinae iungitur ministerium, dein totum promiscue servitium cum otiosis plebeiis de vicinitate coniunctis: postrema multitudo spadonum a senibus in pueros desinens, obluridi distortaque lineamentorum conpage deformes, ut quaqua incesserit quisquam cernens mutilorum hominum agmina detestetur memoriam Samiramidis reginae illius veteris, quae teneros mares castravit omnium prima velut vim iniectans naturae, eandemque ab instituto cursu retorquens, quae inter ipsa oriundi crepundia per primigenios seminis fontes tacita quodam modo lege vias propagandae posteritatis ostendit.</p>
</div>
 
 </div>

<ul>
   <li id="item1">
    <a href="#lien1">
     <span>
      Description
     </span>
    </a>
   </li>
   <li id="item2">
    <a href="#lien2">
     <span>
      Description
     </span>
    </a>
   </li>
   <li id="item3">
    <a href="#lien3">
     <span>
      Description
     </span>
    </a>
   </li>
   <li id="item4">
    <a href="#lien4">
     <span>
      Description
     </span>
    </a>
   </li>
   <li id="item5">
    <a href="#lien4">
     <span>
      Description
     </span>
    </a>
   </li>
</div>

<div class="footer">
<h3>(c) Marie-Philippe Gill - Novembre 2011</h3>
</div>
</div>

</body>
</html>

style.css

body
{
background-image:url("images/fond.jpg");
background-attachment: fixed;
}

.tout 
{
margin-left: auto;
margin-right: auto;
width: 75%;

}

.header
{
width: 963px;
height: 311px;
}

ul
{
list-style-type: none;
list-style-position: inside;
padding: 0px;
margin: 0px;
padding-left: 10px;
margin-left: 0;

}

.navigation
{
background-image: url(images/puce_bleu.gif);
background-repeat: no-repeat;
padding-left: 16px;
}

.menu
{
border-width: 3px;
border-color: black;
border-style: inset;
box-shadow: 2px 2px 4px black;
height: 250px;
width: 200px;
top: 25px;
position: relative;
background-color: white;
opacity: 0.8;
}

.content
{
border-style: inset;
border-width: 3px;
border-color: black;
box-shadow: 2px 2px 4px black;
height: 600px;
width: 700px;
top: -230px;
left: 220px;
position: relative;
background-color: white;
opacity: 0.9;
text-align: center;
padding-left: 20px;
padding-right: 20px;
}

h2, h3
{
text-align: center;
}

h1
{
color: darkblue;
text-shadow: 5px 5px 5px #3A8EBA;
}

.footer
{
border-style: inset;
border-width: 3px;
border-color: black;
box-shadow: 2px 2px 4px black;
width: 960px;
position: relative;
top: -190px;
background-color: white;
opacity: 0.8;
text-align: center;
}

.livres
{
border-style: inset;
border-width: 3px;
border-color: black;
box-shadow: 2px 2px 4px black;
position: relative;
top: -200px;
opacity: 0.8;
background-color: white;
width: 960px;       /*  Largeur ajustée  (ancienne valeur: 1000px)  */
}

.livres ul
{
 /* On supprime les puces, on précise une largeur
        et on centre la liste par rapport à la page. */
        list-style: none;
        width: 94%;
 margin: auto;
}

.livres li  
{
 /* On fixe les dimensions
        des éléments de notre liste. */
        width: 150px;
 height: 150px;

/* On met en forme le texte. */
 text-align: center;
 font-weight: bold;
  
        /* On modifie l'affichage pour que
        les éléments soient sur la même ligne. */
 display: inline-block;
 
        /* On ajoute une petite bordure
        et on définit les marges.  */
 border: 1px solid #000;
 margin: 10px;
 padding: 0px;

/* Quitte à faire du CSS3, autant
        avoir des coins arrondis :p. */
        border-radius: 10px;
        
        /* On centre l'arrière-plan. */
        background-position: center;
      
        /* On modifie la position pour pouvoir ensuite
        placer comme on le souhaite la description des liens. */
        position: relative;

/* On n'affiche pas ce qui dépasse de nos éléments ! */
 overflow: hidden;

}

/* On indique les images à afficher
en arrière-plan pour chaque élément. */
.livres #item1{background-image: url('bgd1.jpg')}
.livres #item2{background-image: url('bgd1.jpg')}
.livres #item3{background-image: url('bgd1.jpg')}
.livres #item4{background-image: url('bgd1.jpg')}
.livres #item5{background-image: url('bgd1.jpg')}

.livres li a
{
 /* Pour fixer les dimensions d'un lien,
        il est nécessaire de l'afficher en tant
        qu'élément de type block. */
        display: block;
 width: 100%;
 height: 100%;
        text-decoration: none;
}

.livres li span
{
 display: block;
        height: 50px;
        width: 100%;
        color: #fff;
        margin: 0px;

/* La taille des lignes est égale à
        la hauteur de l'élément. Cela permet
        de centrer verticalement le texte. */
        line-height: 50px;
        
        /* Abusons du CSS3 en affichant
        un arrière-plan semi-transparent ! */
        background-color: rgba(0,0,0,0.3);

/*Mettons les coins inférieurs arrondis
        pour que ce soit plus propre
        (merci à wibix pour la remarque)*/
        border-bottom-left-radius: 10px;
 border-bottom-right-radius: 10px;
 
        /* Position absolue pour afficher
        la description avec précision. */
        position: absolute;
 
        /* L'ordonnée de l'élément est égale
        à la hauteur de son parent (150px) :
        la description sera donc située sous
        son parent. */
 left: 0px;
 top: 150px;
}

.livres li span
{
 display: block;
        height: 50px;
        width: 100%;
        color: #fff;
        margin: 0px;
        
        /* La taille des lignes est égale à
        la hauteur de l'élément. Cela permet
        de centrer verticalement le texte. */
        line-height: 50px;
        
        /* Abusons du CSS3 en affichant
        un arrière-plan semi-transparent. */
        background-color: rgba(0,0,0,0.3);
 
        /* Position absolue pour afficher
        la description avec précision. */
        position: absolute;
 
        /* L'ordonnée de l'élément est égale
        à la hauteur de son parent (150px) :
        la description sera donc située sous
        son parent. */
 left: 0px;
 top: 150px;

/* N'oublions pas les transitions ! */
        transition-property: top;
        transition-duration: 1s;
}

/* On modifie l'ordonnée des descriptions contenues
dans un élément d'une liste survolée par la souris. */

.livres li:hover span
{
 top: 100px;
}

dossier "images"

image des livres

Pendant les vacances de Noel, je planifie de faire :

- Le background

- Avancer le PHP.

Coucou!

Aujourd'hui, j'ai continué de rendre ma bannière cliquable, et j'ai réussi! :)

Lorsqu'on clique sur le petit carré en bas à droite, on se rend sur la liste des livres critiqués de mon site web!

Après avoir terminé cela, je me suis lancée dans la création d'un.. "module" pour afficher les derniers livres ajoutés :

Le seul problème que je rencontre, c'est que j'essaye de mettre mes deux « carrés » du bas avec les trois du haut !

J'ai réalisé cela avec ce tutoriel.

C'est codé en CSS3.

À l'école, nous avons des trop anciennes versions de firefox et Safari je crois, donc les navigateurs ne prennent pas en compte le CSS3, mais ce n'est pas grave, c'est quand même bien le résultat.

Note pour moi : Dossier Sans titre 2 > Index.html & style.css

Temps: 71 minutes

jeudi 22 décembre 2011

Projet Intégrateur - Sauvegarde

vendredi 9 décembre 2011

Morgana :)

SketchUp

mardi 6 décembre 2011

Activité 9 / PI

lundi 5 décembre 2011

Activé 9

jeudi 1 décembre 2011

Banniere PI

Bannière PI