28173 sujets

CSS et mise en forme, CSS3

[Résolu]Position float et lien cliquable

Bonjour !

J'ai un p'tit soucis aveccette page . Visuellement, tout est ok. L'ennui c'est que dès que la partie de gauche (biographie et description de l'instrument est plus grande que la partie de droite, la zône de droite n'est plus cliquable : impossible d'envoyer un mail ou d'écouter l'extrait. Ce problème n'apparaît que sur Firefox.

Voici comment est construit les carrés bleu de présentation :


<div class="instrum">
 <div class="tete_instrum">
  <span>Cours: <?php echo $nom_instrument; ?> </span>
 </div>
		
 <div class="corps_instrum">
  <div class="instrum_droite">
   <?php echo "<img class=\"instrum\" src='i' alt=''/>";  ?>
   <span class="info_droite"> 
   <?php 
   if(empty($mp3))
  {
    echo "Il n'y a pas d'extrait audio pour cet instrument";
  } 
  else 
 {
   echo "<a href=\"mp3/$mp3\">Extrait audio</a>";
 } ?>
 </span>
 </div>
		
 <p>
  <?php if(empty($description))
  {
    echo "Il n'y a pas encore de description pour cet instrument";
  }
  else
  {
   echo nl2br($description);
  } ?>
</p>
		
<div class="spacer"></div>
</div>
</div>


et la css correspondante :


div.instrum 
{
		width:					70%;
		margin: 				0 auto;
}

div.tete_instrum
{
	font: 						bold 100% arial, Comic Sans MS;
	background: 				    #81b9dc;
	/*3EAAC1 = ancienne couleur*/
	margin: 					0 auto;
	padding: 				        0 0 0 .3em;
	border-right: 				       1px solid black;
	border-left:				        1px solid black;
	border-top:				       1px solid black;			
	text-align:					 left;
	paddimg-bottom:				   1em;
	height: 					 25px;

}

div.corps_instrum
{
	border: 					1px solid black;
	background: 				     #CBD6D4;
	margin: 					0 auto;
	padding: 				       .5em 0 .5em 0;
	width:						auto;	
	height: 					auto;
	min-height: 				      4em;
	_height:				       4em;
	/*hack pour IE qui ne reconnait pas les min-height. interprête height pr min-height
	les _ ne sont pas reconnu par les autres navigateurs. _height= non valide*/
}

img.instrum
{
	padding: 					.8em;
	display: 					block;
}

div.corps_instrum p
{
	padding: 					0 .6em 0 .6em;
	margin: 					0 auto;
	text-align: 				        justify;
	width: 						auto;
}

div.corps_instrum p, span.info_droite 
{
	font-size: 					13px;
	line-height: 				       200%;
}

span.info_droite 
{
	text-align: 				       left;
	display:					block;
	width: 						100px;
	padding: 					0 0 0 1em;
}

div.instrum_droite
{
	float: 						  right;
	/*padding-left: 			      .3em;*/
	margin: 					 0;
	/*padding-right:			     .2em;*/	
	text-align: 				        center;
	width:						150px;
}


Merci d'avance pour votre coup de pouce.
Modifié par p_tite_jo (08 Sep 2007 - 12:28)
Bonsoir tout le monde,

je me permets de relancer le sujet car je n'ai toujours pas trouvé de solution.

N'hésitez pas à me demander si il y a des infos qui vous manquent pour pouvoir me répondre..

A plus
Bonjour,

Tu as une interaction avec un style précédent dans ta css que tu as attribué à <p> que tu places en position: relative;
Tu dois pouvoir corriger le tir " l'arrache " en attribuant à div.corps_instrum p une position: static; mais bon Smiley biggol

Pour moi ça n'évitera pas d'éventuels problèmes ultérieurs ... Il vaudrait mieux restructurer correctement tes styles pour éviter ce genre de problème!
C'est à dire affecter à tes balises des styles précis pour chaque bloc plutôt que leur attribuer des valeurs génériques pour toute ta css au risque de devoir tenter de les annuler par la suite ...
Merci bien pour ta réponse.

Ta solution "à l'arrache" marche très bien, je te remercie.
J'ai compris mon erreur. Mais étant donné que ce site est terminé, je ne vais pas rechanger toute la css (la majorité du temps, j'ai attribué des valeurs génériques) mais je prends note pour le suivant.

Merci à tous pour vos réponses.

A bientôt
Sujet clos
Aller à