28212 sujets

CSS et mise en forme, CSS3

Centrer menu horizontal

Bon je m'excuse par avance mais c'est pas faute d'avoir essayé par mes propres moyens (devrais-je dire mes minces "connaissances") et mes qualités de traqueur d'information mais je n'ai pas réussi à trouver par moi même...

Comme indiqué dans le titre je voudrais centrer un menu horizontal (tuto alsacreation) que j'ai include dans un gabarit css alsacreation... malheureusement mes vaines tentatives m 'ont conduit à la calvitie pour cause de tirage de cheveux... J ai réussi à positionner le menu de partout sauf au centre de ma page (en horizontal).

A partir du gabarit css alsacreation largeur flottante avec les deux colonnes et le tuto de menu horizontal quelqu'un pourrait me dire comment faire???

J ai bien essayé avec les docs de positionnement css présents sur le site mais je crois que je dois mal m'y prendre.

Ps: je n'ai pas centralisé mon css(il y a celui de la page et celui du menu pour précision)

Merci à vous tous et memes ceux qui m'insulterons pour me dire que la réponse est sur le site Smiley biggrin
Bon ... Smiley rolleyes
Tout d'abod, bonjour et bienvenue à toi sur le Foum

Je crains que sans connaître ton code, notre aide ne te sois pas d'une grande utilité ...
Et ma boule de crystal est en réparation en ce moment... Smiley lol

As-tu pensé à faire une recherche : Smiley murf
- dans les sujets
- dans la FAQ
Pour alimenter ta boule de cristal héhé

body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
	position: absolute;
	top: 86;
	left: 100;
	z-index: 100;
	width: 100%;
	overflow: hidden;
}
#menu dl {
float: left;
width: 11em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: semi-bold;
color: #0066FF;
background: #fff;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid grey;
}
#menu li {
text-align: center;
margin-left: 3px;
margin-right: 3px;
background: #fff;


}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0.5px dashed grey;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #CAD5FF;
}
#site {
position: absolute;
z-index: 1;
top : 0px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 3px;
border: 0px solid gray; 
}
-->
</style>


Ca c'est le css de base du menu horizontal
Tout se passe dans #menu (là pour le coup j ai pas mis les multiples modifs que j ai essayé genre 
#menu
{
     position: relative; 
     margin-left: auto;
     margin-right: auto;
     width: 100%;
     text-align: left;
     }


Et voici le css de la page dans laquelle j'include le menu

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header {
height: 150px;
background-color: #ffffff;
}
#haut {
height: 30px;
background-color:#CCCCFF;
position: center;
}
#conteneur {
position: absolute;
width: 100%;
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
margin-left: 150px;
margin-right: 150px;
}
#gauche {
position: absolute;
left:0;
width: 150px;
}
#droite {
position: absolute;
right:0;
width: 150px;
}
#pied {
height: auto;
background-color: #99CC99;
}

.menuhaut {
list-style-type: none;
margin: 0;
padding:0;
}
.menuhaut li {
display: inline;
}
.menuhaut a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menuhaut a:hover {
text-decoration: none;
}
.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}
.menudroit {
list-style-type: none;
margin: 0;
padding:0;
}
.menudroit li {
margin-bottom: 5px;
}
.menudroit a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menudroit a:hover {
text-decoration: none;
}
p {margin: 0 0 10px 0;}

Sachant que je l'inclue dans le div "haut"

Merci pour l'accueil en tout cas....

Au fait oui j'ai regardé, je suis pret à faire des efforts en général j'arrive à trouver ce que je veux mais pour le coup je sais pas comment faire alors que je suis persuadé que c'est un tout petit truc de rien du tout..

Je preferai le temps de l'insouciance avec les constructions dans les tableaux Smiley biggrin Noooon j'plaisante Smiley langue
Bonjour,

Petite question naïve : à quoi sert une feuille de style CSS ?
Réponse : à mettre en forme une page HTML.

Petite question naïve : et sans page HTML, à quoi sert le CSS ?
Réponse : à rien du tout.

Petite question naïve : donc si je donne mon code CSS sur un forum pour demander de l'aide, les gens ils vont pas pouvoir m'aider parce qu'ils n'auront pas la fichue moindre idée du code HTML que le CSS est censé mettre en forme ?
Réponse : oui, en gros c'est ça.

Tout ceci pour dire que le CSS c'est bien gentil, mais ça ne se balade pas tout seul. C'est comme dire à son garagiste : « Ma voiture ne marche plus. Tenez, je vous ai amené la moitié du moteur. » Smiley lol

Un peu de code HTML, et dans l'idéal l'URL d'une page de test en ligne, serait bienvenus. Smiley smile

PS : Humour et tout, hein, il n'est nullement dans mes intentions d'être sarcastique ou de moquer qui que ce soit. Je me contente de pointer l'aspect problématique de la situation. Smiley cligne
Je ne voulais pas mettre des tonnes de code inutiles mais je comprend l aspect de ton message ... Voici le code css de alsacreation que je remets au cas où (et avec le html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Largeur fluide, header/menu haut/menu gauche/menu droite/contenu/footer.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* CSS issu des tutoriels css.alsacreations.com */
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header {
height: 50px;
background-color: #99CCCC;
}
#haut {
height: 30px;
background-color:#CCCCFF;
}
#conteneur {
position: absolute;
width: 100%;
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
margin-left: 150px;
margin-right: 150px;
}
#gauche {
position: absolute;
left:0;
width: 150px;
}
#droite {
position: absolute;
right:0;
width: 150px;
}
#pied {
height: 30px;
background-color: #99CC99;
}
.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}
.menudroit {
list-style-type: none;
margin: 0;
padding:0;
}
.menudroit li {
margin-bottom: 5px;
}
.menudroit a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menudroit a:hover {
text-decoration: none;
}
p {margin: 0 0 10px 0;}
</style>
</head>

<body>

<div id="conteneur">

	  <div id="header">header <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous les modèles)</a>

</div>

	  <div id="haut">
	  	
			<?php include 'mainmenu'; ?>
			
	  </div>

	  <div id="gauche"><p>menu gauche</p>
	  	<p>largeur fixe : 150px</p>
	  	
			<ul class="menugauche">
			<li><a href="">Menu 1</a></li>

			<li><a href="">Menu 2</a></li>

			<li><a href="">Menu 3</a></li>
			<li><a href="">Menu 4</a></li>
			</ul>
			
	  </div>
	  
	  <div id="droite"><p>menu droit</p>

	  	<p>largeur fixe : 150px</p>
	  	
			<ul class="menudroit">

			<li><a href="">Menu 1</a></li>
			<li><a href="">Menu 2</a></li>
			<li><a href="">Menu 3</a></li>
			<li><a href="">Menu 4</a></li>

			</ul>
			
	  </div>
	  
  	<div id="centre">

  	  partie centrale qui &quot;pousse&quot; les colones vers le bas.<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />

  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />

  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />

  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />

  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	</div>
	  
	  <div id="pied">pied de page</div>

</div>
	  

</body>
</html>


et le code complet de mon "mainmenu"

<head>

<title>Document sans titre</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
<!-- 
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
	position: absolute;
	top: 86;
	left: 100;
	z-index: 100;
	width: 100%;
	overflow: hidden;
}
#menu dl {
float: left;
width: 11em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: semi-bold;
color: #0066FF;
background: #fff;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid grey;
}
#menu li {
text-align: center;
margin-left: 3px;
margin-right: 3px;
background: #fff;


}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0.5px dashed grey;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #CAD5FF;
}
#site {
position: absolute;
z-index: 1;
top : 0px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 3px;
border: 0px solid gray; 
}
-->
</style>
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>


</head>



<body leftmargin="0" topmargin="0">
<div id="menu"> 
  <dl>
    <dt onmouseover="javascript:montre('smenu0');">Accueil</dt>
    <dd id ="smenu"> 
      <ul>
        <li><a href="http://www.******/******/news.php">News</a></li>
      </ul>
    </dd>
  </dl>
  <dl>
    <dt onmouseover="javascript:montre('smenu1');">Ecole</dt>
    <dd id="smenu1"> 
      <ul>
        <li><a href="index.php?page=ecole">L'école</a></li>
        <li><a href="index.php?page=accueil">L'équipe</a></li>
        <li><a href="#">Matériel</a></li>
        <li><a href="#">Charte</a></li>
      </ul>
    </dd>
  </dl>
  <dl>
    <dt onmouseover="javascript:montre('smenu2');">Biplaces</dt>
    <dd id="smenu2"> 
      <ul>
        <li><a href="../sauvegarde/ecole/biplaces.php" title="Les baptêmes en parapente">Les formules</a></li>
        <li><a href="#">Conditions de vol</a></li>
      </ul>
    </dd>
  </dl>
  <dl>
    <dt onmouseover="javascript:montre('smenu3');">Stages</dt>
    <dd id="smenu3"> 
      <ul>
        <li><a href="./ecole/stages.php" title="Débuter en parapente">Apprendre</a></li>
        <li><a href="#">Se perfectionner</a></li>
        <li><a href="#" title="Montagne, S.I.V">Stages particuliers</a></li>
        <li><a href="#">Voyages</a></li>
      </ul>
    </dd>
  </dl>
  <dl>
    <dt onmouseover="javascript:montre('smenu4');">Les Plus</dt>
    <dd id="smenu4"> 
      <ul>
        <li><a href="#">Photos</a></li>
        <li><a href="#">Vidéos</a></li>
        <li><a href="#" title="Calendrier, tarifs, ...">Documentation</a></li>
        <li><a href="#">Webcam</a></li>
        <li><a href="#">Balise météo</a></li>
      </ul>
    </dd>
  </dl>
</div>
</body>


Voilà je crois que tout y est... Smiley confused
Modifié par Analysis (14 Feb 2007 - 23:52)
Oki d'accord, je vois le problème.

La fonction PHP include() permet d'insérer du code dans du code. Ici, on insère le code du menu dans le code de la page principale.

As-tu vérifié quel est le code HTML généré par ton script PHP, au final ? J'imagine que non. Car le résultat va être de ce type :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Largeur fluide, header/menu haut/menu gauche/menu droite/contenu/footer.</title>
<style type="text/css">
...
</style>
</head>

<body>
<div id="conteneur">
	  <div id="header">header <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous les modèles)</a>
</div>
	  <div id="haut">
<head>
<title>Document sans titre</title>
<style type="text/css" media="screen">
... bla bla styles CSS du menu ...
</style>

<script type="text/javascript">
...
</script>
</head>

<body leftmargin="0" topmargin="0">

<div id="menu">
... bla bla code HTML du menu ...
</div>
</body>
	  </div>

	...
</div>
</body>
</html>


Bref, un mélange innommable de deux pages HTML l'une dans l'autre. Deux head imbriqués, deux body imbriqués, etc. On a de la chance si le navigateur ne plante pas face à ce genre de magma.

La technique des include en PHP ne sert pas insérer une page HTML dans une autre page HTML.

Le but poursuivi devrait être de produire une page HTML unique et correctement formée (dont la syntaxe sera validée par le validateur HTML du W3C, par exemple). Pour cela, on n'aura qu'un seul doctype, qu'un seul élément html, qu'un seul head, qu'un seul body, etc. De même, les styles pour le menu seront insérés dans la feuille de style globale, que l'on aura intérêt à conserver dans un fichier .css appelé pour styler la page via la balise <link>.

Enfin bon, tout ça ce sont les bases, donc je ne détaille pas tout. Si les bases ne sont pas acquises, il existe des ressources en ligne, y compris sur Alsacréations.
J ai lancé les codes un peu vite mais il va de sois que mes includes ne comprennent que le contenu, que seule ma page prinicpale contiendrait un header et tout et tout ça c'est pas trop le prob... je testais donc je n avais pas lié le css mais laissé directement sur la page principale (celle de mon menu mise dans le css de ma page principale bien sur)

En gros je voulais savoir comment centrer le menu horizontal qui est proposé dans les tutoriaux quand je l'include dans un des gabarits css proposés aussi sur ce site... voilà c'est tout ... parce que par défaut il va se positionner à gauche...

Pour reprendre et essayer d'etre clair (le puis je encore???)

J ai:
-un css
-ma page index qui va chercher le css
-mon menu qui est appelé sur mon index via un include.

Si vous aviez à faire cela à quoi ressemblerait le css pour avoir le menu center qui est include dans la div "menuhaut" (sachant que le css que j ai pris sur le site correspond au header+menu haut + 2colonnes le tout en taille fluide)

Voilà

Sinon tant pis pour moi si j y arrive pas

Mais ne vous affolez pas pour les codes du dessus j avais directement repris sur le site et non sur les pages sur lesquelles je travaille et donc je ne fais pas l erreur d avoir deux header deux css et tout et tout

TY all
Bonjour,

Ben, pour un include de menu, tout d'abord
Prendre un bon css externe avec tous les styles (menu y compris vu qu'il sera sur toutes tes pages je suppose)

Ensuite : une page entete.php par exemple ou l'on place tous ce qui doit apparaitre en tete de page, le doctype les meta la balise body ...

Puis on code le menu sur une page menu.php où là on ne met que le code du menu <div id="menu">.......</div>

Pour une page index.php par exemple:


<?php
include ('entete.php');
include ('menu.php');
?>
<div id="bla_bla_bla ......>/* corps */
</div>
<?php
include('footer.php');
?>


Pour centrer ton menu:

#menu {
	position: absolute;
	top: 86;
	left: 50%;/* on met le bord gauche du menu au milieu */
	margin-left: -27.5em;/* on décale sur la gauche de la moitié de la largeur du menu ici (11em X 5)/2   */
	z-index: 100;
	overflow: hidden;
}
Pour le coup, je crois qu'un bête alignement à gaucher sera plus fiable. Dimensionnement en EM, positionnement absolu, marge négative... ouille.

Si les items de menu sont en display: inline : text-align:center sur le conteneur du menu.

Si les items de menu sont en float, sont en nombre déterminé et ont une largeur fixe en pixels : donner une largeur fixe au menu et le centrer avec un margin: 0 auto;.

Si on n'est dans aucun de ces cas et que le centrage est important : penser, pourquoi pas, à utiliser un tableau (une ligne, autant de cellules que d'items de menu).
Re,

Ben aligné à gauche, ça ne va pas le faire en cas de redimmensionnement, là les items ont une largeur fixe (en em), et le bloc menu est en absolute donc margin: auto avec un autre div englobant ça ne va pas sûrement. La solution du centrage en absolute avec marges négatives me parait solide en fonction de ces paramètres et supporte un peu l'agrandissement d'affichage.
Modifié par ghost (30 Jan 2007 - 19:30)
Sujet clos
Aller à