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.


Aides,Codes,Conseils,Forum,Sites web,blogs,Tout supports,Photographie,Graphismes,Dessins,Peintures,Tutoriels,Publicités.
 
AccueilPortailÉvènementsFAQPublicationsPublicationsS'enregistrerConnexion
Ta bannière, Ici !


Partagez | .
 

 Page d'accueil avec onglet

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Aller à la page : 1, 2  Suivant
AuteurMessage
Ptite_Perle
Admin


avatar


Messages : 6175
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 53
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 9231

MessageSujet: Page d'accueil avec onglet    Dim 2 Juin 2013 - 14:22

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.

Crédit tuto: Never utopia


Dernière édition par Ptite_Perle le Ven 14 Juin 2013 - 20:20, édité 1 fois
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
Rectangletops
inactif
avatar


Messages : 199
Venue : 27/03/2011 Je suis: : Masculin
Né(e) le : 04/01/1954
Age : 63
Je vie à : Belgique
Humeur : Bonne souvent.
Mes Points : 425

MessageSujet: Re: Page d'accueil avec onglet    Dim 2 Juin 2013 - 15:42

Je te remercie bien pour les codes, cela fonctionne, cool reste à améliorer
Revenir en haut Aller en bas
http://www.yakachiner.be
Sophie
Directrice en chef de PUB
avatar


Messages : 410
Venue : 16/05/2013 Je suis: : Féminin
Né(e) le : 24/11/1963
Age : 53
Je vie à : Versailles
Humeur : Assez bonne
Mes Points : 1616

MessageSujet: Re: Page d'accueil avec onglet    Dim 2 Juin 2013 - 21:13

Bonsoir Perle.
Oh seigneur, super, j'osais pas te le demander Perle mais je le trouve magnifique ce code cheerscheerscheers
Je vais vite le prendre et le mettre ce soir ou demain car il est tard là!

Merci beaucoup [Vous devez être inscrit et connecté pour voir cette image]
Revenir en haut Aller en bas
http://www.entre-nous-pub.com/
Ptite_Perle
Admin


avatar


Messages : 6175
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 53
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 9231

MessageSujet: Re: Page d'accueil avec onglet    Dim 2 Juin 2013 - 21:27

Je suis ravie de vous avoir contenté

Sophie faut oser demander le forum est ouvert pour aider Smile

Oui Rectangletops, arrange le code à ton goût et les couleurs et images

Bisousss
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
Rectangletops
inactif
avatar


Messages : 199
Venue : 27/03/2011 Je suis: : Masculin
Né(e) le : 04/01/1954
Age : 63
Je vie à : Belgique
Humeur : Bonne souvent.
Mes Points : 425

MessageSujet: Re: Page d'accueil avec onglet    Lun 3 Juin 2013 - 12:12

Question idiote comment mettre une image dans chaque tiroirs, pour pas faire de gourde.
Probablement dans le html mais ou!!< div class="contenu"> je remplace contenu par url JPG d'une photo!!!!
Revenir en haut Aller en bas
http://www.yakachiner.be
Rectangletops
inactif
avatar


Messages : 199
Venue : 27/03/2011 Je suis: : Masculin
Né(e) le : 04/01/1954
Age : 63
Je vie à : Belgique
Humeur : Bonne souvent.
Mes Points : 425

MessageSujet: Re: Page d'accueil avec onglet    Lun 3 Juin 2013 - 12:15

[Vous devez être inscrit et connecté pour voir ce lien] a écrit:
Je suis ravie de vous avoir contenté

Sophie faut oser demander le forum est ouvert pour aider Smile

Oui Rectangletops, arrange le code à ton goût et les couleurs et images

Bisousss


Belle présentation de tes tiroirs écrire les textes un brin plus grand serait un plus je pense.
Revenir en haut Aller en bas
http://www.yakachiner.be
Sophie
Directrice en chef de PUB
avatar


Messages : 410
Venue : 16/05/2013 Je suis: : Féminin
Né(e) le : 24/11/1963
Age : 53
Je vie à : Versailles
Humeur : Assez bonne
Mes Points : 1616

MessageSujet: Re: Page d'accueil avec onglet    Lun 3 Juin 2013 - 16:53

Oui Perle,perso ,je suis super contente et ça rends très bien en plus,je l'ai mis tout de suite !!!! cheerscheerscheers
Rectangletops, est ce que tu parles pour moi pour la présentation de mes tiroirs ?
Revenir en haut Aller en bas
http://www.entre-nous-pub.com/
Rectangletops
inactif
avatar


Messages : 199
Venue : 27/03/2011 Je suis: : Masculin
Né(e) le : 04/01/1954
Age : 63
Je vie à : Belgique
Humeur : Bonne souvent.
Mes Points : 425

MessageSujet: Re: Page d'accueil avec onglet    Lun 3 Juin 2013 - 18:29

Oui Sophie à toi, bis
Revenir en haut Aller en bas
http://www.yakachiner.be
Sophie
Directrice en chef de PUB
avatar


Messages : 410
Venue : 16/05/2013 Je suis: : Féminin
Né(e) le : 24/11/1963
Age : 53
Je vie à : Versailles
Humeur : Assez bonne
Mes Points : 1616

MessageSujet: Re: Page d'accueil avec onglet    Lun 3 Juin 2013 - 19:13

Oh merci alors Rectangletops pour le compliment et ton conseil pour l'ecriture que d'ailleurs j'ai modifié tout de suite car tu as raison ,c'est beaucoup mieux avec l'écriture plus grande cheers
Je te répondrais bien pour ta question mais je préfére que ce soit Perle par sécurité!!!
Bisoussssssssssss
Revenir en haut Aller en bas
http://www.entre-nous-pub.com/
Ptite_Perle
Admin


avatar


Messages : 6175
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 53
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 9231

MessageSujet: Re: Page d'accueil avec onglet    Lun 3 Juin 2013 - 20:13

Coucou Rectangletops

Pour mettre tes images, il faut regarder dans le CCS, tu verras il y as le lien de mes images, tu remplace par la tienne

Comme ceci: [Vous devez être inscrit et connecté pour voir ce lien]

Remplace par l'url de ton image Smile

Sophie tu aurai toi aussi répondre Smile j'ai pas le monopole lol

Bisoussss
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
Rectangletops
inactif
avatar


Messages : 199
Venue : 27/03/2011 Je suis: : Masculin
Né(e) le : 04/01/1954
Age : 63
Je vie à : Belgique
Humeur : Bonne souvent.
Mes Points : 425

MessageSujet: Re: Page d'accueil avec onglet    Lun 3 Juin 2013 - 20:27

Ceci à été fait perle et pour les autre tiroirs pareil?
Revenir en haut Aller en bas
http://www.yakachiner.be
Ptite_Perle
Admin


avatar


Messages : 6175
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 53
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 9231

MessageSujet: Re: Page d'accueil avec onglet    Lun 3 Juin 2013 - 21:23

Coucou

Pour les autres tiroirs, c'est des couleurs à changer, pas d'images, car c'est tiroirs servent à mettre des choses dedans.

Tu verras dans le CCS; Page 1

#page1
{
width: 40px;
height: 400px;
float: left;
overflow: hidden;
background-color: #555555; <=== change la couleur à ton goût

Fait pareil avec les autres pages.

Bisousss
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
Rectangletops
inactif
avatar


Messages : 199
Venue : 27/03/2011 Je suis: : Masculin
Né(e) le : 04/01/1954
Age : 63
Je vie à : Belgique
Humeur : Bonne souvent.
Mes Points : 425

MessageSujet: Re: Page d'accueil avec onglet    Lun 3 Juin 2013 - 23:34

J'abandonne pour le moment, piges comment mettre une image dans ce tiroir avec code url.
Aller je vous laisse, bonne soirée.
voici le blog en question [Vous devez être inscrit et connecté pour voir ce lien]
Revenir en haut Aller en bas
http://www.yakachiner.be
Ptite_Perle
Admin


avatar


Messages : 6175
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 53
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 9231

MessageSujet: Re: Page d'accueil avec onglet    Mar 4 Juin 2013 - 17:46

Coucou Rectangletops

Eh bien tu t'en sort bien Smile

Tes onglets sont de tailles différentes, mais je trouve ceci trés bien.

Pour ton image de fond , tu la mise: c'est ton image service annonce

Si tu as besoin de plus de conseilles, n'hésite pas à demander

Bisousssss
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
Sophie
Directrice en chef de PUB
avatar


Messages : 410
Venue : 16/05/2013 Je suis: : Féminin
Né(e) le : 24/11/1963
Age : 53
Je vie à : Versailles
Humeur : Assez bonne
Mes Points : 1616

MessageSujet: Re: Page d'accueil avec onglet    Mar 4 Juin 2013 - 17:52

Coucou Rectangletops,j'allais juste écrire en meme temps que Perle et si tu as besoin, je peux peut etre aussi t'aider dans la mesure de mes petites connaissances en codage cheers
Revenir en haut Aller en bas
http://www.entre-nous-pub.com/
Rectangletops
inactif
avatar


Messages : 199
Venue : 27/03/2011 Je suis: : Masculin
Né(e) le : 04/01/1954
Age : 63
Je vie à : Belgique
Humeur : Bonne souvent.
Mes Points : 425

MessageSujet: Re: Page d'accueil avec onglet    Mar 4 Juin 2013 - 18:08

Oui, pas sans mal, Perle et Sophie, merci
Revenir en haut Aller en bas
http://www.yakachiner.be
Sophie
Directrice en chef de PUB
avatar


Messages : 410
Venue : 16/05/2013 Je suis: : Féminin
Né(e) le : 24/11/1963
Age : 53
Je vie à : Versailles
Humeur : Assez bonne
Mes Points : 1616

MessageSujet: Re: Page d'accueil avec onglet    Sam 8 Juin 2013 - 20:37

Tu y arrives Rectangletops ?Je ne le vois pas sur ton site ????
Revenir en haut Aller en bas
http://www.entre-nous-pub.com/
Rectangletops
inactif
avatar


Messages : 199
Venue : 27/03/2011 Je suis: : Masculin
Né(e) le : 04/01/1954
Age : 63
Je vie à : Belgique
Humeur : Bonne souvent.
Mes Points : 425

MessageSujet: un autre site   Sam 8 Juin 2013 - 23:00

Sophie 2 a écrit:
Tu y arrives Rectangletops ?Je ne le vois pas sur ton site ????

Normal que tu ne vois pas, ce n'est pas mon site photographe.
Mais mon site petite annonce de livres d'occasion.http://yakachiner.connectetoi.com/index.htm
Revenir en haut Aller en bas
http://www.yakachiner.be
Sophie
Directrice en chef de PUB
avatar


Messages : 410
Venue : 16/05/2013 Je suis: : Féminin
Né(e) le : 24/11/1963
Age : 53
Je vie à : Versailles
Humeur : Assez bonne
Mes Points : 1616

MessageSujet: Re: Page d'accueil avec onglet    Dim 9 Juin 2013 - 12:22

Ah d'accord,je pouvais toujours chercher !!!!Razz
Revenir en haut Aller en bas
http://www.entre-nous-pub.com/
Rectangletops
inactif
avatar


Messages : 199
Venue : 27/03/2011 Je suis: : Masculin
Né(e) le : 04/01/1954
Age : 63
Je vie à : Belgique
Humeur : Bonne souvent.
Mes Points : 425

MessageSujet: Re: Page d'accueil avec onglet    Dim 9 Juin 2013 - 12:33

Sophie 2 a écrit:
Ah d'accord,je pouvais toujours chercher !!!!Razz

lol!
Revenir en haut Aller en bas
http://www.yakachiner.be
Sophie
Directrice en chef de PUB
avatar


Messages : 410
Venue : 16/05/2013 Je suis: : Féminin
Né(e) le : 24/11/1963
Age : 53
Je vie à : Versailles
Humeur : Assez bonne
Mes Points : 1616

MessageSujet: Re: Page d'accueil avec onglet    Dim 30 Juin 2013 - 19:44

Bonjour Perle.

De plus en plus de monde me demande le code de la P.A vu qu'elle est bien sur super belle,alors est ce que j'ai le droit de le donner pour des forums ?????
Revenir en haut Aller en bas
http://www.entre-nous-pub.com/
Ptite_Perle
Admin


avatar


Messages : 6175
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 53
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 9231

MessageSujet: Re: Page d'accueil avec onglet    Dim 30 Juin 2013 - 20:18

Coucou Sophie2

Oui tu peux, mais tu met bien ceci

Crédit tuto: Never utopia
Inspiré sur: Crea illusion Fantasy

bisouss
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
Sophie
Directrice en chef de PUB
avatar


Messages : 410
Venue : 16/05/2013 Je suis: : Féminin
Né(e) le : 24/11/1963
Age : 53
Je vie à : Versailles
Humeur : Assez bonne
Mes Points : 1616

MessageSujet: Re: Page d'accueil avec onglet    Dim 30 Juin 2013 - 20:38

Meme chez moi ???
Revenir en haut Aller en bas
http://www.entre-nous-pub.com/
Ptite_Perle
Admin


avatar


Messages : 6175
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 53
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 9231

MessageSujet: Re: Page d'accueil avec onglet    Dim 30 Juin 2013 - 21:03

Oui sophie

Bisousss
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
Sophie
Directrice en chef de PUB
avatar


Messages : 410
Venue : 16/05/2013 Je suis: : Féminin
Né(e) le : 24/11/1963
Age : 53
Je vie à : Versailles
Humeur : Assez bonne
Mes Points : 1616

MessageSujet: Re: Page d'accueil avec onglet    Dim 30 Juin 2013 - 21:53

D'accord, Perle c'est fait.

Merci pour la réponse.

Bonne soirée.

Bisousssssssssss
Revenir en haut Aller en bas
http://www.entre-nous-pub.com/
Contenu sponsorisé




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 1 sur 2Aller à la page : 1, 2  Suivant

 Sujets similaires

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

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-