CSS et onglets

[Résolu]
Signaler
Messages postés
2350
Date d'inscription
mercredi 13 octobre 2004
Statut
Membre
Dernière intervention
18 avril 2015
-
Messages postés
9433
Date d'inscription
mardi 9 octobre 2001
Statut
Membre
Dernière intervention
13 avril 2007
-
Voila, je voulais me faire un petit formulaire avec des onglets. Hors,
comme je connais presque rien au CSS (et en graphisme en général), je
me suis fait vite-fait un petit truc avec un fieldset et un onglet avec
la balise legend. Ca marche bien sous FF, mais merde total sous IE.

De plus, il m'aurait fallu beaucoup plus d'onglets que ca... genre 3 ou
4 par exemple, et la je bute totalement. J'ai beau rechercher sur le
net, je capte pas grand chose.

Voila la gueule de mon de code :





11 réponses

Messages postés
2350
Date d'inscription
mercredi 13 octobre 2004
Statut
Membre
Dernière intervention
18 avril 2015
4
Arf j'ai trouvé... 40 minutes quand même, et encore, j'y ai du passer quelques heures avant d'avoir poster !
Messages postés
2350
Date d'inscription
mercredi 13 octobre 2004
Statut
Membre
Dernière intervention
18 avril 2015
4
Laissez tomber... jviens de capter comment marche le padding ...
Messages postés
2350
Date d'inscription
mercredi 13 octobre 2004
Statut
Membre
Dernière intervention
18 avril 2015
4
Pff tu parles... sous IE ca marche pas.



Mais merde de merde quoi !
Messages postés
2350
Date d'inscription
mercredi 13 octobre 2004
Statut
Membre
Dernière intervention
18 avril 2015
4
Voici donc ou j'en suis arrivé :



[./login.php Login]

[./inscription.php Inscription]

[./perte.php Perte du mot de passe]

[./chartre.php Chartre du site]

[./aide.php Aide]









Messages postés
9433
Date d'inscription
mardi 9 octobre 2001
Statut
Membre
Dernière intervention
13 avril 2007
9
Je t'aurais bien dit d'aller voir la zone membre de mon site qui
comporte des onglets (non sémantiques car j'ai pas réussi non plus avec
des <li> en display:inline) mais bon comme tu as résolu ton
problème :-)

<hr size="2" width="100%"><li>Entraide, dépannage et vulgarisation informatique : Mon site de vulgarisation informatique</li>
Messages postés
6814
Date d'inscription
dimanche 15 décembre 2002
Statut
Modérateur
Dernière intervention
13 octobre 2010
29
Sinon tu peux reprendre les onglets qu'il y a en page d'accueil de ce site ;)




<div class="C SC">
<h2>Titre onglet</h2>
<div class="content">
Contenu

<div class="C SC">
<h2>Titre onglet</h2>
<div class="content">
Contenu

Puis un peu de javascript :

function OngletLoad(id)
{
var elmtOnglet = document.getElementById(id);
var Onglets = new Array();
node = elmtOnglet.children[ 0 ];
var i =0;
while (node != null)
{
if (node.nodeType == 1)
{
var nodeTitre = node.children[ 0 ];
var b = false;
while (!(nodeTitre == null || b ))
{
if(nodeTitre.nodeType == 1)
{
Onglets[i] = nodeTitre.innerHTML;
b=true;
}
nodeTitre = nodeTitre.nextSibling;
}
i++;
}
node = node.nextSibling;
}
var tmpOngletContent = elmtOnglet.innerHTML;
elmtOnglet.innerHTML = '';
for (var i=0; i < Onglets.length; i++ )
{
var Onglet = '<li';
if(i==0)
Onglet += ' class="first"';
Onglet += '> [javascript:void(0); ';
Onglet += Onglets[i] ;
Onglet += ']</li>';
elmtOnglet.innerHTML += Onglet;
}
elmtOnglet.innerHTML = '' + elmtOnglet.innerHTML+ '' + tmpOngletContent;
OngletChange(id, 0, 1);
}




/// mode : - 0 si onglet et le button
/// - autre si c'est l'id du parent des onglets
function OngletChange(onglet, number,mode){
var elmt; if (mode 0) elmt onglet.parentNode.parentNode.parentNode;
else elmt = document.getElementById(onglet);
LI = elmt.firstChild.getElementsByTagName("a");
for(i=0; i < LI.length; i++){ if (i number) LI[i].className "Actif";
else LI[i].className = "";
}
var i=0;
node = elmt.children[ 1 ];
while (node != null){
if (node.nodeType == 1){
var nodeTitre = node.children[ 0 ];
var b = false;
while (!(nodeTitre == null || b))
{ if(nodeTitre.nodeType 1) {nodeTitre.style.display "none";nodeTitre.style.visibility = "hidden";b=true;}
nodeTitre = nodeTitre.nextSibling;
} if (i number) {node.style.display "block"; node.style.visibility = "visible" } else {node.style.display "none";node.style.visibility "hidden"}
i++;}
node = node.nextSibling; }
}




window.onload = function(){ongletLoad('onglets');};



Ensuite pour le CSS



voit ici : http://www.phpcs.com/dcss/5.cs.css

ul.Onglet { list-style-type: none; margin: 5px 0px 0px 0px !important; padding: 0px; height: 25px; line-height: 25px; border-bottom: solid 1px #CA00CC; }
ul.Onglet li { background-repeat: repeat-x !important; background-position: 0px 0px !important; background-image: url(/g/5/fdh25inv1.jpg) !important; float: left; }
ul.Onglet .first a { border-left: solid 1px #EEEEEE; }
ul.Onglet a { border-top: solid 1px #EEEEEE; border-right: solid 1px #EEEEEE; display: block; float: left; padding: 0px 10px; height: 24px; line-height: 24px; font-weight: bold; font-size: 110%; }
ul.Onglet a.Actif { color: #000000; background-image: url(/g/5/fdh25.jpg); background-position: inherit top; background-repeat: repeat-x; border-top: solid 1px #dcdcdc; border-left: solid 1px #dcdcdc; border-right: solid 1px #000000; }
ul.Onglet a:hover { text-decoration: none; }




div.C { margin: 0px; padding: 0px 0px 10px 0px; font-size: small; }
div.C * { z-index: 100; }
div.C h2 { margin: 0px; padding-left: 5px; font-variant: small-caps; font-weight: bold; font-size: 11px; line-height: 20px; height: 20px; border-bottom: solid 1px #CA00CC; border-right: solid 1px #CA00CC; border-top: solid 1px #EEEEEE; background-image: url(/g/5/fdh25.jpg); background-color: #E9DBDE;background-repeat: repeat-x; background-position:center bottom; }
div.C h2.collapse { border-bottom: solid 1px #B8B8B8; border-right: solid 1px #B8B8B8; border-top: solid 1px #EEEEEE; background-image: url(/g/5/fdh25inv1.jpg); background-color: #E9DBDE; background-repeat: repeat-x;background-position:center bottom; }
div.C h2 span.E { display: inline-block; cursor: pointer; overflow: hidden; }
div.C h2 em {padding-bottom:3px; height: 20px; line-height: 20px; }
div.C h2.expand span.E { padding-left: 15px; background-image: url(/g/minus.gif); background-repeat: no-repeat; background-position: 0px center; empty-cells: show; }
div.C h2.collapse span.E { padding-left: 15px; background-image: url(/g/plus.gif); background-repeat: no-repeat; background-position: 0px center; empty-cells: show; }
div.C .contentcollapse { display: none; }
div.C .content { background-color: #FFFFFF; border-left: solid 1px #CA00CC; border-right: solid 1px #CA00CC; border-bottom: solid 1px #CA00CC; padding: 10px 5px 10px 5px; }
div.C .content .fmsg h2{ margin: 0px; padding: 5px 0px 5px 0px ; font-size: 15px; line-height:15px; height: 20px; border:none; background:#FFFFFF none; }
div.SC, div.SC a { font-size: x-small !important; }
div.CO {display:none;visibility:hidden;}
div.C .content ul { margin: 0px; padding: 0px; }
div.C .content ul li { list-style-position: outside; list-style-type: none; line-height: 130%; }
div.C .right { text-align: right; }
div.C ul.right { list-style-type: none; margin: 0px; padding: 0px; }

De mémoire je crois pas qu'il faille quelque chose de plus. Au pire si y'a problème t'as qu'a redemander.



<hr> Cyril - MVS - MCP ASP
Messages postés
9433
Date d'inscription
mardi 9 octobre 2001
Statut
Membre
Dernière intervention
13 avril 2007
9
aie aie aie

<hr size="2" width="100%"><li>Entraide, dépannage et vulgarisation informatique : Mon site de vulgarisation informatique</li>
Messages postés
6814
Date d'inscription
dimanche 15 décembre 2002
Statut
Modérateur
Dernière intervention
13 octobre 2010
29
Ce qui veut dire ?


<HR>
Cyril - MVS - MCP ASP
Messages postés
9433
Date d'inscription
mardi 9 octobre 2001
Statut
Membre
Dernière intervention
13 avril 2007
9
bah du javascript pour faire un menu... tu vois ce que je veux dire quoi ?

<hr size="2" width="100%"><li>Entraide, dépannage et vulgarisation informatique : Mon site de vulgarisation informatique</li>
Messages postés
6814
Date d'inscription
dimanche 15 décembre 2002
Statut
Modérateur
Dernière intervention
13 octobre 2010
29
arf j'ai mal du comprendre la question alors :)

Si tu avais lu ce que j'ai mis ;) j'ai montré le code pour faire un systeme d'onglet, comme sur la pae d'accueil du site, c'est à dire qu'il y a des onglets et en dessous des parties de pages :) et quand on clique sur les onglets on change de partie de page :) donc javascipt needed mais seulement pour changer de "page"

le html pour les onglets sont bien de la forme

<li>[# onglet1]</li>
<li>[# onglet2]</li>
<li>[# onglet3]</li>


puis du CSS pour la mis en page et le javascript pour changer de page ;)


<HR>
Cyril - MVS - MCP ASP
Messages postés
9433
Date d'inscription
mardi 9 octobre 2001
Statut
Membre
Dernière intervention
13 avril 2007
9
j'ai bien lu ce que tu as mis :-)

<hr size="2" width="100%"><li>Entraide, dépannage et vulgarisation informatique : Mon site de vulgarisation informatique</li>