| | Menu avec onglet au passage de la souris |  |
|
 Locker 
{ Membre }
 Messages : 52
 | Bonsoir, me voilà avec une demande.
- Titre provisoire: Menu avec onglet au passage de la souris.
- Détails: J‘aimerais en faite que quand on passe la souris sur News et bien il y a juste en dessous de l‘onglet le contenu de News et quand on passe sur Events il y a le contenu de Events et ainsi de suite.
- Aperçu: ( Facultatif (seulement si vous croyez qu'il est nécessaire pour la bonne compréhension des détails de la demande):
- Spoiler:
- Autoriser un membre à répondre [x] Oui [] Non (En cochant oui, vous donnez le droit aux membres de CSSActif qui ne sont pas codeurs officiels de répondre à votre demande)
Je n'ai vu ce tutoriel nulle part, a moins que mes yeux me joue des tours... | | |
|
| | |
Ikø' 
Pika'Ghøst
~ Maîtresse des pelles ~
Messages : 3193
| |
| | |
Locker
{ Membre }
Messages : 52
| Bonsoir (oui je sais il est tard, même très tard...je me demande d'aileurs si je ne devrais pas dire bonjour plutôt ...)
Bref. Ce n'est pas le sujet. Désoler si j'ai poster une demande alors qu'elle exister déjà ^.^'
Sinon, j'ai suivis toute les pages de ce tutoriel, mais rien, ça ne marche pas.
Un moment vous avez expliquer point par point a une personne comment faire, j'ai suivis ce que vous avez dit, j'ai mis les codes tout cela et puis paf, je ne vois que les titres des onglets mais pas le rectangle en dessous =/ | | |
|
| | |
Ikø'
Pika'Ghøst
~ Maîtresse des pelles ~
Messages : 3193
| C'est bizarre.
Est-ce possible d'avoir les codes utilisés? Je crois peut-être savoir d'où vient le problème~
PS: Tu peux me tutoyer je ne suis pas si vieille ** XD | | |
|
| | |
Locker
{ Membre }
Messages : 52
| Bonjour! =)
Alors, le premier code qu'il fallais mettre c'était dans une page HTML toute nouvelle, je l'ai créer est appellée "Menu Onglet" avec cocher non de partout. Voici le code:
- Spoiler:
//<!--
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
document.getElementById('contenu_onglet_'+name).style.display = 'block';
anc_onglet = name;
}
//-->
Après ce que je n'est pas placer parce que je ne comprennait pas où fallait-il le placer, il s'agit de ce code:
- Spoiler:
<script language="javascript" src="adresse de ta page html script onglet"></script>
Apparement il faut le placer dans description du site, mais c'est où déjà? Dans generalité? o.o
Et, que faut il mettre a la place de "adresse de ta page html script onglet"? où faut il prendre le code pour le placer?
Après j'ai placé mes codes dans generalité:
- Spoiler:
<div class="systeme_onglets"> <div class="onglets"> <span class="onglet_0 onglet" id="onglet_staff" onclick="javascript:change_onglet('staff');">STAFF</span> <span class="onglet_0 onglet" id="onglet_news" onclick="javascript:change_onglet('news');">NEWS</span> <span class="onglet_0 onglet" id="onglet_partenaires" onclick="javascript:change_onglet('partenaires');">PARTENAIRES</span> </div> <div class="contenu_onglets"> <div class="contenu_onglet" id="contenu_onglet_staff">En cours!</div> <div class="contenu_onglet" id="contenu_onglet_news">Elles arrivent bientôt!</div> <div class="contenu_onglet" id="contenu_onglet_partenaires">En cours d'écriture...</div> </div> </div> <script type="text/javascript"> //<!-- var anc_onglet = 'staff'; change_onglet(anc_onglet); //--> </script>
Après mon code dans le css:
- Spoiler:
body {
background-repeat: no-repeat;
background-position: none;
}
a.forumlink:link, a.forumlink:visited {
font-family: georgia;
text-transform : uppercase;
text-align: center;
font-size: 90%;
border-bottom: 3px solid #BAB3B3;
color: #888888;
letter-spacing: 1px;
display: block;
-moz-border-radius:10px;
}
.postdetails.poster-profile a img {
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
border: 5px solid #7A7575;
}
.postdetails.poster-profile a img {
-moz-border-radius: 10px;
border: 2px solid #7A7575;
padding: 2px;
}
a:hover {
text-decoration: none !important;
}
a { text-decoration: none; }
a.imginfo {
border-bottom:0 solid #couleur;
color:#couleur;
position:relative;
text-decoration:none;
}
a.imginfo span {
display:none;
}
a.imginfo:hover {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
cursor:help;
z-index: 999;
}
a.imginfo:hover span {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:white none repeat scroll 0 0;
border-color:#couleur;
border-style:solid;
border-width:3px 3px 5px 5px;
display:inline;
left:20px;
padding:3px;
position:absolute;
top:15px;
white-space:nowrap;
}
a:hover {
cursor:crosshair;
}
.statistiques{
border:0px;
background-image: url("https://2img.net/r/ihimizer/img178/2803/ertttt.jpg");
background-repeat: no-repeat;
background-position: center;
height:50px;}
.groupes{
background-color:#FFFFFF;border: 1px #3D3C3C dotted;
-moz-border-radius : 5px 5px 5px 5px;
height:30px;padding-right:12px;padding-left:14px;padding-bottom:3px;
font-size:15px;font-weight: bold;text-align:center;
text-decoration: none !important;}
.onglet
{
display:inline-block;
margin-left:3px;
margin-right:3px;
padding:3px;
cursor:pointer;
border: 2px solid #a3a944;
-moz-border-radius-bottomleft:10px solid #000000;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px solid;
}
.onglet_0
{
background:#bbbbbb;
border-bottom:1px solid black;
}
.onglet_1
{
background:#dddddd;
border-bottom:0px solid black;
padding-bottom:4px;
}
.contenu_onglet
{
background-color:#dddddd;
border:1px solid black;
margin-top:-1px;
padding:5px;
display:none;
}
J'ai d'ailleur oublier de mettre onmouseover pour le passage de souris =/
PS: Excusez moi, mais j'ai tellement l'habitude de vouvoyer les personnes que je ne connait pas, qu'elles sont plus grande que moi et qu'elles font tout pour m'aider =) | | |
|
| | |
LittleThing
{ Membre }
Messages : 175
| Alors, si tu as crée ta page HTML comme tu l'as dit, quand tu vas dans "Modules"=>"gestion des pages HTML" il doit être écrit l'url de ta page HTML. Et c'est ceci qu'il faudra rajouter au petit code donné : - Code:
-
<script language="javascript" src="adresse de ta page html script onglet"></script> ► Maintenant, où placer ce code ? Il suffit d'aller dans "Général" puis "Configuration" et là, tu verras apparaître le champs de texte "Description du site". C'est ici que tu devras coller ton code. ○ Après c'est à toi de jouer en remplissant le contenu de chaque onglet et en changeant les Onclick en onmouseover. Voilà ! ^^ | | |
|
| | |
Locker
{ Membre }
Messages : 52
| Merci beaucoup! Ca marche, j'ai le rectangle avec son contenu dedans =D
Mais j'ai un autre petit problème maintenant, je voudrais que la largeur du gros triangle (le triangle qui contient le contenu) et bien il diminue, parce que là il a prit la largeur de l'entête =/
- Spoiler:
| | |
|
| | |
LittleThing
{ Membre }
Messages : 175
| Alors j'ai juste essayé un petit truc pour voir si ce que je faisais ça pouvait bouger les choses. J'ai en fait rajouté la petite ligne "margin-left: 100px;" tout en bas. Si ça ne fonctionne pas, efface. Si ça fonctionne, c'est cool. Si ça fonctionne mais que ce n'est pas ce que tu veux, il faudra m'expliquer exactement ce que tu veux et je le ferais !^^ - Spoiler:
- Code:
-
body {
background-repeat: no-repeat;
background-position: none;
}
a.forumlink:link, a.forumlink:visited {
font-family: georgia;
text-transform : uppercase;
text-align: center;
font-size: 90%;
border-bottom: 3px solid #BAB3B3;
color: #888888;
letter-spacing: 1px;
display: block;
-moz-border-radius:10px;
}
.postdetails.poster-profile a img {
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
border: 5px solid #7A7575;
}
.postdetails.poster-profile a img {
-moz-border-radius: 10px;
border: 2px solid #7A7575;
padding: 2px;
}
a:hover {
text-decoration: none !important;
}
a { text-decoration: none; }
a.imginfo {
border-bottom:0 solid #couleur;
color:#couleur;
position:relative;
text-decoration:none;
}
a.imginfo span {
display:none;
}
a.imginfo:hover {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
cursor:help;
z-index: 999;
}
a.imginfo:hover span {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:white none repeat scroll 0 0;
border-color:#couleur;
border-style:solid;
border-width:3px 3px 5px 5px;
display:inline;
left:20px;
padding:3px;
position:absolute;
top:15px;
white-space:nowrap;
}
a:hover {
cursor:crosshair;
}
.statistiques{
border:0px;
background-image: url("http://img178.imageshack.us/img178/2803/ertttt.jpg");
background-repeat: no-repeat;
background-position: center;
height:50px;}
.groupes{
background-color:#FFFFFF;border: 1px #3D3C3C dotted;
-moz-border-radius : 5px 5px 5px 5px;
height:30px;padding-right:12px;padding-left:14px;padding-bottom:3px;
font-size:15px;font-weight: bold;text-align:center;
text-decoration: none !important;}
.onglet
{
display:inline-block;
margin-left:3px;
margin-right:3px;
padding:3px;
cursor:pointer;
border: 2px solid #a3a944;
-moz-border-radius-bottomleft:10px solid #000000;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px solid;
}
.onglet_0
{
background:#bbbbbb;
border-bottom:1px solid black;
}
.onglet_1
{
background:#dddddd;
border-bottom:0px solid black;
padding-bottom:4px;
}
.contenu_onglet
{
background-color:#dddddd;
border:1px solid black;
margin-top:-1px;
margin-left: 100px;
padding:5px;
display:none;
}
| | |
|
| | |
Locker
{ Membre }
Messages : 52
| Non malheureusement ce n'est pas cela, ça ne marche pas  Ce que je voudrais c'est que le rectangle qui contient le contenu (donc celui en dessous des onglet) et bie il soit plus petit, qu'il ne prend pas toute la largeur de l'entete, que la largeur diminue. | | |
|
| | |
LittleThing
{ Membre }
Messages : 175
| Oui, j'avais compris cela. Mais tu voudrais que le rectangle du contenu soit centré ou à gauche, ou à droite ? | | |
|
| | |
Locker
{ Membre }
Messages : 52
| Je voudrais que le rectangle soit centré par rapport au petit bouton onglet mais a droite de l'entête =) | | |
|
| | |
Locker
{ Membre }
Messages : 52
| Excusez moi du double post.
Quelqu'un pourrait m'aider pour mon problème, s'il vous plait? EDIT: C'est bon, j'ai trouvé pourquoi cela se mettait toute la longueur de l'entete. Seulement, quel est le code pour faire un espace? Parce que pour sauter une ligne c'est <br> si j'ai bien compris, mais moi je voudrais un code pour espacer les images parce qu'elles sont collées côte à côte. | | |
|
| | |
Orange 
RocketMan
 Messages : 3086
| L'équivalent HTML de l'espace est: & n b s p ; (sans espaces).
Est-ce que ça résous ton problème ?
| | |
|
| | |
Locker
{ Membre }
Messages : 52
| Oui sa résout mon problème, merci beaucoup Orange.
Vous pouvez Locker =D | | |
|
| | |
Kaiji
Blanche-Neige
Messages : 5578
| |
| | |
Contenu sponsorisé
| |
| | |
| | Menu avec onglet au passage de la souris | |
|
