28172 sujets

CSS et mise en forme, CSS3

Entouré une image et ajouté une image sur une image

Bonjour,

J'ai des images au format 112x80 et je souhaiterais ajouté en css un contour gris avec des arrondis sur les angles et ajouté un petit + gris en image en haut a droite par dessus les images .

Je sais que c'est du CSS je me suis renseigné sur des forums, des tutoriels, mais je n'y arrive malheureusement pas . Smiley bawling

J'aurais donc besoin de votre aide .

Merci
Pour le contour gris il faut utiliser border :

img{
border: 2px solid gray;
}

Et pour l'arrondi, il faut utiliser border-radius :

img{
border-radius:15px;
-moz-border-radius:15px; //utilisé par Firefox.
}



Pour le +, tu peux soit le générer via CSS avec content et le positionner avec un position:absolute; :

#monDivQuiContientMonImage{
width:290px; //Largeur de ton image
position:relative;	
}
#monDivQuiContientMonImage:after{
content:"+";
position: absolute;
right: 0;
top: 0;
font-size:x-large;
font-weight:bold;
color:gray;
}


Ou bien, si tu as besoin de mettre un lien dessus, le mettre dans le code HTML :
<div id="div1">
<img src="http://www.alsacreations.com/css/img/logo-alsacreations-com.png" id="monImage" alt="tralala">
<span id="plus"><a href="une action quelconque">+</a></span>
</div>


Et le positionner pareil :
#div1{
width:290px;
position:relative;	
}
#plus{
position: absolute;
right: 0;
top: 0;
font-size:x-large;
font-weight:bold;
color:gray;
}
Rudloff a écrit :
Pour le +, tu peux soit le générer via CSS avec content
Ça aurait pu être utile de lui préciser que :after n'est pas compatible avec IE6/7/8. Smiley cligne
Désolé, je suis sur Mac et j'ai tendance à oublier que des gens utilisent Internet Explorer.
Par contre, je ne suis pas d'accord, la version 8 le gère.
Rudloff a écrit :
Avec quel navigateur ?


:) , si ton navigateur est internet explorer , il ne reconnait pas cette regles:
les autres par exemple:
-moz-border-radius: Pour firefox
-webkit-border-radius: Pour safari, chrome
border-radius: pour Opera et ff4 il me semble.

entre autre prefixe utilisable il ya :
-o- : pour opera
-khtml- devenu inutile et
-apple- qui est ni plus ni moins qu'une alternative de syntaxe a -webkit- (du marketing ?)

Dans tout les cas , il faut s'en referrer au site des navigateurs pour savoir si tel ou tel règle peut-être préfixé et quel syntaxe elle accepte.

GC
gc-nomade a écrit :

-webkit-border-radius: Pour safari, chrome

Safari 5 et Google Chrome 4 supportent le border-radius standard.
Il n'y a plus que Mozilla qui est à la traine.
Est ce quelqu'un pourrait m'aider car j'ai un problème de compatibilité avec mon css actuel .
Et comme je débute en CSS, j'ai du mal Smiley decu

Voici mon MSN pour en parler : [email supprimé]

Merci par avance,

Rémi
Modifié par Laurie-Anne (22 Dec 2010 - 15:24)
bonjour,

Tu rajoutes une class à ton tableau.

<table class="Laclassquivabien">
</table>


Ensuite tu style via CSS:


img .Laclassquivabien {
/* pour les border radius */
-moz-border-radius : Xpx;
-webkit-border-radius : Xpx;
border-radius : Xpx;
/* pour le plus */
background : url(URL_DU+.gif) largeur hauteur no-repeat;
}
Excusez moi d'etre boulet mais j'y arrive vraiment pas .
J'ai mis :
.Laclassquivabien {
/* pour les border radius */
-moz-border-radius : 8px;
-webkit-border-radius : 8px;
border-radius : 5px;
/* pour le plus */
background : url(http://www.the-meteo.com/images/+.jpg) 18px 18px no-repeat;
}

dans mon style et le code dans ma page php mais ca prends pas en compte . Smiley decu 
.Laclassquivabien img { 
/* pour les border radius */ 
-moz-border-radius : 5px; 
-webkit-border-radius : 5px; 
border-radius : 5px; 
/* pour le plus */ 
background : url(http://www.the-meteo.com/images/+.jpg) 18px 18px no-repeat; 
}


18px 18px c'est pas la largeur / hauteur de l’icône que tu dois donner, c'est sa position par rapport au coin supérieur gauche du block qui la contient.

Reste un bidouillage à faire pour faire passer l'image par dessus.
Sujet clos
Aller à