Bonjour à toutes et tous 
Je rencontre un petit problème bizarre d'affichage sur mon blog en cours de développement, je vous montre.
La première page que je suis en train de faire permets aux visiteurs de laisser des commentaires.
Comme il peut y en avoir un certain nombre, je préfère les afficher 4 sur une page et mettre un système de pagination en bas de page.
C'est justement à ce niveau que je rencontre mon problème, seul le lien vers la page 5 est opérationnel, alors que les autres ne fonctionnent pas.
Je voulais vous montrer une exemple en images, mais la capture d'écran n'enregistre pas la position de la souris, cela va être impossible.
Mais pour essayer d'expliquer clairement, si je passe la souris sur le numéro 5, eh bien je peux accéder à une autre page, mais si je passe la souris sur un autre numéro, il ne se passe rien...
http://i36.servimg.com/u/f36/11/06/60/26/blog110.jpg
Voilà ci-dessous le code php, css et le code donné par firefox.
Auriez-vous une petite idée ? Car là je sèche un peu.
Je vous remercie d'avance !
Marc
Je rencontre un petit problème bizarre d'affichage sur mon blog en cours de développement, je vous montre.
La première page que je suis en train de faire permets aux visiteurs de laisser des commentaires.
Comme il peut y en avoir un certain nombre, je préfère les afficher 4 sur une page et mettre un système de pagination en bas de page.
C'est justement à ce niveau que je rencontre mon problème, seul le lien vers la page 5 est opérationnel, alors que les autres ne fonctionnent pas.
Je voulais vous montrer une exemple en images, mais la capture d'écran n'enregistre pas la position de la souris, cela va être impossible.
Mais pour essayer d'expliquer clairement, si je passe la souris sur le numéro 5, eh bien je peux accéder à une autre page, mais si je passe la souris sur un autre numéro, il ne se passe rien...
http://i36.servimg.com/u/f36/11/06/60/26/blog110.jpg
Voilà ci-dessous le code php, css et le code donné par firefox.
Auriez-vous une petite idée ? Car là je sèche un peu.
Je vous remercie d'avance !
Marc
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Le site personnel de Marc Schaefges, micro articles sur la mécanique, l'informatique, l'électronique, etc...</title>
<meta charset="utf-8">
<meta name="description" content="Articles divers sur différents domaines me passionnant, tel que l'informatique, l'électronique, les sites internet, la mécanique automobile, etc...">
<meta name="keywords" content="Région Morgienne, Vaud, Suisse,informatique, électronique, mécanique automobile,">
<meta name="author" content="Marc Schaefges">
<meta name="geo.placename" content="Morges, Vaud, Suisse">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" media="all" href="screen.css">
<!-- On déclare les nouveaux éléments html5 pour internet explorer -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<hgroup>
<h1><a href="index.php">Marc Schaefges</a></h1>
<h2>Bienvenue chez moi...</h2>
</hgroup>
<nav class="menu_principal" role="navigation">
<ul>
<li><a href="index.php" class="actuel">Accueil</a></li>
<li><a href="blog.php" >Blog</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
<img class="voiture" src="images/nissan.png" alt="image décorative montrant une voiture" />
</nav>
</header>
<div id="corps">
<aside>
<section class="menu_categories">
<h1>Catégories</h1>
<nav role="navigation">
<ul>
<li><a href="menu.php#mecanique">Mécanique automobile</a></li>
<li><a href="menu.php#informatique">Informatique</a></li>
<li><a href="menu.php#electronique">Electronique</a></li>
<li><a href="menu.php#divers">Divers</a></li>
<li><a href="menu.php#liens_utiles">Liens utiles et divers</a></li>
</ul>
</nav>
</section>
<section class="menu_hasard">
<h1>Articles au hasard</h1>
<nav role="navigation">
<ul>
<?php
require_once('/includes/connexion_base/connexion.php');
$reponse = $connection->query('SELECT id, titre FROM articles ORDER BY RAND() LIMIT 7');
while ($donnees = $reponse->fetch())
{
?>
<li><a href="article.php?id=<?php echo $donnees['id'];?>"><?php echo $donnees['titre'];?></a></li>
<?php
}
?>
</ul>
</nav>
</section>
<section id="newsletter">
<h1>Abonnez-vous à ma newsletter</h1>
<form action="newsletter.php?page=index.php" method="post">
<input type="text" name="mail_newsletter" id="mail_newsletter" value="Votre adresse mail" required title="Une adresse mail est requise!" />
<button>Go !</button>
</form>
<?php
if (isset($_SESSION['alerte']))
{
echo $_SESSION['alerte'];
unset($_SESSION['alerte']);
}
?>
<img class="twitter" src="images/twitter.png"/>
<img class="facebook_google" src="images/facebook.png"/>
<img class="facebook_google" src="images/google+.png"/>
</section>
</aside>
<section id="articles">
<?php
$heure = date("H");
if( $heure >= 7 AND $heure <= 18)
{
$politesse = "Bonjour";
}
elseif( $heure > 18 OR $heure < 7)
{
$politesse = "Bonsoir";
}
?>
<article>
<h1>A propos de moi...</h1>
<p><?php echo $politesse; ?> à toutes et tous, bienvenue !!</p>
<p>Je m'appelle Marc Schaefges, je viens de la région Morgienne en Suisse, j'ai 33 ans et je suis électronicien en multimédia.</p>
<p>Bientôt repreneur d'une entreprise basée à Lausanne en Suisse, nos domaines d'activités sont la pose et le dépannage d'interphones, de digicodes et la modernisation des réseaux
câblés ( téléréseau ) dans les bâtiments, le site internet est visible <a href="http://www.telepermanence.ch/">ici</a>.</p>
<p>Mais revenons à nos moutons, je voudrais tout d'abord répondre à la question que vous vous posez très certainement et qui est:</p>
<p><strong>Pourquoi ce site ??</strong></p>
<p>Depuis de nombreuses années, je m'intéresse à différents domaines, je pose des questions sur divers forums, il s'agit de questions qui me viennent comme ça, sans raisons particulières.</p>
<p>Je reçois très souvent des réponses de gens passionnés et aimant partager leurs connaissances, mais ces dernières se retrouvent ensuite noyées dans la masse et je trouve ça dommage, c'est pourquoi j'ai décidé de créer
ce site afin de partager les nouvelles informations que j'ai acquises ceci au fur et à mesure.</p>
<p>Partisan du partage d'information, internet et plus particulièrement un blog est donc le moyen rêvé pour le faire.</p>
<p>Je suis intéressé par de nombreux domaines, mais plus particulièrement par la mécanique automobile ( plus encore niveau moteur ), l'informatique, l'électronique.</p>
<p>J'apprécie également les activités à sensations, j'ai déjà testé la chute libre, la voltige aérienne, le sport automobile et surtout le karting que j'apprécie particulièrement.</p>
<p>Passionné par le développement web, j'ai engrangé suffisament de connaissances au cours de ces dernières années pour arriver à créer mon blog de toute pièce,
comprennez par là que j'ai tapé le code moi-même et que je ne suis donc pas passé par un logiciel type wordpress qui créé le code pour nous, j'ai profité de passer de
la théorie à la pratique en mêlant l'utile à l'agréable.</p>
<p>La raison d'être de ce blog est de permettre d'expliquer les choses clairement, sans rentrer dans des explications complexes qui rendraient les articles indigestes.</p>
<p>Il s'agira de micro-articles dans les domaines précités.<br/>
Le mot premier est donc la vulgarisation et de surtout rester dans l'essentiel.</p>
<p>L'orthographe et la grammaire n'étant pas mon plus grand fort, je tâcherais dans la mesure du possible de soigner mes articles, mais je compte sur vous pour m'informer sur
d'éventuelles fautes que vous rencontrerez. </p>
<p>Je tiens d'ailleurs à vous faire connaître un site internet consacré à l'orthographe et à la grammaire, c'est une mine d'informations géré par une équipe de passionnés, <a href="http://www.zcorrecteurs.fr">le voici</a> .</p>
</article>
<article>
<h1>Il n'est pas forcément nécessaire de savoir le faire, mais surtout de savoir que l'on peut le faire</h1>
<p>En effet, savoir qu'il est techniquement possible de réaliser une action est plus important que de connaître par coeur comment la réaliser.</p>
<p>Il suffira ensuite de faire des recherches ciblées et de surtout utiliser le formidable outil qui est à notre disposition qu'est internet.</p>
<p>Après tout, l'expression " Google est ton ami " est bien connue ! </p>
</article>
<article>
<h1>Politique de mon blog</h1>
<h2>Licence</h2>
<p>les articles qui sont présents sur ce site sont soumis à la licence creativecommons BY NC SA <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.0/fr/"><img alt="Licence Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" />
</a>, cela veut dire que vous êtes libre de distribuer et de modifier ces derniers (dans les mêmes conditions) pour autant que vous indiquiez la source et l'auteur (en l'encurrence mon site et mon nom), néanmoins, vous n'avez pas l'autorisation de les utiliser
à des fins commerciales sauf accord préalable auprès de moi.</p>
<h2>Les commentaires et les sites web des visiteurs</h2>
<p>Les visiteurs qui écrivent un commentaire en bas de l'article concerné ont la possibilité d'indiquer un lien vers un autre site traitant du même sujet pour autant qu'il soit de bonne qualité car il faut savoir que Google
pénalise un site ( au niveau du référencement ) qui possède des liens pointants vers des sites connus pour être de mauvaise qualité.</p>
<p>Afin d'éviter ça, le webmaster a la possibilité de rajouter une indication sur le lien posté par le visiteur indiquant qu'il ne cautionne pas le contenu de ce dernier, l'indication comporte à rajouter le terme de no-follow indiquant à google de ne pas suivre
ce lien.</p>
<p>Seulement voilà, en utilisant ce procédé d'une manière générale ceci n'encourage pas le partage d'information, j'ai donc opté de laisser les liens sortants totalement libres, mais je soignerais par contre la modération de chaque commentaire afin d'éviter tout abus.</p>
<p>Egalement afin d'encourager les sites internet des visiteurs, ces derniers ont la possibilité d'indiquer le lien de leur site internet qui sera accessible en cliquant sur le lien en-dessous du message qu'ils auront posté.</p>
</article>
<article>
<h1>C'est moi qui l'ai fait</h1>
<h2>Sites internet</h2>
<p>Je voudrais commencer par un des dernier né, il s'agit d'un site de commercialisation d'oranges, voici ci-dessous une capture d'écran de ce dernier, en cliquant sur l'image,
vous serez directement redirigé vers la version en ligne.</p>
<p>Vous trouverez d'ailleurs l'explicatif complet de sa conception <a href="http://localhost/blog/article.php?id=32">ici</a>.</p>
<p>N'hésitez pas à me donner vos avis dans les commentaires !</p>
<a href="http://orangedrink.ch/index.html"><img src="images/capture_orangedrink.jpg"/></a>
</article>
<article>
<h1>Ce que vous en dites...</h1>
<p>Vous désirez laisser un message, n'hésitez surtout pas à me donner vos avis !</p>
</article>
<hr>
<section id="commentaires">
<?php
$nb_commentaires = $connection->prepare('SELECT COUNT(commentaire) as nbcommentaires FROM commentaires WHERE article=?');
try
{
$nb_commentaires -> execute(array(10000));
// Traitement
if( $enregistrement = $nb_commentaires->fetch(PDO::FETCH_OBJ)){
$total_commentaires = $enregistrement->nbcommentaires;
}
}
catch( Exception $e )
{
echo 'Erreur serveur, veuillez nous excusez : ', $e->getMessage();
}
if(isset($_GET['page']))
{
$page_actuelle = $_GET['page'];
}
else
{
$page_actuelle = 1;
}
$commentaires_presents_sur_une_page = 4;
$debut=(($page_actuelle-1)*$commentaires_presents_sur_une_page);
$num_article = 10000;
$nombre_page= ceil($total_commentaires/$commentaires_presents_sur_une_page);
// Préparation de la requète
$selectionPrepa = $connection->prepare('SELECT DATE_FORMAT(date_envoi, \'%d/%m/%Y à %Hh%i\') AS date_envoi, id, commentaire, site_internet, adresse_courriel, auteur FROM commentaires WHERE article= :article ORDER BY id DESC LIMIT :debut, [langue]as');
try {
// On rempli les paramètres
$selectionPrepa->bindParam(':article', $num_article, PDO: [langue]ARAM_INT);
$selectionPrepa->bindParam(':debut', $debut, PDO: [langue]ARAM_INT);
$selectionPrepa->bindParam(':pas', $commentaires_presents_sur_une_page, PDO: [langue]ARAM_INT);
$selectionPrepa->execute();
while( $enregistrement = $selectionPrepa->fetch(PDO::FETCH_OBJ))
{
?>
<p class="message"><?php echo $enregistrement->commentaire; ?></p>
<?php
$image = "http://2.gravatar.com/avatar/".md5($enregistrement->adresse_courriel)."?s=80";
echo '<img src="'.$image.'" alt="votre avatar"/>';
?>
<p class="nom_web">Posté par <strong><?php echo $enregistrement->auteur;?></strong>, le <?php echo $enregistrement->date_envoi; ?><br/>
Son site web : <a href="<?php echo $enregistrement->site_internet;?>"><?php echo $enregistrement->site_internet;?></a></p>
<?php
}
}
catch( Exception $e )
{
echo 'Erreur serveur, veuillez nous excusez : ', $e->getMessage();
}
$connection = NULL;
for ($i=1;$i<=$nombre_page;$i++)
{
echo "<p class=\"pagination\"><a href=\"index.php?page=$i#commentaires\">$i</a></p> ";
}
?>
<hr>
</section>
<form action="commentaires.php?id=10000" method="post">
<label for="pseudo">
Votre pseudo:
</label>
<input type="text" name="pseudo" id="pseudo" required title="Un pseudo est requis!" />
<label for="site_internet">
Votre site internet:
</label>
<input type="text" name="site_internet" id="site_internet"/>
<label for="adresse_courriel" title="gravatar permet l'affichage d'une image perso">
Votre adresse mail:<br/>
( pour gravatar )
</label>
<input type="email" name="adresse_courriel" id="adresse_courriel"/>
<label for="annee">
En quelle année sommes-nous ?<br/>( protection anti-spams ):
</label>
<input type="text" name="annee" id="annee" required title="Veuillez svp rentrer l'année en cours!" />
<label for="commentaire">
Votre commentaire:
</label>
<textarea required title="Veuillez svp laisser un message!" name="commentaire" id="commentaire" rows="10" cols="50"></textarea>
<button>Envoyer !</button>
</form>
</section>
</body>
</html>/* --- STYLES DE BASE --- */
a, img
{
border: none;
text-decoration:none;
}
header, nav, footer, figure, section
{
display:block;
}
/* --- polices de caractères --- */
@font-face
{
font-family: 'BoycottRegular';
src: url('polices/boycott_-webfont.eot');
src: url('polices/boycott_-webfont.eot?#iefix') format('embedded-opentype'),
url('polices/boycott_-webfont.woff') format('woff'),
url('polices/boycott_-webfont.ttf') format('truetype'),
url('polices/boycott_-webfont.svg#BoycottRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face
{
font-family: 'Amaranth';
src: url('polices/Amaranth-webfont.eot');
src: url('polices/Amaranth-webfont.eot?#iefix') format('embedded-opentype'),
url('polices/Amaranth-webfont.woff') format('woff'),
url('polices/Amaranth-webfont.ttf') format('truetype'),
url('polices/Amaranth-webfont.svg#Amaranth') format('svg');
font-weight: normal;
font-style: normal;
}
html
{
font-size: 100%; /* Évite un bug d'IE 6-7. */
width:100%;
background-color:#6b633f;
background-image:url("images/Texture_fond_html.jpg");
background-repeat: repeat;
background-attachment:fixed;
min-height:100%;
}
body
{
margin: 0;
line-height: 1.4; /* Attention, à replacer !!!!!!!!!!!!!!!!!!! */
width:980px;
margin-left:auto;
margin-right:auto;
min-height:100%;
border-radius:8px;
}
/* Partie haut de page */
header
{
display:table;
height:300px;
width:980px;
padding-top:1px;
margin-top:50px;
}
hgroup
{
display:table-cell;
height:200px;
width:540px;
}
header hgroup h1
{
font-family:BoycottRegular, tahoma, arial;
font-size:3.5em;
color:black;
padding-left:0px;
border-bottom:5px solid white;
font-weight:600;
margin-top:15px;
margin-left:15px;
text-shadow: 1px 1px 0px white;
}
header hgroup h1 a
{
text-decoration:none;
color:black;
}
header hgroup h1 a:hover
{
-moz-transform:rotate(-5deg);
-webkit-transform:rotate(-5deg);
transform:rotate(-5deg);
-moz-transition:0.4s;
-webkit-transition:0.4s;
-o-transition:0.4s;
transition:0.4s;
}
header hgroup h2
{
font-family:BoycottRegular, tahoma, arial;
font-size:2.5em;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: 1px 1px 10px #000000;
-webkit-box-shadow: 1px 1px 10px #000000;
box-shadow: 1px 1px 10px #000000;
-moz-transform: rotate(-13deg);
-webkit-transform: rotate(-13deg);
transform: rotate(-13deg);
width:430px;
margin-left:25px;
padding-left:10px;
padding-right:20px;
background-color: #f9ebcb;
font-weight: normal;
border:1px solid black;
}
nav.menu_principal
{
display:table-cell;
height:200px;
width:440px;
vertical-align:top;
}
nav.menu_principal ul
{
height:50px;
}
nav.menu_principal ul li
{
list-style-type:none;
display:inline;
padding-right:30px;
margin-left:5px;
}
nav.menu_principal ul li a
{
font-size:1.6em;
font-family:BoycottRegular, tahoma, arial;
color:white;
text-shadow: 1px 1px 1px black;
text-decoration:none;
text-align:center;
}
nav.menu_principal li a.actuel
{
border-bottom:3px solid #881515;
}
nav.menu_principal li a:hover
{
color:black;
text-shadow: 1px 1px 1px white;
}
/* Fin partie haut de page */
#corps
{
width:980px;
display:table;
border-collapse:separate;
}
/* Partie gauche de page */
aside, section.menu_categories, section.menu_hasard, section#newsletter
{
width:338px;
}
aside
{
border-right:2px dotted white;
display:table-cell;
}
.menu_categories h1,.menu_hasard h1, section#newsletter h1
{
text-align:center;
font-family:Amaranth, tahoma, arial;
font-size:1.7em;
background-color:#881515;
color:white;
text-shadow: 1px 1px 3px #000000;
border-radius: 8px;
-moz-box-shadow: 3px 6px 10px #000000;
-webkit-box-shadow: 3px 6px 10px #000000;
box-shadow: 3px 6px 10px #000000;
border:1px solid white;
padding-top:4px;
padding-bottom:4px;
width:270px;
margin-left:auto;
margin-right:auto;
}
.menu_categories nav,.menu_hasard nav
{
border-radius:8px;
-moz-box-shadow: 1px 1px 2px #000000;
-webkit-box-shadow: 1px 1px 2px #000000;
box-shadow: 2px 2px 8px #000000;
background-image:url("images/texture_fond_menu.jpg");
background-repeat:repeat;
border:1px solid black;
width:270px;
margin-left:auto;
margin-right:auto;
}
.menu_categories nav ul li, .menu_hasard nav ul li
{
list-style-type:none;
padding-bottom:2px;
list-style-type:square;
color:#a94009;
}
.menu_categories nav ul li a, .menu_hasard nav ul li a
{
color:black;
line-height:30px;
text-decoration:none;
text-align:center;
font-size:1em;
text-shadow: 0px 0px 5px #ffffff;
font-family:tahoma, arial;
}
.menu_categories nav ul li a:hover, .menu_hasard nav ul li a:hover
{
border-bottom:3px solid #881515;
-moz-transition:0.2s;
-webkit-transition:0.2s;
-o-transition:0.2s;
transition:0.2s;
}
#newsletter form
{
width:270px;
margin-left:auto;
margin-right:auto;
}
#newsletter form input
{
margin-left:0px;
height:25px;
font-family:tahoma, arial;
border-radius:5px;
}
#newsletter form button
{
height:25px;
padding-bottom:10px;
}
#newsletter h2
{
color:black;
font-size:1.1em;
width:270px;
margin-left:auto;
margin-right:auto;
background-color:white;
border:1px solid black;
padding:5px;
border-radius:4px;
}
#newsletter img.twitter
{
margin-left:35px;
}
#newsletter img.facebook_google
{
margin-left:15px;
}
/* Fin partie gauche de page */
/* ------------------------- */
/* Début partie page principale commun */
section#articles
{
display:table-cell;
width:640px;
}
/* Partie centrale index.php */
article
{
width:570px;
margin-left:auto;
margin-right:auto;
}
article h1
{
width:570px;
margin-left:auto;
margin-right:auto;
text-align:center;
font-family:Amaranth,arial;
font-size:2em;
background-color:#881515;
color:white;
text-shadow: 1px 1px 3px #000000;
border-radius: 8px;
-moz-box-shadow: 3px 6px 10px #000000;
-webkit-box-shadow: 3px 6px 10px #000000;
box-shadow: 3px 6px 10px #000000;
border:1px solid white;
padding-top:4px;
padding-bottom:4px;
}
article h2
{
font-family:Amaranth,arial;
font-size:2em;
text-decoration:underline;
color:white;
text-shadow: 1px 1px 3px #000000;
}
article p
{
width:570px;
margin-left:auto;
margin-right:auto;
font-family: Amaranth, Arial, Helvetica, sans-serif;
font-size:1.2em;
color:black;
line-height:30px;
text-shadow: 0px 0px 2px black;
color:white;
}
article p a
{
color:white;
font-weight:bold;
}
article p a:hover
{
color:#881515;
text-shadow: 1px 0px 0px white;
}
hr
{
width:550px;
color:white;
height:3px;
margin-left:auto;
margin-right:auto;
}
section#commentaires p.message
{
width:570px;
background-color:white;
margin-left:auto;
margin-right:auto;
border-radius:4px;
-moz-box-shadow: 1px 1px 3px #000000;
-webkit-box-shadow: 1px 1px 3px #000000;
box-shadow: 1px 1px 3px #000000;
padding:10px;
font-family: tahoma, Arial, Helvetica, sans-serif;
}
section#commentaires p.message:first-child
{
margin-top:30px;
}
section#commentaires img
{
margin-left:25px;
display:inline-block;
}
section#commentaires p.nom_web
{
font-family: tahoma, Arial, Helvetica, sans-serif;
display:inline-block;
margin-left:10px;
margin-bottom:30px;
width:520px;
}
section#commentaires p a
{
color:white;
text-shadow: 0px 0px 2px black;
}
section#commentaires p a:hover
{
font-weight:bold;
}
section#commentaires p.pagination
{
display:inline-block;
font-size:1.3em;
width:20px;
}
section#commentaires p.pagination :first-child
{
margin-left:30px;
}
form
{
margin-bottom:100px;
}
label
{
display:block;
margin-bottom:10px;
width:570px;
margin-left:35px;
font-size:1.1em;
font-family: Amaranth, Arial, Helvetica, sans-serif;
margin-top:30px;
}
form input
{
-moz-border-radius: 8px;
-webkit-border-radius:8px;
-khtml-border-radius:8px;
border-radius:8px;
width:200px;
margin-left:35px;
display:block;
height:20px;
padding:5px;
-moz-box-shadow: 1px 1px 3px #000000;
-webkit-box-shadow: 1px 1px 3px #000000;
box-shadow: 1px 1px 3px #000000;
font-family: Amaranth, Arial, Helvetica, sans-serif;
font-size:1em;
}
textarea
{
-moz-border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius:8px;
border-radius:8px;
margin-bottom:15px;
width:570px;
max-width:570px;
margin-left:auto;
margin-right:auto;
display:block;
-moz-box-shadow: 1px 1px 3px #000000;
-webkit-box-shadow: 1px 1px 3px #000000;
box-shadow: 1px 1px 3px #000000;
font-family: Amaranth, Arial, Helvetica, sans-serif;
font-size:1.1em;
}
button
{
display:block;
width:100px;
padding:8px;
margin-left:30px;
-moz-box-shadow: 1px 1px 0px #000000;
-webkit-box-shadow: 1px 1px 0px #000000;
box-shadow: 1px 1px 0px #000000;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Le site personnel de Marc Schaefges, micro articles sur la mécanique, l'informatique, l'électronique, etc...</title>
<meta charset="utf-8">
<meta name="description" content="Articles divers sur différents domaines me passionnant, tel que l'informatique, l'électronique, les sites internet, la mécanique automobile, etc...">
<meta name="keywords" content="Région Morgienne, Vaud, Suisse,informatique, électronique, mécanique automobile,">
<meta name="author" content="Marc Schaefges">
<meta name="geo.placename" content="Morges, Vaud, Suisse">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" media="all" href="screen.css">
<!-- On déclare les nouveaux éléments html5 pour internet explorer -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<hgroup>
<h1><a href="index.php">Marc Schaefges</a></h1>
<h2>Bienvenue chez moi...</h2>
</hgroup>
<nav class="menu_principal" role="navigation">
<ul>
<li><a href="index.php" class="actuel">Accueil</a></li>
<li><a href="blog.php" >Blog</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
<img class="voiture" src="images/nissan.png" alt="image décorative montrant une voiture" />
</nav>
</header>
<div id="corps">
<aside>
<section class="menu_categories">
<h1>Catégories</h1>
<nav role="navigation">
<ul>
<li><a href="menu.php#mecanique">Mécanique automobile</a></li>
<li><a href="menu.php#informatique">Informatique</a></li>
<li><a href="menu.php#electronique">Electronique</a></li>
<li><a href="menu.php#divers">Divers</a></li>
<li><a href="menu.php#liens_utiles">Liens utiles et divers</a></li>
</ul>
</nav>
</section>
<section class="menu_hasard">
<h1>Articles au hasard</h1>
<nav role="navigation">
<ul>
<li><a href="article.php?id=14">les freins</a></li>
<li><a href="article.php?id=27">Ma peugeot 106 GTI</a></li>
<li><a href="article.php?id=32">Réalisation du site Orangedrink</a></li>
<li><a href="article.php?id=23">Santé tout d'abord !</a></li>
<li><a href="article.php?id=84">La recette de la sauce bolognaise</a></li>
<li><a href="article.php?id=28">106 S16</a></li>
<li><a href="article.php?id=33">éà è</a></li>
</ul>
</nav>
</section>
<section id="newsletter">
<h1>Abonnez-vous à ma newsletter</h1>
<form action="newsletter.php?page=index.php" method="post">
<input type="text" name="mail_newsletter" id="mail_newsletter" value="Votre adresse mail" required title="Une adresse mail est requise!" />
<button>Go !</button>
</form>
<img class="twitter" src="images/twitter.png"/>
<img class="facebook_google" src="images/facebook.png"/>
<img class="facebook_google" src="images/google+.png"/>
</section>
</aside>
<section id="articles">
<article>
<h1>A propos de moi...</h1>
<p>Bonjour à toutes et tous, bienvenue !!</p>
<p>Je m'appelle Marc Schaefges, je viens de la région Morgienne en Suisse, j'ai 33 ans et je suis électronicien en multimédia.</p>
<p>Bientôt repreneur d'une entreprise basée à Lausanne en Suisse, nos domaines d'activités sont la pose et le dépannage d'interphones, de digicodes et la modernisation des réseaux
câblés ( téléréseau ) dans les bâtiments, le site internet est visible <a href="http://www.telepermanence.ch/">ici</a>.</p>
<p>Mais revenons à nos moutons, je voudrais tout d'abord répondre à la question que vous vous posez très certainement et qui est:</p>
<p><strong>Pourquoi ce site ??</strong></p>
<p>Depuis de nombreuses années, je m'intéresse à différents domaines, je pose des questions sur divers forums, il s'agit de questions qui me viennent comme ça, sans raisons particulières.</p>
<p>Je reçois très souvent des réponses de gens passionnés et aimant partager leurs connaissances, mais ces dernières se retrouvent ensuite noyées dans la masse et je trouve ça dommage, c'est pourquoi j'ai décidé de créer
ce site afin de partager les nouvelles informations que j'ai acquises ceci au fur et à mesure.</p>
<p>Partisan du partage d'information, internet et plus particulièrement un blog est donc le moyen rêvé pour le faire.</p>
<p>Je suis intéressé par de nombreux domaines, mais plus particulièrement par la mécanique automobile ( plus encore niveau moteur ), l'informatique, l'électronique.</p>
<p>J'apprécie également les activités à sensations, j'ai déjà testé la chute libre, la voltige aérienne, le sport automobile et surtout le karting que j'apprécie particulièrement.</p>
<p>Passionné par le développement web, j'ai engrangé suffisament de connaissances au cours de ces dernières années pour arriver à créer mon blog de toute pièce,
comprennez par là que j'ai tapé le code moi-même et que je ne suis donc pas passé par un logiciel type wordpress qui créé le code pour nous, j'ai profité de passer de
la théorie à la pratique en mêlant l'utile à l'agréable.</p>
<p>La raison d'être de ce blog est de permettre d'expliquer les choses clairement, sans rentrer dans des explications complexes qui rendraient les articles indigestes.</p>
<p>Il s'agira de micro-articles dans les domaines précités.<br/>
Le mot premier est donc la vulgarisation et de surtout rester dans l'essentiel.</p>
<p>L'orthographe et la grammaire n'étant pas mon plus grand fort, je tâcherais dans la mesure du possible de soigner mes articles, mais je compte sur vous pour m'informer sur
d'éventuelles fautes que vous rencontrerez. </p>
<p>Je tiens d'ailleurs à vous faire connaître un site internet consacré à l'orthographe et à la grammaire, c'est une mine d'informations géré par une équipe de passionnés, <a href="http://www.zcorrecteurs.fr">le voici</a> .</p>
</article>
<article>
<h1>Il n'est pas forcément nécessaire de savoir le faire, mais surtout de savoir que l'on peut le faire</h1>
<p>En effet, savoir qu'il est techniquement possible de réaliser une action est plus important que de connaître par coeur comment la réaliser.</p>
<p>Il suffira ensuite de faire des recherches ciblées et de surtout utiliser le formidable outil qui est à notre disposition qu'est internet.</p>
<p>Après tout, l'expression " Google est ton ami " est bien connue ! </p>
</article>
<article>
<h1>Politique de mon blog</h1>
<h2>Licence</h2>
<p>les articles qui sont présents sur ce site sont soumis à la licence creativecommons BY NC SA <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.0/fr/"><img alt="Licence Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" />
</a>, cela veut dire que vous êtes libre de distribuer et de modifier ces derniers (dans les mêmes conditions) pour autant que vous indiquiez la source et l'auteur (en l'encurrence mon site et mon nom), néanmoins, vous n'avez pas l'autorisation de les utiliser
à des fins commerciales sauf accord préalable auprès de moi.</p>
<h2>Les commentaires et les sites web des visiteurs</h2>
<p>Les visiteurs qui écrivent un commentaire en bas de l'article concerné ont la possibilité d'indiquer un lien vers un autre site traitant du même sujet pour autant qu'il soit de bonne qualité car il faut savoir que Google
pénalise un site ( au niveau du référencement ) qui possède des liens pointants vers des sites connus pour être de mauvaise qualité.</p>
<p>Afin d'éviter ça, le webmaster a la possibilité de rajouter une indication sur le lien posté par le visiteur indiquant qu'il ne cautionne pas le contenu de ce dernier, l'indication comporte à rajouter le terme de no-follow indiquant à google de ne pas suivre
ce lien.</p>
<p>Seulement voilà, en utilisant ce procédé d'une manière générale ceci n'encourage pas le partage d'information, j'ai donc opté de laisser les liens sortants totalement libres, mais je soignerais par contre la modération de chaque commentaire afin d'éviter tout abus.</p>
<p>Egalement afin d'encourager les sites internet des visiteurs, ces derniers ont la possibilité d'indiquer le lien de leur site internet qui sera accessible en cliquant sur le lien en-dessous du message qu'ils auront posté.</p>
</article>
<article>
<h1>C'est moi qui l'ai fait</h1>
<h2>Sites internet</h2>
<p>Je voudrais commencer par un des dernier né, il s'agit d'un site de commercialisation d'oranges, voici ci-dessous une capture d'écran de ce dernier, en cliquant sur l'image,
vous serez directement redirigé vers la version en ligne.</p>
<p>Vous trouverez d'ailleurs l'explicatif complet de sa conception <a href="http://localhost/blog/article.php?id=32">ici</a>.</p>
<p>N'hésitez pas à me donner vos avis dans les commentaires !</p>
<a href="http://orangedrink.ch/index.html"><img src="images/capture_orangedrink.jpg"/></a>
</article>
<article>
<h1>Ce que vous en dites...</h1>
<p>Vous désirez laisser un message, n'hésitez surtout pas à me donner vos avis !</p>
</article>
<hr>
<section id="commentaires">
<p class="message">Alsacréations imagine et construit des sites utilisables et attractifs qui mettent l'accent sur la lisibilité, la rapidité et l'accessibilité grâce aux standards web</p>
<img src="http://2.gravatar.com/avatar/d41d8cd98f00b204e9800998ecf8427e?s=80" alt="votre avatar"/> <p class="nom_web">Posté par <strong>Alsacréations</strong>, le 29/09/2012 à 13h07<br/>
Son site web : <a href="www.alsacreations.com">www.alsacreations.com</a></p>
<p class="message">xxy</p>
<img src="http://2.gravatar.com/avatar/d41d8cd98f00b204e9800998ecf8427e?s=80" alt="votre avatar"/> <p class="nom_web">Posté par <strong>sdsdds</strong>, le 29/09/2012 à 13h07<br/>
Son site web : <a href="http://www.alsacreations.com">http://www.alsacreations.com</a></p>
<p class="message">Alsacréations imagine et construit des sites utilisables et attractifs qui mettent l'accent sur la lisibilité, la rapidité et l'accessibilité grâce aux standards web</p>
<img src="http://2.gravatar.com/avatar/d41d8cd98f00b204e9800998ecf8427e?s=80" alt="votre avatar"/> <p class="nom_web">Posté par <strong>Marc</strong>, le 29/09/2012 à 13h06<br/>
Son site web : <a href="http://www.alsacreations.com/">http://www.alsacreations.com/</a></p>
<p class="message">dsdsdsf</p>
<img src="http://2.gravatar.com/avatar/d41d8cd98f00b204e9800998ecf8427e?s=80" alt="votre avatar"/> <p class="nom_web">Posté par <strong>ffdsdfs</strong>, le 26/09/2012 à 21h59<br/>
Son site web : <a href=""></a></p>
<p class="pagination"><a href="index.php?page=1#commentaires">1</a></p> <p class="pagination"><a href="index.php?page=2#commentaires">2</a></p> <p class="pagination"><a href="index.php?page=3#commentaires">3</a></p> <p class="pagination"><a href="index.php?page=4#commentaires">4</a></p> <p class="pagination"><a href="index.php?page=5#commentaires">5</a></p> <hr>
</section>
<form action="commentaires.php?id=10000" method="post">
<label for="pseudo">
Votre pseudo:
</label>
<input type="text" name="pseudo" id="pseudo" required title="Un pseudo est requis!" />
<label for="site_internet">
Votre site internet:
</label>
<input type="text" name="site_internet" id="site_internet"/>
<label for="adresse_courriel" title="gravatar permet l'affichage d'une image perso">
Votre adresse mail:<br/>
( pour gravatar )
</label>
<input type="email" name="adresse_courriel" id="adresse_courriel"/>
<label for="annee">
En quelle année sommes-nous ?<br/>( protection anti-spams ):
</label>
<input type="text" name="annee" id="annee" required title="Veuillez svp rentrer l'année en cours!" />
<label for="commentaire">
Votre commentaire:
</label>
<textarea required title="Veuillez svp laisser un message!" name="commentaire" id="commentaire" rows="10" cols="50"></textarea>
<button>Envoyer !</button>
</form>
</section>
</body>
</html>