Bonjour tout le monde! Et bien voilà, j'ai fais la page principale de mon premier site web, mais il y a un petit problème. Il y a des petits tirets noires qui s'affichent entre les cases. En fait c'est un background que j'ai utilisé pour donner à mes cases un effet d'ombre. Mais je ne veux pas que ce background dépasse les cases.
Je ne sais pas comment faire. Est-ce que vous aurez une idée?
Merci d'avance de m'aider, je sais que je suis pas fameuse en info. ^^''
Sur l'image joint vous pouvez voir les tirets noirs (encerclés en rouge).
Voici le code complet de la page:
CODE
<!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" xml:lang="fr" >
<head>
<title>Dream Chanlex</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
scrollbar-arrow-color:#ff9801;
scrollbar-track-color:#c21614;
scrollbar-face-color:#c21614;
scrollbar-highlight-color:#ff9801;
scrollbar-3dlight-color:#c21614;
scrollbar-darkshadow-color:#c21614;
scrollbar-shadow-color:#ff9801
}
</style>
<style type="text/css">
body
{
width:800px;
margin:auto;
margin-top:20px;
margin-bottom:20px;
background:url('http://img214.imageshack.us/img214/8721/generalbackkb2.jpg'
no-repeat fixed right bottom
;
}
/* L'en-tête */
#en_tete
{
width:800px;
height:270px;
background-image:url("http://img151.imageshack.us/img151/9682/bunnydw7.jpg"
;
background-repeat:no-repeat;
margin-bottom:10px;
}
/* Le menu */
#menu
{
float:left;
width:140px;
}
.element_menu
{
background-image:url("http://img155.imageshack.us/img155/7510/milieubacklp3.jpg"
;
border:0px solid black;
margin-bottom:10px;
}
.element_pou
{
background-image:url("http://img155.imageshack.us/img155/7510/milieubacklp3.jpg"
;
border:0px solid black;
margin-bottom:10px;
}
/* Quelques effets sur les menus */
.element_menu h3
{
color:#B3B3B3;
font-family:Arial, "Arial Black", "Verdana", Times, serif;
text-align:center;
}
.element_menu ul
{
list-style-image:url("http://img214.imageshack.us/img214/9141/pucefqb2.gif"
;
padding:0px;
padding-left:25px;
margin:5px;
margin-bottom:0px;
}
.element_pou ul
{
list-style-image:url("http://img214.imageshack.us/img214/9141/pucefqb2.gif"
;
padding:0px;
padding-left:25px;
margin:5px;
margin-bottom:200px;
}
.element_menu a
{
color:#000000;
}
.element_menu a:hover
{
color:black;
}
/* Le corps de la page */
#corps
{
width:625px;
height:680px;
margin-left:170px;
margin-bottom:50px;
padding:0px;
color:#B3B3B3;
background-image:url("http://img214.imageshack.us/img214/1845/barre3principalefg8.jpg"
;
border:0px solid black;
}
#corps h1
{
color:#B3B3B3;
text-align:center;
font-family:Arial, "Arial Black", "Verdana", "Forte";
}
#corps h2
{
background-image:url("titre.png"
;
background-repeat:no-repeat;
padding-left:25px;
color:#B3B3B3;
text-align:left;10
}
/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */
#pied_de_page
{
width:625px;
height:70px;
text-align:center;
margin-left:170px;
margin-bottom:80px;
border:0px solid black;
}
</style>
</head>
<body link="#8B8B8B" vlink="#ACD8F7" alink="#B3B3B3">
<div id="en_tete">
<img src="http://img151.imageshack.us/img151/9682/bunnydw7.jpg">
</div>
<div id="menu">
<div class="element_pou">
<img src="http://img155.imageshack.us/img155/7031/activitesel3.jpg">
<ul><font face="Tahoma">
<li> <a href="http://dreamchanlex.ifrance.com/test.htm" target="hublot"><span style="text-decoration: none">Coucou</span></a></li>
<li> <a href="page2.html" target="hublot"><span style="text-decoration: none">Lien</span></a></li>
<li> <a href="page3.html" target="hublot"><span style="text-decoration: none">Lien</span></a></li>
</ul></font>
<img src="http://img155.imageshack.us/img155/6905/finbarrezs2.jpg">
</div>
<div class="element_menu">
<img src="http://img155.imageshack.us/img155/8530/liensutilesvo4.jpg">
<ul><font face="Tahoma">
<li> <a href="page4.html" target="hublot"><span style="text-decoration: none">Lien</span></a></li>
<li> <a href="page5.html" target="hublot"><span style="text-decoration: none">Lien</span></a></li>
<li> <a href="page6.html" target="hublot"><span style="text-decoration: none">Lien</span></a></li>
</ul></font>
<img src="http://img155.imageshack.us/img155/6905/finbarrezs2.jpg">
</div>
<div class="element_menu">
<img src="http://img155.imageshack.us/img155/594/2conseiljj4.jpg">
<ul><font face="Tahoma">
<li> <a href="page4.html" target="hublot"><span style="text-decoration: none">Lien</span></a></li>
<li> <a href="page5.html" target="hublot"><span style="text-decoration: none">Lien</span></a></li>
<li> <a href="page6.html" target="hublot"><span style="text-decoration: none">Lien</span></a></li>
</ul></font>
<img src="http://img155.imageshack.us/img155/6905/finbarrezs2.jpg">
</div>
</div>
<div id="corps">
<img src="http://img214.imageshack.us/img214/9641/barre1principalezk8.jpg">
<center>
<iframe src="http://dreamchanlex.ifrance.com/test.htm" name="hublot" width="605" height="600"
frameborder="0" framepadding="0" framespacing="0" SCROLLING=NO style="FILTER: chroma(color=#CC9966)" allowTransparency>
<p>Votre navigateur ne peut malheureusement pas afficher de cadre!</p>
</iframe></center>
<img src="http://img214.imageshack.us/img214/9928/barre2principalekw4.jpg">
</div>
<div id="pied_de_page">
<img src="http://img139.imageshack.us/img139/2706/barrefinsiteqd4.jpg">
</div>
</body>
</html>