Sujets similaires

Dernière édition par Maguitte2008 le Mar 22 Jan 2013, 16:28, édité 1 fois

Coucou,

Tout d'abord, merci de lir le sujet, l'erreur est humaine, j'espère ne pas vous dérangez pour rien.

Alors j'ai utilisé la PA de Absolute.Sunshine, et pour le stafff, j'ai mis des images couisssantes laissant apparaitre un texte. C'est une amie qui m'a donnée le code, je ne sais pas d'où il vient, peut être N - U.

En tout cas, c'était pour les catégorie, j'ai repris donc ce code pour mes image du staff, l'image coullisse, mais le texte n'apparait pas. Que faire ?

Css :

Code:: /*
=========================================================
Page d'Acceuil
=========================================================
Début du code
=========================================================
*/
/* espace pour le menu*/
.space {
width:6px;
height:2px;
}
/* fin espace menu* /

/* staff presenté de manière simple avec uniquement une bordure */
.staff {
width:200px;
height:70px;
padding:2px;
border:1px solid #CABCAB;
}
/* fin staff */

/* top sites aux formes automatiquement arrondis */
.tops {
width:60px;
height:60px;
border:2px dashed #3D403F;
opacity:0.8;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
-webkit-transform: rotate(2deg) ;
-moz-transform: rotate(2deg) ;
-o-transform: rotate(2deg) ;
-ms-transform: rotate(2deg) ;
transform: rotate(2deg) ;
}
/* fin top sites */

/* propriétés communes aux blocs */
.blocstaff,
.blocb,
.blocpoto,
.blocredit,
.blocnews,
.bloctop {
text-align:justify;
font-family : Comic Sans MS;
font-size:11px;
color:#3D403F;
letter-spacing: 1px;
padding:3px;
background-color:#FFFFFF;
border-top:3px solid #3D403F;
border-bottom:3px solid #3D403F;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow:white 1px 1px 0,0 0 3px #3D403F;
-webkit-box-shadow:white 1px 1px 0,0 0 3px #3D403F;
box-shadow:1px 1px 0 white,0 0 3px #3D403F;
}
/* fin propriétés communes */

/* bloc staff */
.blocstaff{
width:230px;
height:240px;
}
/* fin bloc staff */

/* bloc bienvenue*/
.blocb{
width:340px;
height:240px;
}
/* fin bloc bienvenue */

/* bloc partenariat*/
.blocpoto{
width:190px;
height:240px;

}
/* fin bloc partenariat */

/* centre les logos partenaires */
.cpart {
width:98%;
height:150px;
overflow:auto;
}
/* fin logo partenaires */

/* bloc crédit */
.blocredit{
width:230px;
height:200px;
}
/* fin bloc crédit */

/* crédit texte */
.textc {
font-size:10px;
}
/* fin crédit texte */

/* bloc nouveauté */
.blocnews {
width:340px;
height:200px;
}
/* fin bloc nouveauté */

/* bloc topsites */
.bloctop {
width:190px;
height:200px;
}
/* fin bloc topsites */

/* centre logo tops*/
.ctop{
width:98%;
height:135px;
overflow:auto;
}
/* fin centre logo tops */

/* les titres avec pour police Kite One */
.titrepa {
font-family: 'Kite One', sans-serif;
font-size:27px;
color:#3D403F;
}
/* fin titre */

/* petits points sous les titres */
.yoo {
border-bottom:1px dotted #3D403F;
}
/* fin points sous titres */

/* les liens rapides tout n haut de la PA */
.menu {
color:#3D403F;
letter-spacing: 1px;
font-variant:small-caps;
font-size:11px;
padding:2px;
padding-left:4px;
padding-right:4px;
background-color:#FFFFFF;
border-left:3px solid #3D403F;
border-right:3px solid #3D403F;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
}
/* fin liens rapides */

/* les pointillés dérrière le menu à peut-être adapter selon le forum */
.point {
border-top:6px dotted #3D403F;
margin-bottom:-10px;
}
/* fin pointillés */

/* simple texte qui se trouve dans les tables pour ne pas deborder */
.textepa {
width:90%;
height:180px;
overflow:auto;
}
/* fin texte */

/* les logos des partenaires dont l'opacité augmente au survol de la souris */
.potos {
width:88px;
height:31px;
opacity:0.5;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
}

.potos:hover {
opacity:0.7;
}
/* fin logos partenaires */

/* description derrière la miniban */

.cate
{
width: 200px;
height: 70px;
overflow: hidden;
border: 2px solid #000000;
background-color: #ffffff;
}
.cate_img
{
position: relative;
z-index: 2;
width: 200px;
height: 70px;
margin-left: 0px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.cate:hover .cate_img
{
margin-left: 200px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.cate_description
{
position: relative;
z-index: 1;
width: 200px;
height: 70px;
margin-top: -120px;
text-align: justify;
font-size: 11px;
color: #505B59;
padding: 2px;
overflow: auto;
}
/*
==========================================================
Page d'acceuil
==========================================================
Fin de page
==========================================================
*/

Page d'acceuil :

Code:: <div class="center">
<br />
<div class="point"></div>
<a href="http://time-white.lebonforum.com/t4-carnet-de-correspondance-reglement">
<span class="menu">règlement</span>
</a>
<img src="http://image.noelshack.com/fichiers/2012/44/1351879218-878748748.png" class="space" />
<a href="http://time-white.lebonforum.com/t5-formulaire-d-inscription">
<span class="menu">présentation</span>
</a>
<img src="http://image.noelshack.com/fichiers/2012/44/1351879218-878748748.png" class="space" />
<a href="">
<span class="menu">partenariat</span>
</a>
<img src="http://image.noelshack.com/fichiers/2012/44/1351879218-878748748.png" class="space" />
<a href="#">
<span class="menu">infos</span>
</a>
<img src="http://image.noelshack.com/fichiers/2012/44/1351879218-878748748.png" class="space" />
<a href="#">
<span class="menu">autre ?</span>
</a>
<br /><br />

<table>
<tr>
<td>
<div class="blocstaff">
<div class="center">
<div class="yoo">
<span class="titrepa">Le Staff</span>
</div>
</div><br />

<div class="center">
<div class="cate"><div class="cate_img"><img src="http://i14.servimg.com/u/f14/17/42/32/84/alicia10.jpg" /></div><div class="cate_description"> blavugk pseudo <a href= "lien profil">profil</a> • <a href="lien mp">contacter</a><br /></div></div><div style="clear: both;"></div>
<div class="cate"><div class="cate_img"><img src="http://i14.servimg.com/u/f14/17/42/32/84/jeanne10.jpg" /></div><div class="cate_description"> pseudo <a href= "lien profil">profil</a> • <a href="lien mp">contacter</a><br /></div></div><div style="clear: both;"></div>

</div>
</div>
</td>

<td>
<div class="blocb">
<div class="center">
<div class="yoo">
<span class="titrepa">Bienvenue !</span>
</div><br />

<div class="textepa">
texte de bienvenue ici
</div><br />
</div>
</div>
</td>

<td>
<div class="blocpoto">
<div class="center">
<div class="yoo">
<span class="titrepa">Partenariat</span>
</div><br />

<div class="cpart">
<a href="#">
<img src="http://image.noelshack.com/fichiers/2012/44/1351954728-logo98.png" class="potos" />
</a>
<a href="#">
<img src="http://image.noelshack.com/fichiers/2012/44/1351954728-logo98.png" class="potos" />
</a>
<a href="#">
<img src="http://image.noelshack.com/fichiers/2012/44/1351954728-logo98.png" class="potos" />
</a>
<a href="#">
<img src="http://image.noelshack.com/fichiers/2012/44/1351954728-logo98.png" class="potos" />
</a>
<a href="#">
<img src="http://image.noelshack.com/fichiers/2012/44/1351954728-logo98.png" class="potos" />
</a>
<a href="#">
<img src="http://image.noelshack.com/fichiers/2012/44/1351954728-logo98.png" class="potos" />
</a>
<a href="#">
<img src="http://image.noelshack.com/fichiers/2012/44/1351954728-logo98.png" class="potos" />
</a>
<a href="#">
<img src="http://image.noelshack.com/fichiers/2012/44/1351954728-logo98.png" class="potos" />
</a>
</div>
<a href="#">les autres</a> • <a href="#">demande</a>
</div>
</div>
</td>
</tr>

<tr>
<td>
<div class="blocredit">
<div class="center">
<div class="yoo">
<span class="titrepa">Crédits</span>
</div>
</div><br />
<span class="textc">Design Par Jeanne D'Arc ♥<br />
Codage par Maguitte 2008 (vs.1)<br />
Pa par Absolute.Shine(Css-Actif) revue par Maguitte2008</span><br />

<div class="center">
<a href="http://www.css-actif.com/"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" border="0" /></a>
</div>
</div>
</td>

<td>
<div class="blocnews">
<div class="center">
<div class="yoo">
<span class="titrepa">Nouveautés</span>
</div>
</div>
00/00/00 • nouveauté ici<br />
00/00/00 • nouveauté ici<br />
00/00/00 • nouveauté ici<br />
00/00/00 • nouveauté ici<br />
00/00/00 • nouveauté ici<br />
00/00/00 • nouveauté ici<br />
<br />
</div>
</td>

<td>
<div class="bloctop">
<div class="center">
<div class="yoo">
<span class="titrepa">Top sites</span>
</div>

<div class="ctop">
<a href="#">
<img src="http://image.noelshack.com/fichiers/2012/44/1351880464-topsite98.png" class="tops" />
</a>
<a href="#">
<img src="http://image.noelshack.com/fichiers/2012/44/1351880464-topsite98.png" class="tops" />
</a>
<a href="#">
<img src="http://image.noelshack.com/fichiers/2012/44/1351880464-topsite98.png" class="tops" />
</a>
</div>un vote toutes les deux heures ~
</div>
</div>
</td>
</tr>
</table>

Merci par avance,
Bonne journée !

Bonjour Maguitte Smile

Ton problème est assez simple en fait : tu ne vois pas le texte parce-qu'il se cache... plus haut !

En fait, ta description est positionnée de manière relative. Du coup, elle démarre en-dessous de ton image, puisque c'est un bloc qui suit.

Pour palier à cela et faire "remonter" le texte, tu utilise ici une marge négative. Ca marche, mais ce n'est pas le top. L'erreur vient du fait que la marge négative remonte le texte de 120px tandis que celui-ci n'est trop bas que de 70px (hauteur de ton bloc, défini par le height: 70px; de ton image d'ailleurs).

Autrement dit, 2 choses à faire au niveau de .cate_description :

supprimer le margin-top: -120px; (mauvaise valeur et mauvaise propriété)
ajouter un top: -70px (bonne valeur, bonne propriété)

Et normalement, ça fonctionne, comme tu peux le constater Smile

Content de voir au passage que ton code est vraiment plus propre qu'avant (utilisation de <div class="center">, c'est un très bon signe Wink

).

Merci Espeon :3

Mais de rien !

Du coup, ton problème est-il résolu ? Very Happy

Si oui, je t'invite à l'indiquer dans le titre pour les modérateurs toussa... Wink

Oui, j'ai oublié de le faire ça !

Yop !
Je vois que le problème est résolu, donc je déplace !
Merci de l'avoir signalé PA ; glissement -> Texte que n'apparait pas. /terminer résolu/ 926145

PA ; glissement -> Texte que n'apparait pas. /terminer résolu/

PA ; glissement -> Texte que n'apparait pas. /terminer résolu/

Sujets similaires

Sujets similaires

Partenaires Or