Crimson DayFiches RPGFiches de lienSignaturesCodages diversAvatars 200*320 (F)Avatars 200*320 (M)Avatars 200*320 (divers)Proposer des personnalitésCommander des avatarsCommander des codesFiches d'aidePoser une questionPartenariatsSuivre les actus (Tumblr)Prochain design : se proposerCoup de ♥ : Anatomy of a Murder





 
AccueilAccueil  S'enregistrerS'enregistrer  ConnexionConnexion  RechercherRechercher  

Poster un nouveau sujet   Répondre au sujetPartagez | 
 

 Petite demande !

Voir le sujet précédent Voir le sujet suivant Aller en bas 
avatar
SlythLou
Invité


Message(#)Sujet: Petite demande !   04.09.17 16:43

Coucou hon

♦️ Type de codage : Avec onglets
♦️ Schéma :
♦️ Largeur max : C'est sur un forum avec une largeur assez grande, donc 1000px max devrait le faire
♦️ Couleurs : J'aime beaucoup celle que j'ai mis sur l'exemple (Slyhterin powa), mais bon, si vous avez certaines nuances à me conseiller, si vous préfèrez, si vous trouvez que ça rend mieux... Proposez-moi, je suis ouverte à toutes suggestions.
♦️ Précisions : Alors en fait, je recherche simplement une mise en page sympathique pour poster ma galerie sur un forum.
Pour ce qui est de la typographie des titres, vous faites ce qui vous plait, je ne suis pas très exigeante, tant qu'on peut lire ce qu'il y a marqué heart Juste, celles des onglets, que ce soit les mêmes et le grand titre, un truc différent.
Là, il y a 8 onglets, quatre de chaque côté, mais je ne pense pas tous les utiliser, comme ça se trouve j'en aurais besoin de plus. Alors, toujours si c'est possible bien sûr !, si vous pouviez mettre un code "isolé" pour que je puisse ajouter des onglets si je veux, ou en retirer ? Si c'est trop compliqué, ou impossible, je peux abandonner cette idée ^^
♦️ Avec ou sans hébergement CSS ? Comme ça vous arrange !

Voilà, j'espère avoir été assez clair et ne pas demander la lune pls
Je remercie déjà la personne qui se penchera sur mon cas love3
Revenir en haut Aller en bas
avatar
2981 12289 0
© Avatar by 2981 12289 0


Message(#)Sujet: Re: Petite demande !   05.09.17 17:32

Coucou ! Je te remercie pour ta commande heart Je vais t'avouer que je n'ai que très rarement osé m'attaquer aux onglets et que le JS n'est pas mon ami, mais j'ai tout de même commencé quelque chose. Comme je bloque un peu sur mon code (il me répond pas ce méchant no ), j'ai été demandé un petit coup de main, mais à priori, je vais pouvoir répondre à tes attentes... En tout cas j'espère ! hon Du coup je te dis à bientôt pour le rendu ! heart
Revenir en haut Aller en bas
http://2981122890.tumblr.com
avatar
SlythLou
Invité


Message(#)Sujet: Re: Petite demande !   05.09.17 22:15

Coucou !

Merci de ta réponse, j'ai hâte de voir le résultat alors, merci beaucoup d'avoir pris en compte ma demande hon
A bientôt quoii
Revenir en haut Aller en bas
avatar
2981 12289 0
© Avatar by 2981 12289 0


Message(#)Sujet: Re: Petite demande !   10.09.17 5:43

Bonsoiiiir !  cc
Je suis navrée pour l'attente, mais j'ai vraiment eu de la misère à arriver jusqu'au bout pour ce code, j'ai vraiment eu de la chance d'avoir la sympathique Night Neko pour me venir en aide, sinon je crois que je m'en serais jamais sortie please Mais pour le coup, grâce à elle, j'ai réussi à avoir un rendu qui me semble plutôt pas mal  hon Le voici :

Ceci n'est pas un titre.
Contenu de l'onglet 1
Contenu de l'onglet 2
Contenu de l'onglet 3
Contenu de l'onglet 4
Contenu de l'onglet 5
Contenu de l'onglet 6
Contenu de l'onglet 7
Contenu de l'onglet 8
© CRIMSON DAY & Night Neko

Code:
<link href="https://dl.dropbox.com/s/y9qzlsfffrzbx90/ficheonglets.css" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com/css?family=Coustard|Lobster" rel="stylesheet"><style>.cddiv1fond {background:#bfbeb9; border-top: 20px solid #29373a; border-bottom: 20px solid #29373a;} .cddiv1titre {color:#7c837b; text-shadow: 0px 0px 2px #222; font-family:Lobster; font-size:50px; line-height:normal;} .cddiv1bord {border-top: 5px solid #027e02; border-bottom: 5px solid #027e02; box-shadow: 0px 0px 3px #222;} .tabs label {font-family:Coustard; color:black; line-height:40px; font-size:11px; text-align:center; text-transform:uppercase; font-weight:lighter; background:#e6e6e6; border:1px solid black; box-shadow:0px 0px 3px #222;} .tabs input:hover + label {background: #FFF; font-style:italic; color:#333; border:1px solid #333;} .tabs input:checked + label {background: #fff; font-style:italic; color:#333; border:1px solid #333;} .content {color:black; font-family:verdana; font-size:11px; line-height:normal;} .content::-webkit-scrollbar {width: 10px; height: 10px; background-color: #2e2733;} .content::-webkit-scrollbar-track {background-color: #29373a; border-left:2px solid #29373a; border-right: 2px solid #29373a;} .content::-webkit-scrollbar-thumb {background-color: #027e02; border: 2px solid #29373a;}</style><div class="cddiv1cont"><div class="cddiv1bord"><div class="cddiv1fond"><div class="cddiv1titre">Ceci n'est pas un titre.</div><section class="tabs"><input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" /><label for="tab-1" class="tab-label-1 deplaceG">Onglet 1</label><input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" /><label for="tab-2" class="tab-label-2 deplaceG">Onglet 2</label><input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" /><label for="tab-3" class="tab-label-3 deplaceG">Onglet 3</label><input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" /><label for="tab-4" class="tab-label-4 deplaceG">Onglet 4</label><input id="tab-5" type="radio" name="radio-set" class="tab-selector-5" /><label for="tab-5" class="tab-label-5 deplaceD">Onglet 5</label><input id="tab-6" type="radio" name="radio-set" class="tab-selector-6" /><label for="tab-6" class="tab-label-6 deplaceD">Onglet 6</label><input id="tab-7" type="radio" name="radio-set" class="tab-selector-7" /><label for="tab-7" class="tab-label-7 deplaceD">Onglet 7</label><input id="tab-8" type="radio" name="radio-set" class="tab-selector-8" /><label for="tab-8" class="tab-label-8 deplaceD">Onglet 8</label><div class="content"><div class="content-1">Contenu de l'onglet 1</div><div class="content-2">Contenu de l'onglet 2</div><div class="content-3">Contenu de l'onglet 3</div><div class="content-4">Contenu de l'onglet 4</div><div class="content-5">Contenu de l'onglet 5</div><div class="content-6">Contenu de l'onglet 6</div><div class="content-7">Contenu de l'onglet 7</div><div class="content-8">Contenu de l'onglet 8</div></div></section></div></div></div><credit29><a href="http://crimsonday.forumactif.com/" target="_blank">© CRIMSON DAY</a> & Night Neko</credit29>

J'espère que ça te plaira, j'ai essayé de suivre le plus fidèlement possible ton schéma parce que je le trouvais joli comme il était !  heart



ET MAINTENANT, UN PEU PLUS
♦️ Pour enlever des onglets, je te conseille de ne supprimer aucune ligne, voici la solution la plus simple que je te propose : il te suffit de modifier l'onglet correspondant à celui que tu veux voir disparaître (le dernier d'une colonne, c'est mieux) ! Par exemple, je veux retirer l'onglet 8, je prends ce bout de code là :
Code:
<label for="tab-8" class="tab-label-8 deplaceD">Onglet 8</label>
Et j'ajoute un simple style="display:none;" qui lui indiquera de ne pas s'afficher. Ce qui donnera ceci :
Code:
<label for="tab-8" class="tab-label-8 deplaceD" style="display:none;">Onglet 8</label>
Et hop ! Aux oubliettes l'onglet 8 !

♦️ Pour ajouter un onglet, c'est un peu plus complexe... Il faut ajouter deux parties au code et faire des réglages en CSS ! Je vais essayer d'expliquer, mais je sais pas trop si je vais être super claire -> DONC, d'abord, il faut ajouter le bouton de l'onglet. Pour ce faire, voici le code :
Code:
<input id="tab-0" type="radio" name="radio-set" class="tab-selector-0" /><label for="tab-0" class="tab-label-0 deplaceD">Onglet 0</label>
En prenant en compte que 0 correspond au numéro de l'onglet, donc logiquement, pour le prochain ajout, tous les 0 seront à remplacer par un 9 ! Il te faudra placer ce bout de code en dessous des autres qui sont identiques (mais avec d'autres chiffres à la place des 0) et laisser deplaceD si ton onglet doit se trouver à droite, ou remplacer par deplaceG si il doit se trouver à gauche.
Ensuite en haut du code (entre les balises < style>< /style>, il faut que tu crées une nouvelle balise pour pouvoir positionner ce nouvel onglet, voici :
Code:
.tab-label-0 {top: 170px;}
Pareil, tu remplaces le 0 par le numéro de ton onglet. Et tu remplaces le 170 par une autre valeur qui te permettra de mettre l'onglet à sa place. Si je ne m'abuse, la prochaine valeur sera de 225px (logiquement, il faudra ajouter 55px pour chaque nouvel onglet qui occupera une ligne supplémentaire en fait. Le 9 et le 10 seront à 225px, le 11 et le 12 seront à 280px, et ainsi de suite !)
Nous avons notre nouveau bouton, donc !

Maintenant, il faut éventuellement penser à ajouter le contenu du fameux onglet. Ca se passe vers la fin du code, il faudra que tu ajoutes ceci :
Code:
<div class="content-0">Contenu de l'onglet 0</div>

Tu mets ça à la suite des morceaux qui y ressemblent (avec d'autres chiffres encore) en pensant bien à remplacer le 0 par le numéro de ton nouvel onglet !
On y est !
Revenir en haut Aller en bas
http://2981122890.tumblr.com
avatar
SlythLou
Invité


Message(#)Sujet: Re: Petite demande !   10.09.17 21:54

Merci beaucoup !! inlove inlove
C'est parfaitement ce à quoi je m'attendais et ne t'inquiètes pas pour l'attente, j'avais pleins d'autres choses à penser et je venais seulement aujourd'hui voir si ça avait avancé ^^
Je te remercie encore et applique -bon pas immédiatement parce que je suis complètement crevée, mais- très prochainement ce très beau code dans ma petite galerie.
Gros bisous hon
Revenir en haut Aller en bas
avatar
2981 12289 0
© Avatar by 2981 12289 0


Message(#)Sujet: Re: Petite demande !   12.09.17 18:39

Tu me vois ravie d'avoir su te satisfaire ! heart
N'hésite pas à revenir si tu veux autre chose un de ces jours ! pls
Revenir en haut Aller en bas
http://2981122890.tumblr.com
Contenu sponsorisé


Message(#)Sujet: Re: Petite demande !   

Revenir en haut Aller en bas
 

Petite demande !

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Petite demande de PA [SeLfde4Th7]
» Une petite demande ^^
» Petite vidéo
» [Annulée] Demande de page d'aceuil
» [Annulée] Demande de description des catégories.

Permission de ce forum:Vous pouvez répondre aux sujets dans ce forum
Crimson Day :: Zone des Invités :: Vous & Nous :: Requêtes :: Requêtes terminées-
Poster un nouveau sujet   Répondre au sujet