Forum Crea illusion Fantasy
Page d'accueil avec onglet  - Page 2 Bannie10

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. Les débutants sont les bienvenu aussi :)


 

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 : 4717
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 83299
Fondatrice
Ptite_Perle
MessageSujet: Page d'accueil avec onglet Page d'accueil avec onglet  - Page 2 EmptyDim 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

AuteurMessage
AuteurMessage
Anonymous
Invité
Invité
MessageSujet: Re: Page d'accueil avec onglet Page d'accueil avec onglet  - Page 2 EmptyVen 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 : 4717
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 83299
Fondatrice
Ptite_Perle
MessageSujet: Re: Page d'accueil avec onglet Page d'accueil avec onglet  - Page 2 EmptyVen 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
AuteurMessage
Anonymous
Invité
Invité
MessageSujet: Re: Page d'accueil avec onglet Page d'accueil avec onglet  - Page 2 EmptyVen 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 : 4717
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 83299
Fondatrice
Ptite_Perle
MessageSujet: Re: Page d'accueil avec onglet Page d'accueil avec onglet  - Page 2 EmptyVen 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
AuteurMessage
Anonymous
Invité
Invité
MessageSujet: Re: Page d'accueil avec onglet Page d'accueil avec onglet  - Page 2 EmptyVen 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 : 4717
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 83299
Fondatrice
Ptite_Perle
MessageSujet: Re: Page d'accueil avec onglet Page d'accueil avec onglet  - Page 2 EmptySam 22 Fév 2014 - 17:29
Coucou

Oui Smile

Bisouss
Revenir en haut Aller en bas
AuteurMessage
TchaChatTcha
Messages : 25
Venue : 20/02/2018 Je suis : Féminin
Né(e) le : 15/03/1983
Age : 36
Je vie à : Loin
Humeur : Bonne
Mes Points : 9837
Commentaire : Je suis une femme la trentaine, j'aime surfer là et là.
inactif
TchaChatTcha
MessageSujet: Re: Page d'accueil avec onglet Page d'accueil avec onglet  - Page 2 EmptySam 24 Fév 2018 - 11:19
Merci beaucoup Perle
Revenir en haut Aller en bas
AuteurMessage
Ptite_Perle
Messages : 4717
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 83299
Fondatrice
Ptite_Perle
MessageSujet: Re: Page d'accueil avec onglet Page d'accueil avec onglet  - Page 2 EmptyDim 25 Fév 2018 - 10:59
De rien avec plaisir ????
Revenir en haut Aller en bas
AuteurMessage
sandcreations
Messages : 182
Venue : 14/09/2012 Je suis : Féminin
Né(e) le : 16/06/1971
Age : 48
Je vie à : Valenciennes
Humeur : cool
Mes Points : 50747
inactif
sandcreations
MessageSujet: Re: Page d'accueil avec onglet Page d'accueil avec onglet  - Page 2 EmptyMar 12 Fév 2019 - 8:14
coucou merci
Revenir en haut Aller en bas
AuteurMessage
Contenu sponsorisé
MessageSujet: Re: Page d'accueil avec onglet Page d'accueil avec onglet  - Page 2 Empty
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-