Positionnement de DIV

Bonjour,

Voici mon problème :
http://www.dartag.fr/www//index.php?page=shop.browse&category_id=1&option=com_virtuemart&Itemid=1

Lorsque l'on survol un article la div change de background. Cependant elles se chevauchent. Je souhaiterais qu'elles occupent toute la largeur de la page et sans se superposer.

Voici mon code :

Le CSS:
----------

#affichage_produits a{
        color: #000000;
        display:block;
	position:relative; 
	margin-left:-10px;  
	left:10px;  
	top:10px; 
	width:150px; 
        height:250px;
        text-align:center;
	font-size: 12px; text-decoration: none;
        background-repeat : no-repeat;
        }
#affichage_produits a:hover{
        color: #000000;
        display:block;
	position:relative;
	margin-left:-10px;  
	left:10px;  
	top:10px; 
	width:150px; 
        height:250px;
        text-align:center;
	font-size: 12px; text-decoration: none;
        background-image  : url(http://www.dartag.fr/www/templates/red_evolution_twenty_nine/images/fond-produits.jpg);
        background-repeat : no-repeat;
	}

Le code html :
------------------

<div id=affichage_produits>
<a href="{product_flypage}"  title="{product_name}">

{product_name}
	
	<br/><br/>

<img src="{product_thumb_image}" {image_height} {image_width} border="0" alt="{product_name}" />
	
	<br/>
	
<p>{product_s_desc}</p>
	
	<br/>
		
	
<table width='100%'><TR><TD align='left'>{form_addtocart}</TD><TD align='right'>{product_price}</TD></TR></table></p>


</a>
</div>

Merci d'avance
Modifié par archimede49 (14 Aug 2007 - 15:51)

Bonjour,

Pourrais-tu s'il te plait mettre éditer ton message pour mettre en forme le code de la façon appropriée, c'est à dire en l'entourant des balises [ code] et [ /code] (sans espaces après le crochet ouvrant)? Merci d'avance.

Pour le reste... je n'ai pas bien compris ton problème.

archimede49 a écrit :
Lorsque l'on survol un article la div change de background.

Ok, ça c'est compréhensible.

archimede49 a écrit :
Cependant elles se chevauchent. Je souhaiterais qu'elles occupent toute la largeur de la page et sans se superposer.

Qui ça «elles»? Et comment ça, «se chevauchent»? Et à quoi correspond «toute la largeur de la page»?
Modifié par Florent V. (14 Aug 2007 - 12:15)

Bonjour,

Oui, la mise en forme du code est plus lisible.

Il me semble que j'ai compris.
Peux-tu essayer ce qui suit ?

J'ai remplacé tes ([ code] Édition—Coller [ code])

<div style="margin-right: 5px; width:21%; float:left;" [#brown]/* pourquoi des % ? */[/#]

par

<div class="bloc_affichage_prod"

et ai créé un style

.bloc_affichage_prod {
  margin-right: 5px;
  width:160px;
  float:left;
  text-align : center;
  border : 1px solid #f00; [#brown]/* pour les voir */[/#]
  }

J'ai ensuite modifié tes styles

#affichage_produits a{
  color: #000;
  display:block;
  position:relative; 
  [#brown]/*margin-left:-10px;  
  left:10px;  pour quoi faire ? */[/#]
  margin : 0 auto;
  top:10px; 
  width:150px; 
  height:250px;
  text-align:center;
  font-size: 12px;
  text-decoration: none;
  background-repeat : no-repeat;
  }
#affichage_produits a:hover{
  background-image  : url(http://www.dartag.fr/www/templates/red_evolution_twenty_nine/images/fond-produits.jpg);
  background-repeat : no-repeat;
  }

Même si “#affichage_produits” devrait être “.affichage_produits”. Une “class”.
Et il n'est pas le seul (-;

Des dimensions fixes dans un bloc aux dimensions fixes permettent d'occuper l'espace plus précisément.
Qu'est-ce que ça donne ?


+ Un petit tour ici ?
 
Modifié par Gihef (14 Aug 2007 - 13:17)

En fait si tu regardes sous IE7, les différents div conteneurs de produits se superposent dès le départ.

Merci ca fonctionne Gihef !!! et désolé pour la mise en forme de mon post.

archimede49 a écrit :
et désolé pour la mise en forme de mon post.

Comme je le disais, tu peux toujours l'éditer.

Éditer, synonymes: modifier, corriger, amender.