Arrangement mon site

Zakarya93 Messages postés 1026 Statut Membre -
Zakarya93 Messages postés 1026 Statut Membre - 21 juil. 2015 à 14:04

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 :)

Afficher la suite

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.

Réponse 1 / 6
jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 833

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 Messages postés 1026 Statut Membre 10
  
  Si justement j'ai modifié mon CSS ^^
  je vous copie/colle l'ancien css ?
  
  0
2. jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 833
  
  Oui
  
  0

Zakarya93 Messages postés 1026 Statut Membre 10

*
{
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)

jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 833

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
Zakarya93 Messages postés 1026 Statut Membre 10 > jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention

presque : http://www.noelshack.com/2015-29-1437219697-capture.jpg
0
Zakarya93 Messages postés 1026 Statut Membre 10 > jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention

comment y remedier ?
0
jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 833 > Zakarya93 Messages postés 1026 Statut Membre

Commence 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

Zakarya93 Messages postés 1026 Statut Membre 10 > jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention

1/ 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)

Réponse 3 / 6
Zakarya93 Messages postés 1026 Statut Membre 10

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

Zakarya93 Messages postés 1026 Statut Membre 10

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 :)

jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 833

Bonsoir,

Comme pour le nombre de membres ... il te suffit de le mettre dans le UL correspondant à ton bandeau gris....

Zakarya93 Messages postés 1026 Statut Membre 10 > jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention
oui 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
jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 833 > Zakarya93 Messages postés 1026 Statut Membre

tu l'as mis dans ton UL ? dans un LI ??
Merci de nous montrer le code complet de ta <div class='menu'>
0

Zakarya93 Messages postés 1026 Statut Membre 10 > jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention

oui 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>

jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 833

Au pire tu dois pouvoir le mettre dans un SPAN et lui appliquer un FLOAT-RIGHT
0

Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question

Zakarya93 Messages postés 1026 Statut Membre 10

j'ai mis le float:right mais mon texte s'est deplacé dans le content blanc et non sur la barre

jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 833

TU peux nous montrer ton code ??
0
Zakarya93 Messages postés 1026 Statut Membre 10 > jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention
pardon je suis confus
```
#content .header
{
text-align:right;
margin-right:5px;
float:right
}
```
0
jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 833 > Zakarya93 Messages postés 1026 Statut Membre

Je n'ai pas demandé ton CSS .... mais TON CODE !
0

Zakarya93 Messages postés 1026 Statut Membre 10 > jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention

header.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)

jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 833

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

Réponse 6 / 6
Zakarya93 Messages postés 1026 Statut Membre 10

En gros j'aimerai avoir ceci
0
1. Zakarya93 Messages postés 1026 Statut Membre 10
  
  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

Arrangement mon site

6 réponses

Discussions similaires

Newsletters