Forum d'entraide
Crea illusion Fantasy


Coucou,

Merci de nous rejoindre sur le forum, j'espère que l'on passera de bons moments ensembles.

Au plaisir de te lire dans les différentes catégories.

Le Staff du forum Crea illusion Fantasy.

Forum d'entraide
Crea illusion Fantasy

Aides, Conseils, Forum, Sites web, blogs, tout supports, Graphismes, Tutoriels, Publicités.


AccueilAccueil  FAQFAQ  PortailPortail  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez|

Page d'accueil avec onglet

Voir le sujet précédent Voir le sujet suivant Aller en bas
Aller à la page : Précédent  1, 2
AuteurMessage
avatar
Messages : 4986
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 10528
Fondatrice
Ptite_Perle
18 - 16
MessageSujet: Page d'accueil avec onglet Dim 2 Juin 2013 - 14:22
Rappel du premier message :

Voici comme réalisé l'accueil comme sur le forum en onglet coulissant

Code à mettre dans Page d'accueil -- généralité --

Code:
<div id="accueil"><div id="page1"><table class="contenu_page"><tr><td style="width: 40px; overflow: hidden;"><span class="page_titre">Votre TITRE</span></td><td><div class="contenu">
<br><br><center>Contenu page ACCUEIL</center></div></td></tr></table></div>

<div id="page2"><table class="contenu_page"><tr><td style="width: 40px; overflow: hidden;"><span class="page_titre">Votre TITRE</span></td><td><div class="contenu">
<CONTENU PAGE 2</div></td></tr></table></div>

<div id="page3"><table class="contenu_page"><tr><td style="width: 40px; overflow: hidden;"><span class="page_titre">Votre TITRE</span></td><td><div class="contenu">
<CONTENU PAGE 3</div></td></tr></table></div>

<div id="page4"><table class="contenu_page"><tr><td style="width: 40px; overflow: hidden;"><span class="page_titre">Votre TITRE</span></td><td><div class="contenu">
CONTENU PAGE 4</div>

</td></tr></table></div><div id="page5"><table class="contenu_page"><tr><td style="width: 40px; overflow: hidden;"><span class="page_titre">Votre TITRE</span></td><td><div class="contenu">
CONTENU PAGE 5</div></td></tr></table></div>
</div>



Dans le CSS


Code:


#accueil
{
width: 900px;
height: 400px;
overflow: hidden;
background: url(http://img15.hostingpics.net/pics/498240Header3.png) center no-repeat;
border: 3px solid #272727;
}
#page1
{
width: 40px;
height: 400px;
float: left;
overflow: hidden;
background-color: #555555;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page1:hover
{
width: 80%;
height: 400px;
overflow: hidden;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page2
{
width: 40px;
height: 400px;
float: left;
overflow: hidden;
background-color: #777777;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page2:hover
{
width: 80%;
height: 400px;
overflow: hidden;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page3
{
width: 40px;
height: 400px;
float: left;
overflow: hidden;
background-color: #9b9b9b;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page3:hover
{
width: 80%;
height: 400px;
overflow: hidden;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page4
{
width: 40px;
height: 400px;
float: left;
overflow: hidden;
background-color: #bababa;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page4:hover
{
width: 80%;
height: 400px;
overflow: hidden;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page5
{
width: 40px;
height: 400px;
float: left;
overflow: hidden;
background-color: #dcdcdc;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page5:hover
{
width: 80%;
height: 400px;
overflow: hidden;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}

.contenu_page
{
width: 100%;
height: 400px;
}
.page_titre
{
display: inline-block;
height: 40px;
width: 400px;
color: #ffffff;
margin-left: -180px;
text-align: center;
font-size: 24px;
font-family: arial black;
letter-spacing: 2px;
text-shadow: 1px 1px 0px #5f5f5f;
-webkit-transform: rotate(-90deg);  
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.contenu
{
width: 0px;
height: 0px;
background-color: white;
overflow: hidden;
padding: 6px;
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
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;
}
#page1:hover .contenu, #page2:hover .contenu, #page3:hover .contenu, #page4:hover .contenu, #page5:hover .contenu
{
width: 650px;
height: 380px;
margin-left: -180px;
background-color: white;
overflow: none;
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
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;
}

Vous pouvez le personnaliser, les couleurs, changer les images etc.

[Vous devez être inscrit et connecté pour voir ce lien]
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/

AuteurMessage
AuteurMessage
avatar
Invité
Invité
18 - 16
MessageSujet: Re: Page d'accueil avec onglet Ven 21 Fév 2014 - 12:04
C'est possible de mettre une image sous le code pour voir ce que ça donne svp?
Revenir en haut Aller en bas
AuteurMessage
avatar
Messages : 4986
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 10528
Fondatrice
Ptite_Perle
18 - 16
MessageSujet: Re: Page d'accueil avec onglet Ven 21 Fév 2014 - 12:55
Coucou Maeva974

Tu as l'exemple que tu arrive sur le forum, c'est le cadre coulissant

Bisoussss
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
AuteurMessage
avatar
Invité
Invité
18 - 16
MessageSujet: Re: Page d'accueil avec onglet Ven 21 Fév 2014 - 13:56
ah ok je trouve ça plutôt joli c'est facile à faire si je veux mettre plus d'onglets?
Revenir en haut Aller en bas
AuteurMessage
avatar
Messages : 4986
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 10528
Fondatrice
Ptite_Perle
18 - 16
MessageSujet: Re: Page d'accueil avec onglet Ven 21 Fév 2014 - 16:59
Oui tu peux ajouter des onglets, il suffit de copier coller , la section d'un onglet

Bisouss
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
AuteurMessage
avatar
Invité
Invité
18 - 16
MessageSujet: Re: Page d'accueil avec onglet Ven 21 Fév 2014 - 21:34
ok de toute façon si je n'y arrive pas j’appellerais au secours lol
Revenir en haut Aller en bas
AuteurMessage
avatar
Messages : 4986
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 10528
Fondatrice
Ptite_Perle
18 - 16
MessageSujet: Re: Page d'accueil avec onglet Sam 22 Fév 2014 - 17:29
Coucou

Oui Smile

Bisouss
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
AuteurMessage
avatar
Messages : 29
Venue : 20/02/2018 Je suis : Féminin
Né(e) le : 15/03/1983
Age : 35
Je vie à : Loin
Humeur : Bonne
Mes Points : 23
Commentaire : Je suis une femme la trentaine, j'aime surfer là et là.
inactif
TchaChatTcha
18 - 16
MessageSujet: Re: Page d'accueil avec onglet Sam 24 Fév 2018 - 11:19
Merci beaucoup Perle
Revenir en haut Aller en bas
http://tchatchatcha.forumactif.com/
AuteurMessage
avatar
Messages : 4986
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 10528
Fondatrice
Ptite_Perle
18 - 16
MessageSujet: Re: Page d'accueil avec onglet Dim 25 Fév 2018 - 10:59
De rien avec plaisir ????
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
AuteurMessage
Contenu sponsorisé
18 - 16
MessageSujet: Re: Page d'accueil avec onglet
Revenir en haut Aller en bas

Page d'accueil avec onglet

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 2 sur 2Aller à la page : Précédent  1, 2

Sujets similaires

-
» Problème avec la page d'accueil type onglet
» Page d'accueil avec onglets
» Page d'accueil avec images
» Page d'accueil en onglet
» Page d'accueil avec image

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Forum d'entraide
Crea illusion Fantasy
 :: Astuces codages pour forumactif :: Astuces et codages forumactif
-