Bonjour,
Lors de zoom les bords des images se coupent (cela se voit notamment avec l'image du fax).
Je ne vois pas comment résoudre ce problème.
C'est la première fois que je code, donc si vous voyez qqch de mal fait je serai ravi que vous me le signaliez.
Merci de votre aide
Cordialement
Wolf Leon
Voici le code HTML5 :
Le code CSS:
les images en questions :
Lors de zoom les bords des images se coupent (cela se voit notamment avec l'image du fax).
Je ne vois pas comment résoudre ce problème.
C'est la première fois que je code, donc si vous voyez qqch de mal fait je serai ravi que vous me le signaliez.
Merci de votre aide
Cordialement
Wolf Leon
Voici le code HTML5 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="style.css" />
<title>Mon super site</title>
</head>
<body>
<div id="bloc_page">
<header>
<div id="titre_principal">
<h1>Mon super site</h1>
</div>
<nav>
<div id="langue">
<ul>
<li><a href="accueil.html"><img src="france.png" alt="langue_francais" style="width:30px; border:none;" /> </a> </li>
<li><a href="accueil_en.html"><img src="anglais.png" alt="langue_anglais" style="width:28px; border:none;" /> </a></li>
</ul>
</div>
<div id="menu">
<ul>
<li><a href="#">Accueil</a> </li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">dolor sit</a></li>
<li><a href="#">amet consectetur</a></li>
</ul>
</div>
</nav>
</header>
<section>
<h2>
Lorem ispum dolor
</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Praesent fringilla odio in purus pretium fringilla</li>
<li>Etiam eget eros nibh. Duis maximus arcu at neque varius imperdie</li>
</ul>
<h2>
Contact
</h2>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li><img src="tel.png" alt="numéro_de_téléphone" class="image_tel"/> +33 610203010</li>
<li><img src="fax2.png" alt="numéro_de_fax" class ="image_fax"/> 06 7612123423</li>
<li><img src="email2.png" alt="adresse_email" class ="image_email "/> </li>
</ul>
<h2>
</section>
<footer>
</footer>
</div>
</body>
</html>
Le code CSS:
/* Elements principaux de la page */
body{
background-color: white;
font-family: Arial, 'Times New Roman', sans-serif ;
color: #071476;
}
ul
{
list-style-type: none;
}
section h1, footer h1
{
font-weight: normal;
text-transform: uppercase;
}
/* Header */
header
{
margin-left: -0.5em;
margin-top: -0.5em;
margin-right: -0.5em;
background-color: #071476;
color: white ;
height: 8em;
}
#titre_principal
{
float: left;
display: inline-block;
}
header h1
{
font-size: 2.5em;
font-weight: normal;
display: inline-block;
margin-bottom: 0px;
margin-left: 15px;
min-width: 700px;
}
header h2
{
font-size: 1.1em;
margin-top: 0px;
font-weight: normal;
margin-left: 20px;
}
/* Navigation */
nav
{
display: inline-block;
text-align: right;
text-align: bottom;
min-width: 700px;
position: absolute;
right: 0px;
}
nav #langue ul
{
list-style-type: none;
margin-top: 1em;
}
nav #menu ul
{
list-style-type: none;
margin-top: 3em;
}
nav li
{
display: inline-block;
margin-right: 15px;
}
nav a
{
font-size: 1.3em;
color: white;
padding-bottom: 3px;
text-decoration: none;
}
nav a:hover
{
border-bottom: 3px solid white;
}
/* Body*/
section
{
margin-left: 15em;
margin-top: 10em;
z-index: 10;
}
#sidebar{
position:absolute;
top: 10.5em;
left: 1.5em;
}
p
{
text-align: justify;
max-width: 50em
}
.image_tel
{
max-width: 20px;
min-width: 10px;
}
.image_fax
{
max-width: 20px;
min-width: 10px;
}
.image_email
{
max-width: 20px;
min-width: 10px;
}
les images en questions :