Bonjour à tous,
je suis nouveau sur ce forum et je créé mon premier site web. Jusque là je n'avais pas eu de problème, ou alors j'avais réussi à les résoudre, mais là l'affaire se corse
.
Je vous explique : j'ai fait en sorte que quand la souris survole une image (.png), celle-ci se transforme en une autre. Le problème vient du fait que l'image de backround se déforme légèrement quand on survole l'image.
Je vous envois mon code complet (html et css), en espérant que vous pourrez me dire d'où vient mon erreur
.
Je vous remercie d'avance.
PS : je me doute bien que mon code comporte de nombreuses failles, alors n'hésitez pas à les relever
je suis nouveau sur ce forum et je créé mon premier site web. Jusque là je n'avais pas eu de problème, ou alors j'avais réussi à les résoudre, mais là l'affaire se corse
. Je vous explique : j'ai fait en sorte que quand la souris survole une image (.png), celle-ci se transforme en une autre. Le problème vient du fait que l'image de backround se déforme légèrement quand on survole l'image.
Je vous envois mon code complet (html et css), en espérant que vous pourrez me dire d'où vient mon erreur
.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css_1.css" type="text/css" media="screen" />
<title>Jean-Pierre Le Bars Accueil</title>
</head>
<body>
<div id="bloc_page">
<header>
<div id="header">
<img src="ressources/header_fond.jpg" alt="en-tête" id="header" />
</div>
</div>
<nav>
<div id="entete">
<a href="#">PEINTURES </a></li>
<img src='ressources/separateur.gif'class="separateur">
<a href="#">PHOTOGRAPHIES</a></li>
<img src='ressources/separateur.gif'class="separateur">
<a href="#">BIOGRAPHIE</a></li>
<img src='ressources/separateur.gif'class="separateur">
<a href="#">ECRITS</a></li>
<img src='ressources/separateur.gif'class="separateur">
<a href="#">CONTACT</a></li>
</div>
</nav>
<img src='ressources/titre_milieu.png' class="titre_milieu">
<a href="#"><img src='ressources/peintre.png' class="peintre"></a>
<a href="#"><img src='ressources/photographe.png' class="photographe" ></a>
<footer>
<h5 class="footer_text">web master Elouan Le Bars Contact <a href="mailto:jp.lebars@free.fr">jp.lebars@free.fr</a> </h5>
</footer>
</body>
</html>body
{
margin:0;
padding:0;
background: url("ressources/image_fond_2.jpg") fixed no-repeat center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@font-face {
font-family: 'NotCourierSansRegular';
src: url('NotCourierSans-webfont.eot');
src: url('NotCourierSans-webfont.eot?#iefix') format('embedded-opentype'),
url('NotCourierSans-webfont.woff') format('woff'),
url('NotCourierSans-webfont.ttf') format('truetype'),
url('NotCourierSans-webfont.svg#NotCourierSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'NotCourierSansBold';
src: url('NotCourierSans-Bold-webfont.eot');
src: url('NotCourierSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('NotCourierSans-Bold-webfont.woff') format('woff'),
url('NotCourierSans-Bold-webfont.ttf') format('truetype'),
url('NotCourierSans-Bold-webfont.svg#NotCourierSansBold') format('svg');
font-weight: normal;
font-style: normal;
}
h5
{
font-size: 10px;
font-family: NotCourierSansRegular;
font-weight: normal;
color: black;
position: absolute;
bottom: -15px;
left: 25px;
}
a
{
display: inline-block;
text-decoration: none;
font-weight: normal;
font-style: normal;
font-family: NotCourierSansRegular;
color: white;
}
a:hover
{
text-decoration: none;
font-style: normal;
font-weight: normal;
font-family: NotCourierSansRegular;
color: gray;
}
.footer_text
{
position: absolute;
bottom: 0px;
z-index: 2;
}
#header
{
position: relative; left:0;top:0; width:100%; height:40px;
}
#entete
{
font-size: 20px;
position: absolute; top:-1%; left: 33px;
letter-spacing: 9px;
}
.separateur
{
position: relative;
top: 11px;
}
.titre_milieu
{
position: relative;
top: 375px;
left: 218px;
}
.photographe
{
position: absolute;
top: 525px;
left: 641px;
}
.photographe:hover
{
background-image: url('ressources/photographe_gris.png');
}
.peintre
{
position: absolute;
top: 575px;
left: 733px;
}
.peintre:hover
{
background-image: url('ressources/peintre_gris.png');
}
Je vous remercie d'avance.
PS : je me doute bien que mon code comporte de nombreuses failles, alors n'hésitez pas à les relever
Tout est déformé en 1024x768 ! Je travaille en 1280x1024. Comment puis rendre les dimensiosn normales pour les différentes résoltuons existante ? Merci d'avance.![https://dl.dropbox.com/u/78996789/pages/ressources/image_fond_2.jpg[/url]](https://dl.dropbox.com/u/78996789/pages/ressources/image_fond_2.jpg</a>){kind=link}
![https://dl.dropbox.com/u/78996789/pages/ressources/peintre_gris.png[/url]](https://dl.dropbox.com/u/78996789/pages/ressources/peintre_gris.png</a>){kind=link}