Bonjour,
Tu es a un niveau ou il faudrait revoir les bases de A à Z
Je t'ais fait un model pas encore parfait mais qui répond j’espère à ta demande !
http://www.fox-infographie.com/forum/johngoirand.htm
En te précisant
1) que seuls johngoirand.htm et johngoirand.css sont dans la racine /forum
2) toutes les images sont dans /forum/johngoirand/
3) tout les noms sont en minuscule avec des séparateurs "-" et non pas "_"
4) que ma version est responsive-web-design donc lisible sur tablettes et smartphone etc..
Bref le html est:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name=viewport content="width=device-width, initial-scale=1">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<title>site-book</title>
<meta name='keywords' content='site-book' />
<meta name='description' content='site-book' />
<meta name="robots" content="all" />
<meta name="rating" content="general" />
<link rel='stylesheet' href='johngoirand.css' type='text/css' media='all' />
</head><body>
<div class="bouton">
<a href="file:///C:/Users/JEJE-PRT/Desktop/site-book/index.html"><img src="johngoirand/accueilfin.png" alt="fond" /></a><br />
<a href="file:///C:/Users/JEJE-PRT/Desktop/site-book/travaux.html"><img src="johngoirand/travaux.png" alt="fond" /></a><br />
<a href="file:///C:/Users/JEJE-PRT/Desktop/site-book/contact.html"><img src="johngoirand/contactfin.png" alt="fond" /></a><br />
</div>
<div class="reseaux">
<a href="https://www.facebook.com/jonathan.goirand.5"><img src="johngoirand/facebook.png" alt="fond" /></a><br />
<a href="https://twitter.com/jonathangoirand"><img src="johngoirand/twitter.png" alt="fond" /></a><br />
<a href="https://www.linkedin.com/in/jonathan-goirand-a377ab117?trk=nav_responsive_tab_profile_pic"><img src="johngoirand/in.png" alt="fond" /></a><br />
</div>
</body></html>
Le CSS
body {background:no-repeat url(johngoirand/accueil-site01.png);background-size:100% 100%;} /* contain cover */
html{height: 100%;}
div.bouton {position : fixed;top : 150px;left : 10px;z-index : 50;}
div.reseaux {position : fixed;top : 300px;right : 120px;z-index : 50;}
.bouton img:hover {box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7), -1px 2px 20px rgba(255, 255, 255, 0.6) inset; }
.reseaux img:hover {box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7),-1px 2px 20px rgba(255, 255, 255, 0.6) inset; }
@media screen and (max-width:1024px){
div.bouton {position : fixed;top : 150px;left : 10px;z-index : 50;}
div.reseaux {position : fixed;top : 300px;right : 40px;z-index : 50;}
}
@media (max-width:640px){body, element1, element2{width:auto;margin:0;padding:0;}
img,blockquote, pre, textarea, input, iframe, object, embed, video{max-width:100%;}
img{height:auto;width:auto;box-sizing:border-box;}
div.bouton {position : fixed;top : 150px;left : 10px;z-index : 50;}
div.reseaux {position : fixed;top : 300px;right : 10px;z-index : 50;}
element1, element2{float:none;width:auto;}
.hide_mobile{display:none !important;}
body:before{content:"Version mobile du site";display:block;color:#999999;text-align:center;font-style:italic;}
}
A ta disposition si besoins !
Modifié par Christele (18 Jun 2016 - 19:26)
