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! |
| Barre de défilement partenaires | |
| Callie Rose
{ Membre }
Messages : 143
| A que coucou vous tous Ca faisait un ptit moment ^^ Bref, je vient vous trouver car j'aimerai savoir comment pourrais-je mettre une barre défilante afin de l'utiliser ici: - Code:
-
[img]http://i79.servimg.com/u/f79/17/34/71/89/53183010.jpg[/img] J'ai suivi le tuto pour les partenaires, il me faut juste une barre et tout rentre ^^ Merci d'avance |
Dernière édition par Callie Rose le Ven 26 Avr 2013, 12:20, édité 1 fois | |
| | | Melone
{ Modérateur }
Messages : 805
| Hello ! C'est assez simple. Tu entoures tout tes partenaires d'une div. Ensuite, à cette div tu applique une classe que tu nommes comme tu le souhaites. Pour le css, il faut que tu appliques une largeur (width) et une hauteur (height) à cette div : - Code:
-
.nomdelaclasse{ height: 0px; /*hauteur du bloc*/ width: 0px /*largeur du bloc*/ } Une fois cela fait, il te faut appliquer la propriété qui permet de faire apparaitre la scrollbar (ce qui correspond à la barre de défilement) en appliquant au css de ta classe ceci : - Code:
-
overflow: auto; La valeur auto permet d'afficher la scrollbar quand la taille dépasse et de la cacher quand le contenu ne dépasse pas la taille indiqué. | | |
| | | Callie Rose
{ Membre }
Messages : 143
| Merci mais OMG tout est décaler xD - Spoiler:
| | |
| | | Melone
{ Modérateur }
Messages : 805
| Je pourrais avoir ton code ? | | |
| | | Callie Rose
{ Membre }
Messages : 143
| Alors voila mon CSS - Code:
-
.cadrespr1, .cadrespr2{ height:120px; width: 360px; margin-left: 200px; font-size:20px; font-family: Georgia; } .cadrespr2{height:100px;} .cadrespr3{width: 250px;height:150px;margin-right:7px;} .cadrespr4{width: 490px;height:105px;margin:auto;} div.navig{ position:center; text-align:center; background-color:#383838; /*Il s'agit de la couleur du cadre*/ border-radius: 10px; /*arrondi*/ width: 650px; /*valeur de taille*/ } a.mainmenu:hover { /* lorsqu'on passe la souris sur les liens */ color: #B6BE91; text-decoration: underline; "font-size: 14px;" } /*SOULIGNEMENT*/ a { text-decoration: none; } /*FIN DE SOULIGNEMENT*/ .categoryImage { float:left; padding-right:5px; /* espace entre l'image et le texte */ opacity:0.5; /* opacité de départ */ filter:alpha(opacity=50); /* opacité pour IE8 et avant */ /* et là on détermine la transition : propriété durée */ -webkit-transition: opacity 1s; /* Chrome et Safari */ -moz-transition: opacity 1s; /* Firefox 4 */ -o-transition: opacity 1s; /* Opera */ transition: opacity 1s; } .categoryImage:hover { opacity:1; /* opacité au survol */ filter:alpha(opacity=100); /* opacité pour IE8 et avant */ } .categoryText { overflow-y:scroll; height:96px; /* à changer comme tu veux, en fonction de l'hauteur de l'image */ background-color:#474343; /*fond gris*/ padding: 2px; /*espace entre le texte et la bordure*/ } .postbody {padding-left:30px;} .postbody { display: block; text-align: justify; } .postdetails.poster-profile a img { -moz-border-radius-bottomleft:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border: 5px solid ##948F8F; } .imageQ { height:68px; border:2px solid #8E8E8E;width:289px;} .titreQ { background-color:#8E8E8E;padding:5px;text-align:center;width:283px;margin-top:-3px;margin-bottom:-2px;text-shadow:2px 2px 2px #000; color:#fff;}
.blocQ {height:85px;overflow:auto; border:2px solid #8E8E8E;width:279px;padding:5px;text-align:justify;} .forumline { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; padding:3px; }
.statistiques { background-color: #a19c77; overflow:auto; max-height: 200px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 4px dotted #7f7757; padding:10px; margin:10px; text-align:left; }
.groupes { font-size:16px; font-weight:bold; font-style:italic; text-transform:lowercase; text-decoration: none!important; margin-left: 20px; letter-spacing:1px; }
.catqeel { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 4px dotted #7f7757; padding:20px; background-color:#958f67; }
/* PAGE D'ACCUEIL PAR ORANGE DE CSSACTIF (http://css-actif.com/) MERCI DE NE PAS RETIRER CETTE MENTION, PAR RESPECT. */ /* Mise en forme générale */ .cssactif_pa_main { width: 700px; padding: 50px; margin: 30 auto; } .cssactif_pa_main h1 { /* Titre principal (Bienvenue sur...) */ font-family: "Arial Narrow", Courier, monospace; /* Police de caractère */ text-align: center; /* Alignement du texte */ text-transform: uppercase; /* Transformation: met le texte en majuscules */ font-weight: normal; /* Épaisseur normale */ letter-spacing: 12px; /* Espacemement des caractères en PX */ font-size: 25px; /* Grosseur du texte */ color: #A86F7A; /* Couleur du texte */ text-shadow: 2px 2px 0px #615D5D; /* Ombre du texte */ } .cssactif_pa_main h2 { /* Titre des colonnes (Contexte, Nouveautés etc.) */ font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Police de caractère */ font-weight: normal; /* Épaisseur normale */ color: #FFFFFF; /* Couleur du texte */ text-transform: uppercase; /* Transformation: met le texte en majuscules */ text-shadow: 1px 1px 1px #000000; /* Ombre du texte */ font-size: 18px; /* Grosseur du texte */ margin:0; } .cssactif_pa_colonne { /* Style général des colonnes */ float: left; /* Place les colonnes un à côté de l'autre */ width: 33%; /* Donne la grandeur des colonnes */ background-color: #D9D6D0; /* Couleur de fond */ height: 450px; /* Hauteur des colonnes: doit être fixe */ color: #777777; /* Couleur du texte */ opacity: 0.9; /* Opacité des colonnes */ /* Transition */ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;
/*Ombre porté */ -webkit-box-shadow: 0px 0px 1px 0px #CCCCCC; box-shadow: 0px 0px 1px 0px #CCCCCC;
} .cssactif_pa_colonne p { /* Paragraphe des colonnes */ padding: 0 10px; /* Padding */ text-indent: 10px; /* Alinéa */ text-align: justify; /* Alignement du texte */ } .cssactif_pa_colonne:hover { /* Colonne au survol */ /* Effet de grossissement */ -moz-transform: scale(1.05) translate(0px, -20px) ; -webkit-transform: scale(1.05) translate(0px, -20px) ; -o-transform: scale(1.05) translate(0px, -20px) ; -ms-transform: scale(1.05) translate(0px, -20px); transform: scale(1.05) translate(0px, -20px) ;
opacity: 1; /* Opacité */
/* Nouvelle ombre portée */ -webkit-box-shadow: 0px 5px 10px 0px #CCCCCC; box-shadow: 0px 5px 10px 0px #CCCCCC; z-index: 999;
} .cssactif_pa_header { /* Style commun des header de couleur */ padding: 10px; height: 80px; }
.cssactif_pa_header p { /* Style du description dans les headers */ margin: 5px; /* Marge */ padding: 0; /* Padding */ color: #FFFFFF; /* Couleur du texte */ text-shadow: 1px 1px 1px #000000; /* Ombre portée */ font-style: italic; /* Style italic */ opacity: 0.8; /* Opacity du texte */
} .colgauche .cssactif_pa_header {background-color: #9CC7C2;} /* Colonne de gauche, couleur du header */ .colcentre .cssactif_pa_header {background-color: #BBC2AA;}/* Colonne du centre, couleur du header */ .coldroite .cssactif_pa_header {background-color: #D1CE9B;} /* Colonne de droite, couleur du header */ /* Contenu des colonnes */
.new { margin: 0px 10px 5px 10px; /* Marge Haut Droit Bas Gauche */ padding: 5px; /* Padding */ border-bottom: 1px solid #B8717F; /* Bordure du séparateur */ text-align: justify; /* Alignement du texte */ }
.new em { /* Dates */ color: #B8717F; /* Couleur du texte */ text-transform: uppercase; /* Transformation du texte en majuscule */ font-style: normal; /* Enlève le italic par défaut de la balise em */ font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Police de caractère */ }
.new em:after { content: " ►"#9491A6; /* Ajoute la flèche après les dates */ }
.pers { /* Cadre des personnages */ border: 1px solid #91B894; /* Bordure des personnages */ margin: 10px; /* marge externe */ /* Arrondissement des bordures */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
padding: 3px; /* Marge interne */ text-align: center; /* Alignement du texte */ }
.pers img { /* Image des personnages */ float: left; /* Place à gauche du texte */ width: 60px; /* Grandeur de l'image */ height: 60px; /* Grandeur de l'image */ border: 3px solid #91B894; /* Bordure de l'image */ /* Arrondissement des bordures */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
/* Transformation */ -moz-transform: rotate(-12deg) translate(0px, -5px) ; -webkit-transform: rotate(-12deg) translate(0px, -5px) ; -o-transform: rotate(-12deg) translate(0px, -5px) ; -ms-transform: rotate(-12deg) translate(0px,-5px) ; transform: rotate(-12deg) translate(0px, -5px); }
.pers:first-line { /* Première ligne:contient le nom du personnage */ color: #7fbf33;/* Couleur du texte */ font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Police de caractère */ text-transform: uppercase; /* Transformation du texte */ } .modifcat_phanta{ background-color: #fff; width: 820px;} .hautcat_phanta{ position : relative ; top : -8px ; } .bodyline { border-left: 5px solid #A8C78B; border-right: 5px solid #A8C78B; box-shadow: 0px 0px 10px grey; } body { margin: 0px; padding: 0px; } div.navig{ line-height:5px; text-align:center; position:fixed; margin-top:-10px; margin-left:-10px; color:#A8C78B; font-family:trebuchet ms; background-color:#A8C78B; padding:10px 10px; opacity:0.7; width:100%; } background-color: #A8C78B; border-bottom: 6px solid #DB5883; a.mainmenu img{ display: none; } a.mainmenu { margin: 5px; font-family: Arial; font-size: 11px; } .bodyline -moz-border-radius: 40px 20px 20px 20px ; -webkit-border-radius: 40px 20px 20px 20px ; border-radius:40px 20px 20px 20px ; .categoryImage { clear:both; } .navig { position: absolute; top: 0px; width: 150%; } /*---------------- CHATBOX ----------------*/ #chatbox_header .cattitle strong { display: none; } #chatbox_header .cattitle:before { content: "Kiss Academy - Le staff surveille ! ♥"; } div.cssactif_tableaupartenaire { width: 245px; /* À adapter en fonction du nombre de colonnes désirées (typiquement: (NOMBRE_COLONNE * (2*MARGE)) + (4 * Largeur initiale) */ line-height: 0; /* À ne pas modifier */ } div.cssactif_tableaupartenaire a, div.cssactif_tableaupartenaire a img { height: 25px; /* Hauteur initiale */ width: 60px; /* Largeur initiale */ } div.cssactif_tableaupartenaire a { display: inline-block; /* À ne pas modifier */ position: relative; /* À ne pas modifier */ margin: 3px; /* MARGE entre les images */ }
div.cssactif_tableaupartenaire a img { display: block; /* À ne pas modifier */ position: absolute; /* À ne pas modifier */ left: 0; /* À ne pas modifier */ top: 0; /* À ne pas modifier */ /* Transitions pour différents navigateurs */ /* navigateur: toutes_transitions durée type */ -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; }
div.cssactif_tableaupartenaire a:hover img { height: 34px; /* Hauteur finale */ width: 88px; /* Largeur finale */ z-index: 99; /* Place l'image au-dessus des autres */ /* Positionne le logo de pleine taille au centre - À adapter */ left: -50%; top: -50%; } .nomdelaclasse{ height: 5px; /*hauteur du bloc*/ width: 5px /*largeur du bloc*/ } overflow: auto; ET mon code de PA dans Généralité - Code:
-
<div class="cssactif_pa_main"> <h1><img src="http://i73.servimg.com/u/f73/16/46/90/59/pa13.png" border="0" alt="" /></h1><div><div class="cssactif_pa_colonne colgauche"> <div class="cssactif_pa_header"> <h2>KISS ACADEMY</h2> <p>"A moi les plages, le sable, l'eau transparente et ces jolies filles en maillots de bain !! Et ces mini-jupes volantes dans les couloirs !!" </p> </div> <p>N'avez-vous jamais rêvé de vivre en Floride ? La plage, le soleil, les fêtes,... Là bas il y a tout ce qu'il faut pour profiter de la vie ! Alors pourquoi ne pas vous y rendre ? En tant qu'étudiant, découvrez la prestigieuse Kiss Academy, Plutôt citadin ? Travaillez dans la splendide ville d'Arcadia ! Tout ce dont vous avez toujours rêvé est à portée de main, alors n'hésitez pas, rejoignez nous !<div<div align="right"><a href="http://kiss-academy.forumactif.org/t1741-contexte"postlink"> -> MORE ?</a></div></p><div class="cssactif_tableaupartenaire"> <a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --></div> <div class="cssactif_pa_colonne colcentre"> <div class="cssactif_pa_header"> <h2>Newspapers</h2> <p>"Quoi ? Les infos les plus croustillantes ! Tu sauras tout ce qu'il y aura à savoir par ici ! T'inquiète tu seras pas largué !"</p> </div> <div class="new"><em>10/04</em>Ré-instauration de la PA ainsi que tout le reste ! Vive le printemps ! </div> <div class="new"><em>10/04</em> Mise en place de la réputation ! Attention à vous !</div> <div class="new"><em>12/04</em> L’évènement va bientôt débuter ! Ewi, tu le sauras bientôt !</div> </div> <div class="cssactif_pa_colonne coldroite"> <div class="cssactif_pa_header"> <h2>Staff ... GOD !</h2> <p>"Ils sont là, sont tous beaux, tout frais. Ceux qui ont participé à la création et qui gèrent le petit bijou. Sans l'un d'eux le navire coule !" </p> </div> <div class="pers"> <img src="http://i73.servimg.com/u/f73/16/46/90/59/13423512.jpg"> Kira Stone<br> Fondatrice<br> <a href="#pv1"><a href="http://kiss-academy.forumactif.org/u1" class="postlink">Profil</a> | <a href="http://kiss-academy.forumactif.org/privmsg?mode=post&u=1" class="postlink">MP</a></a> </div> <div class="pers"> <img src="http://i73.servimg.com/u/f73/16/46/90/59/13423510.jpg"> Adan Silver<br> Administratrice<br> <a <a href="http://blackdeadredemption.forumgratuit.org/u1?tid=ba1a79c4db2cd046d6f98e4dbc830850" class="postlink">Profil</a> | <a href="http://blackdeadredemption.forumgratuit.org/privmsg?mode=post&u=1?tid=ba1a79c4db2cd046d6f98e4dbc830850" class="postlink">MP</a></a> </div> <div class="pers"> <img src="http://i77.servimg.com/u/f77/13/66/42/13/13423510.jpg"> Callie R. Lawer<br> Administratrice<br> <a <a href="http://kiss-academy.forumactif.org/privmsg?mode=post&u=617a <a href="http://kiss-academy.forumactif.org/u617" class="postlink">Profil</a> | <a href="" class="postlink">MP</a></a> </div> <div class="pers"> <img src="http://i73.servimg.com/u/f73/16/46/90/59/13423511.jpg"> Takamasa Ishihara<br> Modérateur<br> <a href="#pv1"><a href="http://kiss-academy.forumactif.org/u397" class="postlink">Profil</a> | <a href="http://blackdeadredemption.forumgratuit.org/privmsg?mode=post&u=7?tid=ba1a79c4db2cd046d6f98e4dbc830850" class="postlink">MP</a></a> </div> <div class="pers"> <img src="http://i73.servimg.com/u/f73/16/46/90/59/13423513.jpg"> Erwan D. Cruseo<br> Administratrice<br> <a href="#pv1"><a href="http://kiss-academy.forumactif.org/u672" class="postlink">Profil</a> | <a href="http://kiss-academy.forumactif.org/privmsg?mode=post&u=672" class="postlink">MP</a></a> </div> </div> </div> </div> | | |
| | | Melone
{ Modérateur }
Messages : 805
| - Code:
-
<a <a href="http://blackdeadredemption.forumgratuit.org/u1?tid=ba1a79c4db2cd046d6f98e4dbc830850" class="postlink">Profil</a> | <a href="http://blackdeadredemption.forumgratuit.org/privmsg?mode=post&u=1?tid=ba1a79c4db2cd046d6f98e4dbc830850" class="postlink">MP</a></a> Petite erreur ici, tu as deux fois les balises a ! Sinon, il me semble que c'est cette partie ? - Code:
-
<div class="cssactif_tableaupartenaire"><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --><a href="http://kiss-academy.forumactif.org/" title="KISS ACADEMY"><img src="http://i79.servimg.com/u/f79/16/46/90/59/883110.png" alt="CSSActif" /></a><!-- --></div> Dans ton css, tu n'as pas appliqué de hauteur. Ajoute donc ceci : - Code:
-
.cssactif_tableaupartenaire{ height: Xpx; width: Xpx; overflow: auto; } | | |
| | | Callie Rose
{ Membre }
Messages : 143
| Ah oui effectivement, j'ai retiré ce qui était de trop et ajouté ce que tu m'as dit mais rien n'y fait, rien ne change... Et je ne m'y connait en taille alors mis: - Code:
-
overflow: auto; .cssactif_tableaupartenaire{ height: 9px; width: 9px; overflow: auto; } | | |
| | | Melone
{ Modérateur }
Messages : 805
| 9px c'est beaucoup trop petit. ^^' Essaye donc 40px. Et je viens de me rendre compte que tu as ça dans ton css : - Code:
-
.nomdelaclasse{ height: 5px; /*hauteur du bloc*/ width: 5px /*largeur du bloc*/ } overflow: auto; Déjà de un, il fallait modifier le nom de la classe par la tienne et de deux, mettre le overflow entre les {}. Donc supprime ça ! Une fois cela fait, je peux ré-avoir ton css & html si cela ne fonctionne toujours pas ? | | |
| | | Callie Rose
{ Membre }
Messages : 143
| Waah c'est deja mieux mais ca me donne ca: - Spoiler:
| | |
| | | Melone
{ Modérateur }
Messages : 805
| Je peux ré-avoir ton code ? | | |
| | | Callie Rose
{ Membre }
Messages : 143
| ET voilà, je suis désolée de pas être plus connaisseuse en la matière... - Code:
-
div.cssactif_tableaupartenaire { width: 245px; /* À adapter en fonction du nombre de colonnes désirées (typiquement: (NOMBRE_COLONNE * (2*MARGE)) + (4 * Largeur initiale) */ line-height: 0; /* À ne pas modifier */ } div.cssactif_tableaupartenaire a, div.cssactif_tableaupartenaire a img { height: 25px; /* Hauteur initiale */ width: 60px; /* Largeur initiale */ } div.cssactif_tableaupartenaire a { display: inline-block; /* À ne pas modifier */ position: relative; /* À ne pas modifier */ margin: 3px; /* MARGE entre les images */ }
div.cssactif_tableaupartenaire a img { display: block; /* À ne pas modifier */ position: absolute; /* À ne pas modifier */ left: 0; /* À ne pas modifier */ top: 0; /* À ne pas modifier */ /* Transitions pour différents navigateurs */ /* navigateur: toutes_transitions durée type */ -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; }
div.cssactif_tableaupartenaire a:hover img { height: 34px; /* Hauteur finale */ width: 88px; /* Largeur finale */ z-index: 99; /* Place l'image au-dessus des autres */ /* Positionne le logo de pleine taille au centre - À adapter */ left: -50%; top: -50%; } .cssactif_tableaupartenaire{ height: 40px; width: 40px; overflow: auto; } J'ai juste mis la partie qui nous intéresse pour éviter le gros bloc | | |
| | | Melone
{ Modérateur }
Messages : 805
| Je voulais dire le HTML. ^^' | | |
| | | Callie Rose
{ Membre }
Messages : 143
| Han pardon x( - Code:
-
<div class="cssactif_pa_main"> <h1><img src="http://i73.servimg.com/u/f73/16/46/90/59/pa13.png" border="0" alt="" /></h1><div><div class="cssactif_pa_colonne colgauche"> <div class="cssactif_pa_header"> <h2>KISS ACADEMY</h2> <p>"A moi les plages, le sable, l'eau transparente et ces jolies filles en maillots de bain !! Et ces mini-jupes volantes dans les couloirs !!" </p> </div> <p>N'avez-vous jamais rêvé de vivre en Floride ? La plage, le soleil, les fêtes,... Là bas il y a tout ce qu'il faut pour profiter de la vie ! Alors pourquoi ne pas vous y rendre ? En tant qu'étudiant, découvrez la prestigieuse Kiss Academy, Plutôt citadin ? Travaillez dans la splendide ville d'Arcadia ! Tout ce dont vous avez toujours rêvé est à portée de main, alors n'hésitez pas, rejoignez nous !<div align="right"><a href="http://kiss-academy.forumactif.org/t1741-contexte"postlink"> -> MORE ?</a></div></p> </div> <div class="cssactif_pa_colonne colcentre"> <div class="cssactif_pa_header"> <h2>Newspapers</h2> <p>"Quoi ? Les infos les plus croustillantes ! Tu sauras tout ce qu'il y aura à savoir par ici ! T'inquiète tu seras pas largué !"</p> </div> <div class="new"><em>10/04</em> Ré-instauration de la PA ainsi que tout le reste (partenaires/vote)! Vive le printemps ! </div> <div class="new"><em>10/04</em> Mise en place de la réputation ! Attention à vous !</div> <div class="new"><em>12/04</em> L’évènement va bientôt débuter ! Ewi, tu le sauras bientôt !</div> </div> <div class="cssactif_pa_colonne coldroite"> <div class="cssactif_pa_header"> <h2>Staff ... GOD !</h2> <p>"Ils sont là, sont tous beaux, tous frais. Ceux qui ont participés à la création et qui gèrent le petit bijou. Sans l'un d'eux, le navire coule !" </p> </div> <div class="pers"> <img src="http://i73.servimg.com/u/f73/16/46/90/59/13423512.jpg"> Kira Stone<br> Fondatrice<br> <a href="#pv1"><a href="http://kiss-academy.forumactif.org/u1" class="postlink">Profil</a> | <a href="http://kiss-academy.forumactif.org/privmsg?mode=post&u=1" class="postlink">MP</a></a> </div> <div class="pers"> <img src="http://i73.servimg.com/u/f73/16/46/90/59/13423510.jpg"> Adan Silver<br> Administratrice<br> <a <a href="http://kiss-academy.forumactif.org/u679" class="postlink">Profil</a> | <a href="http://kiss-academy.forumactif.org/privmsg?mode=post&u=679" class="postlink">MP</a></a> </div> <div class="pers"> <img src="http://i77.servimg.com/u/f77/13/66/42/13/13423510.png"> Lee Xiong<br> Administratrice<br> <a <a href="http://kiss-academy.forumactif.org/u371" class="postlink">Profil</a> | <a href="http://kiss-academy.forumactif.org/privmsg?mode=post&u=371" class="postlink">MP</a></a> </div> <div class="pers"> <img src="http://i77.servimg.com/u/f77/13/66/42/13/13423510.jpg"> Callie R. Lawer<br> Administratrice<br> <a <a href="http://kiss-academy.forumactif.org/u617" class="postlink">Profil</a> | <a href="http://kiss-academy.forumactif.org/privmsg?mode=post&u=617" class="postlink">MP</a></a> </div> <div class="pers"> <img src="http://i77.servimg.com/u/f77/13/66/42/13/mariag12.png"> Takamasa Ishihara<br> Administratrice<br> <a href="#pv1"><a href="http://kiss-academy.forumactif.org/u397" class="postlink">Profil</a> | <a href="http://kiss-academy.forumactif.org/privmsg?mode=post&u=397" class="postlink">MP</a></a> </div> <div class="pers"> <img src="http://i73.servimg.com/u/f73/16/46/90/59/13423513.jpg"> Erwan D. Cruseo<br> Administrateur<br> <a href="#pv1"><a href="http://kiss-academy.forumactif.org/u672" class="postlink">Profil</a> | <a href="http://kiss-academy.forumactif.org/privmsg?mode=post&u=672" class="postlink">MP</a></a> </div> </div> </div> </div> | | |
| | | Melone
{ Modérateur }
Messages : 805
| Et bien dans ton code, je ne vois pas les partenaires... Tu ne les a pas placé dedans ? | | |
| | | 'Christa
Lostmindy
Messages : 2856
| Bonsoir, Tu gagnerais à regarder ton code HTML sur un éditeur de texte doté d'une coloration syntaxique, l'erreur te sauterait aux yeux. Il te faudrait également penser à sauter des lignes et à indenter le code proprement pour le rendre lisible (en particulier pour pouvoir bien voir les parties correspondant à chaque colonne) Bref, vois cette ligne dans ton code : - Code:
-
<div<div align="right"><a href="http://kiss-academy.forumactif.org/t1741-contexte"postlink"> -> MORE ?</a></div></p><div class="cssactif_tableaupartenaire"> Ou ici, dans le code que tu as donné en dernier : - Code:
-
<div align="right"><a href="http://kiss-academy.forumactif.org/t1741-contexte"postlink"> -> MORE ?</a></div></p> Ne vois tu pas quelque chose d'anormal ? | | |
| | | Callie Rose
{ Membre }
Messages : 143
| Melone > Déplacé ? Euh non.. enfin je sais pas ... Christa' > Je suis désolée mais je ne vois pas d'erreurs, enfin je veux dire, pour moi c'est un peu du chinois, :/ | | |
| | | 'Christa
Lostmindy
Messages : 2856
| Ce qui m'étonne vu le temps depuis lequel tu es sur CSSActif, qui est un forum ouvertement orienté apprentissage depuis début 2012...
Vu que tu as été avertie à plusieurs reprises par les membres du staff en raison du peu d'effort dont tu fais preuve à chaque demande d'aide, je préfère encore te voir réfléchir que te donner la solution prémâchée.
Le code que tu as donné à Melone en dernier ne contient pas les partenaires, un "je ne sais pas" ne va pas le faire réapparaitre par magie. Il contient également la ligne de code que j'ai citée en dernier. C'est quoi ce "postlink" ? Si tu ne sais pas ce que c'est, que fait-il là ? | | |
| | | Callie Rose
{ Membre }
Messages : 143
| Le "postlink" c'ese juste un lien permettant de conduire à une autre page. perso' je ne pense pas qu'il est de trop.
| | |
| | | 'Christa
Lostmindy
Messages : 2856
| Qu'il soit de trop.
Ce n'était pas ce que je voulais te faire remarquer. Révise les bases du HTML&CSS, en particulier celles sur les attributs dans les balises HTML.
De surcroit, tu n'as pas non plus répondu au problème soulevé par Melone, à savoir que le code que tu as donné en dernier n'avait aucune trace des partenaires. Fondamentalement, c'est "ton" code, donc tu es supposée savoir où ils sont partis. Ce n'est pas en disant "je ne sais pas" qu'ils vont revenir. | | |
| | | Contenu sponsorisé
| | | | | Barre de défilement partenaires | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|