Forums Développement Multimédia

Aller au contenu

Images avec lien

Débuté par nanyleclone, Aug 04 2011 16:57 PM
CODE HTML CSS

2 réponses à ce sujet

#1 nanyleclone

    Ceinture Jaune

  • Members
  • PipPip
  • 24 messages

Posté 04 August 2011 - 16:57 PM

Bonjour,
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&eacutesentation" 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;
 }
 

#2 ikyo

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2442 messages

Posté 05 August 2011 - 07:54 AM

Bonjour Nicolas

Difficile de juger du placement de tes images dans la mesure ou elles sont en "relatif" (ce n'est pas une faute de ta part, mais très personnellement, j'ai encore du mal à résoudre du code directement dans la matrice :)

#3 nanyleclone

    Ceinture Jaune

  • Members
  • PipPip
  • 24 messages

Posté 05 August 2011 - 10:50 AM

Merci pour ta réponse, j'ai réglé le problème... Le fait de faire un retour à la ligne dans le code créait un espace...bizarre...
Retourner dans Mise en page (x)HTML / CSS

1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)