Déplacer barre de menu en haut

Résolu
Zakarya93 -  
Bonjour,



Comment déplacer ma barre de menu en haut de mon site et qu'il prenne toute la place (comme celui de CCM) ?
sachant que mon css : 

#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;
}


Merci d'avance ;)

5 réponses

  1. Utilisateur anonyme
    salut,

    si le bleu représente le fonds de ton site (body) et le blanc une div. Il faudrait que tu place ton menu en dehors de cette div, dans le body.
    1
    1. Zakarya93 Auteur
      mon body est le suivant : 
      body
{
  background-color:#000;
  font-family:arial;
  background: url(blue.jpg);
  
}


      comment procéder?
      0
  2. Utilisateur anonyme
    salut,

    j'imagine que tu as quelque chose ressemblant à ceci : 

    <style>
  body {
   background-color: #000;
   font-family: arial;
   background: blue; /* adaptation */
  }
  #content{ /* adaptation */
   width: 80%;
   margin: 100px auto;
                        background: #FFF;
   min-height: 500px;
  }

  #content  .menu {
   height: 50px; /* adaptation */
   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;
  }
 </style>
 <body>
  <div id="content">
   <nav class="menu">
    <ul>
     <li>
      <a>blabla1</a>
     </li>
     <li>
      <a>blabla2</a>
     </li>
     <li>
      <a>blabla3</a>
     </li>
     <li>
      <a>blabla4</a>
     </li>
     <li>
      <a>blabla5</a>
     </li>
    </ul>
   </nav>
  </div>
 </body>


    tu met ton menu en dehors content et tu enlève les #content devant .menu dans css : 

    <style>
		body {
			background-color: #000;
			font-family: arial;
			margin: 0;
			padding: 0;
			background: blue; /* adaptation */
		}
		#content{ /* adaptation */
			width: 80%;
			margin: 100px auto;
			background: #FFF;
			min-height: 500px;
		}

		.menu {
			height: 50px; /* adaptation */
			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;
		}
	</style>
	<body>
		<nav class="menu">
				<ul>
					<li>
						<a>blabla1</a>
					</li>
					<li>
						<a>blabla2</a>
					</li>
					<li>
						<a>blabla3</a>
					</li>
					<li>
						<a>blabla4</a>
					</li>
					<li>
						<a>blabla5</a>
					</li>
				</ul>
			</nav>
		<div id="content">
			<p>la c'est le content</p>
		</div>
	</body>




    Bonne journée

    ׺°"~'"°º×]|I{*------» LÖBÖTÖ «------*}I|[׺°"~'"°º×
    1
    1. Zakarya93 Auteur
      j'ai fais les modifs : 
      *
{
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;
}


      menu.php : 
       <?php
// Fichier menu.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>
     <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>


      mais j'ai ça : http://www.noelshack.com/2015-29-1436943526-capture.jpg
      0
    2. Utilisateur anonyme
      Il faut inclure ton ficher menu.php dans le body et non plus dans #content 

      </head>
<body>
<?php  include "menu.php";  ?>
<div id="content">
<!-- reste de ton site -->
      0
    3. Zakarya93 Auteur
      comme ceci ? 
      <!DOCTYPE html>
<html>
    <head>
      <link rel='stylesheet' href='css/style.css'>
    </head>
    <meta charset="UTF-8" >
    <body>
	      <?php  include "menu.php";  ?>
          <div id='content'>
          <?php
              include($content);
           ?>
    </div>
    </body>


      parce que j'ai 2 erreurs failed to open stream:
      0
    4. Utilisateur anonyme
      il faut mettre le bon chemin vers ton fichier...
      0
  3. Zakarya93 Auteur
    j'ai maintenant ceci :


    1/comment supprimer la barre sur le content ? (en blanc)
    2/comment repositionner l'info bulle avec le "1" sur "invitations" ?
    3/comment mettre la barre le plus haut possible car il y a de l'espace, afin qu'elle touche le fond et l'élargir sur les bords ?

    je vous serai tres reconnaissant :)
    0
    1. Utilisateur anonyme
      non mais je vais pas te faire ton site !!! cherche un peu
      0
    2. Zakarya93 Auteur
      alors l'erreur Fatal error: Call to undefined function nombre_membre() in C:\wamp\www\rs\body\menu.php on line 3 svp comment corriger ça ?
      0
  4. Utilisateur anonyme
    Salut,

    il y a une chose que je comprends pas. Tu me présente un bout de code PHP plutôt intéressant avec même une ternaire. Et à coté de cela, tu me pose des questions novices.

    Si tu pompe du code sans même le comprendre cela ne peut pas aller. C'est pas que je ne veut pas être sympa, mais il faut chercher pour comprendre.

    Concernant cette erreur, elle veut dire que ton code php ne connaît pas cette méthode.

    tu appel nombre_membre() dans menu.php mas elle n'existe pas. Dans quel fichier est elle ? Tu pourrais éventuellement héberger ton code sur github afin que l'on puisse mieux t'aider.

    https://github.com/

    Bonne journée
    0
    1. Zakarya93 Auteur
      no problem, j'ai suivi un tuto de A à Z, sinon ma function est appelé dans mon fichier membre;func.php : 

      //la function qui va compter le nombre de personnes inscrites
function nombre_membre() {
global $bdd; // déclaration globale de BDD
$req = $bdd->query("SELECT id FROM utilisateurs")or die(print_r($bdd->errorInfo()));
return $req->rowCount();
}
      0
    2. jordane45 Modérateur
      @Zakarya93Et tu l'inclus ce fichier func de ton menu ?
      Je ne pense pas....
      Il faut que tu ajoutes un INCLUDE .. sinon ça ne marchera pas.

      Par contre ça n'a pas de rapport avec ta demande de tout remonter vers le Haut... là ... c'est du CSS !!!
      0
    3. Zakarya93 Auteur
      @jordane45mon site est tout décalé, je pense que je dois redemarrer à la phase d'avant ce topic, car il me fait d'autres functions à include en plus :x
      0
  6. Zakarya93 Auteur
    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;
}
    0

    Discussions similaires

    Au sujet du S majuscule avec trait oblique barré
    charlene

    6 réponses
    O barré horizontalement
    JCB40

    3 réponses
    S avec un trait en haut et en bas
    Jessy0787

    3 réponses
    Comment faire le signe = barré?
    rma71

    5 réponses
    Alt + = un égal barré = différence !
    KAPAZZA

    7 réponses