28172 sujets

CSS et mise en forme, CSS3

Margin-top qui ne fonctionne pas sous firefox

Bonjour à tous,

voici mon code html



	<div class="footer_essai01">

			
		<div class="footer_bloc01_essai01">
			<a href="http://www.swapnfly.fr/link.php">Liens</a> &nbsp - &nbsp <a href="http://www.swapnfly.fr/part.php">Nos partenaires</a> &nbsp - &nbsp <a href="http://www.swapnfly.fr/presse.php">Ils parlent de nous</a>  &nbsp - &nbsp <a href="http://www.swapnfly.fr/pdf/contrat-fr.pdf">Contrat d'échange</a> &nbsp - &nbsp <a href="http://www.swapnfly.fr/condition-fr.php">Conditions générales</a>  &nbsp - &nbsp <a href="http://www.swapnfly.fr/contact.php">Nous contacter</a>		</div>

	
	</div>


et voici mon css





.footer_essai01
{
width:1038px;
margin-top:5px;
/*text-align:center;*/
/*border:1px solid black;*/
/*border:none;*/
margin-left:6px;
height:50px;
background-image: url('../images/fond04.png');
background-repeat:repeat-x;
}


div.footer_essai01 a:link {color:black;font-weight:bold;text-decoration:none;}
div.footer_essai01 a:visited {color:black;font-weight:bold;text-decoration:none;}
div.footer_essai01 a:hover {color:white;font-weight:bold;text-decoration:none;}

.footer_bloc01_essai01
{
font-size:11px;
margin-top:20px;
width:800px;
height:25px;
margin-left:50px;
/*display:inline;*/
/*float:left;*/
border:none;
border:1px solid black;
}


Le margin-top n'est pas pris en compte..

La page en ligne est la suivante :

http://www.swapnfly.fr/index.php


Merci d'avance pour votre aide.
Modifié par samb01 (24 Jun 2011 - 11:01)
Bin non, il marche très bien ton margin-top.

Essaie de changer la valeur du margin par un gros chiffre (50px par exemple) et tu verras que ça marche...

Qu'essais-tu de faire exactement ?
Ben non il ne focntionne pas sous Firefoxe.

Regarde ce que ça donne sur IE et tu comprendas ce que j veux faire.

Le cadre noir j'aimerais qu'il soit centré en hauteur par rapport au cadre bleu...

Sur IE ça fonctionne.
C'est parce que tu dois habituellement utiliser du padding pour faire ça.

Sinon, tu dois déclarer un overflow:hidden; sur le conteneur.
Bonjour,

Je confirme l'observation de Vaxilart. Après test sous IE8 et sous Firefox 4 (OS=Windows7), je ne vois pas où se situe le problème.
Bonjour,

j'ai décidé de faire des imprim écran pour vous prouver que FireFox ne réagit pas pareil que ie, et c'est le comportement de IE (je sais c'est rare..) que je veux.

Voci ce que ça donne sur FireFox 3.0.10

http://www.pixenli.com/image1308902886050405200.html

Comme vous pouvez le vopir le texte est collé au niveau de bord haut du cadre bleu.


Et sur IE 7.0.5730.13

j'ai ça :

http://www.pixenli.com/image1308903013067348000.html


On peut voir ici que le rendu n'est pas du tout le même. Les lien sont centré en hauteur par rapport au cadre bleu.
tu peux mettre un vertical-align:middle à tes éléments liens et un padding-top de 25px px, tu supprime les marge de la div qui les contient et tu lui impose la hauteur de 50px. (par contre pense à mettre les tiret à l'intérieur des liens pour qu'ils soient alignés)


.footer_bloc01_essai01 {
    border: medium none;
    display: block;
    font-size: 11px;
    height: 50px;
    width: 850px;
}

div.footer_essai01 a {
    color: black;
    font-weight: bold;
    padding-top: 25px;
    text-decoration: none;
    vertical-align: middle;
}


c'est ce que tu cherche ?
Bonjour,

ben je vais essayé ce soir mais je ne comprens toujours pas pourquoi mon margin-top ne fonctionne pas..

J'ai un bloc :

footer_bloc01_essai01

qui est contenur dans un autre bloc :

footer_essai01

et j'applique un margin-top de 20 px au bloc :

footer_bloc01_essai01

C'est pourtant simple ce que j'essaie de faire et je ne comprend pas ce qui coince...
Bonjour, ton bloc footer_essai01 a une hauteur de 50px, ton bloc footer_bloc01_essai01 a une hauteur de 25px et si tu lui appliques un margin-top de 20px, ça s'additionne et la hauteur de celui-ci devient 45px qui est presque la même hauteur que le bloc parent. Donc, tu as l'impression que ton margin-top ne s'applique pas.

Il te faut essayer mieux en enlever le margin-top et en mettant plutôt un padding sur ton bloc parent footer_essai01.
Pour centrer ton bloc footer_bloc01-essai01, tu pourrais faire mieux en mettant
margin: 0 auto;
à la place de
margin-left: 90px;
C'est simple, mais en réalité ici tu n'a aucun éléments flottant,

un bloc dans un bloc dans le "flux naturel" de la page, si son bloc parent n'est pas définit comme son "référent" (via un position:relative par ex.) alors il va appliquer ses marges sur les éléments entourant son propre environnement et ainsi forcer le déplacement de son parent.

tu peux hacker cela avec un padding:1px sur ton div footer contenant le div des liens.

mais en fait la bonne démarche est de mettre un float:left à ton div contenant les liens.
edit : oui ou un display: inline-bloc c'est idem.
Modifié par ptitvincent (24 Jun 2011 - 11:24)
Vous n'allez peut-être pas me croire mais il se passe un phénomène bizarre.

Dès que je fais apparaître le border de footer_essai01, ça fonctionne :




.footer_essai01
{
width:1037px;
margin-top:5px;
/*text-align:center;*/
border:1px solid white;
/*border:none;*/
margin-left:6px;
/*padding-top:5px;*/
height:50px;
background-image: url('../images/fond04.png');
background-repeat:repeat-x;
}


Dès que je retire :


border:1px solid white;


le margin-top de footer_bloc01_essai01 ne fonctionne plus...

J'ai donc un peu triché, j'ai mis un border blanc...
Heureux que tu puisses atteindre ton objectif (même si je ne comprends pas bien comment Smiley confus ).
A l'avenir, pense à préciser sous quelle(s) version(s) de navigateur(s) tu rencontres des soucis Smiley cligne .

@+
et pourquoi plutôt que de tricher avec un border, tu n'applique pas la solution de nours313 ou de moi même qui elles sont correctes ??

à savoir, mettre un float:left; à ton div qui se trouve dans ton footer et qui contient les liens ?
samb01 a écrit :
un phénomène bizarre

La la la la, fusion des marges! Fusion des marges? Fusion des marges! La la la la fusion des maaaarggeuuuu fusioooonnn des maaaarggggeuuuuhhhh. Smiley biggrin

ptitvincent a écrit :
et pourquoi plutôt que de tricher avec un border, tu n'applique pas la solution de nours313 ou de moi même qui elles sont correctes ??

C'est très bien les border-top/border-bottom pour éviter la... la quoi déjà? Ah oui, la fuuusssioooonnn des maaaaarggggesss. (Même si je préfère un petit padding-top/padding-bottom en général.)

Référence: La fusion des marges en CSS
Modifié par fvsch (27 Jun 2011 - 18:52)
Sujet clos
Aller à