Problème alignement

Suivre ce topic
Ce topic est suivi par : Personne...
Ce topic a été résolu
Balatharas

Balatharas Le 22 juin 2016 à 21:42 (Édité le 25 janvier 2019 à 17:51)

Hello !
J'ai un petit problème d'alignement:
en gros j'ai créé deux colonnes en css:
#colonne1 {
   width: 300px;
   float: right;
}
 
#colonne2 {
   float: right;
   align: center;
}
#conteneur {
   align: center;
   margin-top: 20px; 
   padding-bottom: 25px;    
   padding-top: 5px;
   height: 550px;
}
<div id="conteneur">
               <?php
               if(isset($_SESSION['id']) AND $userinfo['id'] == $_SESSION['id']) {
               ?>
               <div id="colonne1">                  
                  <form method="POST" class="form_style" action="" name="deleteaccount">
                     <h2>Supprimer mon compte</h2>
                     <label for="mdpconfirm"><font size="4">Supprimer: </font></label><br /><br />
                     <input type="password" class="inputstyle password" name="mdpconfirm" id="mdpconfirm" placeholder="Mot de passe" />
                     <input type="submit" value="Confirmer" name="deleteaccount" />
                  </form>               
               </div>
               <?php
               }
               ?>
               <div id="colonne2">
                  <h2>Profil de <?php echo $userinfo['pseudo']; ?></h2>
                  <br /><br />
                  <?php
                  if(!empty($userinfo['avatar']))
                  {
                  ?>
                  <img src="Membres/Avatar/<?php echo $userinfo['avatar'] ?>" width="150" title="<?php if(isset($_SESSION['pseudo'])) { echo $_SESSION['pseudo']; } ?>" />
                  <?php
                  }
                  ?>
                  <br /><br />
                  <?php
                  if(isset($_SESSION['id']) AND $_SESSION['id'] != $getid)
                  {
                     $isfollowingornot = $bdd->prepare('SELECT * FROM follow WHERE id_follower = ? AND id_following = ?');
                     $isfollowingornot->execute(array($_SESSION['id'], $getid));
                     $isfollowingornot = $isfollowingornot->rowCount();
                     if($isfollowingornot == 1) {
                  ?>
                  Vous suivez cette personne !<br /><a href="follow.php?followedid=<?= $getid; ?>"><font size="4"><img src="files/img/unfollow.png" /> Ne plus suivre</font></a>
                  <?php } else {  ?>
                  <a href="follow.php?followedid=<?= $getid; ?>"><img src="files/img/follow.png" /> <font size="4">Suivre</font></a>
                  <?php
                     }
                  }
                  ?>
                  <table>
                     <tr>
                        <td>
                           <p><font size="4" title="<?php if(isset($_SESSION['pseudo'])) { echo $_SESSION['pseudo']; } ?>">Pseudo: <?php echo $userinfo['pseudo']; ?></font></p>
                        </td>
                     </tr>
                     <tr>
                        <td>                     
                           <p><font size="4">Mail: <?= $userinfo['mail']; ?></font></p>
                        </td>
                     </tr>
                     <tr>
                        <td>
                           <?php
                              $parrainages = $bdd->prepare('SELECT id FROM membres WHERE id_parrain = ?');
                              $parrainages->execute(array($getid));
                              $parrainages = $parrainages->rowCount();
                           ?>                     
                           <p><font size="4">Parrainages: <?= $parrainages; ?></font></p>
                        </td>
                     </tr>               
                  </table>
                  <br /><br />
                  <?php
                  if(isset($_SESSION['id']) AND $userinfo['id'] == $_SESSION['id']) {
                  ?>
                  <table>
                     <tr>
                        <td>
                           <img src="files/img/link.png" height="15px" weight="15px" /> <u>Parrainer un ami: </u><br /><a target="blank" href="inscription.php?p=<?= $userinfo['uniqid']; ?>">   inscription.php?p=<?= $userinfo['uniqid']; ?></a><br />
                           <br />
                        </td>
                     </tr>
                     <tr>
                        <td>
                           <a href="edition_profil.php"><img src="files/img/config.png" /> Éditer mon profil</a><br />
                        </td>
                     </tr>
                     <tr>
                        <td>
                           <a href="envoi.php"><img src="files/img/mailred.png" /> Envoyer un message privé</a><br />
                        </td>
                     </tr>
                     <tr>
                        <td>
                           <a href="reception.php"><img src="files/img/reception.png" /> Boîte de réception</a><br />
                        </td>
                     </tr>
                     <tr>
                        <td>
                           <a style="font-size: 18;" href="deconnexion.php"><img src="files/img/power.png" /> Déconnexion</a>
                        </td>
                     </tr>
                  </table>
                  <?php
                  }   
                  ?>
                  <?php
                  if(isset($erreur))
                  {
                     echo '<h4><font color="#C22B2B">'.$erreur."</font><h4>";
                  }
                  if(isset($error))
                  {
                     echo '<br /><font color="#C22B2B">'.$error."</font>";
                  }
                  ?>
               </div>
            </div>
Et donc mon code est fait de sorte que si l'utilisateur est sur le profil d'une autre personne alors le petit formulaire pour supprimer son compte est masqué. Mais quand j'ai tester, eh bien le tableau contenant l'avatar et tout le reste, est décalé vers la droite au lieu de rester au centre :(
Merci d'avance pour votre aide 😄
TheOldNoob

TheOldNoob Le 23 juin 2016 à 20:00

Salut Beignet,

Bon, déjà "align:center" me semble pas que ça existe en css 😉 j'aurais dit:  text-align:center; mais ça n'a aucune utilité dans ton cas

Pour ton css, tu peu essayé ça :

       #colonne1 {
            position: fixed;
            right: 0;
            width: 300px;

        }

        #colonne2 {
            position: fixed;
            top: 150px;
            width: 300px;
            right: 0;
Pour ma part, j'ai abandonné complétement l'utilisation des float, car ça sort du flux et c'est trop vite le bordel
Balatharas

Balatharas Le 23 juin 2016 à 20:33 (Édité le 23 juin 2016 à 20:36)

Salut @TheHoldNoob merci pour ta réponse mais en fait avec ca j'obtiens la même chose mais a gauche avec en plus un débordement sur d'autres bannières et sur le profil du connecté, le tableau contenant les informations du profil est superposé au formulaire de suppression de compte...
Profil introuvable

Profil introuvable Le 23 juin 2016 à 20:35

Re:

'TheHoldNoob', "align:center" existe en CSS 😉 Je l'utilise d'ailleurs pour mon site web 😉
Balatharas

Balatharas Le 23 juin 2016 à 20:37

@Jerem971 Oui je me disais aussi ^^ je n'ai rien remarquer parce que habituellement @TheHoldNoob m'envoie des réponses correct 😋
Profil introuvable

Profil introuvable Le 23 juin 2016 à 20:44 (Édité le 23 juin 2016 à 20:53)

Re:

'Beignet' et 'TheHoldNoob', excusez-moi mais "align:center" n'existe pas en CSS, j'ai interrogé Notepad++ il me l'a signalé.

Je vous explique, j'ai copier le code CSS et je l'ai collé dans le logiciel Notepad++, j'ai cliquer sur "Langage" > "C" > "CSS", il n'affiche aucune couleur sur "align:center" mais quand j'ai taper "text-align:center" il affiche en couleur sur celui-ci ce qui confirme que "align:center" n'existe pas.

Désolé mais j'étais persuader que c'était utiliser quelque part... A moins que ça soit en HTML...
Balatharas

Balatharas Le 23 juin 2016 à 21:01

Oui @Jerem971 align:center c'est en HTML mais align="center"
J'étais persuadé aussi que ça existait..
TheOldNoob

TheOldNoob Le 23 juin 2016 à 21:28

Hey, aucun soucis, je peu me tromper aussi, je code que depuis très peu de temps et je suis sur la fin de ma formation. J'ai encore beaucoup a apprendre !
Cela dit, tu peu faire un truc tout bête. Tu englobe tes deux div dans une autre div du type

<body>
   <div id="container">
      <div id="col">
         <div id="colonne1"> 
            contenu de supprimer le compte
         </div> // fin div class colonne1
         <div id="colonne2">
            contenu de l'utilisateur
         </div> // fin div id colonne2
      </div> // fin div id col
   </div> // fin div id container
</body>

Et dans ton css :
 
      #colonne1 {
        }

        #colonne2 {
        }
        #conteneur {
            margin: auto;
            margin-top: 20px; 
            padding-bottom: 25px;    
            padding-top: 5px;
            height: 550px;
        }
        #col{
            right: 0;
            position: absolute;
            width: 300px;
        }
Du coup, tes deux div vont automatiquement se superposé au vue de leur contenu. Et c'est la div qu'il y aura autour qui va avoir les attribu que tu recherche
Balatharas

Balatharas Le 23 juin 2016 à 21:55

Euh maintenant bah ya juste le titre xD
Mais j'ai trouver une petite alternative:
#colonne1 {
   float: right;
}
 
#colonne2 {
   float: left;
}
#conteneur {
   margin: auto;
   margin-top: 20px; 
   padding-bottom: 25px;    
   padding-top: 5px;
   height: 550px;
}
<div id="conteneur">
               <div id="colonne1">
               </div>
               <div id="colonne2">
               </div>
</div>
Avec mon contenu dans les div bien sur 😄
Mais maintenant le contenu visible a tous est a gauche et le formulaire pour supprimer tout a droite. En soi c'est pas dérangeant mais auriez vous une solution si jamais ? ^^
TheOldNoob

TheOldNoob Le 23 juin 2016 à 22:08

Bah, vu que tu en cole une a droite et l'autre a gauche ça parait evident qu'elles a gauche et a droite ^^

Ma solution juste au dessus ne fonctionne pas? Chez moi sur chrome et FF ça fonctionne bien
TheOldNoob

TheOldNoob Le 23 juin 2016 à 22:11

au pire, essaie ça :

#colonne1 {
            position: fixed;
            right: 0;
        }

        #colonne2 {
            position: absolute;
            right: 0;
        }
        #conteneur {
            margin: auto;
            margin-top: 20px; 
            padding-bottom: 25px;    
            padding-top: 5px;
            height: 550px;
        }
Balatharas

Balatharas Le 23 juin 2016 à 22:21

Bah ca ne marche pas en + le formulaire descend en même temps que la scrollbar et le contenu du profil est en plein sur le formulaire.
C'est pas grave je vais laisser comme ça merci de votre aide 😄
Vous devez être connecté pour poster une réponse. Se connecter ou Créer un compte