Forums Développement Multimédia

Aller au contenu

Images avec lien

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...



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

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

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP