28173 sujets

CSS et mise en forme, CSS3

[résolu] Definir un bloc sous FireFox

Bonjour tout le monde,

J'ai un petit problème concernant un petit bout de code:

Je veux définir un div qui est contenu dans mon header...et lui dire de positionner ici:

upload/9564-blem.gif

Voici le code html

<!--DEBUT HEADER-->
<div id="header">
	
	<div id="newsletter">
	#
        #
	</div>
	
</div>
<!--FIN HEADER-->


CSS:

#header {
	background-image: url(images/header.jpg);
	background-repeat: no-repeat;
	height:193px;
	width:851px;
	margin: auto;
	}
#newsletter{
        width: 220px;
        height: 80px;
	margin-top:55px;
	margin-left:400px;
	
	}



Ça marche sous IE mais pas sous Fifrefox.

Je me retrouve avec un header qui est décaler a partir du haut(comme si il avait un margin-top).

C'est a dire que mon header ne touche plus la partie supérieure de la fenêtre.


Une solution?

Merci. Smiley biggol
Modifié par Samuel (02 Mar 2008 - 23:57)
Un petit up après 24h. Smiley sweatdrop

...j'espère avoir été clair avec mon petit schéma. Dans le cas échéant...je peut fournir les infos manquantes si il y a lieu..

Merci,
pastazere a écrit :
Bonjour

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


Merci pour la lecture, il me semble que j'ai fait exactement la meme chose que dans la doc.

Le probleme est que: le div Newsletter est bien positionner dans le div header...mais le div header est decaler par rapport au top de la page (body)

En declarant ceci pour mon body, IE m'affiche le resultat souhaité mais pas FireFox...


body{ 
	background-image: url(images/body_bg.gif);
	background-repeat: repeat-x;
	[#red]margin-top: 0px;[/#]
	}


Firefox décale mon header vers le bas...et je ne sais pas pourquoi.

Je dois surement avoir une erreur quelque part...et j'arrive pas à trouver malheureusement.

Y voyez vous quelque chose?

Merci

EDIT: Voici un visuel. je cherche a supprimer la marge en rouge
http://img177.imageshack.us/img177/7103/blem02ev5.gif
Modifié par Samuel (02 Mar 2008 - 21:18)
Salut,

pourtant on devrait te repondre sur ce site.

je suis moi -même pas un spécialiste du probleme.

il me semble que c'est un probleme de "fusion des marges" .

d'ailleurs remarque que si tu rajoute un padding-top:1px; a header ça decale le tout de 1px donc mettre juste une marge de 54px dans l'autre. hop c'est pareil IE et FF

hors ça c'est la solution pour lutter contre la fusion des marges.

pour la petite histoire. ( genre mes créations css feraient peur a picasso Smiley scared mais je me la joue vieux de la vieille ) un jour j'ai osé dire que ça devait être un bug sur ce forum.

et tout le monde dans le coin m'est tombé sur le dos.

No it's not a bug, it's a Feature.....

feature, feature moi je trouve que ça n'a pas la tronche d'un feature... Smiley cligne Smiley biggrin
CPascal a écrit :

d'ailleurs remarque que si tu rajoute un padding-top:1px; a header ça decale le tout de 1px donc mettre juste une marge de 54px dans l'autre. hop c'est pareil IE et FF


Je vois pas lien avec le padding top sur le header. Ajouter une marge de 54px dans l'autre... tu pourrais m'eclaircir un peu sur cette derniere petite phrase?
Smiley resolu
J'ai trouver la réponse sur Developpez.

un overflow:hidden sur le header a régler le conflit des marges.

C'est une histoire de contexte de formatage bloc pour ceux que ça intéresse.
Merci tout de même d'avoir essayer CPascal.
Hello,

Bon, ça vous dérange pas si je recadre un peu?

CPascal a écrit :
feature, feature moi je trouve que ça n'a pas la tronche d'un feature... Smiley cligne Smiley biggrin

Et pourtant si. Quelque chose de prévu par la spécification CSS 2.1 et implémenté de la manière prévue par tous les navigateurs (y compris Internet Explorer), ça s'appelle bien une feature et pas un bug. Smiley lol

Le mécanisme de fusion des marges qui a lieu ici (note à Samuel: tu n'as pas vu le rapport, mais il s'agissait bien de cela et CPascal a bel et bien mis le doigt dessus) est décrit dans la spécification CSS 2.1 au passage suivant:
http://www.w3.org/TR/CSS21/box.html#collapsing-margins
Je cite:
a écrit :
In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. In CSS 2.1, horizontal margins never collapse.


Samuel a écrit :
J'ai trouver la réponse sur Developpez.

un overflow:hidden sur le header a régler le conflit des marges.

Ce n'est pas un conflit mais une fusion, en l'absence de contenu intercalaire, bordure ou padding entre les deux blocs imbriqués. Par ailleurs, certaines boites ne fusionnent pas leurs marges avec celles de leurs enfants:
- les éléments flottants;
- dans tous les navigateurs modernes, les éléments qui forment un contexte de formatage;
- dans Internet Explorer uniquement, les éléments dotés du layout.

La réponse que l'on t'a donnée sur Developpez.com est d'utiliser un overflow:hidden pour que le bloc conteneur (div#header) forme un contexte de formatage.

On notera que si le problème ne se posait pas avec Internet Explorer, c'est à cause de la largeur fixe (width) du header qui lui conférait le layout. On pourra lire dans la FAQ du forum le petit article sur le concept de HasLayout dans Internet Explorer.

Pour résumer:
1. Le rendu constaté par Samuel dans son exemple n'était pas un bug mais un comportement normal. Certes, ce comportement n'est pas intuitif, mais il est prévu par la spécification CSS et plutôt bien implémenté par les navigateurs, car il a une utilité non négligeable pour la gestion harmonieuse du texte.
2. Le rendu obtenu dans Internet Explorer, quand bien même il correspondait aux attentes, n'est pas standard et peut donc être assimilé à un bug d'Internet Explorer (effet secondaire du HasLayout).
3. Parmi les moyens d'éviter la fusion des marges entre un conteneur et son enfant, utiliser un padding de 1px (en général on utiliser un padding: 1px 0;) est une bonne solution, qui n'aura aucun effet de bord. Utiliser un contexte de formatage (avec un overflow:hidden ou un overflow: auto) est également possible, mais j'aurais tendance à déconseiller cette solution si on n'est pas sûr qu'elle ne posera pas de problème (effets secondaires). Ici, le overflow: hidden ne devrait pas être problématique, mais je déconseille son utilisation systématique pour empêcher la fusion des marges.

Voilà, fin de la mise au point. Smiley smile
Sujet clos
Aller à