28173 sujets

CSS et mise en forme, CSS3

[Résolu] Marge négative récalcitrante.

Bonjour
J'espère qu'il y a un Sherlock Holmes des CSS parmi vous.
La petite flèche (#gotop) est le lien qu'on trouve en bas de page et qui permet le retour en haut. J'aimerai la situer avec un retrait de 10px vers le haut par rapport à son conteneur (#base). En principe c'est simple : margin-top: -10px et le tour est joué. Mais, bizarrerie, l'indication n'est prise en compte par mes navigateurs que si j'ajoute une bordure supérieure pour le bloc #base.

J'ai essayé quelques bricolages coté css avec position relative, !important etc.
et coté html, de mettre l'ancre dans un paragraphe, une autre div etc.
Rien n'y fait !
Vous voyez sur ces images;
upload/579-gotop.gif
En haut la flèche est trop basse malgré l'indication margin-top: -10px et à droite la même chose avec les blocs soulignés de rouge par Web Developer.
En bas le border-top du conteneur est activé et curieusement, la flèche remonte exactement comme je le voudrais.
La question est: Comment me passer de ce border-top, pas gênant visuellement mais dont je ne m'explique pas l'utilité pour le positionnement ?


________
CSS:

html body {
   background: #d8d3cd;
   margin: 0;
   padding: 0;
}
#base {
   background: #f1f2ed;
   width: 770px;
   height: 17px;
   margin: 0 auto 10px;
   /* border-top: #f1f2ed 1px solid; */
}
a#gotop {
   background: transparent url("imgweb/gotop.gif") 0 0 no-repeat;
   display: block;
   width: 20px;
   height: 20px;
   margin: -10px auto 0;		
}
_______
HTML:

<div id="base">
<a id="gotop" href="#top" title="Retour en haut de page…">&nbsp;</a>
</div>

Modifié par Aureance (03 Jul 2006 - 18:58)
Bonsoir Aureance,

Il s'agit d'un cas normal de fusion des marges. Tu peux voir ICI une illustration avec quelques solutions.

Sinon n'oublie pas qu'on peut décaler avec la position relative
a#gotop {
position: relative;
bottom: 10px;
/* autres déclarations */
}

Modifié par Alan (01 Jul 2006 - 20:49)
Bien, merci Alan
J'avais lu le texte des fusions des marges de yoyodesign ou il est indiqué qu'en css les marges horizontales ne fusionnent jamais.
Par contre j'ai vraiment trouvé très intérressante la page test/blocs imbriqués et fusion...

Il en ressort que, ben voilà Smiley bawling , je garde ce border-top et point final.
Aureance a écrit :
J'avais lu le texte des fusions des marges de yoyodesign ou il est indiqué qu'en css les marges horizontales ne fusionnent jamais.


Il s'agit justement dans ton cas des marges verticales, c'est pour cela qu'il y a fusion, sauf avec le border-top (padding-top ferait le même effet).

Sinon tu peux toujours utiliser la position relative comme je t'ai indiqué.
Hélas, comme je l'avais indiqué dans le premier post, j'avais fait l'essai avec la position relative sans succès. Comme sur cet exemple (page complète du problème isolé):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Marge négative récalcitrante</title>

<style type="text/css">
/*<![CDATA[*/
<!--
*{
	margin: 0;
	padding: 0;
	text-decoration: none;
}
html body {
	background: #d8d3cd;
}
#base {
	width:771px;
	height: 17px;
	color: #eee;
	background: #f1f2ed;
	margin: 0 auto 10px;
	/*border-top: #f1f2ed  1px solid;*/
}
#base2 {
	width:771px;
	height: 17px;
	color: #eee;
	background: #f1f2ed;
	margin: 0 auto 10px;
	border-top: #f1f2ed  1px solid;
}
a#gotop {
	background: #33cc00; /* vert */
	display: block;
	position: relative;
	width: 20px;
	height: 20px;
	margin: -10px auto 0;
}
hr.spacer50{
	margin: 50px 0 0;}

-->
/*]]>*/
</style>
</head>
<body id="top">
<p><hr class="spacer50"></p>
<div id="base"><a id="gotop" href="#top"> </a></div>
<p><hr class="spacer50"></p>
<div id="base2"><a id="gotop" href="#top"> </a></div>
</body>
</html>

C'est bien cela que je trouve bizarre. En le positionnant "position relative" avec au choix; top: -10px / bottom: 10px / margin-top: -10px, mon bloc ne se décalle pas. Je trouve ça pas croyable. Je ne vois pas ou se trouve l'erreur. Dans l'exemple j'ai mis un <hr> et on voit quand la bordure du bloc #base est désactivée, le carré vert pousse son conteneur vers le haut sans s'occuper de la position relative.
? et ?
Si je reprends ce code et que je remplace le margin-top négatif par bottom:10px (ou top:-10px;) avec une position:relative, comme indiqué dans mon premier message, ça marche très bien quelque soit le navigateur.
Cf cette page

Je ne vois pas ce qui te pose problème Smiley ohwell
Oui, ça marche impeccablement, je l'ai fait plusieurs fois cet après midi pourtant. C'est peut-être une histoire de mémoire cache avec le navigateur.
Merci.
Sujet clos
Aller à