Decalage du site a cause de div de texte
Bonjour,
Je suis en train de realiser un site perso. Je le réalise en HTML dans un premier temps. La structure du site est terminée et fonctionnelle. Je suis en train de mettre en forme le contenu, comme pour les articles d'un blog.
Mon probleme est quand j'ajoute du texte. Tout mon site web est décalé de 3 ou 4 pixels vers la gauche. Je n'arrive pas à voir d'ou provient l'erreur. J'ai essayé de supprimé tous les paddings et les margins mais l'erreur est toujours la.
Je précise que le décalage n'apparait pas sur IE7, mais dans Firefox (Je sais c'est pas forcément bon signe).
Deuxième précision, je réalise le site avec des floats.
Dernière précision : Lorsque le texte est court (quelques mots), je n'ai pas de décalage
Avez-vous une idée d'ou provient cette erreur ?
Je vous met une partie du code :
Code:
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
| <div style="width:500px;">
<div style="float:left; width:60px; height:60px; background-image:url(../img/icone_projet.png);"> </div>
<div style="float:left; width:440px; height:60px;">
<h2>
<span style="color:#1d8dce; font-weight:bold; font-size:14px;">Developpement</span><br />
<span style="color:#adadad; font-weight:bold; font-size:11px;">C#, Visual Studio, Web Service, ...</span>
<br />
<div style="width:440px; height:4px;"> </div>
<div style="width:425px; height:1px; margin-left:5px; margin-right:10px; background-color:#adadad;"> </div>
</h2>
</div>
<div style="float:left; width:500px; height:100px;">
<img src="img_contenu/projet1.png" alt="Superviseur reseau" />
</div>
<p style="float:left; width:500px; text-align:justify;">
<span> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis rhoncus augue gravida felis. Sed at nisl. Maecenas rhoncus enim nec nisl. In dignissim, odio eget convallis dapibus, mi mauris laoreet elit, non laoreet justo nunc vel justo. Mauris leo. Integer interdum volutpat libero. Etiam dictum sollicitudin ligula. Aliquam erat volutpat. Cras eros tortor, viverra at, posuere at, molestie ac, justo. Curabitur in mauris ut urna accumsan sagittis. Vivamus congue magna at felis. Donec euismod vehicula lorem. Aenean lacus lectus, molestie at, lacinia faucibus, placerat non, justo. Nunc feugiat tristique ipsum. Vivamus vel nibh ac magna tristique dapibus. Proin quis sapien.</span>
</p>
<div style="float:left; width:350px; font-size:10px;">
Realise par Clement Fouque et Kilian Devouassoux
</div>
<div style="float:left; width:150px; color:#e59710; font-weight:bold;">
+ Plus d'infos
</div>
<div style="float:left; width:500px;">
<br />
<br />
</div>
</div> |
