Forum 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 Crea illusion Fantasy

#Forum d'entraide, une inscription pour nous rejoindre.


RechercherAccueilAccueil  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
Ptite_Perle
Messages : 5091
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 81247
Fondatrice
Ptite_Perle
24px
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
Anonymous
Invité
Invité
24px
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
Ptite_Perle
Messages : 5091
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 81247
Fondatrice
Ptite_Perle
24px
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
Anonymous
Invité
Invité
24px
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
Ptite_Perle
Messages : 5091
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 81247
Fondatrice
Ptite_Perle
24px
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
Anonymous
Invité
Invité
24px
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
Ptite_Perle
Messages : 5091
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 81247
Fondatrice
Ptite_Perle
24px
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
TchaChatTcha
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 : 7323
Commentaire : Je suis une femme la trentaine, j'aime surfer là et là.
inactif
TchaChatTcha
24px
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
Ptite_Perle
Messages : 5091
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 81247
Fondatrice
Ptite_Perle
24px
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
sandcreations
Messages : 183
Venue : 14/09/2012 Je suis : Féminin
Né(e) le : 16/06/1971
Age : 47
Je vie à : Valenciennes
Humeur : cool
Mes Points : 48244
inactif
sandcreations
24px
MessageSujet: Re: Page d'accueil avec onglet Mar 12 Fév 2019 - 8:14
coucou merci
Revenir en haut Aller en bas
http://mes-creations-pspsand-net.over-blog.com/
AuteurMessage
Contenu sponsorisé
24px
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 image
» Page d'accueil type onglet
» Page d'accueil en onglet

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