28217 sujets

CSS et mise en forme, CSS3

Positionnement fixe d'une image dans un bloc libre

Coucou à tous,

Je m'arrache les cheveux avec un problème.
J'ai créé un bloc,
Qui va être présent à plusieurs endroits sur ma page web et dans lequel il va y avoir du texte de longueur différente.
et Je voudrai ajouter en bas à droite de ce texte une image qui se situe toujours au même endroit.
En gros cette image elle est en position fixe par rapport au bloc quelque soit le contenu ou l'emplacement de ce bloc !
ça ne me parait pas compliqué, mais impossible de m'en sortir.

Voilà mon code actuellement :

<style type="text/css">
div.arrondi
{
   width:928px;
   height:90px;
   border:1px solid black;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   -khtml-border-radius: 10px;
   border-radius:10px;
   behavior:url(border-radius.htc);
   background-color:white;
   padding-top:-78px;
/*   overflow: hidden;*/
}
#adverland{
   display:block;
   width:180px;
   height:14px;
   position: relative;
   z-index: 2;
   background-image:url(http://www.adverland.com/adverland_global/images/back.png);
   background-repeat: no-repeat;
   margin-left:748px;
   margin-top:78px;
}

</style>
<div class="arrondi">
Test
<a href="#" target="_blank"><div id="adverland"></div></a>
</div>
<div class="arrondi">
Test<br>Test2
<a href="#" target="_blank"><div id="adverland"></div></a>
</div>


Merci pour votre aide.
Modifié par Pierrick81 (18 Aug 2010 - 12:59)
Salut,

alors dans le désordre :

* un id doit être unique contrairement à une classe.

* le contenu, pour être accessible, doit se trouver dans le code html et pas dans le css (qui peut être désactivé / inactif). Dans ton code tes liens contiennent un DIV vide (au passage A ne peut contenir que des éléments en-ligne alors que DIV est de type block : il aurait fallu utiliser SPAN) et ne sont donc plus des liens dès que l'on désactive les CSS. Il faut utiliser un élément IMG avec attribut alt qui va bien.

* pour le positionnement c'est le même principe que dans ce post.
Modifié par Heyoan (18 Aug 2010 - 12:00)
Parfait Merci bcp Heyoan.

Effectivement, je crois que je n'avais pas bien compris les concept de position:relative, de ID et de Class...
Un vrai débutant Smiley smile

Merci et bonne continuation
Juste une petite remarque, que je viens de découvrir :

Le fait de modifier le code, il y a un conflit avec behavior:url(border-radius.htc);
ça pose donc un problème sur IE : La bordure qui doit avoir les bords arrondis, ne s'affiche plus. Il n'y a plus de bordures sur IE.

Qq1 saurait-il d'où vient le problème ?

Pour info, voilà mon nouveau code :
<style type="text/css">
div.arrondi
{
   position:relative;
   width:928px;
   height:90px;
   border:1px solid black;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   -khtml-border-radius: 10px;
   border-radius:10px;
/*   behavior:url(border-radius.htc);*/
   background-color:white;
   overflow: hidden;
}
.adverland{
   position: absolute;
   bottom:-7px;
   left:748px;
   z-index: 2;
   margin:0;
}
img{
border:0px;
}
</style>

<div class="arrondi">
<table>
<tr><td>
Test
</td></tr></table>
<div class="adverland"><a href="#" target="_blank"><img src="http://www.adverland.com/adverland_global/images/back.png" alt="Adverland.com"></a></div>
</div>
<div class="arrondi">
<table>
<tr><td>
Test<br>Test2
</td></tr></table>
<div class="adverland"><a href="#" target="_blank"><img src="http://www.adverland.com/adverland_global/images/back.png" alt="Adverland.com"></a></div>
</div>

Modifié par Pierrick81 (18 Aug 2010 - 13:01)
Sujet clos
Aller à