28220 sujets

CSS et mise en forme, CSS3

Margin-bottom inéfficace

Bonjour a tous !

Voila g un petit probléme de mise en forme avec le code ci dessous :

a écrit :


.graph
{
display:block;
background-image:url("graph.gif");
width:250px;
height:210px;
margin-top:20px;
margin-left:30px;
background-repeat:no-repeat
}


.barre1
{
display:block;
margin-bottom:80px;
margin-left:80px;
background-image:url("monimage.gif");
background-repeat:no-repeat
}


mon margin-bottom dans la classe "barre1" n a aucun effet mon image ne se positionne pas en fonction de celui ci alors que lorsque je met un margin-top la elle se positionne.
Tout cela aussi bien sous explorer que sous mozilla!

Merci a vous ! Smiley cligne
Modifié par cyril_59 (24 Nov 2005 - 10:29)
Bonjour,

une petite précision : est ce que ta question concerne l'image de background ? de quelle classe ?
Peux tu poster également le bout de html qui va avec ?

merci Smiley smile
le html

a écrit :

<html>
<head>

<script language="javascript">

window.resizeTo(400,400);

</script>
<link href="pop.css" type="text/css" rel="stylesheet" rev="stylesheet" />
</head>
<body>

<div class="graph">
<div class="barre1"><img src="barre_bleu" height="40" width="10"></img>
</div>

</div>


</body>
</html>



et le css ( je le remet car il y avait une erreur dans le précédent) j ai retirer l image dans barre 1 car je l inclu directement dans le html puisque
sa hauteur sera variable en effet je tente de faire un sondage! le probleme c est que quand l image grandi son positionnement par rapport au bas de la page change vu que margin-bottom ne passe pas.
a écrit :


.graph

{
position:absolute;
display:block;
background-image:url("graph.gif");
width:250px;
height:210px;
margin-top:20px;
margin-left:30px;
background-repeat:no-repeat;
}


.barre1
{
position:relative;
display:block;
margin-bottom:80px;
margin-left:80px;
background-repeat:no-repeat
}

Modifié par cyril_59 (24 Nov 2005 - 10:51)
Je ne saisis pas vraiment le problème Smiley sweatdrop
Avec ce code
<html>
<head>
<style type="text/css"> 
.graph
{
position:absolute;
display:block;
background-image:url("graph.gif");
width:250px;
height:210px;
margin-top:20px;
margin-left:30px;
background-repeat:no-repeat;
}
.barre1
{
position:relative;
display:block;
margin-bottom:80px;
margin-left:80px;
background-repeat:no-repeat;
}
</style>
<body>
<div class="graph">
<div class="barre1"><img src="images/img.gif" height="40" width="10" />
</div>
blablablablabalbalablabalbalablabalba
</div>
</body>
</html>

On voit qu'il y a un marge sous l'image, puisque la suite du contenu se trouve décalé de ces 80px;

Mais je n'ai peut-être pas saisi la question, j'ai du mal à me réveiller ce matin. Smiley confus
tiens je vais aller me chercher un café
Modifié par yyoupla (24 Nov 2005 - 11:03)
Salut,

Déjà ton code html est faut

a écrit :
<div class="graph">
<div class="barre1"><img src="barre_bleu" height="40" width="10"></img>
</div>


Le balise img ne se ferme pas comme une balise div par exemple

Correction : 
<img src="barre_bleu" height="40" width="10"[b] />[/b]


Le petit bout que j'ai mis en gras est la façon de fermer ce type de balise (comme br, hr, img)
Ensuite, tu spécifie "barre_bleu" dans ton src, mais sans extension ".jpg", ".gif", ou ".png". Donc la source de ton image n'est pas correcte.
Pour continuer dans la balise image, je te déconseille de mettre les attributs height et width, met les dans ton css Smiley cligne .

Ensuite, tu surcharges ton code de div.

Le div class="barre1" ne sert à rien ici.

tu peux appliquer directement ta classe barre1 directement à l'img

<img src="barre_bleur.jpg" class="barre1" />


La css :


margin: 0 0 80px 80px // premier chiffre : haut, deuxième : droite, troisième : bas, quatrième : gauche


Voilà une première solution , si ta besoin de plus de conseil, demande Smiley cligne
Merci a vous 2 !

pour repondre a trigun , la hauteur de mon image devra etre variable en fonction justement d une variable php ( je fais un systeme de sondage) donc je pense que la seule solution est de mettre le "height" dans <img>
meme si la g mis une valeur fixe.
Merci en tout cas pour les erreurs de html


pour repondre à yyoupla

a écrit :


<html>
<head>
<style type="text/css">
.graph
{
position:absolute;
display:block;
background-image:url("graph.gif");
width:250px;
height:210px;
margin-top:20px;
margin-left:30px;
background-repeat:no-repeat;
}
.barre1
{
position:relative;
display:block;
margin-bottom:10px;
margin-left:80px;
background-repeat:no-repeat;
}
</style>
<body>
<div class="graph">
<div class="barre1"><img src="barre_bleu.gif" height="40" width="10" />
</div>
blablablablablablablablablabla
</div>
</body>
</html>


il y a effectivement une marge entre l image et le texte , ce que je voudrais c est que l image ait une marge inférieure par rapport au bord de ma fenetre pour faire en sorte quelle colle a mon graphique. ci dessous peut importe mes margin-bottom rien n y fait, l image ne bouge pas...
Modifié par cyril_59 (15 Sep 2006 - 10:16)
Le margin bottom ne bougera pas ton image, mais ce qui viendra en dessous de ton image, si tu veux bouger ton image vers le haut, essai une valeur de margin top négative.
en fait ce que je veux c est que la barre bleu se pose sur le graph.Avec une margin -top c'est tout a fait possible , le probléme etant que lorsque
mon image grandit en fonction des resultats de mon sondage l image deborde du graphique par le bas alors que je voudrais qu elle s agrandisse
vers le haut sans que la base ne bouge et je ne vois pas d autre solution que le margin-bottom.... Smiley decu merci en tout cas .
Modifié par cyril_59 (15 Sep 2006 - 10:18)
Modérateur
bonjour,
en prenant le probleme a l'inverse, c'est beaucoup plus simple a mon avis.
on place la jauge sur une hauteur de 100%; et par dessus un deuxieme element qui en s'aggrandissant fait visuellement baisser la jauge .
1 premier div avec le graph en fond,
1 2eme div avec la jauge en fond.
1 3eme div avec le cache jauge qui reprend en fond l'image du graph.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html 

xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jauge</title>
<style type="text/css">
.graph {
border:1px solid #666;
background-image:url(graph.jpg);
height:300px;
width:300px;
}
.barregraph {margin-top:20px;
margin-left:80px;
width:14px;
height:228px;
background-image:url(graph2.jpg);
}
/*la jauge inversé, dans laquelle on recalle l'image du graph en fond */
.jauge {
background:url(graph.jpg) 220px -20px;
height:40%;/*correspondant a un resultat de 60% */
overflow:hidden; /* pour IE, sinon impossible de passer a 0% de hauteur (jauge visible a 100% ) */
}
</style>
</head>
<body>
<div class="graph">
<div class=barregraph>
<div class="jauge" >
</div>
</div>
</div>
</div>
<p>l'idée est d'user du phenomene a l'inverse:</p><p> 
donc pour afficher 40% On fait descendre la jauge de 60% .(100-40)<br /> sauf que l'image graph, n'est pas echellone de façon reguliere .</p>
</body>
</html>

la page en test : http://gcyrillus.free.fr/essai/testcyril_59.html
je me suis basé sur l'image que tu as laissée sur le forum.

je retserais curieux, si tu trouve une autre solution (css) par la suite.

bonne soirée.

<edit>j'oublié, le overflow:hidden, pour que IE puissent afficher les 100% !, voila c'est corriger.
Modifié par gcyrillus (25 Nov 2005 - 00:29)
Modérateur
??, bonjour, et alors ?, merci, non merci, resolu, ou pas resolu ? Smiley smile
(j'ai vu que tu as reposter un sujet, pour positionner un element dans un autre, en regardant(analysant) le css de ma proposition, tu y avais une reponse !)
bon week-end.
Sujet clos
Aller à