OVH Cloud OVH Cloud

[css] image débordant d'une

2 réponses
Avatar
Stéven
Bonjour
J'ai sur une page une "boite" positionnée à droite dont le code est le
suivant (page d'exemple www.st3ven.org/test, les deux boites AGENDA et
ACTU sur la droite):

/* CSS */

.boite
{
float: right;
margin: 0 -3px 10px 20px;
border-top: 1px solid #285599;
border-left: 1px solid #285599;
border-bottom: 1px solid #285599;
width: 170px;
font-size: 0.8em;
background-color: #ebebf1;
clear: right;
}

span.titreboite
{
margin-top: 0px;
padding-top: 0px;
background-color: #285599;
color: #fff;
font-size: 1.1em;
text-align: center;
letter-spacing: 0.05em;
font-weight: bold;
padding: 5px 0;
margin-bottom: 5px;
float: right;
width: 170px;
}

<!-- HTML -->

<div class="boite">
<span class="titreboite">titre boite</span>
<p>Ici mon texte normal</p>
</div>

Je voudrais pouvoir insérer une image en haut à gauche de cette boite en
faisait déborder à l'extérieur... Pour ça j'ai essayé d'insérer une
<img> dans <span class="titreboite">titre boite</span> et d'appliquer à
cette image la CSS suivante :

img.iconeboite
{
margin-left: -60px;
margin-top: -20px;
}

Evidemment ça passe sous Mozilla mais pas sous IE...
Quelqu'un a-t-il une idée pour réaliser ça ? (si ma "boite" n'est pas
très académique vous pouvez aussi me le préciser ;)
Merci
Stéven

2 réponses

Avatar
=?ISO-8859-1?Q?Stéven?= a ecrit :

J'ai essayé ta piste en remplaçant le <span> par un <div> mais ça ne
change absolument rien sous IE (Win XP), toute la partie de l'image qui
"sort" de la boite grace au margin négatif est invisible ! :o/



Ah ! alors là désolé pour ton matériel ! Passer à NC4.5 ? :-)

Et mon essai :
http://perso.wanadoo.fr/stephane.moriaux/truc/img_debordante.htm
que donne t-il chez toi ?


--
******** (enlever/remove [OTER_MOI] du/from reply url) *******
Stéphane MORIAUX : mailto:
Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
http://perso.wanadoo.fr/stephane.moriaux/internet/
**************************************************************
Avatar
Stéven

Et mon essai :
http://perso.wanadoo.fr/stephane.moriaux/truc/img_debordante.htm
que donne t-il chez toi ?




Exactement la même chose que pour mon cas, à savoir que sous IE 6 (Win
XP) l'image ne sort pas du tout des boites : je ne vois donc pas du tout
la deuxième image verte et l'image beige est largement coupée :(