J'ai un petit soucis, je suis en train de faire un site et j'ai une barre "menu". Celle-ci se compose d'une suite d'images avec un lien pour chacune. Le problème est que je voudrais que ces images soient collées les unes aux autres et, ce qui n'est pas le cas. Je ne vois comment faire avec le fichier css. Je vous joins le code de la page ainsi que le fichier css. Merci de votre aide.
Code de la page :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>COMMEDIAONLINE - Le site de l'Ecole Française d'Improvisation Théâtrale</title>
<link href="inc/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="content">
<div class="coulureg"><img src="images/common/coulure_gauche.png" /></div>
<div class="coulured"><img src="images/common/coulure_droite.png" /></div>
<div class="menu"><img src="images/menu/barreg.png" /><img src="images/menu/accueil1.png" />
<a href="http://nanyleclone.free.fr" title="Présentation"><img src="images/menu/pres0.png" onmouseover="this.src='images/menu/pres1.png';" onMouseOut="this.src='images/menu/pres0.png';" alt="présentation" border="0" /></a>
<a href="http://nanyleclone.free.fr" title="Ateliers"><img src="images/menu/atel0.png" onmouseover="this.src='images/menu/atel1.png';" onMouseOut="this.src='images/menu/atel0.png';" alt="Ateliers" border="0" /></a>
<a href="http://nanyleclone.free.fr" title="Spectacles"><img src="images/menu/show0.png" onmouseover="this.src='images/menu/show1.png';" onMouseOut="this.src='images/menu/show0.png';" alt="Spectacles" border="0" /></a>
<a href="http://nanyleclone.free.fr" title="Entreprises"><img src="images/menu/soc0.png" onmouseover="this.src='images/menu/soc1.png';" onMouseOut="this.src='images/menu/soc0.png';" alt="Entreprises" border="0" /></a>
<a href="http://nanyleclone.free.fr" title="Amis"><img src="images/menu/amis0.png" onmouseover="this.src='images/menu/amis1.png';" onMouseOut="this.src='images/menu/amis0.png';" alt="Nos Amis" border="0" /></a>
<a href="http://nanyleclone.free.fr" title="Contact"><img src="images/menu/cont0.png" onmouseover="this.src='images/menu/cont1.png';" onMouseOut="this.src='images/menu/cont0.png';" alt="Contact" border="0" /></a>
<img src="images/menu/barred.png" /></div>
<div class="title"><img src="images/common/titre_actus.png" border="0" /><br/>
<table class="tableactus">
<tr>
<td width="50px"><img src="images/common/colorsnews.png" border="0" /></td><td><a href="http://nanyleclone.free.fr" style="display:block; width:100%; height:100%; text-decoration:none;" ><span class="actus">bla bla bla proutprout</span></a><a href="http://nanyleclone.free.fr" style="text-decoration:none"><span class="like">plop</span></a>
</td>
</tr>
</table>
<table class="margintableactus">
<tr>
<td width="50px"><img src="images/common/colorsnews.png" border="0" /></td><td><a href="http://nanyleclone.free.fr" style="display:block; width:100%; height:100%; text-decoration:none;" ><span class="actus">bla bla bla proutprout</span></a><a href="http://nanyleclone.free.fr" style="text-decoration:none"><span class="like">plop</span></a>
</td>
</tr>
</table>
<table class="margintableactus">
<tr>
<td width="50px"><img src="images/common/colorsnews.png" border="0" /></td><td><a href="http://nanyleclone.free.fr" style="display:block; width:100%; height:100%; text-decoration:none;" ><span class="actus">bla bla bla proutprout</span></a><a href="http://nanyleclone.free.fr" style="text-decoration:none"><span class="like">plop</span></a>
</td>
</tr>
</table>
<div class="oldactus">Anciennes actus</div>
</div>
<div class="title"><img src="images/common/titre_news.png" border="0" /><br/>
<table class="tablenews">
<tr>
<td width="25px"><img src="images/common/colorsactus.png" border="0" /></td><td><a href="http://nanyleclone.free.fr" style="display:block; width:100%; height:100%; text-decoration:none;" ><span class="news">bla bla bla proutprout</span></a><a href="http://nanyleclone.free.fr" style="text-decoration:none"><span class="like">plop</span></a>
</td>
</tr>
</table>
<table class="margintablenews">
<tr>
<td width="25px"><img src="images/common/colorsactus.png" border="0" /></td><td><a href="http://nanyleclone.free.fr" style="display:block; width:100%; height:100%; text-decoration:none;" ><span class="news">bla bla bla proutprout</span></a><a href="http://nanyleclone.free.fr" style="text-decoration:none"><span class="like">plop</span></a>
</td>
</tr>
</table>
<table class="margintablenews">
<tr>
<td width="25px"><img src="images/common/colorsactus.png" border="0" /></td><td><a href="http://nanyleclone.free.fr" style="display:block; width:100%; height:100%; text-decoration:none;" ><span class="news">bla bla bla proutprout</span></a><a href="http://nanyleclone.free.fr" style="tex</div></
none"><span class="like">plop</span></a>
</td>
</tr>
</table>
<table class="margintablenews">
<tr>
<td width="25px"><img src="images/common/colorsactus.png" border="0" /></td><td><a href="http://nanyleclone.free.fr" style="display:block; width:100%; height:100%; text-decoration:none;" ><span class="news">bla bla bla proutprout</span></a><a href="http://nanyleclone.free.fr" style="tex</div></
none"><span class="like">plop</span></a>
</td>
</tr>
</table>
<table class="margintablenews">
<tr>
<td width="25px"><img src="images/common/colorsactus.png" border="0" /></td><td><a href="http://nanyleclone.free.fr" style="display:block; width:100%; height:100%; text-decoration:none;" ><span class="news">bla bla bla proutprout</span></a><a href="http://nanyleclone.free.fr" style="tex</div></
none"><span class="like">plop</span></a>
</td>
</tr>
</table>
<div class="oldnews">Anciennes news</div>
</div></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>COMMEDIAONLINE - Le site de l'Ecole Française d'Improvisation Théâtrale</title>
<link href="inc/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="content">
<div class="coulureg"><img src="images/common/coulure_gauche.png" /></div>
<div class="coulured"><img src="images/common/coulure_droite.png" /></div>
<div class="menu"><img src="images/menu/barreg.png" /><img src="images/menu/accueil1.png" />
<a href="http://nanyleclone.free.fr" title="Présentation"><img src="images/menu/pres0.png" onmouseover="this.src='images/menu/pres1.png';" onMouseOut="this.src='images/menu/pres0.png';" alt="présentation" border="0" /></a>
<a href="http://nanyleclone.free.fr" title="Ateliers"><img src="images/menu/atel0.png" onmouseover="this.src='images/menu/atel1.png';" onMouseOut="this.src='images/menu/atel0.png';" alt="Ateliers" border="0" /></a>
<a href="http://nanyleclone.free.fr" title="Spectacles"><img src="images/menu/show0.png" onmouseover="this.src='images/menu/show1.png';" onMouseOut="this.src='images/menu/show0.png';" alt="Spectacles" border="0" /></a>
<a href="http://nanyleclone.free.fr" title="Entreprises"><img src="images/menu/soc0.png" onmouseover="this.src='images/menu/soc1.png';" onMouseOut="this.src='images/menu/soc0.png';" alt="Entreprises" border="0" /></a>
<a href="http://nanyleclone.free.fr" title="Amis"><img src="images/menu/amis0.png" onmouseover="this.src='images/menu/amis1.png';" onMouseOut="this.src='images/menu/amis0.png';" alt="Nos Amis" border="0" /></a>
<a href="http://nanyleclone.free.fr" title="Contact"><img src="images/menu/cont0.png" onmouseover="this.src='images/menu/cont1.png';" onMouseOut="this.src='images/menu/cont0.png';" alt="Contact" border="0" /></a>
<img src="images/menu/barred.png" /></div>
<div class="title"><img src="images/common/titre_actus.png" border="0" /><br/>
<table class="tableactus">
<tr>
<td width="50px"><img src="images/common/colorsnews.png" border="0" /></td><td><a href="http://nanyleclone.free.fr" style="display:block; width:100%; height:100%; text-decoration:none;" ><span class="actus">bla bla bla proutprout</span></a><a href="http://nanyleclone.free.fr" style="text-decoration:none"><span class="like">plop</span></a>
</td>
</tr>
</table>
<table class="margintableactus">
<tr>
<td width="50px"><img src="images/common/colorsnews.png" border="0" /></td><td><a href="http://nanyleclone.free.fr" style="display:block; width:100%; height:100%; text-decoration:none;" ><span class="actus">bla bla bla proutprout</span></a><a href="http://nanyleclone.free.fr" style="text-decoration:none"><span class="like">plop</span></a>
</td>
</tr>
</table>
<table class="margintableactus">
<tr>
<td width="50px"><img src="images/common/colorsnews.png" border="0" /></td><td><a href="http://nanyleclone.free.fr" style="display:block; width:100%; height:100%; text-decoration:none;" ><span class="actus">bla bla bla proutprout</span></a><a href="http://nanyleclone.free.fr" style="text-decoration:none"><span class="like">plop</span></a>
</td>
</tr>
</table>
<div class="oldactus">Anciennes actus</div>
</div>
<div class="title"><img src="images/common/titre_news.png" border="0" /><br/>
<table class="tablenews">
<tr>
<td width="25px"><img src="images/common/colorsactus.png" border="0" /></td><td><a href="http://nanyleclone.free.fr" style="display:block; width:100%; height:100%; text-decoration:none;" ><span class="news">bla bla bla proutprout</span></a><a href="http://nanyleclone.free.fr" style="text-decoration:none"><span class="like">plop</span></a>
</td>
</tr>
</table>
<table class="margintablenews">
<tr>
<td width="25px"><img src="images/common/colorsactus.png" border="0" /></td><td><a href="http://nanyleclone.free.fr" style="display:block; width:100%; height:100%; text-decoration:none;" ><span class="news">bla bla bla proutprout</span></a><a href="http://nanyleclone.free.fr" style="text-decoration:none"><span class="like">plop</span></a>
</td>
</tr>
</table>
<table class="margintablenews">
<tr>
<td width="25px"><img src="images/common/colorsactus.png" border="0" /></td><td><a href="http://nanyleclone.free.fr" style="display:block; width:100%; height:100%; text-decoration:none;" ><span class="news">bla bla bla proutprout</span></a><a href="http://nanyleclone.free.fr" style="tex</div></
none"><span class="like">plop</span></a>
</td>
</tr>
</table>
<table class="margintablenews">
<tr>
<td width="25px"><img src="images/common/colorsactus.png" border="0" /></td><td><a href="http://nanyleclone.free.fr" style="display:block; width:100%; height:100%; text-decoration:none;" ><span class="news">bla bla bla proutprout</span></a><a href="http://nanyleclone.free.fr" style="tex</div></
none"><span class="like">plop</span></a>
</td>
</tr>
</table>
<table class="margintablenews">
<tr>
<td width="25px"><img src="images/common/colorsactus.png" border="0" /></td><td><a href="http://nanyleclone.free.fr" style="display:block; width:100%; height:100%; text-decoration:none;" ><span class="news">bla bla bla proutprout</span></a><a href="http://nanyleclone.free.fr" style="tex</div></
none"><span class="like">plop</span></a>
</td>
</tr>
</table>
<div class="oldnews">Anciennes news</div>
</div></div>
</body>
</html>
Fichier css :
body {background-position:center;
background-image:url(../../images/common/bg_img.png);
background-attachment:fixed;
background-repeat:no-repeat;
}
img {margin:0;
padding:0;
}
a {margin:0;
padding:0;
}
td:hover {background-color: #c169de;
border: 1px;
}
.content {width: 980px;
margin: 0 auto;
padding-top: 0 auto;
text-align:center;
font-family: Verdana, Geneva, sans-serif;
font-size:larger;
}
.coulureg {width: 20px;
height:950px;
margin: 0 auto;
padding-top: -10px;
float:left;
}
.coulured {width: 20px;
height:950px;
margin: 0 auto;
padding-top: -10px;
float:right;
}
.menu {width: 940px;
margin: 0 auto;
padding-top: 0 auto;
text-align:center;
font-family: Verdana, Geneva, sans-serif;
font-size:larger;
}
.news {color: #9900cc;
font-family: "Arial Black", Gadget, sans-serif;
font-size:12px;
float:left;
}
.actus {color: #400080;
font-family: "Arial Black", Gadget, sans-serif;
font-size:14px;
float:left;
}
.like {text-align:right;
color: #dd98f5;
font-family: Arial Black, Gadget, sans-serif;
font-size:18px;
float:right;
}
.title {width: 800px;
margin: 0 auto;
padding-top: 0 auto;
text-align:left;
float:left;
}
.tablenews {align:left;
background-color:#ab3ad1;
border:0px;
width:800px;
height:25px;
vertical-align:middle;
line-height: 1;
}
.margintablenews {margin-top: 5px;
align:left;
background-color:#ab3ad1;
border:0px;
width:800px;
height:25px;
vertical-align:middle;
line-height: 1;
}
.tableactus {align:left;
background-color:#9900CC;
border:0px;
width:800px;
height:25px;
vertical-align:middle;
line-height: 1;
}
.margintableactus {margin-top: 5px;
align:left;
background-color:#9900CC;
border:0px;
width:800px;
height:25px;
vertical-align:middle;
line-height: 1;
}
.oldactus {text-align:right;
font-family: Verdana, Geneva, sans-serif;
font-style:italic;
font-size:12px;
font-weight:bold;
color:#400080;
}
.oldnews {text-align:right;
font-family: Verdana, Geneva, sans-serif;
font-style:italic;
font-size:12px;
font-weight:bold;
color:#9900cc;
}
background-image:url(../../images/common/bg_img.png);
background-attachment:fixed;
background-repeat:no-repeat;
}
img {margin:0;
padding:0;
}
a {margin:0;
padding:0;
}
td:hover {background-color: #c169de;
border: 1px;
}
.content {width: 980px;
margin: 0 auto;
padding-top: 0 auto;
text-align:center;
font-family: Verdana, Geneva, sans-serif;
font-size:larger;
}
.coulureg {width: 20px;
height:950px;
margin: 0 auto;
padding-top: -10px;
float:left;
}
.coulured {width: 20px;
height:950px;
margin: 0 auto;
padding-top: -10px;
float:right;
}
.menu {width: 940px;
margin: 0 auto;
padding-top: 0 auto;
text-align:center;
font-family: Verdana, Geneva, sans-serif;
font-size:larger;
}
.news {color: #9900cc;
font-family: "Arial Black", Gadget, sans-serif;
font-size:12px;
float:left;
}
.actus {color: #400080;
font-family: "Arial Black", Gadget, sans-serif;
font-size:14px;
float:left;
}
.like {text-align:right;
color: #dd98f5;
font-family: Arial Black, Gadget, sans-serif;
font-size:18px;
float:right;
}
.title {width: 800px;
margin: 0 auto;
padding-top: 0 auto;
text-align:left;
float:left;
}
.tablenews {align:left;
background-color:#ab3ad1;
border:0px;
width:800px;
height:25px;
vertical-align:middle;
line-height: 1;
}
.margintablenews {margin-top: 5px;
align:left;
background-color:#ab3ad1;
border:0px;
width:800px;
height:25px;
vertical-align:middle;
line-height: 1;
}
.tableactus {align:left;
background-color:#9900CC;
border:0px;
width:800px;
height:25px;
vertical-align:middle;
line-height: 1;
}
.margintableactus {margin-top: 5px;
align:left;
background-color:#9900CC;
border:0px;
width:800px;
height:25px;
vertical-align:middle;
line-height: 1;
}
.oldactus {text-align:right;
font-family: Verdana, Geneva, sans-serif;
font-style:italic;
font-size:12px;
font-weight:bold;
color:#400080;
}
.oldnews {text-align:right;
font-family: Verdana, Geneva, sans-serif;
font-style:italic;
font-size:12px;
font-weight:bold;
color:#9900cc;
}