28172 sujets

CSS et mise en forme, CSS3

[resolu] Boutons suivants précedents à s'arracher les cheveux!

Bonjour, Bonsoir
je m'auto-souhaite la bienvenue sur votre forum -> je viens de m'inscrire veuillez m'excuser d'avance si je ne suis pas encore habitué au us et coutumes de votre espace.

le contexte :

j'essaie désespérément d'afficher 2 petites images sous un tableau de résultat : une pour le suivant et une autre pour le précédent avec au milieu une petite légende qui indique à quelle page je suis. (exemple <- 0/15 ->). Hum voyez ?

mes problèmes:

&#9577; Impossible d'afficher mes images sur internet explorer
&#9577; Sur firefox elles s'affichent mais lorsque je suis au début de page type (<- 0/15 ->) ou en fin de page type (<- 515/530 ->) il y a un petit décalage, en début ou en fin de page l'une des images disparait (précédent au début, suivant à la fin) Hum voyez ?



mon code PHP: 



echo '<div id="contenu">'
createTab(800,'Liste des interventions ',$tab); //mon tableau
echo'<div id="suivantPrecedent">';
if ($min>0)
{

	echo '<a  class="precedent" href=index.php?page=interventionsListe&max='.$min.'&min='.($min-($max-$min)).'></a>';//mon image précédent

}
echo $min.'/'.$max; //ma legende
if (($max+($max-$min))<=sizeof($_SESSION['listeInterventions']))
{

         echo '<a  class="suivant" href=index.php?page=interventionsListe&max='.($max+ ($max-$min)).'&min='.$max.'></a>'; // mon image suivant


}
echo'</div>'; 
echo'</div>';



mon code CSS

body
{
	background:white url("../img/background.png") repeat  center center; 
	margin-left:auto; 
	margin-right:auto; 
 }

#contenu 
{
	
	width:600px;
	height:400px;
	
	float : left;
	margin-left : 100px;
	margin-top : 50px;
}
a.precedent
{
	/* 
	background-repeat: no-repeat;
	background-position: center right;
	margin-right:352px;
	padding-left: 30px;
	*/
	display:block;

	background: url("../img/precedent.gif") no-repeat center; 
	
}
a.suivant
{
	 
	/*background-repeat: no-repeat;
	background-position: center right;
	margin-left:352px;
	padding-right: 30px;
	*/
	display:block;

	background: url("../img/suivant.gif") no-repeat center; 
	
}
#suivantPrecedent
{

	text-align:center;
}


voila merci pour la lecture .

Modifié par Su4p (25 Jan 2010 - 09:08)
Bonjour et bienvenue parmis nous,

On ne le répètera jamais assez :

Des images porteuses de contenues ou support de lien DOIVENT TOUJOURS se trouver dans le code HTML avec un attribut alt dûment remplis.
Autant pour moi alors.
merci pour cette réponse rapide et efficace,
j'essaie au maximum de ne pas laisser d'élément de design dans mon code et de tout gérer dans le fichier css mais apparemment cela n'est pas possible Smiley decu .
SI c'est possible, mais ce ne sont plus des éléments du design (que l'on appelle "purement décoratif") à partir du moment où ils portent un contenu.
Pour ton histoire de design, moi je ferais à la limite 
<a class="precedent">precedent</a>
<!-- ou peut être -->
<a class="precedent"><span>precedent</span></a>

Et en css je masquerais le texte précédent avec un technique de ton choix

/* hide texte par padding = height et overflow hidden*/
{
display: block;
height:40px;
padding-top: 40px;
overflow:hidden
}

/* ou encore hide texte par texte-indent:-1000em */

/* ou plus simplement display none sur le span si tu l'utilises*/
MoOx a écrit :
Et en css je masquerais le texte précédent avec un technique de ton choix

Ces techniques posent toutes des problèmes d'accessibilité dans certains cas de figure. Notamment si les images ne sont pas affichées (pour diverses raisons) tandis que le texte reste masqué par les CSS.

Une solution potable consiste à superposer l'image par dessus le texte:
<a href="..." class="precedent">
  <span class="deco"></span>
  <span class="text">Précédent</span>
</a>
En CSS, positionner span.deco en absolu, lui donner les dimensions voulues, une image de fond, etc. S'assurer qu'on a bien un texte pertinent dans span.text.

La solution de référence reste cependant:
<a href="..." class="precedent">
  <img src="..." alt="Précédent" />
</a>

Modifié par Florent V. (20 Jan 2010 - 12:24)
Sujet clos
Aller à