Problème alignement
- Accueil
- Forum
- Programmation
- HTML / CSS
- Problème alignement
Balatharas Le 22 juin 2016 à 21:42 (Édité le 25 janvier 2019 à 17:51)
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 Le 23 juin 2016 à 20:00 (Édité le 1 janvier 1970 à 01:00)
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 Le 23 juin 2016 à 20:33 (Édité le 23 juin 2016 à 20:36)
Profil introuvable Le 23 juin 2016 à 20:35 (Édité le 1 janvier 1970 à 01:00)
'TheHoldNoob', "align:center" existe en CSS 😉 Je l'utilise d'ailleurs pour mon site web 😉
Balatharas Le 23 juin 2016 à 20:37 (Édité le 1 janvier 1970 à 01:00)
Profil introuvable Le 23 juin 2016 à 20:44 (Édité le 23 juin 2016 à 20:53)
'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 Le 23 juin 2016 à 21:01 (Édité le 1 janvier 1970 à 01:00)
J'étais persuadé aussi que ça existait..
TheOldNoob Le 23 juin 2016 à 21:28 (Édité le 1 janvier 1970 à 01:00)
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 Le 23 juin 2016 à 21:55 (Édité le 1 janvier 1970 à 01:00)
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 Le 23 juin 2016 à 22:08 (Édité le 1 janvier 1970 à 01:00)
Ma solution juste au dessus ne fonctionne pas? Chez moi sur chrome et FF ça fonctionne bien
TheOldNoob Le 23 juin 2016 à 22:11 (Édité le 1 janvier 1970 à 01:00)
#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 Le 23 juin 2016 à 22:21 (Édité le 1 janvier 1970 à 01:00)
C'est pas grave je vais laisser comme ça merci de votre aide 😄