Forum d'entraide PHPFrance

Une fois de plus, j'ai un chti probleme de divs.
Je n'arrive pas a voir ce que je souhaite...
Voici le rendu dans firefox derniere version:
http://img399.imageshack.us/img399/6162 ... div0dv.png
On peut voir deja un probleme au niveau des menu, il me manque un morceau du border des deux cotés du menu.
Et ensuite, je n'arrive pas a aligner verticalement mes deux div, que sont le menu et le corps, ce qui assez genant pour la mise en page...
Pourtant dans dreamweaver, tout est aligné et il n'y a aucun probleme de css...
Si vous avez une idée, je suis toute ouïe car je bosse sur ce design depuis ce matin...
design.html =>

Code : Tout sélectionner

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ltcf.net :: les transports en commun francais</title>
<link href="templates/01/css/design.css" rel="stylesheet" type="text/css" />
</head>

<body>
<ul id="barre_haut">
<li class="barre_haut_gauche">Retour &agrave; l'accueil</li>
<li class="barre_haut_gauche">Les forums</li>
<li class="barre_haut_gauche">Les news</li>
<li class="barre_haut_gauche">Les dossiers</li>
<li class="barre_haut_droite">deconnexion [{member.pseudo}</li>
<li class="barre_haut_droite">mes news</li>
<li class="barre_haut_droite">mes dossiers</li>
<li class="barre_haut_droite">mes options</li>
</ul>
<p id="logo"><img src="templates/01/images/logo_ltcf.png" alt="" /></p>
<div id="menu">
<h5>cat</h5>
	<div class="menu_corps">
		<ul>
			<li>item1</li>
			<li>item2</li>
			<li>item3</li>
		</ul>
	</div>
</div>
<div id="corps">
corps du site web!
</div>
<p id="footer">{membres.nbre.connect} | {requetes.nbre.mysql} requ&ecirc;tes &eacute;xecut&eacute;es| page gener&eacute;e en {page.generation.time} secondes<br />
D&eacute;vellop&eacute; par momox en xhtml strict, css, php et mysql<br /><br />
<span class="copyright">Copyright &copy; Ltcf.net - Les news articles et dossiers sont la propri&eacute;t&eacute; de leurs auteurs respectifs<br />
Toute reproduction totale ou partielle est interdite sans l'accord des auteurs<br />
<img src="templates/01/images/icones/reseau_telelog.png" alt="reseau telelog" />&nbsp;<img src="templates/01/images/icones/ltcf_v1.png" alt="ltcf v1.0c" />&nbsp;<img src="templates/01/images/icones/pwered_by_php.png" alt="" />&nbsp;<img src="templates/01/images/icones/powered_by_mysql.png" alt="" />&nbsp;<img src="templates/01/images/icones/rss10.png" alt="" width="80" height="15" /></span></p>
</body>
</html>

design.css

Code : Tout sélectionner

/* design general */
body {
	background-color: #FFFFFF;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size : 12px;
}
/* barre de navigation haute */
#barre_haut
{
	list-style-type: none;
	margin-left:0;
	margin-top:0;
	padding-left: 0;
	height: 20px;
	background-color: #E5E5E5;
	border-bottom: 1px solid #000000;
	border-bottom-width: 1px;
	color: #000000;
}

#barre_haut li
{
	height: 18px;
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
	padding-top: 3px;
	font-family: Verdana, Arial, Helvetica, sans-serif;;
	font-size: 10px;
}

#barre_haut a
{
	color: #000000;
	font-style: normal;
	text-decoration: none;
	font-weight:bold;
}

#barre_haut a:hover
{
	color: #111111;
}
.barre_haut_droite
{
	float: right;
	border-left: 1px solid #000000;
	margin-top : 0px;
}
.barre_haut_gauche
{
	float: left;
	border-right: 1px solid #000000;	
}
#logo
{
	text-align: center;
	margin-top: 5px;
}
#footer
{
	margin: 3px;
	padding: 3px;
	height: 20px;
	background-color: #E5E5E5;
	border: 1px solid #000000;
	border-width: 1px;
	color: #000000;
	height: 90px;
	margin: 3px;
	clear:both;
	width:100%;
}
.copyright
{
	text-align: center;
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}
/* menu */
#menu
{
	float:left;
	width: 20%;
	margin:3px ;
}
#menu h5
{
	height: 20px;
	margin: 0;
	padding-left:10px;
	padding-bottom:25px;
	color:#000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:16px;
	border:1px solid #000000;
	vertical-align:middle;
	background-color:#FFFFFF;
}
.menu_corps
{
	color:#000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color:#FFFFFF;
	border-bottom:1px solid #000000;
	border-left:1px solid #000000;
	border-right:1px solid #000000;
}
/* corps du site*/
#corps
{
	width:80%;	
	background-color: #FFFFFF;
	border: 1px solid #000000;
	margin: 3px;
	padding: 5px;
	padding-bottom:25px;
	overflow:hidden;
}

Merci de l'aide que vous pourriez m'apporter!
@+

Code : Tout sélectionner

#menu
{
   float:left;
   width: 20%;
   margin: 0 3px ;
}

Tu vas voir s'aligner le haut du menu et du contenu en mettant le margin de cette manière, don 0 en haut et en bas, et 3px à droite et à gauche. Si tu veux 3px en bas aussi, alors fais:

Code : Tout sélectionner

#menu
{
   float:left;
   width: 20%;
   margin: 0 3px 3px 3px;
}

Salut,

pour régler les problèmes bordures sur ton menu, rajoutes dans ta CSS :

Code : Tout sélectionner

.menu_corps ul {
margin-top:0;
}

Après joues sur le padding-top pour baisser les liens.

Pour éviter ce genres de mésaventures duent à la taille par défaut des ul dans les navigateurs, l'idéal serait de commencer par supprimer toutes les marges et paddings en commençant ta CSS par :

Code : Tout sélectionner

* {
margin: 0;
padding: 0;
}

Cela te permet d'avoir une meilleure maîtrise sur tes marges et tes paddings.

On appelle çà le "full-css".

Pour info ton <div class="menu_corps"> ne sert à rien, tu pourrais aussi bien faire çà :

Code : Tout sélectionner

<ul class="menu_corps">
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
</ul>

@+ fafane84

Forum d'entraide PHPFrance

[Xhtml-Css]Probleme avec mes div et l'effet escompté

[Xhtml-Css]Probleme avec mes div et l'effet escompté