Ajout de menus

apt · 10 Mars 2007

Salut,

Dans le script annuaire Categorizator,

comment puis-je ajouter des menus gauche + droite avec des div ?

(div conteneur, div header, div menu horizontal, div nav gauche, div contenu, div nav droite, div footer).

Merci.

tryan · 10 Mars 2007

Généralement il faut partir d'un design pré établie qui sont à intègrer dans les fichiers haut et bas.php ou header et footer.php du script (je ne sais plus exactement) ..Les explications que tu demandes sont un peut longues à fournir , il faudrait un tuto de 4 pages .. :lol: si sa peut t'aider http://c00lman.free.fr/Creer-un-site-en-CSS.php

apt · 11 Mars 2007

Merci tryan.

Ce site me simplifie amplement la tâche.

Mais j'ai un probleme pour centrer le grand div :

#moncadre {
width:800px;
margin:auto;
padding:10px;
background-color:#FFFF00;
border-left:1px solid #000000; /* couleur du cadre */
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}

Il est toujours aligné agauche !!

Comment faire ?

Merci.

apt · 11 Mars 2007

Merci tryan.

Ce site me simplifie amplement la tâche.

Mais j'ai un probleme pour centrer le grand div :

Code:

#moncadre {
width:800px;
margin:auto;
padding:10px;
background-color:#FFFF00;
border-left:1px solid #000000; /* couleur du cadre */
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}

Il est toujours aligné agauche !!

Comment faire ?

Merci.

Dan_A · 11 Mars 2007

Il y a trop peu d'information pour donner "la" réponse
Peut être margin:0 auto;

On peut aussi remplacer les définitions pour la bordure par
border:1px solid #000; /* couleur du cadre */
[edit]
Après un coup d'oeil jeté au site cité, le centrage ne s'effectue pas avec IE car les exemples donnés ne sont pas en HTML valide et le doctype n'est pas bon (ie est en mode quirks sur certaines pages).
Il suffit donc de mettre un DOCTYPE complet pour que le div soit centré avec Firefox et Internet Explorer.
[/edit]

apt · 11 Mars 2007

Merci Dan_A,

Tu as raison; Il manquait la ligne DOCTYPE.

J'ai ajouter cette ligne avant <html> et tout marche.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

apt · 11 Mars 2007

Le code :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Effets sur les liens</title>
<style type="text/css"> 
body {
background-color:#FFFFFF; /*couleur de fond de page*/
font:13px "Trebuchet MS", Arial, Verdana;/*taille et forme de la police*/
color:#555555; /*couleur de la police d'écriture*/

}

.cadredumenugauche a:link {color: red ; }
.cadredumenugauche a:hover {border: 0px solid #000000; color: #00FBFF; text-decoration: underline ;}
a:link {color: #000000 ; text-decoration: underline ;}
a:visited {color: #FF6699 ; } a:hover { color: red ; text-decoration: underline overline ; }

.cadredumenugauche p.titre {color: red ; text-decoration: underline overline ;}

#moncadre {
	width:800px;
	padding:10px;
	background-color:#FFFF00;
	border-left:1px solid #000000; /* couleur du cadre */
	border-right:1px solid #000000;
	border-bottom:1px solid #000000;
	border-top:1px solid #000000;
	margin: auto;

}

.cadredumenugauche {
	float:left;
	text-align:center;
	width:150px;
	background-color:#E4E4E4;
	border:1px solid #000; /* cadre menu */
	color:#666666;
	height: auto;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
}
.categories {
	float:left;
	text-align:left;
	width:130px;
	padding: 10px;
	background-color:#FFFFFF;
	border:0px solid #FFFFFF; /* cadre menu */
	color:#666666;
	height: auto;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	list-style-position: outside;
	list-style-type: circle;
}
.cadredumenudroite {
	float:right;
	text-align:left;
	width:150px;
	padding:5px;
	background-color:#E4E4E4;
	border:1px solid #000; /* cadre menu */
	color:#666666;
	height: auto;
}
.categories2 {
	float:left;
	text-align:left;
	width:130px;
	padding:10px;
	background-color:#FFFFFF;
	border:0px solid #FFFFFF; /* cadre menu */
	color:#666666;
	height: auto;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
}
#cadrehaut {
height:100px;
background-color:#FFCCCC;
margin-bottom:10px;
}

#cadrebas {
	width:200px;
	background-color:#DEDEDE;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif,;
	text-align:center;
	color: #999999;
	clear: both;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;	
}

#cadrecentrale {
	margin-left:180px;
	min-height:150px;
	margin-right:180px;
	border-left:1px dashed #000; /* couleur du cadre */
	border-right:1px dashed #000;
	border-bottom:1px dashed #000;
	border-top:1px dashed #000;
	background-color:#00FBFF;
	height: auto;
}
  </style>
</head>

<body>
<div id="moncadre">
<div id="cadrehaut">Barre de Navigation</div>
<div class="cadredumenugauche">
  <p class="titre"><a href="index.php">Menu Gauche</a></p>
  <div class="categories">
	<ul class="">
	  <li><a href="index.php">mon lien</a></li>
	  <li>mon lien</li>
	  <li>mon lien</li>
	</ul>
	</div>
  </div>
<div class="cadredumenudroite">
  <p>Menu Droite</p>
  <div class="categories2">Placez ici le contenu de la nouvelle balise Div</div>
	  </div>
<div id="cadrecentrale">
  <p>Categories de l'annuaire  </p>
  </div>
</div>
<div id="cadrebas">2007</div>
</body>
</html>

Voila j'aimerais avoir votre l'aide pour :

1 - Reduire l'écart haut et bas entre la div categories et le titre Menu Gauche dans la div cadredumenugauche.
2 - Reduire le retrait de la liste dans la div categories.

S'il y'a d'autres erreurs dans le code ou des propositions à me fournir, veuillez me les signaler svp.

Merci.

tryan · 11 Mars 2007

Le doctype n'est pas une erreur ... le boulot sur le style est déja donné et fournis en détail . Dailleurs si tu avais prit le temps de regardé la source de la page de démo, tu aurrais put comparer et donc trouvé la différence ... sinon dit le doctype ! :lol:

apt · 12 Mars 2007

C'est que j'ai fait Dan,

J'ai regardé pourquoi l'exemple marche bien sur le site, et non pas chez moi.