Partage
  • Partager sur Facebook
  • Partager sur Twitter

CSS qui s'adapte a l'image background

    22 novembre 2015 à 21:37:19

    Bonjour, alors voila j'ai un site ou il y a 4 images de background pour ma page "login" qui change a chaque connexion via le code suivant (dans le php )

    <!-- class CSS DES IMAGES --> 
    <style type="text/css">
      <!--
    .Image1 {background: url(Images/login1.png) no-repeat center top}
    .Image2 {background: url(Images/login2.png) no-repeat center top}
    .Image3 {background: url(Images/login3.png) no-repeat center top}
    .Image4 {background: url(Images/login4.png) no-repeat center top}
     -->
     
      </style>
    <!-- class CSS DES IMAGES --> 
      </head>
      <body class="Image<?php echo rand(1,4); ?>"> 
    <!-- echo rand avec le nombre d images (1,4 dans cet exemple car il y a 4 images ) -->  
      </body>
    

    ça fonctionne très très bien mais  j'aurais voulu savoir si il existé un moyen d'adapter le code css selon l'image affiché pour déplacer  les cases "ID" et "PWD" dans le même genre que le "@media"

    ex

     

    je souhaiterai que sur la 2éme image les cases soit plus a gauche

    cela est-il possible?

    css? JS? HTML? PHP?

    merci

    • Partager sur Facebook
    • Partager sur Twitter
      Staff 22 novembre 2015 à 21:50:34

      C'est possible avec CSS, puisque tu donnes une classe particulière à body. Tu peux utiliser la cascade :

      form {
         /* une définition */
      }
      
      .Image2 form {
         /* une définition qui surcharge la précédente */
      }
      
      • Partager sur Facebook
      • Partager sur Twitter
      Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
        23 novembre 2015 à 13:06:13

        salut Lamecarlate, merci pour votre réponse mais je ne comprend pas le css, pourquoi "form" ??
        • Partager sur Facebook
        • Partager sur Twitter
          Staff 23 novembre 2015 à 13:15:31

          Parce que tes inputs sont bien dans un formulaire, non ? Enfin, c'était un exemple, puisqu'on n'a pas ton html complet… L'idée, c'est de cibler des éléments dont le parent est ".Image1, 2 ou 3", etc.

          • Partager sur Facebook
          • Partager sur Twitter
          Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
            23 novembre 2015 à 21:19:42

            ok voila mon code php au complet 

            <?php 
            // Define your username and password 
            $username = "***"; 
            $password = "***"; 
            if ($_POST['txtUsername'] != $username || $_POST['txtPassword'] != $password) { 
            if (isset($_POST['txtUsername']) && $_POST['txtPassword'] != $password ){
            	header ('location:403.html');}
            ?> 
            <body>
            <link rel="shortcut icon" href="http://***/images/default.png" />
            <link rel="stylesheet" href="CSS/Site_Clippings2.css">
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <p id="texte">
            <font color="black">Accès à la</font> <font color="green">MS</font> /<font color="green"> MSirc</font> / <font color="black">Modo</font> / <font color="red">Smodo</font></p>
            <p>
            <form ; name="form"; method="post"; action="<?php echo $_SERVER['PHP_SELF']; ?>"> 
                <p class="text"><label for="txtUsername">Utilisateur:</label> 
                <br><br>
                <input class="case" type="text" name="txtUsername" /></p> 
                <p class="text"><label for="txtPassword">Mot de passe:</label> 
                <br><br>
                <input class="case" type="password" name="txtPassword" /></p> 
                <input class="button" type="submit" name="Submit" value="Entrée" /> 
            </form></p></body>
            
            <!-- class CSS DES IMAGES --> 
            <style type="text/css">
              <!--
            .Image1 {background: url(Images/login1.png) no-repeat center top}
            .Image2 {background: url(Images/login2.png) no-repeat center top}
            .Image3 {background: url(Images/login3.png) no-repeat center top}
            .Image4 {background: url(Images/login4.png) no-repeat center top}
             -->
             
              </style>
            <!-- class CSS DES IMAGES --> 
              </head>
              <body class="Image<?php echo rand(1,4); ?>"> 
            <!-- echo rand avec le nombre d images (1,4 dans cet exemple car il y a 4 images ) -->  
              </body>
            
            <?php 
            } 
            else { 
            ?> 
            

            mais je ne comprend pas trop le css je début dans ce monde :(

            je souhaite que le "form" soit a droite ou agauche selon l'image background Image1, Image2 .....



            • Partager sur Facebook
            • Partager sur Twitter
              Staff 23 novembre 2015 à 23:02:37

              Il faut absolument revoir l'architecture de ton code.

              Ça doit ressembler à ça :

              <?php
              // Define your username and password
              $username = "***";
              $password = "***";
              // le reste de ton code PHP
              ?> 
              <!doctype html>
              <html>
              <head>
                <!-- ici ton CSS, ton title, ta favicon etc -->
              </head>
              <body class="Image<?php echo rand(1,4); ?>"> 
                <-- ici le contenu de ta page : textes, formulaires, etc -->
              </body>
              </html>
              

              Et il faut que tu enlèves aussi ces vilaines balises <font>, dépréciées depuis plus de 10 ans.

              Également : <form ; name="form"; method="post"; action="<?php echo $_SERVER['PHP_SELF']; ?>"> ça s'écrit sans les ";" :)

              • Partager sur Facebook
              • Partager sur Twitter
              Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!

              CSS qui s'adapte a l'image background

              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
              × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
              • Editeur
              • Markdown