28172 sujets

CSS et mise en forme, CSS3

Résolu - Difficulté avec margin-bottom: 0px

Bonjour,

J'ai un image que j'aimerais placé au bas d'un div et ca ne fonctionne pas! toute les autres marges fonctionne mais pas bottom.

merci beaucoup de votre aide!

pourriez-vous m'aider a résoudre ce problème!

J'ai fait un shémas avec le css:
upload/26359-shemas.jpg

et mon code html


<body>
 <div id="global">
 <div id="entete">
  <div id="vert-entete"></div>
  <img src="images/tete.jpg" alt="Planet Argent"width="980" height="259"></div>
<div id="nav-haut">
	<div class="img-menuhaut"><img src="images/menuhaut-img_d.jpg"alt=""width="184" height="67"></div>
	<div id=menuhaut>
    <ul>
      <li><a href="index.htm">Accueil</a> </li>
      <li><a href="aide.htm">Aide</a> </li>
      <li><a href="contact.htm">Contact</a> </li>
  	</ul></div>
	<div class="img-menuhaut"><img src="images/menuhaut-img_g2.jpg"alt=""width="406" height="67"></div>
   </div>

 <div id="droit"> 
 	<h1 class="tittle">Bienvenue sur PlanetArgent.com</h1>
 	
<div class="contenu"><p>  </p>
</div> 
<h2 class="tittle">Top 3 pour gagner</h2>
<div class="top3-box"> 
<img class="top3-boxtop"src="images/top3_bordertop.gif" alt="top3 image width="543" height="16"></div>

background-image: url(images/top3_borderbottom.gif)
</div> 

  <div id="gauche">
  <div id="menu-gagner">
  <div class="titre-menu"><img src="images/menu-gagner.jpg" alt="Gagner de l'argent"></div>
   
      <ul>
        <li><a href="barres-de-surf.htm">Barres de surf</a><li><a href="clics-remuneres.htm">Clics rémunérés</a><li><a href="mails-remuneres.htm">Mails rémunérés</a><li><a href="mails-remuneres.htm">Loteries gratuites</a><li><a href="autosurfs.htm">Autosurfs</a><li><a href="parainage.htm">Parainage</a></li>
      </ul></div>
    <div id="menu-partenaire">
     <div class="titre-menu"><img src="images/menu-partenaire.jpg" alt="Partenaires"></div>
      <ul>
        <li><a href="http://www.planetargent.com/">Partenaire 1</a><li><a href="http://www.planetargent.com/">Partenaire 2</a><li><a href="http://www.planetargent.com/">Partenaire 3</a><li><a href="http://www.planetargent.com/">Partenaire 4</a><li>        
      </ul>
    </div>
<div id="img-cochon"></div>
        
  </div>
 <div class="stop_flottement"></div>
 <div id="pied">
 	<img src="images/bandeau-bas.jpg" alt="bandeau bas">
   <div id="pied-haut"></div>
	<div id="pied-milieu"></div>
 
    <div id="pied-img-d"></div>
       <div id="pied-bas"></div>
            <div id="pied-img-g"></div>

 
</div>

</div>
</body>
</html>
Bonjour,

Première des choses, tu as un problème dans ton code puisqu'il manque un guillemet fermant pour ton attribut alt.

<img class="top3-boxtop"src="images/top3_bordertop.gif" alt="top3 image width="543" height="16">


Ensuite tu as le CSS suivant qui n'est dans aucun attribut style="".

background-image: url(images/top3_borderbottom.gif)


Ensuite, de ce que je vois de ton code, tu fais un <div> vide. À ta place je tenterais d'utiliser les éléments qui existent déjà pour mettre ton image de fond. Ce serait plus simple si tous les navigateurs supportaient les multiples-background mais bon, avec la structure actuel, tu peux sans doute utiliser des éléments existants.

Par exemple, ton div#menu-gagner pourrait être aussi de 2000px ( tu peux retirer la hauteur sur ton conteneur puisqu'il s'ajustera à la hauteur de div#menu-gagner ) et mettre ton image en background sur ce div.

Néanmoins, dans la structure actuelle, tu n'utilises pas de position absolue et c'est normal que le bottom fonctionne pas.


#gauche { position:relative; }
#img-cochon { position:absolute; left:30px; bottom:30px; }


J'espère que ça t'aidera
Bonjour,

L'attribut CSS margin sert à rajouter une marge à une élément et non à placer cet élément à une certaine distance du bord de son élément parent.

Si tu veux positionner une image de fond en bas de son élément, il existe l'attribut background-position qui accepte la valeur "bottom".

Si tu veux posisitonner une image en base de son conteneur, il faut utiliser du positionnement absolu ou relatif et préciser "bottom:0";

Je ne peux que te conseiller de revoir les bases du positionnement en CSS.

Bonne continuation.
Modifié par Laurie-Anne (02 Feb 2010 - 15:40)
Laurie-Anne a écrit :
Si tu veux posisitonner une image en base de son conteneur, il faut utiliser du positionnement absolu ou relatif et préciser "bottom:0";

Absolu uniquement. Le positionnement relative n'aura pas l'effet escompté.
bonjour

merci a vous pour vos réponse!

j'essaie vos suggestion et je vous reviendrai pour vous si ca fonctionne!
bonjour

J'ai mis mon conteneur gauche en position relative et mon image avec la propiété background-position: "bottom" et ca fonctionne très bien mais j'ai quand même une question qui me chicote:

Mon conteneur gauche était en float: left donc est-ce que ca se fait de mettre position relative en plus de float: left?

merci de vos réponse!
Salut,

kimy a écrit :
est-ce que ca se fait de mettre position relative en plus de float: left?
Oui ça se fait :
* soit pour décaler légèrement l'élément par rapport à sa position (ce qui est l'usage habituel du positionnement relatif).
* soit pour positionner l'élément flottant, qui peut alors servir d'ancêtre positionné pour un élément descendant en position:absolute ou pour utiliser la propriété z-index.
Modifié par Heyoan (03 Feb 2010 - 16:33)
bonjour


la solution fonctionnait bien avant que je teste sur IE6! le conteneur gauche va se placer sous le droit!

donc, position relative avec float: left ne fonctionne plus pour positionner mon image au bas du conteneur!

quelqu'un aurait une autre solution?

merci beaucoup!
bonjour

Je suis désolé, je me suis trompé, la position: relative navait a voir avec mon problème!

donc tout est régler!

merci!
Modifié par kimy (04 Feb 2010 - 21:24)
Sujet clos
Aller à