Sujets similaires

Sujet: Coder une PA avec à la fois du html et du CSS Jeu 14 Jan 2010, 13:55

Désolée d'ouvrir un nouveau sujet, mon forum est en construction et bon je suis une quiche ( c'est pas nouveau ) en html et CSS

Alors voilà j'ai mis mes membres du staff sur la PA et j'aimerais que ça ressemble au survol des staffs de ce forum : http://bloods-chronicles.forumactif.org/forum.htm

avec le texte & tout? jvous montre mon code html de PA

Code:: <img src="http://i48.tinypic.com/4gkug3.png" width="700" height="700" border="0" usemap="#Map">
<map name="Map" id="Map">
<area shape="rect" coords="287,266,414,285" href="http://desperatedsouls.forumactif.org/rules-f3/reglement-a-lire-attentivement-t2.htm">
<area shape="rect" coords="275,293,414,316" href="http://desperatedsouls.forumactif.org/we-do-have-a-story-f16/">
<area shape="rect" coords="266,320,432,338" href="http://desperatedsouls.forumactif.org/our-damned-souls-f6/">
<area shape="rect" coords="300,345,432,365" href="http://desperatedsouls.forumactif.org/synopsis-f4/les-differents-groupe-du-forum-t6.htm">
<area shape="rect" coords="300,368,432,389" href="http://desperatedsouls.forumactif.org/we-do-have-a-story-f16/botin-des-avatars-t8.htm#64">
<area shape="rect" coords="635,665,665,675" href="http://desperatedsouls.forumactif.org/synopsis-f4/the-history-t5.htm">
</map>

ou comme ce forum : http://welcome-london.forum-actif.net/

ou comme celui-ci : http://www.new-york-city-life.com/index.htm

Sujet: Re: Coder une PA avec à la fois du html et du CSS Jeu 14 Jan 2010, 17:57

excusez du DP mais j'ai souvent la peur que tout ne rentre pas dans un message alors voilà mon code css :

Code:: .pix
{border: none;opacity: 0.6;
background-color: transp;
padding:3px;
margin-top:1px;
margin-left:1px;
margin-right:1px;
border: 1px solid #959494;
-moz-border-radius: 7px;
}

.pix:hover
{border: none;opacity: 1;
border: 1px solid #b5b4b5;
-moz-border-radius: 7px;
}

.postdetails.poster-profile a img { width: 200px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
border: 6px solid #40332e;
}

a.imginfo {
border-bottom:0 solid #40332e;
color:#40332e;
position:relative;
text-decoration:none;
}
a.imginfo span {
display:none;
}
a.imginfo:hover {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
cursor:help;
z-index: 999;
}
a.imginfo:hover span {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:white none repeat scroll 0 0;
border-color:#40332e;
border-style:solid;
border-width:3px 3px 5px 5px;
display:inline;
left:20px;
padding:3px;
position:absolute;
top:15px;
white-space:nowrap;
}

.titrefiche {
background-color: #352b28;
color: #5B4E45;
font-size: 20px;
text-align: center;
}

.question {
font-weight: bold;
border-bottom: 1px solid #29211f;
}

.opacity img {
filter:alpha(opacity=100);
-moz-opacity:0.5;opacity: 0.5;
}

.opacity img:hover {
filter:alpha(opacity=50);
-moz-opacity:1;opacity: 1;
}

a img{
opacity: 0.5;
}

a img:hover {
opacity: 1;
}

a.infobulle {
position: relative;
}

a.infobulle span {
display: none; /* ceci masque l'infobulle */
}
a.infobulle:hover {
background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

}
a.infobulle:hover span {
display: inline; /* ceci affiche l'infobulle */
position: absolute;

white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

top: 5px; /* on positionne notre infobulle */
left: 15px;

background: #2b2321; /* arrière-plan de l'infobulle */

color: #5d504c; /* texte dans l'infobulle */
padding: 3px;

/* bordures de votre infobulle*/
border: 1px dotted #29211f;
border-left: 1px dotted #29211f;
}

comment faire l'opacité des images + une infobulle avec une page d'accueil réactive? =)
merci d'avance!

Sujet: Re: Coder une PA avec à la fois du html et du CSS Ven 15 Jan 2010, 03:07

Alors pour l'infobulle je te conseille d'aller ici : https://css-actif.forumactif.org/intermediaire-f15/faire-une-infobulle-t103-15.htm

Et pour l'opacité d'une image c'est ici :
https://css-actif.forumactif.org/images-f6/effet-d-opacite-sur-une-image-t431.htm

Sujet: Re: Coder une PA avec à la fois du html et du CSS Ven 15 Jan 2010, 08:23

Je ne sais si c'est possible de faire un infobulle sur une image réactive, dans les exemples que tu nous as montrés, les créateurs on découpé leurs images et les ont placé dans un tableau...

Mais, assurément, tu ne pourras pas faire d'effet d'opacité comme décrit dans le tutoriel, mais si on peux faire des infobulles on pourra simuler l'opacité.

As-tu essayer de faire des infobulles comme décrit dans le tutoriel ?