Déplacer barre de menu en haut

Résolu/Fermé

Zakarya93 Messages postés 984 Date d'inscription lundi 27 avril 2015 Statut Membre Dernière intervention 18 décembre 2020 - 15 juil. 2015 à 07:13
Zakarya93 Messages postés 984 Date d'inscription lundi 27 avril 2015 Statut Membre Dernière intervention 18 décembre 2020 - 15 juil. 2015 à 17:48

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:

Déplacer barre de menu en haut
Déplacer une colonne excel - Guide
Déplacer la barre des taches windows 11 - Guide
Menu déroulant excel - Guide
Windows 11 menu démarrer classique - Guide
Égal barré - Forum Bureautique

5 réponses

Réponse 1 / 5

Utilisateur anonyme
15 juil. 2015 à 07:46

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.

Zakarya93 Messages postés 984 Date d'inscription lundi 27 avril 2015 Statut Membre Dernière intervention 18 décembre 2020 10
15 juil. 2015 à 07:51

mon body est le suivant :

body
{
  background-color:#000;
  font-family:arial;
  background: url(blue.jpg);
  
}

comment procéder?

Réponse 2 / 5

Utilisateur anonyme
Modifié par lobotoFix le 15/07/2015 à 08:26

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|[×º°"~'"°º×

Zakarya93 Messages postés 984 Date d'inscription lundi 27 avril 2015 Statut Membre Dernière intervention 18 décembre 2020 10
15 juil. 2015 à 08:58

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

Utilisateur anonyme
15 juil. 2015 à 09:20

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

Zakarya93 Messages postés 984 Date d'inscription lundi 27 avril 2015 Statut Membre Dernière intervention 18 décembre 2020 10
15 juil. 2015 à 09:28

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:

Utilisateur anonyme
15 juil. 2015 à 09:37

il faut mettre le bon chemin vers ton fichier...

Réponse 3 / 5

Zakarya93 Messages postés 984 Date d'inscription lundi 27 avril 2015 Statut Membre Dernière intervention 18 décembre 2020 10
15 juil. 2015 à 09:43

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

Utilisateur anonyme
15 juil. 2015 à 10:48

non mais je vais pas te faire ton site !!! cherche un peu

Zakarya93 Messages postés 984 Date d'inscription lundi 27 avril 2015 Statut Membre Dernière intervention 18 décembre 2020 10
15 juil. 2015 à 10:55

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 ?

Réponse 4 / 5

Utilisateur anonyme
15 juil. 2015 à 11:46

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

Zakarya93 Messages postés 984 Date d'inscription lundi 27 avril 2015 Statut Membre Dernière intervention 18 décembre 2020 10
15 juil. 2015 à 11:51

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();
}

jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717 > Zakarya93 Messages postés 984 Date d'inscription lundi 27 avril 2015 Statut Membre Dernière intervention 18 décembre 2020
15 juil. 2015 à 12:24

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

Zakarya93 Messages postés 984 Date d'inscription lundi 27 avril 2015 Statut Membre Dernière intervention 18 décembre 2020 10 > jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024
15 juil. 2015 à 12:34

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

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 lundi 27 avril 2015 Statut Membre Dernière intervention 18 décembre 2020 10
15 juil. 2015 à 17:48

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

Discussions similaires

Barre verticale droite sur clavier

problème de pixel

Alt + = un égal barré = différence !

Comment faire le signe = barré?

Résolution d'une image 500 pixels largeur