Texte chevauche une image

**zekmek** · 27/04/2012, 22h44

Bonjour

Sur cette page, mon texte chevauche les images. Savez vous comment je peux faire ? http://lovelidee.fr/marques

Merci

**miss_socrates** · 28/04/2012, 12h00

En fait, l'image- logo au début de chaque paragraphe empiète sur le texte.
Ceci peut être réglé assez simplement en CSS en créant une classe d'images avec la propriété float: left ; il suffit d'insérer dans le code html au début de chaque paragraphe

Code :

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

class="image"

et en CSS

Code :

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

.image{float:left;}

et le texte viendra s'enrouler autour de l'image.

**Muchos** · 28/04/2012, 12h19

+1 avec miss_socrates, même si l'absence de float ne justifie pas le chevauchement !

Pour moi, c'est aussi un problème de code html. Prenons la partie de code pour l'image et le texte du item "Apple" :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
					<li class="item"> 
				<div class="left_side">
					<div class="logo">
					<a href="http://lovelidee.fr/44_apple" title="Apple">						<img src="http://lovelidee.fr/img/m/44-medium.jpg" alt="" width="80" height="80" />
					</a>					</div>
					<h3>
						<a href="http://lovelidee.fr/44_apple">						Apple
						</a>					</h3>
					<p>
					<a href="http://lovelidee.fr/44_apple">					<p>Apple est devenue LA marque incontournable, connue et reconnue par tous, pour ses modèles alliant efficacité et design. Optez pour un iPod ou un autre modèle de la marque Apple, pour un cadeau, c'est une valeur sûre !</p>
					</a>					</p>
				</div>

Déjà, on a là une "soupe" : pas terrible à lire et à maintenir… Mais le problème, c'est la présence d'éléments de type block (h3, div, p…) dans une liste.

1. Soit vous faites sans liste. Vous avez donc un paragraphe "Apple".

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
 
<html>
 
<head>
  <style type="text/css">
    .item {display: block;}
    img {float: left;}
  </style>
</head>
 
<body>
 
<a class="item" href="http://lovelidee.fr/44_apple" title="Apple">
	<img src="http://lovelidee.fr/img/m/44-medium.jpg" alt="" width="80" height="80" />
 
	<h3>Apple.</h3>
		<p>Apple est devenue LA marque incontournable, connue et reconnue par tous, pour ses modèles alliant efficacité et design. Optez pour un iPod ou un autre modèle de la marque Apple, pour un cadeau, c'est une valeur sûre !</p>
</a>
 
<a class="item">
...
</a>
</body>
 
</html>

2. Soit vous faites avec une liste. Et c'est codé comme tel…

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
 
<html>
 
<head>
  <style type="text/css">
    ul {padding-left: 0;}
    li {list-style-type: none; margin-bottom: 2em;}
    strong {display: block; margin-bottom: 1em;}
    img {float: left;}
  </style>
</head>
 
<body>
<ul>
	<li class="item">
		<a href="http://lovelidee.fr/44_apple" title="Apple">
 
		<img src="http://lovelidee.fr/img/m/44-medium.jpg" alt="" width="80" height="80" />
		<strong>Apple.</strong> Apple est devenue LA marque incontournable, connue et reconnue par tous, pour ses modèles alliant efficacité et design. Optez pour un iPod ou un autre modèle de la marque Apple, pour un cadeau, c'est une valeur sûre !
 
		</a>
	</li>
 
	<li class="item">...</li>
</ul>
 
</body>
 
</html>

**NoSmoking** · 28/04/2012, 17h01

Bonjour,
extrait de code

Code html :

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

1
2
3
4
5
<div class="logo">
  <a title="Bensimon" href="http://lovelidee.fr/38_bensimon">
    <img height="80" width="80" alt="" src="http://lovelidee.fr/img/m/38-medium.jpg">
  </a>
</div>

mets un height:auto à ta class logo.

Il ne faut pas néanmoins négliger les conseils donnés dans ce post.

Texte chevauche une image

CSS

Discussions similaires

Partager

Partager