Bonjour,
Principalement dans le but d'apprendre la création de pages web, je me suis créé un petit site. Étant un débutant complet, j'ai préféré commencer sans logiciel WYSIWYG (j'utilise Bluefish) en essayant de respecter au maximum les standards.
Je pense ne m'en être pas trop mal sorti (notament grâce aux infos trouvées sur ce site) car mes pages passent aux validateurs w3c et css et je les trouve bien lisibles dans un navigateur texte (w3m) mais si vous avez des avis, je suis preneur.
J'ai quand même un petit soucis d'affichage dans internet explorer qui refuse de centrer mes différents éléments dans la page (ça passe dans firefox, opera et safari). Y aurait-il une solution simple pour y remédier ? Ça me gène surtout sur cette page
html
css
Merci,
Mathieu.
PS aux administrateurs : en m'inscrivant, j'ai fait une faute de frappe en saisissant mon adresse mail sur le compte matieu, vous pouvez le virer)
Modifié par matieu2 (24 Aug 2006 - 13:51)
Principalement dans le but d'apprendre la création de pages web, je me suis créé un petit site. Étant un débutant complet, j'ai préféré commencer sans logiciel WYSIWYG (j'utilise Bluefish) en essayant de respecter au maximum les standards.
Je pense ne m'en être pas trop mal sorti (notament grâce aux infos trouvées sur ce site) car mes pages passent aux validateurs w3c et css et je les trouve bien lisibles dans un navigateur texte (w3m) mais si vous avez des avis, je suis preneur.
J'ai quand même un petit soucis d'affichage dans internet explorer qui refuse de centrer mes différents éléments dans la page (ça passe dans firefox, opera et safari). Y aurait-il une solution simple pour y remédier ? Ça me gène surtout sur cette page
html
<?xml version="1.0" encoding="utf-8"?>
<!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">
<head>
<title>CV</title>
<meta name="author" content="mathieu et magalie"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css"><!--
a span {display: none;}
a:hover span {
display: block;
color: #EDF5FF;
font-weight: bold;
}
a:hover ul {list-style-image: url(images/list.gif); text-decoration: none;}
dl, dt, dd {
margin:0;
padding:0;
}
dl {
float: left;
width: 215px;
height: 250px;
text-align: left;
margin-bottom: 20px;
}
dl#gauche {
background: url(images/fondgauche_bleu.jpg) no-repeat;
}
dl#centre {
background: url(images/fondcentre_bleu.jpg) no-repeat;
}
dl#droite {
background: url(images/fonddroite_bleu.jpg) no-repeat;
}
h3 {margin-left: -15px;}
acronym{color:#60A1DE; cursor:help}
-->
</style>
</head>
<body>
<div id="titre"><h1><a href="index.html" title="Accueil">Mathieu sur la toile</a></h1></div>
<div id="corps"><br />
<ul id="menu_haut">
<li><a href="photo.html" title="Photo">photo</a></li>
<li><a href="informatique.html" title="informatique">informatique</a></li>
<li><a href="liens.html" title="liens">liens</a></li>
<li><a href="cv.html" title="CV" style="text-decoration: underline">CV</a></li>
<li><a href="contact.html" title="contact">contact</a></li>
</ul><br /><br />
<div id="texte">
<dl id="gauche"><dd><a href="#" style="cursor:default"><img src="images/savoir_bleu.jpg" alt="Savoir" /><span>
<ins><ul>
<li>multiples approches pédagogiques</li>
<li>connaissance des différents publics</li>
<li>compétences naturalistes</li>
<li>problématiques environnementales</li>
</ul></ins></span>
</a> </dd></dl>
<dl id="centre"><dd><a href="#" style="cursor:default"><img src="images/savoirfaire_bleu.jpg" alt="Savoir-faire" /><span>
<ins><ul>
<li>encadrement de groupes</li>
<li>création d'outils et supports pédagogiques</li>
<li>montage de projets</li>
<li>utilisation des outils informatiques</li>
<li>aisance rédactionnelle</li>
</ul></ins></span>
</a> </dd></dl>
<dl id="droite"><dd><a href="#" style="cursor:default"><img src="images/savoiretre_bleu.jpg" alt="Savoir-être" /><span>
<ins><ul>
<li>réactivité</li>
<li>autonomie</li>
<li>esprit d'initiative</li>
<li>sens du relationnel</li>
<li>implication associative</li>
</ul></ins></span>
</a> </dd></dl>
<h2>Expériences :</h2>
<ul>
<li><h3 class="haut">Juin 2006</h3>
<strong>animateur environnement</strong> au <acronym title="Centre Permanent d'Initiatives pour l'Environnement">CPIE</acronym> des Monts du Pilat (Marlhes, 42)
<ul><li><span style="color: #60A1DE; ">public :</span> scolaire</li>
<li><span style="color: #60A1DE; ">thèmes :</span> eau, énergies, paysage, forêt, agriculture</li></ul></li>
<li><h3>Avril à novembre 2005</h3>
<strong>animateur nature</strong> à l'Arboretum National des Barres (Nogent sur Vernisson, 45)
<ul><li><span style="color: #60A1DE; ">public :</span> scolaire, adultes, grand-public</li>
<li><span style="color: #60A1DE; ">thèmes :</span> arbre et forêt</li></ul></li>
<li><h3>Octobre 2000 à juillet 2002</h3>
<strong>animateur nature</strong> pour l’association l’Eau qui Bruit (Pélussin, 42)
<ul><li><span style="color: #60A1DE; ">public :</span> scolaire, centres de loisirs</li>
<li><span style="color: #60A1DE; ">thèmes :</span> eau, forêt, agriculture, énergies, déchets, paysage</li></ul></li>
<li><h3>Juillet / août 2000</h3>
<strong>animateur</strong> au <acronym title="Centre de Loisirs Sans Hébergement">CLSH</acronym> de l’Eau qui Bruit
<ul><li><span style="color: #60A1DE; ">public :</span> 6 - 14 ans</li></ul></li>
<li><h3>Juin 2000</h3>
<strong>animateur nature</strong> à la Maison Familiale de Maclas (42)
<ul><li><span style="color: #60A1DE; ">public :</span> scolaire</li>
<li><span style="color: #60A1DE; ">thèmes :</span> forêt, animaux de la ferme</li></ul></li>
<li><h3>Mai 2000</h3>
<strong>animateur nature</strong> pour l’association l’Eau qui Bruit
<ul><li><span style="color: #60A1DE; ">public :</span> scolaire</li>
<li><span style="color: #60A1DE; ">thèmes :</span> forêt, rivière</li></ul></li>
</ul>
<h2>Formations :</h2>
<ul>
<li><h3 class="haut">Février-mars 2006</h3>
formation <strong>« les ateliers de Rouletaboule »</strong> avec le réseau École et Nature
</li>
<li><h3>2003/05</h3>
formation de <strong>Moniteur Éducateur</strong> à l’IRTS de Franche-Comté (25)
</li>
<li><h3>1999</h3>
<strong><acronym title="Brevet de Technicien Supérieur Agricole en Gestion et Protection de la Nature">BTSA GPN</acronym> spécialité Animation Nature</strong>
(St Chély d'Apcher, 48)
</li>
<li><h3>1996</h3>
<strong>Baccalauréat série S</strong> option Mathématiques (Niort, 79)</li>
</ul>
<h2>Divers :</h2>
<ul style="list-style-type: circle">
<li>Fort intérêt pour l'environnement en général et solides connaissances naturalistes acquises lors de nombreuses sorties de terrain</li>
<li>adhérent de la Maison de la Nature de Brussey – <acronym title="Centre Permanent d'Initiatives pour l'Environnement">CPIE</acronym> Vallée de l'Ognon</li>
<li>pratique de la photographie naturaliste</li>
<li>anglais lu écrit et parlé</li>
<li><acronym title="Attestation de Formation aux Premiers Secours">AFPS</acronym></li>
<li>permis B</li>
</ul>
téléchargez mon CV au format pdf : <a href="fichiers/cv.pdf"><img src="images/cv.jpg" alt="CV" /></a>
</div><!-- fin de #texte -->
<br /></div><!-- fin de #corps -->
<div id="pied">
<a href="http://validator.w3.org/check?uri=referer"><img src="images/w3c.png" alt="Valid XHTML 1.0 Strict" title="page valide XHTML 1.0"/></a>
<a href="http://jigsaw.w3.org/css-validator/"> <img src="images/css.png" alt="Valid CSS!" title="CSS valide !"/></a>
<a href="http://www.mozilla-europe.org/fr/products/firefox/"><img alt="Téléchargez Firefox!" title="Téléchargez Firefox!" src="images/firefox.png"/></a>
<a href="http://www.ubuntu-fr.org/"><img alt="Ubuntu!" title="ubuntu-fr.org" src="images/ubuntu.png"/></a>
</div>
</body>
</html>
css
body {
background-color: #cbdcec;
color: white;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.75em;
width: 800px;
margin-left: auto;
margin-right: auto;
}
#titre {
background: url(images/haut_bleu.jpg) no-repeat;
height: 100px;
}
#corps {
background-image : url(images/corps_bleu.jpg);
background-repeat : repeat-y;
min-height : 350px;
padding-left : 50px;
padding-right : 50px;
}
#pied {
background: url(images/bas_bleu.jpg) no-repeat;
height: 100px;
padding-left : 60px;
padding-top : 20px;
}
ul#menu_haut {
list-style-type: none;
margin: 0;
padding: 0;
font-weight: bold;
font-size: 1.5em;
}
ul#menu_haut li {
padding-left: 40px;
float: left;
}
h1 {
padding-top: 40px;
padding-left: 60px;
margin-bottom: 0;
}
h2 {
margin-bottom: 0;
}
img {
border: 0;
}
h3 {
margin-bottom: 0;
padding-top: 15px;
}
h3.haut {
margin-bottom: 0;
margin-top: 0;
padding-top: 0;
}
a:link {text-decoration: none; color: #94B8DA;}
a:visited {text-decoration: none; color: #94B8DA;}
a:hover {text-decoration: none; background: none; color: #F5A453;}
#texte {
width: 650px;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
padding-top: 15px;
}
ul {
margin-top: 0;
list-style-type: none;
}
Merci,
Mathieu.
PS aux administrateurs : en m'inscrivant, j'ai fait une faute de frappe en saisissant mon adresse mail sur le compte matieu, vous pouvez le virer)
Modifié par matieu2 (24 Aug 2006 - 13:51)
