28173 sujets

CSS et mise en forme, CSS3

[résolu] Problème de positionnement d'un div sous... Firefox (si,si)

Salut

J'ai un problème de positionnement d'un div sous firefox et Opera. D'abord je pensais que le problème venais d'un autre élément qui perturbait mon div. J'ai donc tout supprimé pour ne laisser que le div en question mais ce n'est pas ça.

le code se trouvant dans le <body> est tout bête :
<div id="contenu">
<p>test</p>
</div>


le css
body {
	background-color:#000033;
	color:#000;
	margin:0;
	padding:0;
}

#contenu {
	background-color: #ccc;
	height:500px;
	margin-top:0;
	margin-left:150px;
	margin-right:5px;
	
}


le problème : le margin-top:0 n'a aucun effet, il y a un espace entre le haut de la fenêtre et le haut du cadre. Sous IE ça marche

Smiley ohwell Smiley ohwell Smiley ohwell
Modifié par JuTs (01 May 2006 - 00:14)
Ok merci.

Je la trouve un peu stupide cette règle, je n'en comprends pas vraiment le but.
JuTs a écrit :
Je la trouve un peu stupide cette règle, je n'en comprends pas vraiment le but.

C'est très pratique pour la présentation du texte. Je trouve infiniment regrettable que les traitements de texte n'utilisent pas de propriétés de ce genre. Avec la fusion des marges, au lieu de donner à chaque élément des marges en pensant aux éléments qui le suivront ou précèderont (ce qu'on ne sait jamais à l'avance… et dans un document de 100 pages, c'est pas évident à planifier !), on donne à chaque élément la marge minimale que l'on veut obtenir pour que l'information hiérarchique sur l'élément soit transmise.

Je me rappelle avoir galéré pour des mises en page sous Word parce que ce genre de fonctionnalités n'existait pas, et avoir du créer des styles supplémentaires genre "titre niveau 2_dans le cas où précédé par titre niveau 1" au lieu d'avoir juste "titre niveau 2".
Bref, c'est pratique. Il suffit juste de savoir que ça existe pour ne pas s'en prendre les effets secondaires dans la tête Smiley cligne

Note: IE fait aussi la fusion des marges, mais pas entre blocs enfants et parents, il me semble.
Cf http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html
C'est vrai que vu comme ça c'est très utile.

En tout cas dans mon cas IE ne respectait pas cette règle.


petite question hors-sujet :
Quand j'ai une liste ( <ul>) le navigateur la présente généralement avec une indentation (normal quoi). Mais si j'ai un élément float il n'y a plus cette indentation. Je suppose que c'est normal, la largeur de mon élément en float étant supérieure à l'indentation habituelle.
voir image
upload/1386-ul.jpg
JuTs a écrit :
petite question hors-sujet :
Quand j'ai une liste ( <ul>) le navigateur la présente généralement avec une indentation (normal quoi). Mais si j'ai un élément float il n'y a plus cette indentation. Je suppose que c'est normal, la largeur de mon élément en float étant supérieure à l'indentation habituelle.
voir image
upload/1386-ul.jpg

L'indentation est là, mais elle passe sous l'élément flottant. Celui-ci flotte par dessus les autres éléments et ne repousse que le texte et les éléments en-ligne.

Cf http://web.covertprestige.info/test/07-colonnes-flottantes-et-place-dans-le-flux.html
(à voir avec un navigateur supportant le PNG pour comprendre le fonctionnement des flottants)

Ensuite, tu peux soit placer une marge à gauche de la largeur de ton flottant, soit mettre ta liste en flottant, soit éviter le chevauchement (en conférant le layout sous IE grâce à un zoom: 1;… pour obtenir une chose comparable avec les autres navigateurs, de texte je crois qu'un overflow: auto; fait l'affaire, mais je n'en suis plus sûr).
Modifié par mpop (01 May 2006 - 13:19)
Sujet clos
Aller à