AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


  • Poster un nouveau sujet
  • Répondre au sujet

PA en onglets [CSS3, sans javascript]

Partagez
avatar
Okhmhaka
FémininAge : 32Messages : 31851

le Dim 9 Oct 2011 - 17:47

Rappel du premier message :

Qu'est-ce que c'est ?

Il s'agit une zone comportant différents onglets et permettant chacun d'afficher une information différentes dans cette même zone. Par exemple, en cliquant sur le premier onglet vous affichez le contexte, sur le second le staff, etc... et le tout dans le même encadré, permettant d'éviter les pages d'accueil trop longues ou bien de faire de votre QEEL un espace plus sympathique que le QEEL d'origine. Ce code peut être utilisé pour l'un ou l'autre, il suffit dans le second cas d'enlever le code du QEEL de base, d'y mettre ce code, et de remplir avec les informations de votre QEEL de base. Il faut cependant un petit peu de connaissances dans les templates, histoire de savoir où et comment mettre les choses, mais c'est très facile à apprendre ! Wink

Voici l'aperçu :

>>> Aperçu du résultat <<<

Vous allez me dire que ce code a déjà été fait, qu'il existe déjà... oui certes le résultat est ressemblant, mais ce code que je vous donne là vous permet de faire des onglets SANS javascript. Le code est donc plus simple, il ne comporte que deux partie : un code html et un code css.

Il vous suffit ensuite de mettre ce que vous voulez dans chaque zone de texte, y compris une image de fond différente pour chacune Wink

Vous constaterez qu'il y a un espace au dessus du bloc d'accueil, c'est pour éviter qu'en se recentrant sur l'accueil à cause de l'ancre placé en codage la page ne remonte trop. Si ma phrase vous parait être du chinois, essayez-donc d'enlever la série de "< br / >" et vous comprendrez mieux Very Happy. Pour combler ce "vide" je vous conseille de faire une image ou de mettre un titre en assez gros, avec simplement "Accueil" ou "Online" (selon l'utilisation) ou encore un "Welcome [username]" Wink



Les Codes html & css

Comme expliqué en titre et en intro, il n'y a pas de javascript dans ce code, tout est fait uniquement en CSS3, vous avez donc deux codes à afficher :

• le premier, l'html, dans la partie du forum où vous voulez que soit votre accordéon (il peut s'agir tout simplement de la page d'accueil, mais aussi dans un template, comme par exemple si vous souhaitez vous en servir en QEEL)

• le second, le css ou "mise en forme", vous devez le copier coller dans la Feuille CSS de votre forum, c'est à dire : dans le Panneau d'Admin > Affichage > Couleurs > Feuille de style CSS.


- Code HTML -




- Code CSS -


Il faut poster à la suite de ce message pour voir les codes contenu dans ces cadres.

Je le répète, mais svp n'enlevez pas le crédit en fin de code ! Je suis très généreux mais j'apprécie d'avoir un remerciement et j'estime que celui-ci est correct, pas excessivement voyant et normal pour utiliser quelque chose que j'ai mis du temps à réaliser Wink


Dernière édition par Sparrow-style le Mer 13 Juin 2012 - 23:39, édité 2 fois



Eroik04
MasculinAge : 19Messages : 22

le Dim 1 Juin 2014 - 17:32

merci
Horus
FémininAge : 20Messages : 55

le Lun 9 Juin 2014 - 16:42

arigato tu me sauve la vie !
avatar
Lylinee
FémininAge : 27Messages : 25

le Jeu 26 Juin 2014 - 19:28

merci beaucoup pour cette page d'accueil =)



Alancar
MasculinAge : 19Messages : 57

le Lun 30 Juin 2014 - 14:19

Merci :)
avatar
Kyuso Jiro
MasculinAge : 23Messages : 8

le Lun 21 Juil 2014 - 15:37

Merci bien :) !



avatar
Kora
FémininAge : 15Messages : 45

le Mer 23 Juil 2014 - 1:35

merci
avatar
lisounette7
FémininAge : 23Messages : 54

le Ven 8 Aoû 2014 - 3:41

Merci <3
avatar
Tchii
FémininAge : 31Messages : 223

le Sam 30 Aoû 2014 - 12:40

Coucou!
Merci pour ce petit code.
A trés vite!
Tchii!
avatar
Wrung Jah
MasculinAge : 23Messages : 59

le Jeu 4 Sep 2014 - 0:33

Merci :)
avatar
Sitahy
FémininAge : 16Messages : 19

le Ven 5 Sep 2014 - 0:03

Merci ! -



avatar
Saphire
FémininAge : 19Messages : 146

le Dim 7 Sep 2014 - 15:43

merci :)
avatar
Nanou0001
FémininAge : 32Messages : 50

le Mar 23 Sep 2014 - 12:06

merci
avatar
Valeriane
FémininAge : 32Messages : 24

le Ven 3 Oct 2014 - 13:08

Merciiiii :)
avatar
BloodyMoony
FémininAge : 24Messages : 73

le Ven 24 Oct 2014 - 11:49

Merci pour le tuto :)



avatar
EmYasmina
FémininAge : 17Messages : 73

le Ven 24 Oct 2014 - 16:07

Merciii !
avatar
Kira de Shola
FémininAge : 20Messages : 59

le Ven 24 Oct 2014 - 22:02

thks. <3
avatar
wiise
FémininAge : 24Messages : 48

le Mar 28 Oct 2014 - 12:57

Merci beaucoup du partage !



avatar
0smose
FémininAge : 21Messages : 159

le Mar 28 Oct 2014 - 16:29

Merci pour ce beau travail ! Je vais personnaliser les onglets pour en faire une magnifique PA ! Very Happy





But I'm only human
And I bleed when I fall down... I'm only human and I crash and I break down. Your words in my head,
knives in my heart. You build me up and then I fall apart.
'Cause I'm only human.
avatar
Nalex
FémininAge : 27Messages : 149

le Dim 2 Nov 2014 - 18:53

Je vais tester ça pour mon staff. Merci!



avatar
Choubakawa
MasculinAge : 23Messages : 59

le Jeu 6 Nov 2014 - 21:36

Merci



avatar
Daydream
FémininAge : 19Messages : 41

le Mar 25 Nov 2014 - 23:41

Merci !
avatar
DarkMasamune
FémininAge : 24Messages : 52

le Sam 13 Déc 2014 - 14:52

Merci beaucoup ^^
avatar
Sachikou
FémininAge : 17Messages : 48

le Dim 14 Déc 2014 - 16:37

Merci beaucoup Very Happy



avatar
Arisu
FémininAge : 28Messages : 108

le Mer 17 Déc 2014 - 1:51

Beau travail, merci !
avatar
Hana Evali
FémininAge : 26Messages : 163

le Mar 10 Fév 2015 - 22:13

Superbe, merci !



Contenu sponsorisé

  • Poster un nouveau sujet
  • Répondre au sujet

La date/heure actuelle est Mar 23 Mai 2017 - 10:51