|
Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120621 Page d'accueil avec onglet | | 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 |
| |
| |
RectangletopsMessages : 226 Venue : 27/03/2011 Je suis : Age : 70 Je vie à : Belgique Humeur : Bonne souvent. Mes Points : 96006 Re: Page d'accueil avec onglet | | Je te remercie bien pour les codes, cela fonctionne, cool reste à améliorer |
| |
| |
InvitéInvité Re: Page d'accueil avec onglet | | Bonsoir Perle. Oh seigneur, super, j'osais pas te le demander Perle mais je le trouve magnifique ce code 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] |
| |
| |
Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120621 Re: Page d'accueil avec onglet | | Je suis ravie de vous avoir contenté Sophie faut oser demander le forum est ouvert pour aider Oui Rectangletops, arrange le code à ton goût et les couleurs et images Bisousss |
| |
| |
RectangletopsMessages : 226 Venue : 27/03/2011 Je suis : Age : 70 Je vie à : Belgique Humeur : Bonne souvent. Mes Points : 96006 Re: Page d'accueil avec onglet | | 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!!!! |
| |
| |
RectangletopsMessages : 226 Venue : 27/03/2011 Je suis : Age : 70 Je vie à : Belgique Humeur : Bonne souvent. Mes Points : 96006 Re: Page d'accueil avec onglet | | - Ptite_Perle a écrit:
- Je suis ravie de vous avoir contenté
Sophie faut oser demander le forum est ouvert pour aider
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. |
| |
| |
InvitéInvité Re: Page d'accueil avec onglet | | Oui Perle,perso ,je suis super contente et ça rends très bien en plus,je l'ai mis tout de suite !!!! Rectangletops, est ce que tu parles pour moi pour la présentation de mes tiroirs ? |
| |
| |
RectangletopsMessages : 226 Venue : 27/03/2011 Je suis : Age : 70 Je vie à : Belgique Humeur : Bonne souvent. Mes Points : 96006 Re: Page d'accueil avec onglet | | |
| |
| |
InvitéInvité Re: Page d'accueil avec onglet | | 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 Je te répondrais bien pour ta question mais je préfére que ce soit Perle par sécurité!!! Bisoussssssssssss |
| |
| |
Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120621 Re: Page d'accueil avec onglet | | 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 Sophie tu aurai toi aussi répondre j'ai pas le monopole lol Bisoussss |
| |
| |
RectangletopsMessages : 226 Venue : 27/03/2011 Je suis : Age : 70 Je vie à : Belgique Humeur : Bonne souvent. Mes Points : 96006 Re: Page d'accueil avec onglet | | Ceci à été fait perle et pour les autre tiroirs pareil? |
| |
| |
Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120621 Re: Page d'accueil avec onglet | | 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 |
| |
| |
RectangletopsMessages : 226 Venue : 27/03/2011 Je suis : Age : 70 Je vie à : Belgique Humeur : Bonne souvent. Mes Points : 96006 Re: Page d'accueil avec onglet | | 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] |
| |
| |
Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120621 Re: Page d'accueil avec onglet | | Coucou Rectangletops Eh bien tu t'en sort bien 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 |
| |
| |
InvitéInvité Re: Page d'accueil avec onglet | | 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 |
| |
| |
RectangletopsMessages : 226 Venue : 27/03/2011 Je suis : Age : 70 Je vie à : Belgique Humeur : Bonne souvent. Mes Points : 96006 Re: Page d'accueil avec onglet | | Oui, pas sans mal, Perle et Sophie, merci |
| |
| |
InvitéInvité Re: Page d'accueil avec onglet | | Tu y arrives Rectangletops ?Je ne le vois pas sur ton site ???? |
| |
| |
RectangletopsMessages : 226 Venue : 27/03/2011 Je suis : Age : 70 Je vie à : Belgique Humeur : Bonne souvent. Mes Points : 96006 un autre site | | - 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 |
| |
| |
InvitéInvité Re: Page d'accueil avec onglet | | Ah d'accord,je pouvais toujours chercher !!!! |
| |
| |
RectangletopsMessages : 226 Venue : 27/03/2011 Je suis : Age : 70 Je vie à : Belgique Humeur : Bonne souvent. Mes Points : 96006 Re: Page d'accueil avec onglet | | - Sophie 2 a écrit:
- Ah d'accord,je pouvais toujours chercher !!!!
|
| |
| |