28172 sujets

CSS et mise en forme, CSS3

Overrider un margin-top

Bonjour à tous,

voilà j'ai le bloc suivant 



.carre_150_27_auto
{
width:150px;
height:27px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
text-align:center;
font-size:12px;
color:black;
text-decoration:none;
border:none;
background-image: url('../images/bouton_reflet_150.jpg');
}


et au niveau html, j'aimerais utiliser le même bloc, mais avec un margin-top égal à 0

Est-ce que je suis obligé de créer un autre div du genre :



.carre_150_27_auto_bis
{
width:150px;
height:27px;
margin-top:0px;
margin-left:auto;
margin-right:auto;
text-align:center;
font-size:12px;
color:black;
text-decoration:none;
border:none;
background-image: url('../images/bouton_reflet_150.jpg');
}


ou existe-il un moyen de me servir du premier div ...

Je trouve ça un peu lour de créer un div avec exactement les mêmzes caractéristiques (dont une seule change...)
Bonjour,

tu peux mettre deux classes à un div (à n'importe quoi en fait et plus que 2 ^^), du coup pourquoi ne pas garder toute la première partie de ton css et juste sortir ton margin-top et en faire une classe à part, du style:


<div class="carre_150_27_auto top20px"> div avec 20px de margin top </div>
....
<div class="carre_150_27_auto top0px"> div avec 0px de margin top</div>




.carre_150_27_auto{
width:150px;
height:27px;
margin-left:auto;
margin-right:auto;
text-align:center;
font-size:12px;
color:black;
text-decoration:none;
border:none;
background-image: url('../images/bouton_reflet_150.jpg');
}
.top20px{
margin-top:20px;}
.top0px{
margin-top:0px;}


Bon le nom de mes classes css est pas génial, mais c'est pour que tu comprennes l'idée Smiley smile
Modifié par InpIxelItrust (14 Sep 2010 - 16:36)
Voilà ce que j'ai fait mais ça ne fonctionne pas...

Bonjour,

effectivement je connaissais cette technique, mais ça ne fonctionne pas...

ça ne fonctionne pas...



	echo '<div class="carre_150_27_auto margint0">';
		echo '<a href="index.php?action=deconnexion"><h1 style="font-size:5px;"> &nbsp </h1>'.$idem_txt0210.'</a>';
		echo '</div>';


et voici le css




.carre_150_27_auto
{
width:150px;
height:27px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
text-align:center;
font-size:12px;
color:black;
text-decoration:none;
border:none;
background-image: url('../images/bouton_reflet_150.jpg');
}



.margint0
{
margin-top:0px;
}
Étrange je viens de tester ton code css chez moi sous chrome : ça fonctionne malgré la non validité de la page.
Par contre tu ne peux pas mettre un h1 (élément de bloc) dans un a (élément en ligne), il faut donc échanger tes balises : 
<h1 style="font-size:5px;"><a href="index.php?action=deconnexion">  </a></h1>


Tu as un extrait du htlm généré ? Peut-être que le problème vient du php. Sinon quel navigateur utilises-tu ? Quel doctype ?
Sujet clos
Aller à