Div hauteur 1 pixel

**kersu** · 05/12/2011, 21h12

Bonjour,
Je souhaite diviser mon écran en trois lignes horizontales, dont une, celle du milieu, est d'une hauteur de 1pixel :

Mon code :
css :

Code :

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

1
2
3
#hecran{	width: 100% ;height: 258px ; background-color: #00FF00 ;}	
#mecran{width: 100% ;font-size:1px; height: 1px;background-color : #000000;}
#becran{width: 100% ;height: 1000px;  background-color: #00CC00;}

htlm :

Code html :

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

1
2
3
<div id="hecran"></div>
<div id="mecran"></div>
<div id="becran"></div>

J'obtiens ma deuxième ligne qui a non pas une hauteur de 1pixel , mais d'une vingtaine de pixels.

Je fais des essais, en mettant seulement deux lignes et en créant des marges basses (internes et externes) à la place de la deuxième ligne. Cela ne donne rien.

Je trouve une astuce en modifiant la taille du texte par défaut dans une div :
Code :

Code :

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

1
2
div    {  width: 100%; font-size:1px; height: 1px;}
      .div_1{  background-color : #000000;}

Code html :

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

1
2
3
<div id="hecran"></div>
<div class="div_1"></div>
<div id="becran"></div>

Cela marche, mais je ne peux plus rien écrire dans mes balises div, tout s'écrit avec 1px, même en remettant la taille normale ??

Merci de m'aider en me donnant d'autre piste.