Arrangement mon site

Zakarya93 -  
Bonjour,

Mon site est complétement deformé, un exemple : http://www.noelshack.com/2015-29-1436974898-capture.jpg

voici un extrait de mon css que j'ai modifié : 
*
{
padding:0;
margin:0;
}
body
{
 background-color: #000;
 font-family: arial;
 margin: 0;
 padding: 0;
 background: url(blue.jpg);
  
}
#content
{
 width: 80%;
 margin: 100px auto;
 background: #FFF;
 min-height: 500px;
}
#content h1,h3
{
  text-decoration:underline;
  padding-bottom:20px;
}
#content form label
{
  display:block;
  float:left;
  width:200px;
  position:absolute;
  left:100px;
}
#content form input,textarea
{
border:1px solid #000;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
width:200px;
margin:5px;
}
#content form input[type=submit]
{
  width:100px;
  background-color:#000;
  color:#FFF;
  cursor:pointer;
}
#content .error
{
  color:red;
  border-radius:5px;
 -webkit-border-radius:5px;
 -moz-border-radius:5px;
  margin:2px auto;
  width:300px;
  background-color:#CCC;
  text-align:center;
}
  #content .success
{
  color:green;
  border-radius:5px;
 -webkit-border-radius:5px;
 -moz-border-radius:5px;
  margin:2px auto;
  width:300px;
  background-color:#CCC;
  text-align:center;
 
}
#content .header
{
text-align:right;
margin-right:5px;
}
.menu
{
height:35px;
line-height: 1.5em;
background-color: #cdd3fd;
border: 1px solid #000;
width: 80%;
margin: 0 auto;
}
.menu ul li
{
   float:left;
   list-style:none;
   line-height:36px;
   border-left:1px solid #000;
}
.menu ul li a
{
   color:#000;
   text-decoration:none;
   padding:25px;


}
.menu li.nbr
{
   color:green;
   padding-left:20px;
}


Merci d'avance :)

6 réponses

Résumé de la discussion

Un décalage d'affichage et un fond bleu au-dessus de la barre de menu constatés après modification du CSS nécessitent de réutiliser les paramètres antérieurs du body et de la barre de menu. Des améliorations visent à coller la barre de navigation au sommet et à y intégrer les éléments 'bienvenue' et 'se déconnecter' au sein de la même barre. Des échanges indiquent des solutions comme ajuster le float, appliquer un display approprié et envisager l'usage d'UL/LI ou SPAN pour aligner le lien de déconnexion sur le côté droit. Pour progresser, il est conseillé de partager le code HTML du menu et le CSS exact afin d’identifier les zones de conflit entre le header et le contenu, puis tester ajustements d’alignement et de marges.

Bobot (l’IA à votre service)
  1. jordane45 Modérateur
    Bonjour,

    Si il s'est "déformé" alors que tu n'as pas modifié ton CSS... c'est que le souci vient d'ailleurs !!

    Cette déformation est apparue suite à quelle(s) modification(s) ???

    As tu vérifié que toutes tes div et autres balises HTML étaient correctement placées et fermées ??

    As tu regardé le code source de ta page (le code généré ) ?
    0
    1. Zakarya93 Auteur
      Si justement j'ai modifié mon CSS ^^
      je vous copie/colle l'ancien css ?
      0
    2. jordane45 Modérateur
      Oui
      0
  2. Zakarya93 Auteur 
    *
{
padding:0;
margin:0;
}
body
{
  background-color:#000;
  font-family:arial;
  background: url(mkprojet.gif);
  
}
#content
{
width:960px;
background-color:#FFF;
margin:50px auto;
text-align:center;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
position:relative;
}
#content h1,h3
{
  text-decoration:underline;
  padding-bottom:20px;
}
#content form label
{
  display:block;
  float:left;
  width:200px;
  position:absolute;
  left:100px;
}
#content form input,textarea
{
border:1px solid #000;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
width:200px;
margin:5px;
}
#content form input[type=submit]
{
  width:100px;
  background-color:#000;
  color:#FFF;
  cursor:pointer;
}
#content .error
{
  color:red;
  border-radius:5px;
 -webkit-border-radius:5px;
 -moz-border-radius:5px;
  margin:2px auto;
  width:300px;
  background-color:#CCC;
  text-align:center;
}
  #content .success
{
  color:green;
  border-radius:5px;
 -webkit-border-radius:5px;
 -moz-border-radius:5px;
  margin:2px auto;
  width:300px;
  background-color:#CCC;
  text-align:center;
 
}
#content .header
{
text-align:right;
margin-right:5px;
}
#content  .menu
{
height:35px;
line-height:1.5em;
background-color:#cdd3fd;
border:1px solid #000;
}
#content .menu ul li
{
   float:left;
   list-style:none;
   line-height:36px;
   border-left:1px solid #000;
}
#content .menu ul li a
{
   color:#000;
   text-decoration:none;
   padding:25px;


}
#content .menu li.nbr
{
   color:green;
   padding-left:20px;
}

#content .info {
    text-align:left;
    padding:20px;
}


    (ceci est le début du css, ce qui nous intéresse)
    0
    1. jordane45 Modérateur
      Et si tu mets ce css à la place de l'autre ... ton site est de nouveau correct ??

      Il ne te reste qu'à comparer les deux fichiers pour trouver les différences......

      (et à nous les montrer dans le cas où tu ne comprendrais pas (malgré une recherche approfondie sur le net....) la signification des lignes de codes qui pourraient te poser problème).
      0
    2. Zakarya93 Auteur
      @jordane45presque : http://www.noelshack.com/2015-29-1437219697-capture.jpg
      0
    3. Zakarya93 Auteur
      @jordane45comment y remedier ?
      0
    4. jordane45 Modérateur
      @Zakarya93Commence par répondre à mes précédentes questions.

      As tu vérifié que toutes tes div et autres balises HTML étaient correctement placées et fermées ??

      As tu regardé le code source de ta page (le code généré ) ?
      0
    5. Zakarya93 Auteur
      @jordane451/ Oui
      2/ ah oui pardon
      avant : 
      <!DOCTYPE html>
<html>
    <head>
      <link rel='stylesheet' href='css/style.css'>
    </head>
    <meta charset="UTF-8" >
    <body>
       ?<div class='menu'>
    <ul>
     <li><a href="index.php?page=membre">Accueil</a></li>
     <li><a href="index.php?page=update">Changer vos informations</a></li>
     <li><a href="index.php?page=liste_membre">les membres</a></li>
     <li><a href="index.php?page=amis">Vos amis</a></li>
     <li>
        <a href="index.php?page=invitations">Invitations</a>
               <p class='ibi_invitations'>1</p>        </li>
        <li>
                <a href="index.php?page=conversations">Messages</a>
                        </li>
 
<li class="nbr">2 membres</li>
   </ul>
</div>          <div id='content'>
          ??<div class='header'>
Bienvenue xzak47<p><a href="index.php?page=logout">Se déconnecter</a></p>
</div>?<div class='menu'>
    <ul>
     <li><a href="index.php?page=membre">Accueil</a></li>
     <li><a href="index.php?page=update">Changer vos informations</a></li>
     <li><a href="index.php?page=liste_membre">les membres</a></li>
     <li><a href="index.php?page=amis">Vos amis</a></li>
     <li>
        <a href="index.php?page=invitations">Invitations</a>
               <p class='ibi_invitations'>1</p>        </li>
        <li>
                <a href="index.php?page=conversations">Messages</a>
                        </li>
 
<li class="nbr">2 membres</li>
   </ul>
</div><h3>Liste des membres</h3>
<p><a href='index.php?page=profile&pseudo=jean'>jean</a></p>
 <a href='index.php?page=profile&pseudo=jean'>
             <img src='avatar/logo.jpg' height='100' width='100' alt='avatar'>
           </a>    </div>
    </body>


      maintenant (page du sujet) : 
      <!DOCTYPE html>
<html>
    <head>
      <link rel='stylesheet' href='css/style.css'>
    </head>
    <meta charset="UTF-8" >
    <body>
       ?<div class='menu'>
    <ul>
     <li><a href="index.php?page=membre">Accueil</a></li>
     <li><a href="index.php?page=update">Changer vos informations</a></li>
     <li><a href="index.php?page=liste_membre">les membres</a></li>
     <li><a href="index.php?page=amis">Vos amis</a></li>
     <li>
        <a href="index.php?page=invitations">Invitations</a>
               <p class='ibi_invitations'>1</p>        </li>
        <li>
                <a href="index.php?page=conversations">Messages</a>
                        </li>
 
<li class="nbr">2 membres</li>
   </ul>
</div>          <div id='content'>
          ?<div class='header'>
Bienvenue xzak47<p><a href="index.php?page=logout">Se déconnecter</a></p>
</div>?<div class='menu'>
    <ul>
     <li><a href="index.php?page=membre">Accueil</a></li>
     <li><a href="index.php?page=update">Changer vos informations</a></li>
     <li><a href="index.php?page=liste_membre">les membres</a></li>
     <li><a href="index.php?page=amis">Vos amis</a></li>
     <li>
        <a href="index.php?page=invitations">Invitations</a>
               <p class='ibi_invitations'>1</p>        </li>
        <li>
                <a href="index.php?page=conversations">Messages</a>
                        </li>
 
<li class="nbr">2 membres</li>
   </ul>
</div><h3>Changer vos informations</h3>
<form method='POST' action="">
 <label for='email'>Votre email : </label>
  <input type='text' name='email' value=' xxx@gmail.com'><br /><br />    
        <label for='apropos'>A propos de vous : </label>
       <textarea rows='6' cols='30' name='apropos'>Etape 27/30</textarea><br /><br />
    <input type='submit' value='Changer' name='submit'>
</form>
    </div>
    </body>


      (Adresse mail supprimée par la modération)
      0
  3. Zakarya93 Auteur
    Problème de décalement reglé, en effet j'ai pris les paramètres de l'ancien css au niveau du ".menu" et du "body". Maintenant j'ai juste 2 petits soucis :

    http://www.noelshack.com/2015-29-1437329369-capture.jpg

    1/ j'aimerai coller la barre de menu du haut à son maximum histoire qu'il n'aie pas de bleu au dessus d'elle

    2/ J'aimerai placer le "bienvenue, se déconnecter" sur la nouvelle barre de menu
    0
    1. Zakarya93 Auteur
      Pour le "se déconnecter" je veux juste que ça soit un lien cliquable (a href), comment je peux faire monter le "bienvenue ...." en haut à droite svp ?

      http://www.noelshack.com/2015-29-1437329369-capture.jpg

      voilà ce sera tout :)
      0
      1. jordane45 Modérateur
        Bonsoir,

        Comme pour le nombre de membres ... il te suffit de le mettre dans le UL correspondant à ton bandeau gris....
        0
      2. Zakarya93 Auteur
        @jordane45oui mais j'ai ceci : http://www.noelshack.com/2015-30-1437388510-capture.jpg

        la barre de menu reste malgré que j'ai cliqué sur se déconnecter :/
        et j'aimerai décaller le lien tout à droite de ma barre, voici ma ligne rajoutée : 
        <a href="index.php?page=logout">Se déconnecter</a>
        0
      3. jordane45 Modérateur
        @Zakarya93tu l'as mis dans ton UL ? dans un LI ??
        Merci de nous montrer le code complet de ta <div class='menu'>
        0
      4. jordane45 Modérateur
        Au pire tu dois pouvoir le mettre dans un SPAN et lui appliquer un FLOAT-RIGHT
        0
      5. Zakarya93 Auteur
        @jordane45oui pardon 
        <?php
// Fichier menu.php
include_once('functions/membre.func.php');

 $nombre_membre = nombre_membre();
 $nb_membre = ($nombre_membre > 1) ? $nombre_membre ." membres" : $nombre_membre ." membre";
 
?>
<div class='menu'>
    <ul>
     <li><a href="index.php?page=membre">Accueil</a></li>
     <li><a href="index.php?page=update">Changer vos informations</a></li>
     <li><a href="index.php?page=liste_membre">les membres</a></li>
     <li><a href="index.php?page=amis">Vos amis</a></li>
     <a href="index.php?page=logout">Se déconnecter</a>
     <li>
        <a href="index.php?page=invitations">Invitations</a>
               <?php if(!function_exists('afficher_ibi_invitations')){
                  echo "<br> Erreur : La fonction afficher_ibi_invitations() n'existe pas !";
                }else{
                 $ibi = afficher_ibi_invitations();
                 if($ibi !== '0') {
                 //echo "<div class='ibi_invitations'>
                      echo "<p class='ibi_invitations'>".$ibi."</p>";
                  //   </div>";
                 }  
                 }?>
        </li>
        <li>
                <a href="index.php?page=conversations">Messages</a>
                <?php
                if(!function_exists('afficher_ibi_messages')){
                echo "<br> Erreur : La fonction afficher_ibi_messages() n'existe pas !";
                }else{
                $ibi = afficher_ibi_messages();
                if($ibi != '0') {
                //echo "<div class='ibi_messages'>".$ibi."</div>";
                 echo $ibi;
                 }  
                 }
                  ?>
        </li>
 
<li class="nbr"><?php echo $nb_membre;?></li>
   </ul>
</div>
        0
    3. Zakarya93 Auteur
      j'ai mis le float:right mais mon texte s'est deplacé dans le content blanc et non sur la barre
      0
      1. jordane45 Modérateur
        TU peux nous montrer ton code ??
        0
      2. Zakarya93 Auteur
        @jordane45pardon je suis confus 
        #content .header
{
text-align:right;
margin-right:5px;
float:right
}
        0
      3. jordane45 Modérateur
        @Zakarya93Je n'ai pas demandé ton CSS .... mais TON CODE !
        0
      4. Zakarya93 Auteur
        @jordane45header.php en question : 
        <div class='header'>
<?php
require_once('functions/membre.func.php');
 $result= infos_membre_connecte();

//-------------------------------------------------//
 
 $infos  = $result['result'];
if(count($infos)>0){
   $pseudo = isset($infos['pseudo'])?$infos['pseudo']:'';
   echo "Bienvenue ". $pseudo;
}else{
 echo "<br> Aucun résultat.";
}
if(!isset($_SESSION['pseudo']))
{
header("Location:index.php?page=login");
}
?>
<p><a href="index.php?page=logout">Se déconnecter</a></p>
</div>


        code généré : 
        <!DOCTYPE html>
<html>
    <head>
      <link rel='stylesheet' href='css/style.css'>
    </head>
    <meta charset="UTF-8" >
    <body>
       ?<div class='menu'>
    <ul>
     <li><a href="index.php?page=membre">Accueil</a></li>
     <li><a href="index.php?page=update">Changer vos informations</a></li>
     <li><a href="index.php?page=liste_membre">les membres</a></li>
     <li><a href="index.php?page=amis">Vos amis</a></li>
 
     <li>
        <a href="index.php?page=invitations">Invitations</a>
               <p class='ibi_invitations'>1</p>        </li>
        <li>
                <a href="index.php?page=conversations">Messages</a>
                        </li>

<li class="nbr">2 membres</li>
   </ul>
</div>          <div id='content'>
          ??<div class='header'>
Bienvenue xzak47<p><a href="index.php?page=logout">Se déconnecter</a></p>
</div><div class="info">
        <div class="info">
 <p><a href="index.php?page=update_avatar">Changer votre photo de profil</a></p>
 <a href="index.php?page=update_avatar"><img src="avatar/logo2.jpg"" height='200' width='200' alt='avatar'></a>
 <p><strong>Email : </strong><em>xxx@gmail.com</em></p>
 <p><strong>Sexe : </strong><em>Homme</em></p>
 <p><strong>A propos de vous : </strong><em>Etape 27/30</em></p>
</div>    </div>
    </body>


        (Adresse mail supprimée par la modération)
        0
      5. jordane45 Modérateur
        Je ne comprend pas .... tu veux mettre ton lien de déconnexion à droite de ton nombre de users ... et tu mets le code dans le HEADER au lieu du MENU ??
        0
    4. Zakarya93 Auteur
      En gros j'aimerai avoir ceci
      0
      1. Zakarya93 Auteur
        j'ai rajouté à mon menu.php : 
        <nav>
		<div class="right">
			<ul>
				<li><a href="index.php?page=logout">Se déconnecter</a></li>
			</ul>
		</div>
	</nav>


        ainsi que sa classe css : 
         nav .right {
    text-align: right; }


        le nav est il nécessaire ? car je ne l'a jamais mis pour mes autres div..
        que manque t-il pour afficher "Bienvenue $pseudo" juste au dessus comme pour mon image?
        0

    Discussions similaires

    Site fiable de contrefaçon
    AhmedAMG

    2 réponses
    Sites alternatifs à Vixy, vos solutions
    remeleffff

    6 réponses
    Le site VOVA va t'il revenir ou non ?
    Papillon

    3 réponses