Arrangement mon site

Zakarya93 Messages postés 984 Date d'inscription   Statut Membre Dernière intervention   -  
Zakarya93 Messages postés 984 Date d'inscription   Statut Membre Dernière intervention   -
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 :)
A voir également:

6 réponses

Réponse 1 / 6
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
Zakarya93 Messages postés 984 Date d'inscription   Statut Membre Dernière intervention   10
 
Si justement j'ai modifié mon CSS ^^
je vous copie/colle l'ancien css ?
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Oui
0
Réponse 2 / 6
Zakarya93 Messages postés 984 Date d'inscription   Statut Membre Dernière intervention   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)
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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 984 Date d'inscription   Statut Membre Dernière intervention   10 > jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention  
 
presque : http://www.noelshack.com/2015-29-1437219697-capture.jpg
0
Zakarya93 Messages postés 984 Date d'inscription   Statut Membre Dernière intervention   10 > jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention  
 
comment y remedier ?
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > Zakarya93 Messages postés 984 Date d'inscription   Statut Membre Dernière intervention  
 
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 984 Date d'inscription   Statut Membre Dernière intervention   10 > jordane45 Messages postés 38486 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)
0
Réponse 3 / 6
Zakarya93 Messages postés 984 Date d'inscription   Statut Membre Dernière intervention   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
Réponse 4 / 6
Zakarya93 Messages postés 984 Date d'inscription   Statut Membre Dernière intervention   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 :)
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonsoir,

Comme pour le nombre de membres ... il te suffit de le mettre dans le UL correspondant à ton bandeau gris....
0
Zakarya93 Messages postés 984 Date d'inscription   Statut Membre Dernière intervention   10 > jordane45 Messages postés 38486 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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > Zakarya93 Messages postés 984 Date d'inscription   Statut Membre Dernière intervention  
 
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 984 Date d'inscription   Statut Membre Dernière intervention   10 > jordane45 Messages postés 38486 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>
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
Réponse 5 / 6
Zakarya93 Messages postés 984 Date d'inscription   Statut Membre Dernière intervention   10
 
j'ai mis le float:right mais mon texte s'est deplacé dans le content blanc et non sur la barre
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
TU peux nous montrer ton code ??
0
Zakarya93 Messages postés 984 Date d'inscription   Statut Membre Dernière intervention   10 > jordane45 Messages postés 38486 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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > Zakarya93 Messages postés 984 Date d'inscription   Statut Membre Dernière intervention  
 
Je n'ai pas demandé ton CSS .... mais TON CODE !
0
Zakarya93 Messages postés 984 Date d'inscription   Statut Membre Dernière intervention   10 > jordane45 Messages postés 38486 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)
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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 984 Date d'inscription   Statut Membre Dernière intervention   10
 
En gros j'aimerai avoir ceci
0
Zakarya93 Messages postés 984 Date d'inscription   Statut Membre Dernière intervention   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

Discussions similaires

C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

2 réponses
Coco Chat : nouveau lien !
LoupiotteDesTenebres -
brucine -

9 réponses