28173 sujets

CSS et mise en forme, CSS3

[Résolu] Image cliquable couvrant plus que sa zone

Bonjour,

Je suis en train de remodeler mon blog pour le rendre un peu plus conforme pour l'accessibilité, et j'en profite pour rajouter un footer.
J'ai prévu les emplacements pour les validations xhtml et css, mais j'ai un bug, uniquement sur FF (1.5), et non sur IE(6) pour une fois.
La zone cliquable des liens de validations ne correspond pas à la taille de l'image.
Du coup, le lien accessible dans le texte du footer n'est pas accessible, car il donne alors l'accès au lien de la validation xhtml.
J'essaye de trouver la solution, mais je commence un peu à tourner en rond, et surtout je finis par ne pas m'expliquer d'ou ca vient.

Voici l'adresse.
mon essai de blog

je vous remercie bien par avance de m'aider à identifier et corriger ce bug.

La feuille de style qui va avec :

#general {

	font-family: Verdana, Arial, Helvetica, sans-serif, monospace;
	background-color: #5A4070;
	color: #fff;
	background-position: center;
  /*background-image: url(../images/fondbg.jpg);*/
	background-repeat: repeat-y;
}

/* CONTENU---------------------------------------------------------------------- */

#container {
	background-color: #39006A;
	width: 780px;
	position: absolute;
  top: 0px;
	left: 50%;
	margin-left: -390px;
}

#header {
  position: relative;
  width: 780px;
  height: 150px;
  /*background-image: url(../images/header.jpg);*/
	background-color: #270048;
	background-repeat: no-repeat;
  background-position: center;
}

#navigation {
  position: absolute;
  top: 225px;
  left: 0;
  padding-left: 75px;
}

#content {
  position: relative;
	width: 445px;
  top: 0px;
	left: 325px;
}

#footer {
  width: 780px;
  min-height: 40px;
  position: relative;
  bottom: 0px;
	background-color: #270048/*8E6DAA*/;
	padding-top: 3px;
}

#mail {
  position: absolute;
  top: 0;
	left: 715px;
}

#quicknav {
  position: relative;
  width: 770px;
  height: 40px;
	text-align: right;
}

#quicknav h2 {
  display: block;
}

#quicknav strong {
  font-size: 15px;
  font-weight: bold;
}

#quicknav ul, #quicknav li, #quicknav p {
  display: inline;
}

p.nav {
  text-align: right;
}

#validxhtml {
  position: absolute;
  top: 5px;
  right: 100px;
}

#validcss {
  position: absolute;
  top: 5px;
  right: 10px;
}

/* LIENS------------------------------------------------------------------------ */
a {
	color: #fff;
	text-align: left;
  font-size: 11px;
	font-weight: normal;
}

a:link {
	text-decoration: none;
}

a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:active {
	text-decoration: underline;
}

a:link.foot {
	text-decoration: none;
  font-size: 9px;
  font-weight: bold;
  color: #97C;
}

a:visited.foot {
	text-decoration: none;
  font-size: 9px;
  font-weight: bold;
  color: #97C;
}

a:hover.foot {
	text-decoration: underline;
  font-size: 9px;
  font-weight: bold;
  color: #97C;
}

a:active.foot {
	text-decoration: underline;
  font-size: 9px;
  font-weight: bold;
  color: #97C;
}

a img {
  border: 0;	
}

/* STYLES----------------------------------------------------------------------- */

h1, h2, h3, h4 {
  color: #FDCA00;
  text-align: left;
  font-size: 18px;

} 

h1, h2 {
  display: none;
}

h3 {
	font-weight: normal;
	margin-top: 15px;
	margin-bottom: 0px;
	text-align: right;
  clear: both;	
}

h4 {
  margin-top: 15px;
	margin-bottom: 0px;
  clear: both;	
}

p {
  font-size: 11px;
  color: #fff;
  text-align: left;
  margin-top: 3px;
	margin-bottom: 20px;
}

p.texte {
  font-size: 12px;
  color: #fff;
  text-align: justify;
  margin-top: 15px;
	margin-bottom: 25px;
	line-height: 18px;
  clear: both;	
}

p.date {
  font-size: 9px;
  text-align: right;
  border-bottom:1px solid #FDCA00;
  clear: both;		
}

p.footer {
  display: block;
  width: 460px;
  height: 20px;
  font-size: 9px;
  font-weight: normal;
  color: #97C;
  text-align: left;
  margin-left: 20px;
}

p.menuactif {
  color: #FDCA00;
  margin-bottom: 0;
  font-weight: bold;
}

dt, dl, dd, ul, li {
  list-style-type: none;
  margin: 0 0 0 0;
  padding: 0;
  white-space: nowrap;
}

img {
	margin-bottom: 20px;
	float: right;
	clear: both;
}

strong {
  color: #FDCA00;
  font-weight: normal;
}

strong.text {
  color: #FDCA00;
  font-weight: normal;
  font-size: 12px;
  text-decoration: underline;
}

Modifié par Mikachu (31 May 2006 - 18:23)
Bonsoir,
En effet assez bizarre d'auatnt plus que la position:absolute des liens
génère un bôite de type block mais s'adaptant à son contenu donc a la taille de tes images (que tu dois definir pour des raisons d'accessibilité).

Mais il se trouve que tu as déclaré dans ta css:

img {
	margin-bottom: 20px;
	float: right;
	clear: both;
}


Ce qui fait pour des raisons que je ne saurais t'expliquer que tes lien englobant tes image prennent toute la largeur du conteneur parent et une hauteur excessive due au margin-bottom: 20px.

Si tu souhaites ques tes images s'alignent verticalement mieux vaut leur appliquer un display:bock.
Si tu conserve cette déclaration alors tu devra définir la heuteur et la largeur de tes liens correspondant a la taille de l'image.
Salut,

Merci, tu as attiré mon attention sur le problème, le float !
J'ai pas l'habitude d'utiliser du float, mais j'ai du le faire pour que mes images soient alignées à droite dans mon contenu au lieu de la gauche.
Il m'a suffit de rajouter 
#footer img {
  float: none;
}

et maintenant ca marque niquel !

Merci encore Smiley ravi
Ok mais tu aura encore la marge qui active le lien sous les images donc :
#footer img {
  float: none;
  margin: 0;
}

Modifié par Hermann (31 May 2006 - 18:36)
Sujet clos
Aller à