Mise en page problematique d'une image-lien
Bonjour à tous,
Alors voici mon probleme, sur mon site j'ai une image carrée, coupée en 9 dans un tableau (3 cases sur 3) dont certaines parties doivent etre des liens. Or depuis que j'ai mis ces images dans une balise<a> une horrible bordure bleue est apparue autour des parties concernées et mon image est completement disloquée.
Quelqu'un peut il m'aider à arranger ça avec des css?
merci
Max
--
Voir hyperion puis mourir.....
Gare au Gritche.
Alors voici mon probleme, sur mon site j'ai une image carrée, coupée en 9 dans un tableau (3 cases sur 3) dont certaines parties doivent etre des liens. Or depuis que j'ai mis ces images dans une balise<a> une horrible bordure bleue est apparue autour des parties concernées et mon image est completement disloquée.
Quelqu'un peut il m'aider à arranger ça avec des css?
merci
Max
--
Voir hyperion puis mourir.....
Gare au Gritche.
Configuration: Windows XP Firefox 2.0.0.11
10 réponses
-
regarde tes images, édite et tu mets "border=0" dans ton code
-
ContributeurBonjour,
C'est un problème fréquent.
C'est même un comportement normal. Les liens sont mis en valeur de cette manière.
Il te suffit d'ajouter dans la <head> de ta page entre <style type="text/css"> et </style> un peu de styleimg { border : 0; } ou img { border : none; }
-- -
Un gros merci les bordures bleues ont disparu mais il subsite un petit probleme de decoupe d'images. Il y a un espace irregulier (entre 2 et 3 px) entre ma 2eme et ma 3eme ligne malgre que chacun de mes morceaux d'images aient une width et une height de 100% de leur cellule respective. Est-ce possible de faire deborder une cellule sur une autre pour que l'image soit continue?
Merci
Max -
tu as laissé trainer un espace dans une cellule qui décale tout...
-
Comment est-ce possible qu'il reste un espace si mes images ont une largeur et une hauteur de 100%?
-
Contributeur
<a>{espace}<img />{espace}</a>Voilà 2 espaces.
Sans voir, difficile à dire.
-- -
bonjour,
voilà mon code, si quelqu'un voit mon erreur.....
Ladite image est dans la div.orange
<!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" xml:lang="en" lang="en">
<link rel="stylesheet" type="text/css" title="stylegeneral" href="styles/style.css" />
<head>
<title>plan</title>
<style type="text/css">
img
{
border : none;
}
td
{
cellpadding:0;
cellspacing:0;
}
</style>
</head>
<body>
<ul class="menu" >
<li><a class="brown" href="index.html"> index</a></li>
<li><a class="brown" href="plan.html">accueil</a></li>
<li><a class="brown" href="present.html">presentation</a></li>
<li><a class="brown" href="mp3.html"> barrissements</a></li>
<li><a class="brown" href="img.html"> kroutes</a></li>
<li><a class="brown" href="agenda.html">agenda</a></li>
<li><a class="brown" href="archives.html">archives</a></li>
<li><a class="brown" href="liens.html">liens</a></li>
<li><a class="brown" href="contacts.html">contacts</a></li>
</ul>
<div class="orange">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td><a class="plan" href="agenda.html"><img width="100%" height="100%" src="images/i01.bmp" alt="i1" title="agenda"/></a></td>
<td><a class="plan" href="present.html"><img width="100%" height="100%" src="images/i02.bmp" alt="i2" title="presentation"/></a></td>
<td><a class="plan" href="mp3.html"><img width="100%" height="100%" src="images/i03.bmp" alt="i3" title="mp3"/></a></td>
</tr>
<tr>
<td><img width="100%" height="100%" src="images/i04.bmp" alt="i4" title=""/></td>
<td><img width="100%" height="100%" src="images/i05.bmp" alt="i5" title=""/></td>
<td><a class="plan" href="img.html"><img id="six" width="100%" height="100%" src="images/i06.bmp" alt="i6" title="gallerie"/></a></td>
</tr>
<tr>
<td><a class="plan" href="archives.html"><img width="100%" height="100%" src="images/i07.bmp" alt="i7" title="archives"/></a></td>
<td><img width="100%" height="100%" src="images/i08.bmp" alt="i8" title=""/></td>
<td><a class="plan" href="liens.html"><img width="100%" height="100%" src="images/i09.bmp" alt="i9" title="liens"/></a></td>
</tr>
</table>
</div>
</body>
</html>
Merci
Max -
je pense que tu as un probleme de format d'images qui ne doivent pas être les mêmes... regarde dans photoshop
car manifestement si on numérote de gauche à droite tes 3 lignes sur 3 colonnes les photos :
les photos 4,5 et 8 ne sont pas au même format alors comme tu as codé en 100 pourcent cela doit te faire des espaces
autour de ces photos... -
ContributeurIl est aussi fort probable que tes choix de % n'arrange rien.
Tu devrais plutôt essayer d'indiquer les dimensions exactes.
Sinon, tout s'adapte à la taille de la fenêtre.
Ettd { cellpadding:0; cellspacing:0; }ne correspond à rien en CSS.
++
http://www.yoyodesign.org/doc/w3c/css2/propidx.html
-- -
Autant pour moi, je l'ai supprimé depuis.
Quand au choix des tailles en % je cherche justement à ce que mes pages s'adaptent mais pour cette page precise je pourrais effectivement le faire en PX.
Je vais essayer...
Merci
Max
