28220 sujets

CSS et mise en forme, CSS3

[Résolu] Problème d'illustration modèle de boites avec CSS

Hello

J'ai un code simple qui ne "fonctionne pas" (enfin ça ne fait pas ce que j'attendais) sous Firefox ni IE. Je voulais une boite jaune dans une boite verte pour illustrer le modele de boite.


<div id="vert">
   <div id="jaune">Tagada</div>
</div>




#vert {
   background: #0F0;
}

#jaune {
   background: #FF0;
   padding: 30px;
   margin: 45px;
   border: solid 15px #000;
}


C'est un code tout simple mais en fait, le margin du jaune est appliqué au vert et non au jaune (ce qui ne fait pas apparaître d'espace vert au dessus comme j'aurais souhaité). Pourquoi ?

Merci pour vos réponses ! Smiley smile
Modifié par LittleBlackCat (15 Jun 2005 - 11:49)
Pour la margin, c'est une marge extérieure...
Essaye en définissant des dimensions à tes DIV.

ça marche les codes couleurs comme ça ????

@ +
a écrit :
Pour la margin, c'est une marge extérieure...


Justement, je devrais la retrouver au dessus de la bordure haute de la boite jaune et sous la bordure basse. Seulement je ne la retrouve pas là où elle devrait être.

Les codes couleurs marchent comme ça oui, ce sont des "raccourcis".

Pour vous donner un aperçu du test
Modifié par LittleBlackCat (14 Jun 2005 - 12:39)
Je voudrais ajouter une chose. Si, dans la CSS, je mets une bordure #vert, eh bien ça fonctionne correctement en haut et en bas. 


#vert {
background-color: #0F0;
border: solid 1px #000;
}


En gros, j'obtiens :
http://www.intothelightagain.com/test/ai.gif

Mais j'aimerais avoir en jouant juste sur les margin du jaune :
http://www.intothelightagain.com/test/aimerais.gif

Et surtout j'aimerais comprendre pourquoi ça marche pas parce que j'ai des solutions (un padding dans le vert notamment) mais c'est pas un paliatif que je cherche. Smiley ravi
Modifié par LittleBlackCat (14 Jun 2005 - 13:46)
Bonjour,

Est -ce que ce bout de code te convient ?


<style>
#vert {
background: #0F0;
padding :30px;
}

#jaune {
background: #FF0;
padding: 30px;
border: solid 15px #000;
}
</style>

<div id="vert">
<div id="jaune">Tagada</div>
</div>


Par contre, il vaut mieux faire aux décalages suivant les navigateurs... Là, je te renvois aux tutoriels sur les css.

En fait, ton but est de mettre toute les margin/padding dans le style du div #jaune ?

Djé
Je sais comment pallier au problème : en mettant le padding justement.

J'ai juste besoin d'une explication pour savoir pourquoi les marges hautes et basses ne fonctionnent pas comme elles devraient (enfin de ce que j'ai compris). Smiley cligne
En fait, ça marche très bien la propriété margin dans le div #jaune... seulement le conteneur div #vert a sa taille propre qui ne dépend pas des marges de son contenu (ici, la taille n'est pas définie donc le div occupe toute la largeur et la hauteur la plus basse).

Je te prouve que ton code marche :


<style>
#vert {
background: #0F0;
}

#jaune {
background: #FF0;
padding: 30px;
margin: 30px;
border: solid 15px #000;

}
</style>
avant
<div id="vert">
<div id="jaune">Tagada</div>
</div>
apres


Par contre, si tu ajoutes un border au div #vert, ça donne un bon résultat :


<style>
#vert {
background: #0F0;
border:1px solid #0f0;
}

#jaune {
background: #FF0;
padding: 30px;
margin: 30px;
border: solid 15px #000;

}
</style>
avant
<div id="vert">
<div id="jaune">Tagada</div>
</div>
apres


Mais pourquoi ? Parce que la propriété border d'un conteneur tient toujours compte du contenu de celui-ci (marges comprises)... Je sais, cela n'est pas commode mais bon cela peut être util.

Je pense que tu dois pouvoir t'en sortir avec la propriété overflow (j'ai pas testé).

J'espère avoir répondu à ta question.

Djé
Oui j'avais écrit qu'avec la bordure sur le vert ça passe.

Mais les marges du jaune sur la gauche et la droite ressortent bien sans qu'on ait besoin de mettre une bordure sur le vert. Ca répond pas à ma question de pourquoi ça marche pas comme ça en hauteur ?

En fait, j'en ai pas besoin pour monter un site, j'ai juste besoin de comprendre. J'ai utilisé cet exemple pour illustrer le modèle de boites pendant un cours et c'était pas manifeste puisque qu'en haut et en bas, rien ne se passait. lol Désolée de vous casser les pieds.

Merci quand même. Smiley ravi
Modifié par LittleBlackCat (15 Jun 2005 - 11:21)
Je vais donc essayé de t'expliquer...

tu constates que "ça marche" en largeur parce que le div #vert n'a pas de largeur et donc il s'étend à toute la largeur de la fenetre.
Il n'a pas de hauteur non plus c'est vrai. Dans ce cas, il prend la hauteur de son contenu donc la hauteur du div #jaune. Or, Les marges ne font pas partie du contenu !
Ici, les marges sont définies par rapport au bord du document, c'est pourquoi tu as l'impression que "ça marche" avec les largeurs....
En fait, il te faut comprendre comment marche la propriété marge. Libre a toi d'approfondir le sujet.

A bientôt

Djé
Sujet clos
Aller à