28173 sujets

CSS et mise en forme, CSS3

Lien + display:block + IE

Bonjour, je rencontre un problème avec un lien.

voila ma structure


<p class="align_center">
  <a href="###">
    <span class="box_image">
      <img src="###.jpg" width="" height="" alt="" />
    </span>
    Titre<br />
    Texte texte texte
  </a>
</p>


et ma feuille de style :


span.box_image {
display:block;
width:100%;
height:100px;
margin:0;
padding:0;
text-align:center;
}


le problème étant le suivant :
Dans IE le lien n'est pas prit en compte sur l'image. enifn il n'est pas actif, rien ne se passe lors du click.
pourtant lorsque je passe la souris au dessus de l'image je lis bien l'adresse de la page de destination dans la status bar.

si je supprime le display:block; de la feuille de style tout fonctionne correctement. ce n'est donc pas une erreur de construction HTML, mais de compéhension CSS.

Qqun a déja été confronté à ce problème ?
Modifié par Viper82 (17 Apr 2007 - 11:47)
je crois que ça vient du fait qu'on ne pas mettre un élément block dans un lien qui est inline.
Logiquement, en déclarant ton lien comme block ca devrait régler le problème. Mais comme ie 6 n'est pas logique, et que j'ai déjà eu ce problème, je ne suis pas sure que ca marche !
hmmmmmmmmmmmm tiens j'ai pas tenté ça en effet, vais aller voir sk'il ce passe de ce coté...

Edit : Après vérification cela ne fonctionne pas, je suis allé un peu trop vite
Modifié par Viper82 (17 Apr 2007 - 11:48)
Je rouvre le sujet car en fait cela ne fonctionne pas

basiquement ce que je dois faire c'est afficher un lien block de taille fixe verticalement

contenant : une image, sous l'image un texte.

le problème est que la hauteur de la chose est conditionné par la hauteur de l'image.

hors, si une image est plus petit que les images standards, alors mon bloc est plus petit (les images ne peuvent pas être plus grandes que l'image standard)

je souhaite donc, dans mon lien, mettre un element entourant l'img afin de donner a cette élément une hauteur correspondant dans tous les cas à la taille de mon image par defaut.

et la je m'aperçoit que lorsque que je place un élément avec un display:block; dans un lien, dans IE, sur ce block, le lien n'est plus actif..., une idée sur comment rétablir ce lien de manière cliquable ?
pourquoi tu ne mets pas deux liens, un sur l'image un sur le texte, et tu définis ton liens sur l'image en display block et non plus l'image elle même ?
Salut,

Le seul problème que je vois, c'est celui du width mais pour éventuellement le régler, il faudrait en savoir un peu plus pour l'utilisation de cet affichage. (ou alors je n'ai pas tout compris !)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test4</title>
<style type="text/css">
*{margin: 0; padding: 0;}
#conteneur{
width: 200px;
margin: auto;
height: 200px;
border: 1px solid black;
}

a{
display: block;
height: 150px;
border: 1px solid red;
margin: 15px;
}

a span img{
display: block;
border: 0;
}
</style>
</head>
<body>	
<div id="conteneur">
	<a href="#" alt="" ><span><img src="image.jpg" /></span> texte</a>
</div>
</body>

Modifié par ghost (17 Apr 2007 - 13:41)
@Yahrou : c'est la solution que j'ai envisagé au final, je n'avais pas fait ca au préalable car je trouvais que ca allourdissait le truc

@ghost : le problème n'est pas un problème de largeur mais de hauteur
et de lien actif sur l'image
En gros, imaginons que dans un lien, tu dois afficher une image et un texte, jusque la, on est d'accord
tu dispose d'une base de X images qui peuvent avoir des dimensions variées.
J'utilise Typo3 ce qui me permet de générer à la volée des images pour les utilisé a divers endroits.
donc un utilisateur enregistre une fois ses images en taille réelle, et le gestionnaire les converti au besoins dans les dimension exacte.

Hors pour conserver les proportions, je me base sur une largeur fixe
d'ou le fait que le problème vienne de la hauteur, et pas de la largeur

Mes images n'ont pas toutes même dimension a la base, donc dans mon affichage non plus.

Hors ces liens sont mis a jour en ajax ce qui fait que le contenu évolue au fil du temps.

(fiou ca deviens complexe on dirait la)

Hors donc, dans mon lien, j'ai mon image qui n'aurat pas forcément la même hauteur, mais toujours la même largeur.

ce qui a pour effet de ne pas afficher le texte TOUJOURS a la même hauteur.

pour palier a ca, j'ai ajouté comme toi un span dans mon lien en display block.
d'autre part, tailler le lien en hauteur ne fonctionne pas, car je ne maitrise pas la longueur du texte a afficher Smiley cligne (c'eut été trop simple).

amis le fait d'ajouté un élément en display block, dans le lien, rend le lien inactif dans IE (sic) (inactif uniquement sur l'image). (en terme de rendu graphique cela fonctionne)

et donc, je cherchais une solution pour que ce lien soit actif sur l'image aussi...

hmmmmmmmmmmmm, je ne sais pas si j'ai été assez clair, mais en tout cas, la solution de yahrou, fonctionne.

si qqun a une option pour n'utiliser qu'un seul lien, je suis preneur quand même Smiley smile
Modifié par Viper82 (17 Apr 2007 - 18:20)
Normalement si tu fixes la largeur de ta boite contenant l'image et le texte à la largeur de l'image (qui, si j'ai bien compris est fixe), le texte reviendra seul à la ligne et tu n'auras plus besoin du display block...
Re,

Si j'ai tout bien capté (j'en doute Smiley biggol )
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test</title>
<style type="text/css">

*{margin: 0; padding: 0;}

#conteneur{
width: 200px;
margin: auto;
position: relative;
border: 1px solid black;   
}

a{
display: block;
overflow: hidden;
text-decoration: none;
color: #000;
margin: 15px;
}

a span img{
display: block;
padding-bottom: 200px;
border: 0;
}

a em{
width: 190px;
display: block;
position: absolute;
left: 50%;
margin-left: -95px;
bottom: 0;
font-size: 12px;
background: yellow;
border: 1px solid black;
}

</style>
</head>
<body>	
<div id="conteneur">
	<a href="#" alt="" ><span><img src="image.jpg" /></span><em>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer at ligula a lacus congue elementum. Morbi dapibus imperdiet mauris. Donec pellentesque, lorem vel rutrum fermentum, arcu arcu sollicitudin diam, at faucibus felis urna ut eros. Nunc eleifend enim eu orci.</em></a>

</div>
</body>
</html>
Sujet clos
Aller à