IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

z-index utile dans mon cas ?


Sujet :

HTML

  1. #1
    Membre averti
    Inscrit en
    Décembre 2011
    Messages
    26
    Détails du profil
    Informations forums :
    Inscription : Décembre 2011
    Messages : 26
    Par défaut z-index utile dans mon cas ?
    Bonjour à tous,
    J'ai fais un petit contact form et j'aimerais qu'il passe par dessus mon image bg_avtfooter de manière à donner un fond sur toute la partie avant footer, de manière à y disposer des éléments en tout genre (conbtact form, recent posts...).
    Je me bat depuis un moment avec le classique z-index mais je n'arrive pas à comprendre le fonctionnement et mes tentatives sont vaines.
    Y a t-il une autre solution ?
    Je remercie d'avance celui ou celle qui me fera avancer
    Voici mon code html
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
     
            ..........................................................je vous passe le doctype et tout.......
     
        <!--MON SLIDER-->
     
        </head>
     
    <body>
     
      <!--header-->
        <header id="entete">
                <div class="bloccentre"> <!--bloc centré-->
                <nav id="menu_gauche">
                        <ul>
                            <li><a href="#" title="accueil">ACCUEIL</a></li>
                            <li><a href="#" title="présentation">PRESENTATION</a></li>
                            <li><a href="#" title="nos packs">NOS  PACKS</a></li>
                        </ul>
                </nav> 
     
                <a id="logo" href="index.php" title="accueil"><img src="images/logo.png" alt="logo"/></a>
     
                <nav  id="menu_droit">
                        <ul>
                            <li><a href="#" title="dossiers">DOSSIERS</a></li>
                            <li><a href="#" title="contact">CONTACT</a></li>
                            <li><a href="#" title="espace client">LOGIN  CLIENT</a></li>
                        </ul>    
                </nav>
                </div> <!--fin bloc centré-->
     
        </header> <!--fin header-->
     
     
        <div id="slider">
        <img src="images/slider.jpg" alt="gggg"/>
        </div>
     
    <div class="bloccentre"> <!--bloc centré-->
    <div class="services-box">
            <section class="one">
                <h1>logotype</h1>
                <p>On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même.</p>
                <a href="#">more <span>&raquo;</span></a>
            </section>
            <section class="two">
                <h1>supports papier</h1>
                <p>On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même..</p>
                <a href="#">more <span>&raquo;</span></a>
            </section>
            <section class="three">
                <h1>developpement web</h1>
                <p>On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même.</p>
                <a href="#">more <span>&raquo;</span></a>
            </section>
     
    </div>
    </div><!--fin bloc centré-->
     
    <div id="avantfooter"><!--div avt footer-->
        <img src="images/bg_avtfooter.jpg" alt="gggg"/>
     
        <div class="bloccentre"><!--bloc centré-->
            <div class="divform">
            <!--MON CONTACT FORM-->
            <form method="post" action="traitement_formulaire.php">
     
                <label>Name</label>
                <input name="name" placeholder="...">
     
                <label>Email</label>
                <input name="email" type="email" placeholder="...">
     
                <label>Message</label>
                <textarea name="message" placeholder="..."></textarea>
     
                <label>*Combien font 2+2 ?</label>
                <input name="human" placeholder="...">
     
                <input class="submit" id="submit" name="submit" type="submit" value="Submit">
     
            </form>
            </div>
        </div><!--fin bloc centré-->
     
    </div><!--fin div avt footer-->
     
     
    <div id="footer">
    <p>On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même.</p>
    </div>
     
    </body>
    </html>
    puis mon css
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    /*----------MON CONTACT FORM-------------------------------------*/
    #avantfooter img {
    width:100%;
    margin-left: auto;
    margin-right: auto;
    float:left;
    z-index:1;
    }
     
    label {
        display:block;
        margin-top:10px;
        text-align:left;
        font-size:10px;
    }
     
    /* Centre the form within the page */
    form {
        margin:0 0 35px 0;
        width:200px;
    float:left;
        bottom:465px;
        z-index:2;
    }
     
    /* Style the text boxes */
    input, textarea {
        width:200px;
        height:3px;
        background:#efefef;
        border:1px solid #dedede;
        padding:10px;
        font-size:10px;
     
        color:#3a3a3a;
    }
     
    textarea {
        height:80px;
        font-size:10px;
     
    }
    .submit{
    margin-top:10px;
    padding-bottom:20px;
    width:130px;}
     
     
    /*----------PIED DE PAGE-------------------------------------*/
    #footer {
    padding-left:120px;
    padding-top:20px;
    height:20px;
    float:left;
    width:100%;
    background-color:black;
    color:white;
    text-align:left;
    }
    #footer p{
        font-size: 12px;
        height:40px;
    }

  2. #2
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 334
    Par défaut
    Salut,

    Un petit peu de lecture sur le fonctionnement de z-index.

    En résumé, z-index ne fonctionne que pour les éléments positionnés.
    Je ne suis pas schizophrène, nous sommes unanime !!!

    ► Pensez à la balise code et au CODE HTML GENERE !!!!
    ► Au si c'est le cas et au à ceux qui vous ont aidé.
    Vous souhaitez participer aux rubriques CSS et (X)HTML ? Contactez-nous !

    Créer des colonnes de même hauteur en CSS
    Glossaire CSS
    Les bordures en CSS3
    Les transitions en CSS3

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [ZF 1.9] Zend utile dans mon cas ?
    Par Haxor668 dans le forum Zend Framework
    Réponses: 6
    Dernier message: 19/09/2009, 09h19
  2. CMS utile dans mon cas ?
    Par lbrun79 dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 5
    Dernier message: 21/10/2007, 22h02
  3. [RegEx] Utiles dans mon cas?
    Par lutecefalco dans le forum ASP.NET
    Réponses: 12
    Dernier message: 03/08/2007, 15h55
  4. [Débutant][JList] Comment ça marche dans mon cas ?
    Par Invité dans le forum Composants
    Réponses: 31
    Dernier message: 28/06/2004, 10h45
  5. Quel type de BDD dans mon cas
    Par zoubidaman dans le forum Décisions SGBD
    Réponses: 4
    Dernier message: 10/06/2004, 18h00

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo