Discussion :

[Death83]

Salut a tous,

j'ai un petit probleme de mise en page.

J'ai un écart qui apparait entre 2 block div.
Regarder ici sous firefox (ou mozilla) pour le voir: http://manganime.0.free.fr/critiques/manga.php
(l'écart entre le bloc vert et bleu).

Voici le code correspondant:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<div style="background-color:red; width:auto; margin-left:10px; margin-right:10px; height:200px;">
				<div style="background-color:blue; height:100px;width:45%;float:left;margin:0; padding:0; ">	
				<? //   <img src="http://manganime.0.free.fr/fichiermanganime.0/critiquemanga/alice19th/Tome4/CouvAliceT4vignette.jpg" alt"..." height="100">?>
				</div>
				<div style="background-color:green; height: 100px; width: 45%; float:left; margin:0; padding:0; ">
 
				</div>	<div class="separe"></div>
 
			</div>

D'ou peut venir cet écart? (qui n'apparait pas sous ie)

[_Mac_]

Lu.

C'est à cause des 45% : ta boîte rouge fait 630 pixels de large, d'où des boîtes bleue et verte de 283,5 pixels de large. Etant donné la difficulté technique à afficher des demi-pixels, FF laisse un petit espace entre les 2 boîtes. Pour vérifier, force la large de la boîte rouge (classe cadrecentralemilieu) à 620 ou 630 et tu verras qu'il n'y a plus d'espace. La seule solution, c'est forcer une largeur à un nombre précis de pixels.

[francis m]

bien vu mac

encore que forcer une largeur à un nombre de pixels part du principe que le client ouvre son navigateur en plein écran
personnellement je préfère, quand c'est possible, rester en %. pour cela, prévoir 44% ou 46%

et ne pas oublier que les paddings et borders réagissent de façon différente suivant les navigateurs...

[Death83]

ok merci beaucoup .