28173 sujets

CSS et mise en forme, CSS3

P'tit problème avec un exemple du site

Bonjour,

Je vais poser une question idiote mais bon ...

J'ais lus cette page ( très interessante ) , et j'ais tout simplement testé un des exemples :

http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS

Plus particulierement le paragraphe : Un bloc contenu dans un autre .

Voila le html ( exact copie de l'exemple ):

<html>
<head>
<style>
.conteneur
{
background-color: blue;
height: 100px;
width: 100px;
}
.bloc
{
background-color: yellow;
height: 50px;
width: 50px;
margin-left: 20px;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="conteneur">
<div class="bloc">bli bli bli</div>
</div>
</body>
</html>

Et voila ce que ca donne :

D'abord sous IE :

http://img437.imageshack.us/img437/5701/12xq1.jpg

puis sous firefox :

http://img437.imageshack.us/img437/4835/21qa.jpg

Remarquez l'espace ajouté tout en haut , qui correspond au 40 px censé etre dans le carré .

Ce n'est absolument pas comme dans l'illustration de l'exemple .

Je ne comprend pas ..... Smiley bawling
Modifié par stel (09 Mar 2006 - 16:31)
Administrateur
Bonjour,

merci de placer ton code dans des balises [ code] ... [ /code] (sans les espaces) comme demandé dans l'Aide, cela sera nettement plus lisible pour tout le monde.

Felipe
En fait ... il y a un problème avec le padding:1px;

Ca rajoute une ligne de 1 px en bas du div ... et comme mon div a une image en background , ca rajoute un 1 px de hauteur de l'image .

En clair ca repete l'image puisque le div est 1 px plus haut que l'image de fond .

Je comprend pas cette histoire de fusion , c'est stupide ... comment se compliquer la vie pour du vent Smiley bawling
Modifié par stel (09 Mar 2006 - 16:35)
Salut,

Si tu ajoutes du padding, et que tu dois rester au pixel près, il faut en tenir compte dans la hauteur et les marges.

Il y a de toute façon d'autres possibilités : tu peux simplement ajouter overflow: auto; à #conteneur. Il n'y aura plus de fusion des marges.
Ou placer div.bloc avec le positionnement absolu/relatif...
Sujet clos
Aller à