Problème de décalage

**Mister Paul** · 27/02/2011, 16h30

Bonjour,

j'ai un souci lorsqu'il y a un retour chariot sur la 1ère ligne d'un titre :
cela décale le texte d'en dessous (cf copie d'écran)

On voit sans doute mieux le problème ici avec firebug

Mais je suis une bille en CSS et je n'arrive pas à trouver ce qu'il faudrait faire...

Actuellement il y a ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
.browseProductContainer {
	width:100%;
	padding: 3px 3px 3px 3px;
	vertical-align: top;
}
 
.browseProductTitle {
	font-size:125%;
	padding: 3px;
	margin-top: 13px;
	width: 85%;
	float: left;
}
.browseProductTitleAdd {
	font-size:80%;
}
.browseProductImageContainer {
	float: left;
	width: 90px;
	margin: 3px;
	padding-top:5px;
	padding-right: 5px;
 
}
.browseProductDetailsContainer {
	float: left;
	width: 70%;
}
.browseProductDescription {
	margin-top: 41px;
	margin-left: 75px;
	width:70%;
}
.browsePriceContainer {
	float: right;
	margin: 5px;
	width:15%;
}
.browseAddToCartContainer {
	width:30%;
	text-align:center
}
.browseRatingContainer {
	float: left;
	width:25%;
	margin: 3px;
	white-space: nowrap;
}

Si vous pouviez me filer un coup de main...

**NoSmoking** · 27/02/2011, 18h01

Bonjour,
sans plus d'info sur ton code HTML pour faire le raccord avec ta feuille de style, cela risque d'être dur.
Montres nous donc la construction de ta page.

**Mister Paul** · 27/02/2011, 18h16

Merci de prendre le temps NoSmoking.
Voilà le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div style="margin-right: 5px; width:98%; float:left;" id="row_4d6a855c866a2"> <div class="browseProductContainer">
 
 
        <a title="Lorem ipsum dolor sit amet,  consectetuer" href="/site/index.php?page=shop.product_details&amp;flypage=flypage_images.tpl&amp;product_id=429&amp;category_id=38&amp;option=com_virtuemart&amp;Itemid=104&amp;lang=fr"><span class="browseProductTitle">
            Lorem ipsum dolor sit amet,  consectetuer        <span class="browseProductTitleAdd"> - Duis autem dolor in hendrerit in vulputate velit sed diem</span></span></a>
 
        <div class="browsePriceContainer">
 
 
	<span class="productPrice">
		35,50&euro;			</span>
 
 
        </div>
 
        <div class="browseProductImageContainer">
 
	            <a title="Lorem ipsum dolor sit amet,  consectetuer" href="/site/index.php?page=shop.product_details&amp;flypage=flypage_images.tpl&amp;product_id=429&amp;category_id=38&amp;option=com_virtuemart&amp;Itemid=104&amp;lang=fr">
	            <img src="http://localhost/site/components/com_virtuemart/themes/cvr/images/noimage.gif"00 class="browseProductImage" border="0" title="Lorem ipsum dolor sit amet,  consectetuer" alt="Lorem ipsum dolor sit amet,  consectetuer"  /></a>
        </div>
 
 
        <div class="browseRatingContainer">
                </div>
        <div class="browseProductDescription">
            Lorem ipsum dolor sit amet,  consectetuer adipiscing elit,  sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam,  quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip…&nbsp;
            <a href="/site/index.php?page=shop.product_details&amp;flypage=flypage_images.tpl&amp;product_id=429&amp;category_id=38&amp;option=com_virtuemart&amp;Itemid=104&amp;lang=fr" title="Détails du produit"><br />
			Détails du produit...</a>
        </div>
        <br />
 
        <span class="browseAddToCartContainer">
                </span>
 
</div>
</div>

**NoSmoking** · 27/02/2011, 19h04

pas de chez top l'indentation de ton code pour s'y retrouver
quoiqu'il en soit tu as une DIV vide qui occupe de la place puisque déclarée avec une width:25%

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="browseRatingContainer"></div>

je remets ton code indenté

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div style="margin-right: 5px; width:98%; float:left;" id="row_4d6a855c866a2">
  <div class="browseProductContainer">
    <a title="Lorem ipsum dolor sit amet,  consectetuer" href="/site/index.php?page=shop.product_details&amp;flypage=flypage_images.tpl&amp;product_id=429&amp;category_id=38&amp;option=com_virtuemart&amp;Itemid=104&amp;lang=fr">
      <span class="browseProductTitle">
        Lorem ipsum dolor sit amet,  consectetuer
        <span class="browseProductTitleAdd">
          - Duis autem dolor in hendrerit in vulputate velit sed diem
        </span>
      </span>
    </a>
    <div class="browsePriceContainer">
      <span class="productPrice">35,50&euro;</span>
    </div>
    <div class="browseProductImageContainer">
      <a title="Lorem ipsum dolor sit amet,  consectetuer" href="/site/index.php?page=shop.product_details&amp;flypage=flypage_images.tpl&amp;product_id=429&amp;category_id=38&amp;option=com_virtuemart&amp;Itemid=104&amp;lang=fr">
        <img src="http://localhost/site/components/com_virtuemart/themes/cvr/images/noimage.gif"00 class="browseProductImage" border="0" title="Lorem ipsum dolor sit amet,  consectetuer" alt="Lorem ipsum dolor sit amet,  consectetuer"  />
      </a>
    </div>
    <!-- DIV VIDE -->
    <div class="browseRatingContainer"></div>
    <div class="browseProductDescription">
      Lorem ipsum dolor sit amet,  consectetuer adipiscing elit,  sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam,  quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip…&nbsp;
      <a href="/site/index.php?page=shop.product_details&amp;flypage=flypage_images.tpl&amp;product_id=429&amp;category_id=38&amp;option=com_virtuemart&amp;Itemid=104&amp;lang=fr" title="Détails du produit">
        <br />
        Détails du produit...
      </a>
    </div>
    <br />
    <span class="browseAddToCartContainer"></span>
  </div>
</div>

remarques diverses
- des SPAN dans des SPAN c'est moyen surtout quand leurs fermetures se suivent
- un BR dans une A alors que tu peux le mettre juste avant
- un border="0" dans la balise IMG, à mettre dans le CSS

**Mister Paul** · 27/02/2011, 19h10

Argh... oui l'indentation c'est parce que le code HTML est généré par du PHP...
Il faudra effectivement que je clarifie ça.
Pour la DIV vide elle peut ne pas l'être suivant les cas...

Mais où est la cause de mon problème ?

**NoSmoking** · 27/02/2011, 19h24

ta DIV est déclarée comme suit

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.browseRatingContainer {
  float : left;
  width : 25%;
  margin : 3px;
}

donc même vide elle occupera 25% de la largeur de son conteneur

la hauteur sera peut être variable suivant les navigateurs mais occupera au moins 6px de haut, lié au margin:3px.

Comme elle est en float:left, elle se colle sur l'élément placé à sa gauche repoussant l'élément suivant, également en float:left, qui se trouve décalé sur la droite pour occuper la place restante.

Mettre un margin : 0; résoudra ton problème si la DIV vide n'est pas "gérable" coté serveur.

Problème de décalage

CSS

Vue hybride

Discussions similaires

Partager

Partager