Sujets similaires

Sujet: Un système d'onglets pour la PA Mar 22 Jan 2013, 16:14

Bonsoir,
Comme je compte faire un nouveau design pour mon forum, et bien je décide de changer de PA. J'ai réussi à avoir un code pour mon staff et j'aimerais avoir le même principe d'onglets pour toute la PA, voilà à quoi ça ressemble : http://pooop-s.forumgratuit.org/h4-page-d-accueil
Mais le problème c'est que je ne sais pas comment modifier le code de façon à avoir une structure de ce genre :

Spoiler:

En gros, les petits ronds c'est les onglets (5) puis le grand cercle ou le contenu sera affiché.
Voilà mon code :

Code:: <style type="text/css">

/* Most common stuff you'll need to change */
a:active
{
outline:none;
}

/*ADMINS*/
#article36{
height: 500px;
overflow: hidden;
width: 300px;
}
#article36 #demoWrap{
position:relative;
width:2320px;
height:300px;
}
#article36 #demoWrap a.ancre{
display:none;
}
#article36 #demoWrap #imgs{
/*transition*/
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-ms-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
#article36 #demoWrap #imgs ul li{
position:relative;
float:left!important;
text-align:justify;
height:310px;
list-style:none;
width: 240px;
margin-top: 20px;
margin-right: 100px;
margin-left: -40px;

}
#article36 #demoWrap #imgs ul li::after,
#article36 #demoWrap #imgs ul li::before{
content:"";
position:absolute;
width:240px;
height:4px;

}
#article36 #demoWrap #imgs ul li::after{
width:240px;
height:2px;
}
#article36 #demoWrap img{
width:240px;
height:150px;
}
#article36 #demoWrap #liens ul{
position:absolute;
z-index:100;
top:60px;
left: 30px;
margin-left: -70px;
}
#article36 #demoWrap #liens ul li{
position:relative;
float:left;
list-style:none;
margin:0px 3px;
-moz-transform:rotate(0deg);

}
#article36 #demoWrap #liens ul li a,
#article36 #demoWrap #wrap2:target ~ #liens ul li:nth-child(1) a,
#article36 #demoWrap #wrap3:target ~ #liens ul li:nth-child(1) a,
#article36 #demoWrap #wrap4:target ~ #liens ul li:nth-child(1) a,
#article36 #demoWrap #wrap5:target ~ #liens ul li:nth-child(1)
a,
#article36 #demoWrap #wrap6:target ~ #liens ul li:nth-child(1)
a,
#article36 #demoWrap #wrap7:target ~ #liens ul li:nth-child(1)
a{
display:block;
padding:10px 0 0 0;
height:0;
width:50px;
-moz-transform:rotate(0deg);
-webkit-transition:all.5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
#article36 #demoWrap #liens ul li a:hover,
#article36 #demoWrap #liens ul li a:focus{
/*linear-gradient*/

}
/* :target */
/* lien1 */
#article36 #demoWrap #wrap1:target ~ #imgs{
margin-left:0px;

}
#article36 #demoWrap #wrap2:target ~ #imgs{
margin-left:-290px;
}
#article36 #demoWrap #wrap3:target ~ #imgs{
margin-left:-590px;
}
#article36 #demoWrap #wrap4:target ~ #imgs{
margin-left:-890px;
}
#article36 #demoWrap #wrap5:target ~ #imgs{
margin-left:-1190px;
}
#article36 #demoWrap #wrap6:target ~ #imgs{
margin-left:-1490px;

}
#article36 #demoWrap #wrap7:target ~ #imgs{
margin-left:-1790px;

}
#article36 #demoWrap #liens ul li:nth-child(1) a,
#article36 #demoWrap #wrap1:target ~ #liens ul li a[href="#wrap1"],
#article36 #demoWrap #wrap2:target ~ #liens ul li a[href="#wrap2"],
#article36 #demoWrap #wrap3:target ~ #liens ul li a[href="#wrap3"],
#article36 #demoWrap #wrap4:target ~ #liens ul li a[href="#wrap4"],
#article36 #demoWrap #wrap5:target ~ #liens ul li a[href="#wrap5"],
#article36 #demoWrap #wrap6:target ~ #liens ul li a[href="#wrap6"],
#article36 #demoWrap #wrap7:target ~ #liens ul li a[href="#wrap7"],{
-moz-transform:rotate(5deg);
}

/*STYLE CONTENU*/

.avatar {
height: 100px;
width: 100px;
border-radius: 80px;
box-shadow: 0px 0px 5px #5F8871;
-webkit-transition: all.5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-transform: rotateZ(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotateZ(0deg);
-o-transform: rotate(0deg);
transform: rotateZ(0deg);
}
.avatar:hover, .avatar:focus {
-webkit-transform: rotateZ(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotateZ(-30deg);
-o-transform: rotate(-30deg);
transform: rotateZ(-30deg);
}
.cynthia {
font-family: lobster;
font-size: 23px;
color: #DFD723;
text-shadow: 0px 0px 3px rgba(179, 134, 54, 0.58);
letter-spacing: -1px;
}
.cynthia:hover, .cynthia:focus {
color: #F043B8;
text-shadow: 0px 0px 3px rgba(210, 66, 223, 0.8);
letter-spacing: -1px;
}
.burberry {
font-family: lobster;
font-size: 23px;
letter-spacing: -1px;
color: #8B63F1;
text-shadow: 0px 0px 3px rgba(135, 101, 224, 0.7);
}
.burberry:hover, .burberry:focus {
color: #FFB24F;
text-shadow: 0px 0px 3px rgba(255, 185, 79, 0.8);
letter-spacing: -1px;
}
.kim {
font-family: lobster;
font-size: 23px;
letter-spacing: -1px;
color: #3D3D3D;
text-shadow: 0px 0px 3px rgba(60, 61, 63, 0.7);
}
.kim:hover, .kim:focus {
color: #DBDBDB;
text-shadow: 0px 0px 3px rgba(143, 143, 143, 0.8);
letter-spacing: -1px;
}
.window {
font-family: lobster;
font-size: 23px;
letter-spacing: -1px;
color: #73C048;
text-shadow: 0px 0px 3px rgba(98, 196, 43, 0.9);
}
.window:hover, .window:focus {
color: #E726D8;
text-shadow: 0px 0px 3px rgba(181, 72, 196, 0.7);
letter-spacing: -1px;
}
.sofia {
font-family: lobster;
font-size: 23px;
letter-spacing: -1px;
color: #8D5B1C;
text-shadow: 0px 0px 3px rgba(105, 87, 27, 0.8);
}
.sofia:hover, .sofia:focus {
color: #EC932D;
text-shadow: 0px 0px 3px rgba(230, 151, 52, 0.9);
letter-spacing: 1-px;
}
.iza {
font-family: lobster;
font-size: 23px;
letter-spacing: -1px;
color: #DF8B2A;
text-shadow: 0px 0px 3px rgba(236, 148, 36, 0.9);
}
.iza:hover, .iza:focus {
letter-spacing: -1px;
color: #69511D;
text-shadow: 0px 0px 3px rgba(90, 71, 23, 0.8);
}
.lana {
font-family: lobster;
font-size: 23px;
letter-spacing: -1px;
color: #F15911;
text-shadow: 0px 0px 3px rgba(241, 86, 12, 0.8);
}
.lana:hover, .lana:focus {
letter-spacing: -1px;
color: #F7D5B0;
text-shadow: 0px 0px 3px rgba(245, 198, 167, 0.7);
}
#liens {border-bottom: 1px dashed rgba(58, 194, 194, 0.38);
padding-bottom: 20px;
width: 190px;
margin-left: 50px;}

.lesliens{
color: #389B53;
text-decoration: none !important;
font-family: trebuchet ms;
font-size: 12px;
letter-spacing: 2px;
line-height: 1;
}

</style>
<script type="text/javascript" src="http://www.archive-host.com/link/5b38ba165fa487e1dcf9b9cb56c253bab7fa1cef.js"></script>
<script type="text/javascript" src="http://www.archive-host.com/link/1d9743d9e68a8f8e50f23a446c12a248f8e87196.js"></script>
<script type="text/javascript" src="http://www.archive-host.com/link/1ad23a13da73c22082f1c28e8586a640b0d80417.js"></script>


<script type="text/javascript" src="http://sd-5.archive-host.com/membres/up/241f701f595f708c5feac7c6cc509ca033b64264/PA2012_ETE/machin.js"></script>
<script type="text/javascript">
//
</script>

<body>
<center>
<section id="article36" class="crayon article-css-36 demoTime">
<div id="demoWrap" style="margin-left: -20px;">

<a id="wrap1" class="ancre"></a>
<a id="wrap2" class="ancre"></a>
<a id="wrap3" class="ancre"></a>
<a id="wrap4" class="ancre"></a>
<a id="wrap5" class="ancre"></a>
<a id="wrap6" class="ancre"></a>
<a id="wrap7" class="ancre"></a>
<div id="liens">
<ul>

<li><a href="#wrap1"><div style=" margin-left: 25px;margin-top: -50px;background: url('http://img11.hostingpics.net/pics/139229PourCynthiBarbieCadeau.png'); height: 30px;width: 30px; border-radius: 30px; box-shadow: 0px 0px 3px #236DA7;background-size: 30px;"></div></a></li>

<li><a href="#wrap2"><div style="margin-left: -10px;margin-top: -4px;background: url('http://img15.hostingpics.net/pics/510494window1.png'); height: 30px;width: 30px; border-radius: 30px;box-shadow: 0px 0px 3px #236DA7; background-size: 30px;"></div></a></li>

<li><a href="#wrap3"><div style=" margin-left: -20px;margin-top: -48px;background: url('http://img11.hostingpics.net/pics/822484Avatar.png'); height: 30px;width: 30px; border-radius: 30px; box-shadow: 0px 0px 3px #236DA7; background-size: 30px;"></div></a></li>

<li><a href="#wrap4"><div style=" margin-top: -69px;margin-left: -10px;background: url('http://img11.hostingpics.net/pics/736391Avatar.png'); height: 30px;width: 30px; border-radius: 30px; box-shadow: 0px 0px 3px #236DA7; background-size: 30px;"></div></a></li>

<li><a href="#wrap5"><div style="margin-left: 13px;margin-top: -52px;background: url('http://img11.hostingpics.net/pics/602688avatardrink.png'); height: 30px;width: 30px; border-radius: 30px;box-shadow: 0px 0px 3px #236DA7; background-size: 30px;"></div></a></li>

<li><a href="#wrap6"><div style=" margin-left: -140px;margin-top: -15px;background: url('http://img11.hostingpics.net/pics/150480127763PourKimCadeau.png'); height: 30px;width: 30px; border-radius: 30px;box-shadow: 0px 0px 3px #236DA7; background-size: 30px;"></div></a></li>

<li><a href="#wrap7"><div style="margin-left: -130px;margin-top: -5px;background: url('http://img15.hostingpics.net/pics/184348AvNickiMinaj10.png'); height: 30px;width: 30px; border-radius: 30px; box-shadow: 0px 0px 3px #236DA7; background-size: 30px;"></div></a></li>

</ul>
<br><br><br><br><br>
</div>
<div id="imgs">
<ul>
<li><div style="margin-left: 25px;
width: 290px;
background-color: black;
height: 290px;
border-radius: 200px;"><table><tr><td valign="top"><div style="background: 10% 30% url('http://img11.hostingpics.net/pics/139229PourCynthiBarbieCadeau.png'); position:relative; z-index: 50;" class="avatar"></div></td><td valign="top"><div class="cynthia"><center>Cynthia ~</center></div><div style="font-family:arial; font-size: 7px; letter-spacing: 3px;color:#c6b56a; text-transform: uppercase; margin-top: 5px;"><center>fondatrice</center></div><br>
<a href="http://www.graph-perle.com/privmsg?mode=post&u=1" style="font-size: 9px;" class="lesliens" target="blank">CONTACTER</a> <a href="http://www.graph-perle.com/u1" style="font-size: 9px;" class="lesliens" target="blank">PROFIL</a> </center></div>
</td></tr></table></div></li>
<li><div style="margin-top: 0px;margin-left: 30px;width: 290px;
background-color: black;
height: 290px;
border-radius: 200px;"><div style="margin-left: 10px;"><table><tr><td valign="top"><div style="background: 60% 10% url('http://img15.hostingpics.net/pics/510494window1.png'); position:relative; z-index: 50;" class="avatar"></div></td><td valign="top"><div class="window"><center>Pauline</center></div><div style="font-family: overlock;
font-size: 7px;
letter-spacing: 3px;
color: #6F7070;
text-transform: uppercase;
margin-left: 5px;"><center>administratrice</center></div> <br>
<a href="http://www.graph-perle.com/privmsg?mode=post&u=104" style="font-size: 9px;" class="lesliens" target="blank">CONTACTER</a> <a href="http://www.graph-perle.com/u104" style="font-size: 9px;" class="lesliens" target="blank">PROFIL</a> </center></div>
</td></tr></table></div></div></li>
<li><div style="margin-top: 0px;margin-left: 30px;
width: 290px;
background-color: black;
height: 290px;
border-radius: 200px;"><div style="margin-left: 10px;"><table><tr><td valign="top"><div style="background: 50% 0% url('http://img11.hostingpics.net/pics/822484Avatar.png'); position:relative; z-index: 50;" class="avatar"></div></td><td valign="top"><div class="sofia"><center>Sofia.</center></div><div style="font-family: overlock;
font-size: 7px;
letter-spacing: 3px;
color: #6F7070;
text-transform: uppercase;
margin-left: 5px;"><center>administratrice</center></div><br>
<a href="http://www.graph-perle.com/privmsg?mode=post&u=273" style="font-size: 9px;" class="lesliens" target="blank">CONTACTER</a> <a href="http://www.graph-perle.com/u273" style="font-size: 9px;" class="lesliens" target="blank">PROFIL</a></center></div>
</td></tr></table></div></div></li>
<li><div style="margin-top: 0px;margin-left: 30px;width: 290px;
background-color: black;
height: 290px;
border-radius: 200px;"><div style="margin-left: 10px;"><table><tr><td valign="top"><div style="background: 60% 30% url('http://img11.hostingpics.net/pics/736391Avatar.png'); position:relative; z-index: 50;" class="avatar"></div></td><td valign="top"><div class="iza"><center>Iza</center></div><div style="font-family: overlock;
font-size: 7px;
letter-spacing: 3px;
color: #6F7070;
text-transform: uppercase;
margin-left: 5px;"><center>administratrice</center></div><br>
<a href="http://www.graph-perle.com/privmsg?mode=post&u=312" style="font-size: 9px;" class="lesliens" target="blank">CONTACTER</a> <a href="http://www.graph-perle.com/u312" style="font-size: 9px;" class="lesliens" target="blank">PROFIL</a></center></div>
</td></tr></table></div></div></li>
<li><div style="margin-top: 0px;width: 290px;
background-color: black;
height: 290px;
border-radius: 200px;"><div style="margin-left: 10px;margin-left: 30px;width: 220px;"><table><tr><td valign="top"><div style="background: 40% 40% url('http://img11.hostingpics.net/pics/602688avatardrink.png'); position:relative; z-index: 50;" class="avatar"></div></td><td valign="top"><div class="lana"><center>Lana</center></div><div style="font-family: overlock;
font-size: 7px;
letter-spacing: 3px;
color: #6F7070;
text-transform: uppercase;
margin-left: 5px;"><center>modératrice</center></div><br>
<a href="http://www.graph-perle.com/privmsg?mode=post&u=155" style="font-size: 9px;" class="lesliens" target="blank">CONTACTER</a> <a href="http://www.graph-perle.com/u155" style="font-size: 9px;" class="lesliens" target="blank">PROFIL</a></center></div>
</td></tr></table></div></div></li>

<li><div style="margin-top: 0px;margin-left: 30px;width: 290px;
background-color: black;
height: 290px;
border-radius: 200px;"><div style="margin-left: 10px;"><table><tr><td valign="top"><div style="background: 40% 5% url('http://img11.hostingpics.net/pics/150480127763PourKimCadeau.png'); position:relative; z-index: 50;" class="avatar"></div></td><td valign="top"><div class="kim"><center>Kim ~</center></div><div style="font-family: overlock;
font-size: 7px;
letter-spacing: 3px;
color: #6F7070;
text-transform: uppercase;
margin-left: 5px;"><center>modératrice</center></div><br>
<a href="http://www.graph-perle.com/privmsg?mode=post&u=182" style="font-size: 9px;" class="lesliens" target="blank">CONTACTER</a> <a href="http://www.graph-perle.com/u182" style="font-size: 9px;" class="lesliens" target="blank">PROFIL</a></center></div>
</td></tr></table></div></div></li>

<li><div style="margin-top: 0px;margin-left: 30px;width: 290px;
background-color: black;
height: 290px;
border-radius: 200px;"><div style="margin-left: 10px;"><table><tr><td valign="top"><div style="background: 50% 5% url('http://img15.hostingpics.net/pics/184348AvNickiMinaj10.png'); position:relative; z-index: 50;" class="avatar"></div></td><td valign="top"><div class="burberry"><center>Burberry~</center></div><div style="font-family: overlock;
font-size: 7px;
letter-spacing: 3px;
color: #6F7070;
text-transform: uppercase;
margin-left: 5px;"><center>modératrice</center></div><br>
<a href="http://www.graph-perle.com/privmsg?mode=post&u=480" style="font-size: 9px;" class="lesliens" target="blank">CONTACTER</a> <a href="http://www.graph-perle.com/u480" style="font-size: 9px;" class="lesliens" target="blank">PROFIL</a></center></div>
</td></tr></table></div></div></li>
</ul>
</div>

</div>
</section>
</center>
<script type="text/javascript">
//
</script>
</body>

Merci pour l'aide !

Sujet: Re: Un système d'onglets pour la PA Mer 23 Jan 2013, 02:06

Bonjour,

Je ne fais que passer je dois aller attrapper mon train, mais entre mes explications que je t'avais faites ici et encore celles de cet autre sujet, tu n'as pas déjà une idée de comment faire ?

Un indice : un grand bloc conteneur en positionnement relatif, un grand rond en absolu et plein de petits blocs en absolu.

Allez hop, au travail, révisions time.

Sujet: Re: Un système d'onglets pour la PA Jeu 24 Jan 2013, 07:46

Bonjour Christa,
merci de te pencher encore sur mon problème Very Happy

Et mince encore les positionnements Un système d'onglets pour la PA 40601244

Mais je vais essayer de revoir ce que tu m'avais montré.

PS : Cela peut me prendre du temps, parce que je voyage aujourd'hui, donc merci de ne pas fermer le sujet très rapidement Un système d'onglets pour la PA 577704309

Un système d'onglets pour la PA 577704309

Sujet: Re: Un système d'onglets pour la PA Jeu 24 Jan 2013, 07:59

Bon courage !

Par contre je ne pourrai pas t'aider sur le long terme je suis un peu HS en ce moment donc un autre codeur viendra s'occuper de toi (selon disponibilités évidemment)

Sujet: Re: Un système d'onglets pour la PA Jeu 24 Jan 2013, 17:25

Bonsoir,

Alors là je suis enfin arrivée à destination, et j'essaye de commencer, mais je ne sais vraiment pas par ou commencer x)

Est ce que je dois partir du code que j'ai déjà ou juste créer les ronds ?

Sujet: Re: Un système d'onglets pour la PA Lun 28 Jan 2013, 05:20

Bonjour Xibiton !

Je vais tâcher de prendre la relève sur ce sujet, 'Christa étant peu disponible en ce moment.

Le plus simple pour l'instant c'est d'oublier les ronds et te concentrer sur les blocs et la structure. Code déjà le "squelette" (crée les blocs avec les largeurs qui vont bien et positionne-les).

J'attends de voir ce que tu obtiens pour voir ce qui n'irait pas Wink

Sujet: Re: Un système d'onglets pour la PA Mar 29 Jan 2013, 08:34

Bonjour Espeon Very Happy

Alors j'ai fais un essai (que le squelette) : http://pooop-s.forumgratuit.org/h5-pa-onglets

J'espère que c'est ça !

Sujet: Re: Un système d'onglets pour la PA Mar 29 Jan 2013, 09:22

Et bien c'est pas mal du tout dans l'ensemble Smile

Tu as bien compris comment positionner les éléments (avec le conteneur en relatif et les éléments en absolu à l'intérieur), ça va te permettre de faire beaucoup de choses avec ce principe à terme donc je suis plutôt content de le constater !

Quelques remarques qui devraient t'aider pour le mettre en place sur ton forum :

Essaie de choisir des noms plus sémantiques. .Bloc1, .Bloc3, ... c'est pas très parlant ! Il n'y a pas d'impératif ni de règle absolu, mais tu t'y retrouvera plus si tu nomme tes éléments de manière judicieuse. Par exemple, tout en restant générique, tu peux appeler ton conteneur .onglets-container, ton bloc principal .onglets-main-block, etc. Tu saisis l'idée ?
Pour la propriété border-radius, c'est cadeau : tu peux laisser tomber les alternatives avec les préfixes dans la mesure où Firefox, Chrome & co. ont intégré la propriété .border-radius depuis quelques temps déjà
Tu peux également simplifier un peu ton CSS en regroupant les propriétés similaires entre plusieurs éléments. Il y en a (si tu ne vois pas de quoi je parle, n'hésites pas à me le dire)

J'attends le résultat de tes petites retouches (si tu pouvais me mettre le CSS et le HTML dans tes réponses avec le BBCode [code] ça serait super).

Pour le reste, qu'est-ce-qu'il te bloque encore pour arriver à tes fins exactement ?

Sujet: Re: Un système d'onglets pour la PA Mar 29 Jan 2013, 09:38

Coucou

Ah je suis contente mdr x)
- Donc pour les noms, c'était juste pour voir ce que ça donne au début.. Je tâcherais de les changer, .onglets-container et .onglets-main-block sonnent bien !
- C'est cool, j'en avais marre de répéter à chaque fois moz, webkit .. merci pour l'info Very Happy

- Eh oui j'ai déjà pensé à ça, le problème c'est que les petits ronds, ont des position différentes (top, left..) Donc je ne vois pas comment je pourrais les regrouper, merci de m'éclairer Very Happy

Donc voilà mon css :

Code:: .rond1 {
height: 40px;
width: 40px;
background-color: black;
position: absolute;
top: -50px;
left: 110px;
border-radius: 40px;
}
.rond2 {
border-radius: 40px;
height: 40px;
width: 40px;
background-color: purple;
position: absolute;
top: -40px;
left: 180px;
}
.rond3 {
border-radius: 40px;
height: 40px;
width: 40px;
background-color: green;
position: absolute;
top: -10px;
left: 250px;
}
.rond4 {
border-radius: 40px;
height: 40px;
width: 40px;
background-color: brown;
position: absolute;
top: 40px;
left: 300px;
}
.rond5 {
border-radius: 40px;
height: 40px;
width: 40px;
background-color: pink;
position: absolute;
top: 100px;
left: 310px;
}
.onglets-container{
position: relative;
border-radius: 100px;
height: 400px;
width: 400px;
}

.onglets-main-block{
background-color: yellow;
height: 300px;
width: 300px;
position: absolute;
border-radius: 300px;
left: 30px;
top: 60px;
}

et HTML :

Code:: <div class="onglets-container">
<div class="onglets-main-block">
<div class="rond1"></div>
<div class="rond2"></div>
<div class="rond3"></div>
<div class="rond4"></div>
<div class="rond5"></div>
</div>
</div>

Ce qui me bloque ? eh bien comment introduire le système d'onglets (comme dans l'exemple) dans cette structure ? Un système d'onglets pour la PA 40601244

Sujet: Re: Un système d'onglets pour la PA Mar 29 Jan 2013, 09:49

Bonjour !

Pour les ronds, n'oublie pas que tu peux attribuer plus d'une classe à un élément.

Donc par exemple : <div class="rond-onglet rond1"></div>

Sujet: Re: Un système d'onglets pour la PA Mar 29 Jan 2013, 10:25

Dans ton CSS, si je synthétise, voilà un peu les répétitions qu'on trouve :

Code:: .rond1 {
border-radius: 40px;
height: 40px;
width: 40px;
position: absolute;
}

.rond2 {
border-radius: 40px;
height: 40px;
width: 40px;
position: absolute;
}

.rond3 {
border-radius: 40px;
height: 40px;
width: 40px;
position: absolute;
}

.rond4 {
border-radius: 40px;
height: 40px;
width: 40px;
position: absolute;
}

.rond5 {
border-radius: 40px;
height: 40px;
width: 40px;
position: absolute;
}

En combinant avec l'astuce que viens de te donner 'Christa, y'a vachement moyen de simplifier ton code.

Ah et, les noms de classe que je t'avais donné, c'était un exemple. L'idée c'était pas que tu reprenne ça forcément tel quel et, surtout, pas que tu reprenne JUSTE ça. Autrement dit, .rond1, .rond2, & co. c'est toujours pas très explicite Smile

A ta place donc, je créerais déjà une classe .onglets-rounded (ou .onglets-rond, as you wish) pour simplifier ton CSS (l'équivalent du .rond-onglet que t'indique 'Christa, mais selon la logique de ta nomenclature), et je trouverais un autre nom pour les autres Smile

Sujet: Re: Un système d'onglets pour la PA Mar 29 Jan 2013, 11:02

Tiens on dirait que tu aimes vraiment l'anglais Espeon Very Happy

J'ai pris l'exemple que tu m'a donné parce que j'ai bien aimé quoi x) Même si je n'aime pas trop utiliser les "-" ou "_" dans les noms des classes Very Happy

Sinon en suivant l'astuce de Christa voilà ce que j'ai fais :

Code:: .onglet1 {
background-color: black;
top: -50px;
left: 110px;
}
.onglet2 {
background-color: purple;
top: -40px;
left: 180px;
}
.onglet3 {
background-color: green;
top: -10px;
left: 250px;
}
.onglet4 {
background-color: brown;
top: 40px;
left: 300px;
}
.onglet5 {
background-color: pink;
top: 100px;
left: 310px;
}
.onglets-container{
position: relative;
border-radius: 100px;
height: 400px;
width: 400px;
}

.onglets-main-block{
background-color: yellow;
height: 300px;
width: 300px;
position: absolute;
border-radius: 300px;
left: 30px;
top: 60px;
}

.onglets-rond{
border-radius: 40px;
height: 40px;
width: 40px;
position: absolute;
}

Code:: <div class="onglets-container">
<div class="onglets-main-block">
<div class="onglets-rond onglet1"></div>
<div class="onglets-rond onglet2"></div>
<div class="onglets-rond onglet3"></div>
<div class="onglets-rond onglet4"></div>
<div class="onglets-rond onglet5"></div>
</div>
</div>

C'est bon comme ça ?

Sujet: Re: Un système d'onglets pour la PA Mar 29 Jan 2013, 11:28

C'est à force de lire des tutos et des guides en anglais, j'ai tendance à préférer l'anglais dans le code (mais bon c'est à géométrie variable en fonction du code) Razz

C'est exaaaaactement ça \o/

Pour ce qui est de la nomenclature, y'a pas de règle universelle, c'est en fonction de ce que tu préfère.
Ce qui est couramment utilisé c'est : tout en minuscule et séparation des mots avec un tiret "-"

Mais bon, rien d'universel : 'Christa a tendance à utiliser une autre nomenclature qui consiste à ne pas mettre de tirets et utiliser une majuscule au début de chaque mot, sauf le premier (c'est du camelCase exactement, très utilisé dans d'autres langages de programmation plutôt).

Dernière chose pour nettoyer définitivement ton code (et ensuite on aborde la mise en place du système d'onglets) : pense à faire une indentation correcte. Visuellement ça permet de dégager la structure (pas parfait dans ton code HTML, on a l'impression qu'il y a une organisation différente de celle qui existe en réalité).

Sujet: Re: Un système d'onglets pour la PA Mar 29 Jan 2013, 11:36

Alors là je n'ai vraiment pas compris ce que tu veux dire par indentation correcte ?

Sujet: Re: Un système d'onglets pour la PA Mar 29 Jan 2013, 12:05

Et bien, par exemple, ceci n'est pas/est mal indenté :

Code:: .ma-classe {
background-color: purple;
top: -40px;
left: 180px;
}

Code:: <div id="mon-bloc">
<div class="plop"></div>
<div class="plop ma-classe">
<a href="#">Mon super lien</a>
</div>
</div>

Et ceci est la version correctement indentée :

Code:: .ma-classe {
background-color: purple;
top: -40px;
left: 180px;
}

Code:: <div id="mon-bloc">
<div class="plop"></div>
<div class="plop ma-classe">
<a href="#">Mon super lien</a>
</div>
</div>

Sujet: Re: Un système d'onglets pour la PA Mar 29 Jan 2013, 12:08

Donc le HTML doit être comme ça ? Very Happy

Code:: <div class="onglets-container">
<div class="onglets-main-block">
<div class="onglets-rond onglet1"></div>
<div class="onglets-rond onglet2"></div>
<div class="onglets-rond onglet3"></div>
<div class="onglets-rond onglet4"></div>
<div class="onglets-rond onglet5"></div>
</div>
</div>

Sujet: Re: Un système d'onglets pour la PA Mar 29 Jan 2013, 12:12

Exact, et du coup je remarque qu'il va y avoir un soucis pour la suite : ton gros rond principal ne doit pas contenir tes petits ronds il me semble. Ils doivent être côtes à côtes (au même titre que les différents onglets).

Je te dis cela car, pour mettre en place un système d'onglets simple comme celui que j'ai en tête (un système d'onglets quoi), il faut changer le contenu du bloc principal. Ca pose problème si ce même bloc contient les onglets eux-mêmes ^_^

Tu peux me corriger ça (rapide niveau HTML, faut juste checker le CSS du coup, à cause du positionnement qui risque peut-être de bouger).

Sujet: Re: Un système d'onglets pour la PA Mar 29 Jan 2013, 12:21

Je ne sais pas si j'ai bien compris, mais voilà ce que je ferais si ce que j'ai compris est juste lol !

Code:: <div class="onglets-container">
<div class="onglets-main-block"></div>
<div class="onglets-rond onglet1"></div>
<div class="onglets-rond onglet2"></div>
<div class="onglets-rond onglet3"></div>
<div class="onglets-rond onglet4"></div>
<div class="onglets-rond onglet5"></div>
</div>

Code:: .onglet1 {
background-color: black;
left: 120px;
}
.onglet2 {
background-color: purple;
left: 200px;
}
.onglet3 {
background-color: green;
top: 30px;
left: 270px;
}
.onglet4 {
background-color: brown;
top: 80px;
left: 320px;
}
.onglet5 {
background-color: pink;
top: 140px;
left: 340px;
}
.onglets-container{
position: relative;
border-radius: 100px;
height: 400px;
width: 400px;
}

.onglets-main-block{
background-color: yellow;
height: 300px;
width: 300px;
position: absolute;
border-radius: 300px;
left: 30px;
top: 60px;
}

.onglets-rond{
border-radius: 40px;
height: 40px;
width: 40px;
position: absolute;
}

Preview : http://pooop-s.forumgratuit.org/h5-pa-onglets

Sujet: Re: Un système d'onglets pour la PA Mer 30 Jan 2013, 06:18

C'est exactement ça le principe, bien joué Smile

Le code de Manumanu t'aide-t-il dans la démarche de mise en place du système d'onglet ? Qu'est-ce-que tu as actuellement ? Smile

Sujet: Re: Un système d'onglets pour la PA Mer 30 Jan 2013, 12:21

Coucou Espeon !

Alors en suivant un peu la logique des codes de Manumanu, j'ai essayé de comprendre (oui j'ai vraiment essayé xD) et je suis arrivé à faire ça : http://pooop-s.forumgratuit.org/h3-onglets-pa-2

Bon le rendu est pas mal du tout, mais côté codes je ne sais pas si c'est bon Oo

Code:: <div class="onglets-container">
<div class="tabs-onglets">
<div class="onglets-rond onglet1"><a href="#premier_onglet"></a></div>
<div class="onglets-rond onglet2"><a href="#deuxieme_onglet"></a></div>
<div class="onglets-rond onglet3"><a href="#troisieme_onglet"></a></div>
<div class="onglets-rond onglet4"><a href="#quatrieme_onglet"></a></div>
<div class="onglets-rond onglet5"><a href="#cinquieme_onglet"></a></div>
</div>
<div id="contenu">
<div class="onglets-main-block">
<div id="premier_onglet">
<div class="textpa">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam adipiscing tortor vel enim elementum consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ac tellus at ante convallis auctor. Cras pellentesque, arcu non ornare blandit, erat eros blandit tortor, placerat pulvinar ligula nisl nec eros. Aliquam interdum pellentesque vulputate. Pellentesque et dapibus diam. Cras ornare congue massa, nec aliquet metus tincidunt et. Fusce id libero massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam adipiscing tortor vel enim elementum consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ac tellus at ante convallis auctor. Cras pellentesque, arcu non ornare blandit, erat eros blandit tortor, placerat pulvinar ligula nisl nec eros. Aliquam interdum pellentesque vulputate. Pellentesque et dapibus diam. Cras ornare congue massa, nec aliquet metus tincidunt et. Fusce id libero massa.
</div>
</div>
<div id="deuxieme_onglet">
<div class="textpa">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam adipiscing tortor vel enim elementum consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ac tellus at ante convallis auctor. Cras pellentesque, arcu non ornare blandit, erat eros blandit tortor, placerat pulvinar ligula nisl nec eros. Aliquam interdum pellentesque vulputate. Pellentesque et dapibus diam. Cras ornare congue massa, nec aliquet metus tincidunt et. Fusce id libero massa.
</div>
</div>
<div id="troisieme_onglet">
<div class="textpa">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam adipiscing tortor vel enim elementum consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ac tellus at ante convallis auctor. Cras pellentesque, arcu non ornare blandit, erat eros blandit tortor, placerat pulvinar ligula nisl nec eros. Aliquam interdum pellentesque vulputate. Pellentesque et dapibus diam. Cras ornare congue massa, nec aliquet metus tincidunt et. Fusce id libero massa.
</div>
</div>
<div id="quatrieme_onglet">
<div class="textpa">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam adipiscing tortor vel enim elementum consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ac tellus at ante convallis auctor. Cras pellentesque, arcu non ornare blandit, erat eros blandit tortor, placerat pulvinar ligula nisl nec eros. Aliquam interdum pellentesque vulputate. Pellentesque et dapibus diam. Cras ornare congue massa, nec aliquet metus tincidunt et. Fusce id libero massa.
</div>
</div>
<div id="cinquieme_onglet">
<div class="textpa">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam adipiscing tortor vel enim elementum consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ac tellus at ante convallis auctor. Cras pellentesque, arcu non ornare blandit, erat eros blandit tortor, placerat pulvinar ligula nisl nec eros. Aliquam interdum pellentesque vulputate. Pellentesque et dapibus diam. Cras ornare congue massa, nec aliquet metus tincidunt et. Fusce id libero massa.
</div>
</div>
</div>
</div>
</div>

Code:: .onglet1 {
background-color: black;
left: 120px;
}
.onglet2 {
background-color: purple;
left: 200px;
}
.onglet3 {
background-color: green;
top: 30px;
left: 270px;
}
.onglet4 {
background-color: brown;
top: 80px;
left: 320px;
}
.onglet5 {
background-color: pink;
top: 140px;
left: 340px;
}
.onglets-container{
position: relative;
border-radius: 100px;
height: 400px;
width: 400px;
}

.onglets-main-block{
background-color: yellow;
height: 300px;
width: 300px;
position: absolute;
border-radius: 300px;
left: 30px;
top: 60px;
}

.onglets-rond{
border-radius: 40px;
height: 40px;
width: 40px;
position: absolute;
}

      .tabs-onglets {padding: 5px 5px 0 5px }
      .tabs-onglets a {
display: inline-block;
color: white;
text-decoration: none;
padding: 0 10px;
height: 40px;
line-height: 30px;
margin-bottom: 5px;
border-radius: 50px;
width: 20px;
}
      .tabs-onglets .selected, .tabs-onglets a:hover { color: #5fb0ee; }
      #contenu {
background: white;
padding: 10px;
border-radius: 300px;
width: 300px;
height: 300px;
}
.textpa {
width: 240px;
left: 30px;
overflow: auto;
height: 150px;
top: 70px;
position: absolute;
line-height: 1em;
font-family: arial;
font-size: 11px;
text-align: justify;
color: #414141;
}

J'espère que ça ne fait pas beaucoup mal aux yeux Un système d'onglets pour la PA 1779901633

Désolé de ma réponse tardive Xibition mais quoiqu'il en soit, ton code fonctionne bel et bien (comme tu peux le constater dans l'exemple) et est relativement propre.

D'une manière générale, mon principal conseil que je peux te réitérer serait de faire attention à l'indentation de ton HTML et de ton CSS pour que cela reste plus lisible.

Quoiqu'il en soit, ton problème me semble résolu désormais, non ? Smile

Ce n'est pas grave Wink

En effet les onglets marchent bien, mais le probleme c'est que j'aimerais avoir des onglets comme dans l'exemple dans mon 1er post... On voit defiler les onglets. Je crois que c'est un script mais bon ..

Ouch effectivement, je n'avais pas considéré le premier exemple et je ne m'étais fié qu'au principe d'onglets lorsque j'ai repris en main ta demande d'aide.

Le fonctionnement n'est pas tout à fait le même, il s'agit en fait plutôt d'une sorte de carousel (sauf qu'il ne défile pas tout seul mais lorsque tu clique sur les puces).

Du coup, j'ai bien peur que le script de Manumanu ne soit plus bien utile si c'est toujours ce que tu souhaites faire. En revanche, la structure HTML me paraît bonne et exploitable, mais il va falloir travailler sur le CSS et ajouter du Javascript (mais pas celui des onglets).

c'est compliqué à faire ? parce que je tiens vraiment à avoir ce genre d'onglets Smile

Bonjour,

Toujours d'actualité ? Very Happy

Merci de nous le faire savoir sous quatre jours sans quoi ce sujet sera archivé.
Bonne journée. Un système d'onglets pour la PA 510527

Un système d'onglets pour la PA

Un système d'onglets pour la PA

Sujets similaires

Sujets similaires

Partenaires Or