Forum Crea illusion Fantasy
A quoi sert le forum ?
Ce forum est liée à mon site Crea illusion Fantasy. Un plus pour vous aidez dans vos créations.Vous ne savez pas créer, et vous recherchez une création personnalisée. Le forum vous écoutera vos demandes.
Plusieurs sections :
Des aides: pour votre forum,votre site ou blog.Des tutoriels(photoshop,paintshop,gimp,photofiltre,ect...).Demandes de créations personnalisées. Aide pour prendre en main vos logiciels.Des tutos, des scripts. aides pour le logiciel Flash..... Des concours, des challenges, des duels. Vous y trouverez un accueil sympathique.
Au plaisir de vous lire sur le forum. D'autres choses à venir découvrir sur le forum de Créa illusion Fantasy.

N'hésitez pas à venir vous inscrire.


Aides & Conseils pour le graphisme & forum & site web & blog & tout autres supports.
 
AccueilPortailFAQPublicationsPublicationsS'enregistrerConnexion
Votre bannière ici,Faite la demande dans la catégorie: La place Public


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 : 6726
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 53
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 8990

MessageSujet: Page d'accueil avec onglet    Dim 2 Juin - 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 - 20:20, édité 1 fois
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
Rectangletops
inactif
avatar


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

MessageSujet: Re: Page d'accueil avec onglet    Dim 2 Juin - 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 : 408
Venue : 16/05/2013 Je suis: : Féminin
Né(e) le : 24/11/1963
Age : 53
Je vie à : Versailles
Humeur : Assez bonne
Mes Points : 1576

MessageSujet: Re: Page d'accueil avec onglet    Dim 2 Juin - 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 : 6726
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 53
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 8990

MessageSujet: Re: Page d'accueil avec onglet    Dim 2 Juin - 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 : 212
Venue : 27/03/2011 Je suis: : Masculin
Né(e) le : 04/01/1954
Age : 63
Je vie à : Belgique
Humeur : Bonne souvent.
Mes Points : 438

MessageSujet: Re: Page d'accueil avec onglet    Lun 3 Juin - 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 : 212
Venue : 27/03/2011 Je suis: : Masculin
Né(e) le : 04/01/1954
Age : 63
Je vie à : Belgique
Humeur : Bonne souvent.
Mes Points : 438

MessageSujet: Re: Page d'accueil avec onglet    Lun 3 Juin - 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 : 408
Venue : 16/05/2013 Je suis: : Féminin
Né(e) le : 24/11/1963
Age : 53
Je vie à : Versailles
Humeur : Assez bonne
Mes Points : 1576

MessageSujet: Re: Page d'accueil avec onglet    Lun 3 Juin - 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 : 212
Venue : 27/03/2011 Je suis: : Masculin
Né(e) le : 04/01/1954
Age : 63
Je vie à : Belgique
Humeur : Bonne souvent.
Mes Points : 438

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

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


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

MessageSujet: Re: Page d'accueil avec onglet    Lun 3 Juin - 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 : 6726
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 53
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 8990

MessageSujet: Re: Page d'accueil avec onglet    Lun 3 Juin - 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 : 212
Venue : 27/03/2011 Je suis: : Masculin
Né(e) le : 04/01/1954
Age : 63
Je vie à : Belgique
Humeur : Bonne souvent.
Mes Points : 438

MessageSujet: Re: Page d'accueil avec onglet    Lun 3 Juin - 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 : 6726
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 53
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 8990

MessageSujet: Re: Page d'accueil avec onglet    Lun 3 Juin - 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 : 212
Venue : 27/03/2011 Je suis: : Masculin
Né(e) le : 04/01/1954
Age : 63
Je vie à : Belgique
Humeur : Bonne souvent.
Mes Points : 438

MessageSujet: Re: Page d'accueil avec onglet    Lun 3 Juin - 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 : 6726
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 53
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 8990

MessageSujet: Re: Page d'accueil avec onglet    Mar 4 Juin - 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 : 408
Venue : 16/05/2013 Je suis: : Féminin
Né(e) le : 24/11/1963
Age : 53
Je vie à : Versailles
Humeur : Assez bonne
Mes Points : 1576

MessageSujet: Re: Page d'accueil avec onglet    Mar 4 Juin - 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 : 212
Venue : 27/03/2011 Je suis: : Masculin
Né(e) le : 04/01/1954
Age : 63
Je vie à : Belgique
Humeur : Bonne souvent.
Mes Points : 438

MessageSujet: Re: Page d'accueil avec onglet    Mar 4 Juin - 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 : 408
Venue : 16/05/2013 Je suis: : Féminin
Né(e) le : 24/11/1963
Age : 53
Je vie à : Versailles
Humeur : Assez bonne
Mes Points : 1576

MessageSujet: Re: Page d'accueil avec onglet    Sam 8 Juin - 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 : 212
Venue : 27/03/2011 Je suis: : Masculin
Né(e) le : 04/01/1954
Age : 63
Je vie à : Belgique
Humeur : Bonne souvent.
Mes Points : 438

MessageSujet: un autre site   Sam 8 Juin - 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 : 408
Venue : 16/05/2013 Je suis: : Féminin
Né(e) le : 24/11/1963
Age : 53
Je vie à : Versailles
Humeur : Assez bonne
Mes Points : 1576

MessageSujet: Re: Page d'accueil avec onglet    Dim 9 Juin - 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 : 212
Venue : 27/03/2011 Je suis: : Masculin
Né(e) le : 04/01/1954
Age : 63
Je vie à : Belgique
Humeur : Bonne souvent.
Mes Points : 438

MessageSujet: Re: Page d'accueil avec onglet    Dim 9 Juin - 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 : 408
Venue : 16/05/2013 Je suis: : Féminin
Né(e) le : 24/11/1963
Age : 53
Je vie à : Versailles
Humeur : Assez bonne
Mes Points : 1576

MessageSujet: Re: Page d'accueil avec onglet    Dim 30 Juin - 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 : 6726
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 53
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 8990

MessageSujet: Re: Page d'accueil avec onglet    Dim 30 Juin - 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 : 408
Venue : 16/05/2013 Je suis: : Féminin
Né(e) le : 24/11/1963
Age : 53
Je vie à : Versailles
Humeur : Assez bonne
Mes Points : 1576

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

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


avatar


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

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

Oui sophie

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


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

MessageSujet: Re: Page d'accueil avec onglet    Dim 30 Juin - 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-