Déplacer barre de menu en haut

Résolu
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,



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 ;)
A voir également:

5 réponses

Réponse 1 / 5
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
Zakarya93 Messages postés 984 Date d'inscription   Statut Membre Dernière intervention   10
 
mon body est le suivant : 
body
{
  background-color:#000;
  font-family:arial;
  background: url(blue.jpg);
  
}


comment procéder?
0
Réponse 2 / 5
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
Zakarya93 Messages postés 984 Date d'inscription   Statut Membre Dernière intervention   10
 
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
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
Zakarya93 Messages postés 984 Date d'inscription   Statut Membre Dernière intervention   10
 
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
Utilisateur anonyme
 
il faut mettre le bon chemin vers ton fichier...
0
Réponse 3 / 5
Zakarya93 Messages postés 984 Date d'inscription   Statut Membre Dernière intervention   10
 
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
Utilisateur anonyme
 
non mais je vais pas te faire ton site !!! cherche un peu
0
Zakarya93 Messages postés 984 Date d'inscription   Statut Membre Dernière intervention   10
 
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
Réponse 4 / 5
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
Zakarya93 Messages postés 984 Date d'inscription   Statut Membre Dernière intervention   10
 
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
jordane45 Messages postés 38483 Date d'inscription   Statut Modérateur Dernière intervention   4 746 > Zakarya93 Messages postés 984 Date d'inscription   Statut Membre Dernière intervention  
 
Et 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
Zakarya93 Messages postés 984 Date d'inscription   Statut Membre Dernière intervention   10 > jordane45 Messages postés 38483 Date d'inscription   Statut Modérateur Dernière intervention  
 
mon 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

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

Posez votre question
Réponse 5 / 5
Zakarya93 Messages postés 984 Date d'inscription   Statut Membre Dernière intervention   10
 
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

menu caché
laurent -
ChariduP -

7 réponses
Comment faire le signe = barré?
rma71 -
gillette83 -

5 réponses
Barre verticale droite sur clavier
k_lou -
Leuide -

41 réponses
Alt + = un égal barré = différence !
KAPAZZA -
benj -

7 réponses
O barré horizontalement
JCB40 -
JCB40 -

3 réponses