CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:  Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus! | | | volet sur bloc texte et cellule découpée (résolu) |  |
|  pop.porn 
{ Membre }
 Messages : 9
 | Bonjour/bonsoir ! Après maintes recherches et tentatives, je ne trouve pas de réponse à mon problème, et c'est assez embêtant.  Je travaille sur la page d'accueil de mon forum (pas encore mise parce que pas fini, donc le lien du forum ne servira pas je pense). La voici :  - Code:
-
<center><div style="border: #F08080 0px solid"><div style="font-size: 50px;font-family:georgia;font-weight:lighter;text-shadow: 2px 2px 0px white;text-shadow: -1px 0 #fff 0 1px #fff, 1px 0 #fff, 0 -1px #fff; width: 500px; line-height:20px"><i>bienvenue</i></div><table><tr><td><div style="font-size: 20px;color: #eb251d;font-family: 'Codystar', cursive;position : relative;text-shadow: 0px 0px 5px #ffffff;top : 5px;text-align:center;line-height:20px"><link href='http://fonts.googleapis.com/css?family=Codystar' rel='stylesheet' type='text/css'><a href="LIEN DU REGLEMENT" class="postlink">RÈGLEMENT </a></div></link></td> <td><div style="font-size: 20px;color: #eb251d;font-family: 'Codystar', cursive;position : relative;text-shadow: 0px 0px 5px #ffffff;top : 5px;text-align:center;"><link href='http://fonts.googleapis.com/css?family=Codystar' rel='stylesheet' type='text/css'><a href="LIEN SCENA" class="postlink">SCÉNARIOS </a></div></link></td> <td><div style="font-size: 20px;color: #eb251d;font-family: 'Codystar', cursive;position : relative;text-shadow: 0px 0px 5px #ffffff;top : 5px;text-align:center;"><link href='http://fonts.googleapis.com/css?family=Codystar' rel='stylesheet' type='text/css'><a href="LIEN BOTTIN" class="postlink">BOTTIN </a></div></link></td> <td><div style="font-size: 20px;color: #eb251d;font-family: 'Codystar', cursive;position : relative;text-shadow: 0px 0px 5px #ffffff;top : 5px;text-align:center;"><link href='http://fonts.googleapis.com/css?family=Codystar' rel='stylesheet' type='text/css'><a href="LIEN INVITES" class="postlink">INVITÉS </a></div></link></td> <td><div style="font-size: 20px;color: #eb251d;font-family: 'Codystar', cursive;position : relative;text-shadow: 0px 0px 5px #ffffff;top : 5px;text-align:center;"><link href='http://fonts.googleapis.com/css?family=Codystar' rel='stylesheet' type='text/css'><a href="LIEN PARTENAIRE" class="postlink">PARTENAIRES</a></div></link></div></div></td></tr></table></br><div style=" width: 700px;"><table><tr><td align="left"><div style=" height: 150px; width: 210px; padding: 10px;"><div style=" height: 120px; overflow: auto; "><center></br>[flash(170,102)]http://www.youtube.com/v/aAlQ8RL-U8k?version=2[/flash]</center></div></div></td><td align="left"><div style=" height: 150px; width: 210px; padding: 10px;"><div style=" height: 120px; overflow: auto; padding: 2px;" align="justify"> en effet, sao paulo est principalement l'une des capitales du skate. aujourd'hui, en moyenne un brésilien entre 10 et 25 ans sur deux le pratique. nous nous dirigeons maintenant vers le Sud de la ville, en direction des quartiers les plus défavorisés de sao paulo. tenez voici justement un skater là-bas. allons l'interviewer.</br><a href="http://bowl-kings.forumactif.org/t6-contexte">→ suite du contexte</a></div></div></td><td valign="top"><div style="height: 150px; padding: 10px;"><div style=" height: 120px; overflow: auto;"> <table><tr><td><div class="monBloc"> <div class="blocVolet"></div> SOLEDAD aka pop.porn fondatrice - présente mp - profil </div></td> <td><div class="monBloc"> <div class="blocVolet"></div> SOLEDAD aka pop.porn fondatrice - présente mp - profil </div></td></tr> <tr><td><div class="monBloc"> <div class="blocVolet"></div> SOLEDAD aka pop.porn fondatrice - présente mp - profil </div></td> <td><div class="monBloc"> <div class="blocVolet"></div> SOLEDAD aka pop.porn fondatrice - présente mp - profil </div></td></tr></table></div></div></td></tr> <tr><td align="left"><div style=" height: 150px; width: 210px; padding: 10px;"><div style=" height: 120px; width: 210px; overflow: hidden;" valign="top"><table><tr><td>[img]http://i74.servimg.com/u/f74/18/27/41/90/staff10.jpg[/img]</td> <td>[img]http://i74.servimg.com/u/f74/18/27/41/90/staff10.jpg[/img]</td> <td>[img]http://i74.servimg.com/u/f74/18/27/41/90/staff10.jpg[/img]</td></tr><tr><td>[img]http://i74.servimg.com/u/f74/18/27/41/90/staff10.jpg[/img]</td> <td>[img]http://i74.servimg.com/u/f74/18/27/41/90/staff10.jpg[/img]</td> <td>[img]http://i74.servimg.com/u/f74/18/27/41/90/staff10.jpg[/img]</td></tr><tr><td>[img]http://i74.servimg.com/u/f74/18/27/41/90/staff10.jpg[/img]</td> <td>[img]http://i74.servimg.com/u/f74/18/27/41/90/staff10.jpg[/img]</td> <td>[img]http://i74.servimg.com/u/f74/18/27/41/90/staff10.jpg[/img]</td></tr></table></center></div></div></td><td align="left"><div style=" height: 150px; width: 210px; padding: 10px;"><div style=" height: 120px; overflow: auto; align="justify"><span class="questionformu">00.00.00 ►</span> ouverture du forum. bienvenue à la maison.  </div></div></td><td align="left"><div style=" height: 150px; width: 210px; padding: 10px;"><div style=" height: 120px; overflow: auto; "> <center><a href="http://bowl-kings.forumactif.org/" style="color:#B6BD5E; font-size: 15px;">♕</a> <a href="http://bowl-kings.forumactif.org/" style="color:#B6BD5E; font-size: 15px;">♕</a> <a href="http://bowl-kings.forumactif.org/" style="color:#B6BD5E; font-size: 15px;">♕</a> <a href="http://bowl-kings.forumactif.org/" style="color:#B6BD5E; font-size: 15px;">♕</a> <a href="http://bowl-kings.forumactif.org/" style="color:#B6BD5E; font-size: 15px;">♕</a> <a href="http://bowl-kings.forumactif.org/" style="color:#B6BD5E; font-size: 15px;">♕</a> <a href="http://bowl-kings.forumactif.org/" style="color:#B6BD5E; font-size: 15px;">♕</a> <a href="http://bowl-kings.forumactif.org/" style="color:#B6BD5E; font-size: 15px;">♕</a> <a href="http://bowl-kings.forumactif.org/" style="color:#B6BD5E; font-size: 15px;">♕</a></br><a href="http://bowl-kings.forumactif.org/" style="color:#B6BD5E; font-size: 15px;">♕</a> <a href="http://bowl-kings.forumactif.org/" style="color:#B6BD5E; font-size: 15px;">♕</a> <a href="http://bowl-kings.forumactif.org/" style="color:#B6BD5E; font-size: 15px;">♕</a> <a href="http://bowl-kings.forumactif.org/" style="color:#B6BD5E; font-size: 15px;">♕</a> <a href="http://bowl-kings.forumactif.org/" style="color:#B6BD5E; font-size: 15px;">♕</a> <a href="http://bowl-kings.forumactif.org/" style="color:#B6BD5E; font-size: 15px;">♕</a> <a href="http://bowl-kings.forumactif.org/" style="color:#B6BD5E; font-size: 15px;">♕</a> <a href="http://bowl-kings.forumactif.org/" style="color:#B6BD5E; font-size: 15px;">♕</a> <a href="http://bowl-kings.forumactif.org/" style="color:#B6BD5E; font-size: 15px;">♕</a></br><a href="http://bowl-kings.forumactif.org/" style="color:#B6BD5E; font-size: 15px;">♕</a> <a href="http://bowl-kings.forumactif.org/" style="color:#B6BD5E; font-size: 15px;">♕</a> <a href="http://bowl-kings.forumactif.org/" style="color:#B6BD5E; font-size: 15px;">♕</a> <a href="http://bowl-kings.forumactif.org/" style="color:#B6BD5E; font-size: 15px;">♕</a> <a href="http://bowl-kings.forumactif.org/" style="color:#B6BD5E; font-size: 15px;">♕</a> <a href="http://bowl-kings.forumactif.org/" style="color:#B6BD5E; font-size: 15px;">♕</a> <a href="http://bowl-kings.forumactif.org/" style="color:#B6BD5E; font-size: 15px;">♕</a> <a href="http://bowl-kings.forumactif.org/" style="color:#B6BD5E; font-size: 15px;">♕</a> <a href="http://bowl-kings.forumactif.org/" style="color:#B6BD5E; font-size: 15px;">♕</a></br></br>[font=ms mincho][url=http://bowl-kings.forumactif.org/]fuck you bitch[/url][/font]</center></div></div></td></tr></table></center> </div></br><center><table style="margin-top: -60px;"><tr><td> <a href="http://bowl-kings.forumactif.org/g3-soberano-leos" style="color:#AD2735"><div style="font-family:ms mincho;font-size:24px;text-transform: uppercase">0 pts</div></a></td><td> <a href="http://bowl-kings.forumactif.org/g4-criancas-de-rua" style="color:#C59342"><div style="font-family:ms mincho;font-size:24px;text-transform: uppercase">0 pts</div></a></td><td> <a href="http://bowl-kings.forumactif.org/g7-do-vale" style="color:#718534"><div style="font-family:ms mincho;font-size:24px;text-transform: uppercase">0 pts</div></a></td><td><a href="http://bowl-kings.forumactif.org/g6-bello-jovem" style="color:#58969C"><div style="font-family:ms mincho;font-size:24px;text-transform: uppercase">0 pts</div></a></td><td> <a href="http://bowl-kings.forumactif.org/g5-em-torno" style="color:#8C669E"><div style="font-family:ms mincho;font-size:24px;text-transform: uppercase">0 pts</div></a></td></tr></table></center> Et voici le code de ma feuille CSS: - Code:
-
.selectCode { float:right; text-transform: uppercase; cursor:pointer; }
a:link {
text-decoration: none !important;
font-variant: none;
text-transform: none;
}
/* enlever dernière édition */
tr.post span.gensmall { display: none; }
/* DESCRIPTIONS */
.desc{
background-color: #161314;
width: 400px;
height: 75px;
overflow: auto;
padding: 6px; /*marge interne*/
margin-right: 20px; /*marge à droite*/
background-image:url('http://adresse de l'image de fond');
margin-top: -20px;
}
.liendesc{
background-color: #161314;
width: 200px;
height: 75px;
overflow: auto;
padding: 6px; /*marge interne*/
margin-right: 20px; /*marge à droite*/
background-image:url('http://adresse de l'image de fond');
margin-top: -20px;
}
/*FICHES*/
.fondpost {
width: 455px;
background-color: #161314;
border: px solid #f9f1d4;
padding: 10px;
line-height: 11px;
border-radius: 6px 6px 6px 6px;
}
.titreun{
color: #B6BD5E;
text-shadow: -2px 1px 0px #ffffff;
font-family: 'Georgia', cursive;
font-size: 30px;
text-transform: lowercase!important;
text-align: center;
margin-bottom: 10px;
margin-top: 4px;
}
.titredeux{
color: #9E7E6D;
text-shadow: -2px 1px 0px #ffffff;
font-family: 'Georgia', cursive;
font-size: 30px;
text-transform: lowercase!important;
text-align: center;
margin-bottom: 10px;
margin-top: 4px;
}
.cadre {
text-align: justify;
padding: 6px;
background-color: #43393A;
border: 1px solid #43393A;
font-size: 11px;
border-radius: 10px;
}
.colorun{
color: #B6BD5E;
}
.colordeux{
color: #9E7E6D;
}
/*COLONNE DERNIER MESSAGE*/
.aligner {
margin-top: 25px;}
.secondarytitle h2 {
text-align: center; /*alignement du texte par rapport au bloc qui le contient */
letter-spacing:2px; /* espacement entre les lettres */
font-variant:small-caps; /* texte en petites majuscules */
color:#ffffff; /* couleur du texte */
font-family: Geneva, Tahoma, Verdana, sans-serif;
font-size:16px;
}
/*---profil personnalisé---*/
.fondavatar{
background-color:#43393A;
border-right:#C2C7D4 0px solid;
border-left:#C2C7D4 0px solid;
border-radius: 15px;
padding:10px;
width:210px;
}
.fondinfos{
background-color:#43393A;
border-right:#C2C7D4 0px solid;
border-left:#C2C7D4 0px solid;
border-radius: 15px;
padding:10px;
width:210px;
}
.fondfeuille{
background-color:#43393A;
border-right:#C2C7D4 0px solid;
border-left:#C2C7D4 0px solid;
border-radius: 15px;
padding:10px;
width:210px;
}
.pseudo{
font-size: 30px;
color : #;
font-family:'amatic sc',cursive;
text-shadow: 1px 1px 2px #;
line-height:28px;
}
/*---formulaire---*/
.questionformu{
color : #736D4C;
text-transform: uppercase;
}
.pa{
width : 245px;
height : 245px;
background-color: #F2F2F2;
marging: 5px;
text-transform: uppercase;
text-align: justify;
}
.navigation {
background-color: #261D1E;
border: 3px solid #;
width: 820px;
}
a.mainmenu img{
display: none;
}
a.mainmenu {
margin: 5px;
font-family: Arial;
font-size: 11px;
text-transform: uppercase;
}
/*------images staff pa-------*/
/* Bloc principal */
.monBloc {
position: relative; /* important ! */
overflow: hidden; /* cache tout ce qui dépasse du bloc. Si vous voulez que votre volet dépasse, retirez cette ligne */
width: 90px; /* largeur du bloc */
height: 54px; /* hauteur du bloc */
background: #161314; /* couleur de fond */
}
/* Bloc de recouvrement */
.blocVolet {
position: absolute; /* positionnement absolu (important) */
top: 0; /* (important) */
left: 0; /* (important) */
width: 90px; /* largeur du bloc (identique au bloc principal) */
height: 54px; /* hauteur du bloc (identique au bloc principal) */
background-image: url("http://i76.servimg.com/u/f76/12/91/39/42/stafff10.jpg"); /* couleur de fond */
/* réglage de la transition */
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
/* Changement au survol */
.monBloc:hover > .blocVolet {
left: -90px; /* le bloc se décalera vers la gauche de 300px; (largeur du bloc) */
} _______________________PROBLÈME N°1J'ai pu installer un effet volet pour chacune des images du staff grâce à ce tuto. Seul bémol, c'est que quand je passe le curseur sur le volet, le texte n'apparaît pas entièrement.  J'ai pourtant vu sur quelques forums (dont je ne me souviens pas les noms) que c'était possible de mettre un peu plus de texte.  J'ai essayé directement dans ma fiche avec des div valign="top", mais ça ne fonctionne pas... Le code concernant cette cellule du tableau est le suivant : - Code:
-
<td valign="top"><div style="height: 150px; padding: 10px;"><div style=" height: 120px; overflow: auto;"> <table><tr><td><div class="monBloc"> <div class="blocVolet"></div> SOLEDAD aka pop.porn fondatrice - présente mp - profil </div></td> <td><div class="monBloc"> <div class="blocVolet"></div> SOLEDAD aka pop.porn fondatrice - présente mp - profil </div></td></tr> <tr><td><div class="monBloc"> <div class="blocVolet"></div> SOLEDAD aka pop.porn fondatrice - présente mp - profil </div></td> <td><div class="monBloc"> <div class="blocVolet"></div> SOLEDAD aka pop.porn fondatrice - présente mp - profil </div></td></tr></table></div></div></td> _______________________PROBLÈME N°2J'aurais aimé enlever la barre de navigation de cette cellule staff. J'ai donc enlevé le overflow: auto de la cellule. Le problème c'est qu'elle se décale vers le haut après ça. J'ai ensuite remplacé le overflow: auto par overflow: hidden. Cette fois, mon tableau d'images est coupé en bas, comme ceci :  Je me suis dit qu'il fallait simplement rajouter un valign="top" quelque part, mais je ne trouve pas où exactement, j'obtiens des choses différentes à chaque fois. Voilà, merci de m'avoir lue, et éventuellement pour vos réponses.  |
Dernière édition par pop.porn le Ven 23 Aoû 2013, 11:43, édité 3 fois | |
| | | | Nihil 
{ Modérateur }
Messages : 1216
| Problème n°1 -
Hùm... Est il toujours d'actualité ? En effet chez moi ce n'est pas comme sur ta screen, on peut voir le texte "SOLEDAD aka pop.porn fondatrice - présente mp - profil "
Problème n°2 -
Idem, chez moi pas de barre d'overflow, ni de tableau d'image coupé :/
C'est pour ça qu'en général je préfère demander le lien, pour voir le problème "en direct" ^^ | | |
| | | | pop.porn
{ Membre }
Messages : 9
| Merci pour la rapidité de réponse ! Alors je l'avais essayé sur ma pa, ça ne marchait toujours pas. J'ai actualisé quelques minutes après sans le vouloir et le code marche ! Bref je ne comprends pas trop ce qu'il s'est passé... Peut-être un bug de navigateur. :/ Donc le problème est résolu, tout va bien haha ! Merci quand-même !  EDITest-ce que je peux néanmoins poser une autre petite question qui n'a pas forcément de rapport avec le reste ?  | | |
| | | | Nihil
{ Modérateur }
Messages : 1216
| | | | | pop.porn
{ Membre }
Messages : 9
| En fait j'aurais aimé changer la police, taille et couleur de mes titres de catégories, ainsi que des forums. Au début j'ai mis des div class autours de chaque catégorie et forum, le problème c'est que ça me modifiait aussi les petits liens ici :  J'ai tout enlevé donc. Pour les catégories j'ai utilisé ce code-ci dans ce tuto : - Code:
-
.secondarytitle h2 {
text-align: center; /*alignement du texte par rapport au bloc qui le contient */
letter-spacing:2px; /* espacement entre les lettres */
font-variant:small-caps; /* texte en petites majuscules */
color:#ffffff; /* couleur du texte */
font-family: Geneva, Tahoma, Verdana, sans-serif;
font-size:16px;
} Mais il ne marche pas. Pour les forums j'ai utilisé celui-ci, qui marche bien : - Code:
-
h3.hierarchy{
font-family: 'Georgia', cursive;
font-size: 20px;
margin-top: 10px;
}
h3.hierarchy .forumlink{
font-size: 20px;
} Mais, les titres sont bien seulement sur l'index. J'aimerai qu'ils soient également modifiés pour les sous-forums.  | | |
| | | | Nihil
{ Modérateur }
Messages : 1216
| Là il me faudrait vraiment le lien de ton forum, pour que je puisse voir directement les codes sur ton forum  | | |
| | | | pop.porn
{ Membre }
Messages : 9
| http://bowl-kings.forumactif.org/ voilà | | |
| | | | Nihil
{ Modérateur }
Messages : 1216
| Pour les pages autre que l'index, (par exemple "annexe" dans ta screen), il faut utiliser ceci : - Code:
-
h2.hierarchy a.forumlink{
/* Ton code */
} | | |
| | | | pop.porn
{ Membre }
Messages : 9
| effectivement, ça marche ! et pour les titres de catégories alors ? | | |
| | | | Nihil
{ Modérateur }
Messages : 1216
| Hum... Je vais te proposer un code, mais il risque peut être d'affecter d'autres choses en plus (cela va s'appliquer à tous les h2 enfant d'une balise center) - Code:
-
center > h2 {
/* code */
} |
Dernière édition par Nihil le Ven 23 Aoû 2013, 13:48, édité 1 fois | |
| | | | pop.porn
{ Membre }
Messages : 9
| J'ai essayé, ça marche ! Si jamais je vois un dysfonctionnement quelque part, je pourrai toujours changer mes catégories manuellement c'est pas très grave j'en ai pas beaucoup. En tout cas, mille mercis pour ton aide ! | | |
| | | | Contenu sponsorisé
| | | | | | | volet sur bloc texte et cellule découpée (résolu) | |
|
Sujets similaires | |
|
| | Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|
