begin process at 2012 05 29 00:44:02
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Archive PHP

 > 

Archives

 > 

AU SECOURS !!!

 > 

CSS et onglets


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

CSS et onglets

vendredi 14 octobre 2005 à 00:04:03 | CSS et onglets

FhX

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 :

<div class="form">
 <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
  <fieldset>
   <legend>Login</legend>
   <p>
    <label for="login">Login :</label>
    <input type="text" id="login" name="login" />
   </p>
   <p>
    <label for="passwd">Mot de passe :</label>
    <input type="password" id="passwd" name="passwd" />
   </p>
   <p>
   <input type="submit" name="check" value="Se connecter"/>
   </p>
  </fieldset>
 </form>
</div>

Et pour le CSS :
body {
margin: 0; /* pour éviter les marges */
text-align: center; /* pour corriger le bug de centrage IE */
}
.form {
margin-left: auto;
margin-right: auto;
width:450px;
text-align: left; /* Pour IE */
}
.form fieldset {
border:1px solid #6683C3;
background-color: #E8EEFA;
}
.form legend {
margin-bottom:21px;
border-top:1px solid #6683C3;
border-left:1px solid #6683C3;
border-right:1px solid #6683C3;
background-color:#E8EEFA;
cursor:default;
font-style:italic;
}
.form p {
display:block;
clear:both;
}
.form label {
float:left;
font-weight:bold;
}
.form label:hover {
cursor:pointer;
color:red;
}
.form p input {
float:right;
border: 1px solid black;
}

Je voulais savoir, parmis les pros dans le domaine, si quelqu'un a une URL qui pourrait ENFIN me permettre de comprendre comment ca marche, ou alors en m'expliquant vite-fait comment je peux arriver aux résultats voulus. Parce que j'ai beau essayé avec un tas de <div> à la con... et j'y arrive pas.

Mici :)
Ps: Je trouve PHP plus facile à manier que CSS... c'est à ne plus rien comprendre !

vendredi 14 octobre 2005 à 00:19:48 | Re : CSS et onglets

FhX

Laissez tomber... jviens de capter comment marche le padding ...
vendredi 14 octobre 2005 à 00:20:29 | Re : CSS et onglets

FhX

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

Mais merde de merde quoi !

vendredi 14 octobre 2005 à 00:31:55 | Re : CSS et onglets

FhX

Voici donc ou j'en suis arrivé :
<div id="onglet">
 <span id="actif"><a href="./login.php">Login</a></span>
 <span><a href="./inscription.php">Inscription</a></span>
 <span><a href="./perte.php">Perte du mot de passe</a></span>
 <span><a href="./chartre.php">Chartre du site</a></span>
 <span><a href="./aide.php">Aide</a></span>
</div>


<div id="form">
 <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
  <p>
   <span>Login :</span>
   <input type="text" name="login" />
  </p>
  <p>
   <span>Mot de passe :</span>
   <input type="password" name="passwd" />
  </p>
 </form>
</div>

CSS :
a {
text-decoration:none;
color:black;
}
#onglet {
margin-left:10px;
}
#onglet span {
background-color:white;
padding-bottom:1px;
padding-left:5px;
padding-right:5px;
border: 1px solid #6683C3;
margin-right:5px;
}
#onglet span#actif {
background-color:#E8EEFA;
border-bottom: 1px solid #E8EEFA;
}

#form {
background-color:#E8EEFA;
width:500px;
border: 1px solid #6683C3;
}

Mais c'est bof sous IE... c'est quoi l'astuce à la con ?

vendredi 14 octobre 2005 à 00:45:50 | Re : CSS et onglets

FhX

Réponse acceptée !
Arf j'ai trouvé... 40 minutes quand même, et encore, j'y ai du passer quelques heures avant d'avoir poster !
vendredi 14 octobre 2005 à 16:38:36 | Re : CSS et onglets

Anthomicro

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 :-)


    samedi 15 octobre 2005 à 16:49:58 | Re : CSS et onglets

    jesusonline

    Membre Club Administrateur CodeS-SourceS
    Sinon tu peux reprendre les onglets qu'il y a en page d'accueil de ce site ;)

    <div id="onglets">

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

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

    </div>

    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 += '> <a href="javascript:void(0);" onclick="OngletChange(this,' + i + ',0)">';
    Onglet += Onglets[i] ;
    Onglet += '</a></li>';
    elmtOnglet.innerHTML += Onglet;
    }
    elmtOnglet.innerHTML = '<ul class="Onglet">' + elmtOnglet.innerHTML+ '</ul>' + 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.


    Cyril - MVS - MCP ASP
    samedi 15 octobre 2005 à 16:59:06 | Re : CSS et onglets

    Anthomicro

    aie aie aie


      samedi 15 octobre 2005 à 17:16:10 | Re : CSS et onglets

      jesusonline

      Membre Club Administrateur CodeS-SourceS
      Ce qui veut dire ?


      Cyril - MVS - MCP ASP
      samedi 15 octobre 2005 à 17:37:11 | Re : CSS et onglets

      Anthomicro

      bah du javascript pour faire un menu... tu vois ce que je veux dire quoi ?



        1 2

        Cette discussion est classée dans : form, css, border, solid, 1px


        Répondre à ce message

        Sujets en rapport avec ce message

        Problème avec mon formulaire [ par beaute97120 ] Bonjour, Je rencontre 1 pb avec mon formulaire quand je le visualise via easy php j'ai le message d'erreur suivant : Parse error: parse error in C:\Us Faire et Utiliser une fonction [ par christobal ] Bonjour, j'ai écrit une fonction.j'espere ne pas avoir fait de boulette.mais le pb et que je n'arrive pas a l'utiliser.que je l'appel, ma page reste b quickform [ par decode59 ] Bonjour!!en fait pour commencer jai creer une base de donnée qui contient  un id, nom , prenom, dateensuite en quickform jai fait un petit tableau qui Div qui se ferme et rouvre sans JS et sans CSS [ par benahmedsoufiane ] Bonjour,je désire savoir comment faire un tableau qui contient des DIV (ou des SPAN) et lors du clique sur le titre le contenu se déroule (ou s'affich css [ par yosrounaw ] bonjour je cherche le code css qui empeche la superposition des plusieures élements flottants, et quels sont les emlements flottants?merci de me répon Recherche de livres : XHTML et CSS, puis PHP et MySQL [ par impolitis ] Bonjour,Débutant total dans ces domaines, je souhaite apprendre en autodidacte (bonjour les questions... ça va pleuvoir ! ).Je souhaiterais acheter (o PHP : une requete de selection(besoin d'aide) [ par info3licen ] Bonjour tout le monde;j'ai fait un formulaire et je travaille avec php le formulaire c'est pour un enseignant il fait entrer son matricule et son suje Un pb avec le "Call-time pass-by-reference" du générateur de form avec MySQL [ par dryat120 ] Bonjour,J'ai un problème avec le passage de références en php, j'obtiens une erreur de la famille de "Call-time pass-by-reference" avec cette source.V probleme concaténation [ par devmouad ] j'ai  un problème quand j'exécute le code en rouge j'ai ni le résultat ni un message d'erreur:session_start();if (session_is_registered("authentificat Code avec extension CGI à transformer en code PHP est ce possible ? [ par bonheur123 ] J'ai un code en .cgi et je souhaiterais le transformer en code PHP est ce possible ?D'abord, je voudrais pouvoir le lire ligne par ligne et le transfo


        Nos sponsors


        Sondage...

        CalendriCode

        Mai 2012
        LMMJVSD
         123456
        78910111213
        14151617181920
        21222324252627
        28293031   

        Consulter la suite du CalendriCode

        A découvrir



         
        Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
        CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
        CodeS-SourceS.com© est une marque déposée tous droits réservés

        Google Coop CodeS-SourceS Google Coop CodeS-SourceS
        Temps d'éxécution de la page : 0,452 sec (4)

        Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales