CSS et onglets

Résolu

FhX Messages postés 2350 Date d'inscription mercredi 13 octobre 2004 Statut Membre Dernière intervention 18 avril 2015 - 14 oct. 2005 à 00:04
cs_Anthomicro Messages postés 9433 Date d'inscription mardi 9 octobre 2001 Statut Membre Dernière intervention 13 avril 2007 - 15 oct. 2005 à 19:24

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 :

A voir également:

11 réponses

Réponse 1 / 11

FhX Messages postés 2350 Date d'inscription mercredi 13 octobre 2004 Statut Membre Dernière intervention 18 avril 2015 3
14 oct. 2005 à 00:45

Arf j'ai trouvé... 40 minutes quand même, et encore, j'y ai du passer quelques heures avant d'avoir poster !

Réponse 2 / 11

FhX Messages postés 2350 Date d'inscription mercredi 13 octobre 2004 Statut Membre Dernière intervention 18 avril 2015 3
14 oct. 2005 à 00:19

Laissez tomber... jviens de capter comment marche le padding ...

Réponse 3 / 11

FhX Messages postés 2350 Date d'inscription mercredi 13 octobre 2004 Statut Membre Dernière intervention 18 avril 2015 3
14 oct. 2005 à 00:20

Pff tu parles... sous IE ca marche pas.

Mais merde de merde quoi !

Réponse 4 / 11

FhX Messages postés 2350 Date d'inscription mercredi 13 octobre 2004 Statut Membre Dernière intervention 18 avril 2015 3
14 oct. 2005 à 00:31

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]

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 11

cs_Anthomicro Messages postés 9433 Date d'inscription mardi 9 octobre 2001 Statut Membre Dernière intervention 13 avril 2007 8
14 oct. 2005 à 16:38

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>

Réponse 6 / 11

jesusonline Messages postés 6814 Date d'inscription dimanche 15 décembre 2002 Statut Membre Dernière intervention 13 octobre 2010 29
15 oct. 2005 à 16:49

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

Réponse 7 / 11

cs_Anthomicro Messages postés 9433 Date d'inscription mardi 9 octobre 2001 Statut Membre Dernière intervention 13 avril 2007 8
15 oct. 2005 à 16:59

aie aie aie

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

Réponse 8 / 11

jesusonline Messages postés 6814 Date d'inscription dimanche 15 décembre 2002 Statut Membre Dernière intervention 13 octobre 2010 29
15 oct. 2005 à 17:16

Ce qui veut dire ?

<HR>
Cyril - MVS - MCP ASP

Réponse 9 / 11

cs_Anthomicro Messages postés 9433 Date d'inscription mardi 9 octobre 2001 Statut Membre Dernière intervention 13 avril 2007 8
15 oct. 2005 à 17:37

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>

Réponse 10 / 11

jesusonline Messages postés 6814 Date d'inscription dimanche 15 décembre 2002 Statut Membre Dernière intervention 13 octobre 2010 29
15 oct. 2005 à 17:42

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

Réponse 11 / 11

cs_Anthomicro Messages postés 9433 Date d'inscription mardi 9 octobre 2001 Statut Membre Dernière intervention 13 avril 2007 8
15 oct. 2005 à 19:24

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>

Discussions similaires

exemple de page d'accueil avec la balise div et css

code source HTML

Interface pour chaque page

CSS MAP et AREA

Rogner une image

Votre réponse

Discussions similaires