28173 sujets

CSS et mise en forme, CSS3

Bonsoir,

Le 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. Smiley biggrin