Mise en page problematique d'une image-lien
madmaskx
Messages postés
136
Statut
Membre
-
madmaskx Messages postés 136 Statut Membre -
madmaskx Messages postés 136 Statut Membre -
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
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
A voir également:
- Mise en page problematique d'une image-lien
- Supprimer une page word - Guide
- Lien url - Guide
- Créer un lien pour partager des photos - Guide
- Mise en forme conditionnelle excel - Guide
- Mise a jour chrome - Accueil - Applications & Logiciels
10 réponses
Bonjour,
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 style
--
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 style
img { 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
Merci
Max
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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
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...
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...
Il 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.
Et
++
http://www.yoyodesign.org/doc/w3c/css2/propidx.html
--
Tu devrais plutôt essayer d'indiquer les dimensions exactes.
Sinon, tout s'adapte à la taille de la fenêtre.
Et
td {
cellpadding:0;
cellspacing:0;
} ne correspond à rien en CSS.
++
http://www.yoyodesign.org/doc/w3c/css2/propidx.html
--
