28173 sujets

CSS et mise en forme, CSS3

[resolu]Faire un trait en css

Bonjour à tous, j’essaie de faire un trait en css.
Rien de plus simple vous me direz.

D’ailleurs voici mon code html :



<div class="trait">
</div>


et mon css



.trait
{
width:764px;
border:1px solid black;
}

Sur FF, j’ai bien le trait que je veux mais sur IE, j’ai un block d’environ 10 px de hauteur
Alors que je n’ai spécifié aucune hauteur..

Si je m’amuse à spécifier une hauteur de 0px, j’obtiens toujours la même chose.

Pouvez-vous m’aider ?
Modifié par samb01 (23 Nov 2006 - 16:19)
Modérateur
bonjour,

Pour un simple trait il y a le <hr> ou en xhtml <hr /> .


il y aussi la possibilité d'user de la bordure basse du conteneur (pourquoi ajouté un div vide ? )

Pour IE , une balise de type block et vide a pour defaut une hauteur de 1em.

Dans FF si vide elle s'ecrase sur elle même.

Alors pour IE:

height:1px;
overflow:hidden;

ou 

font-size:1px;
line-height:0;


Le hr impose dans IE une marge au dessus de lui de 0.5em et 0.5em en dessous de lui , si font-size declaré dans body sinon les marges sont de 7+7px.



Le hr semble se centrer seul dans IE , mais s'aligne a gauche par defaut dans ff.

Une page test :




<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test hr</title><style type='text/css'>
hr {
	border:0;
	margin:auto;
	_margin:-0.5em auto -0.9em auto;/* IE */
	_display:block;/* IE */
	width:90%;
}
body {
	font-size:100%;
}
/* convient a IE mais pas les gecko .o {color:red;} .a {color:yellow;} .b {color:green;} .c {color:blue;margin-bottom:-0.5em;} */
/* convient aux deux */

.o {
	border-top:2px solid red;
}
.a {
	border-top:2px solid yellow;
}
.b {
	border-top:2px solid green;
}
.c {
	border-top:2px solid blue;
	margin-bottom:0.1em;
	_margin-bottom:-0.5em;/* IE */
}
</style>

</head>
<body>
<div>	 Zone ou section	</div>
<div>	 Zone ou section	</div>
<div>
<hr class="o" />
<hr class="a"/>
<hr class="b"/>
<hr class="c"/>
	 Zone ou section	</div>
</body>
</html>


++
Administrateur
samb01 a écrit :
Sur FF, j’ai bien le trait que je veux mais sur IE, j’ai un block d’environ 10 px de hauteur
Alors que je n’ai spécifié aucune hauteur..

Si je m’amuse à spécifier une hauteur de 0px, j’obtiens toujours la même chose.

Pouvez-vous m’aider ?

Oui... en tout cas la FAQ le peux Smiley smile
http://forum.alsacreations.com/faq/#item77
Sujet clos
Aller à