débutant un css, comment aligner et centrer des blocs

**thor76160** · 13/10/2010, 13h20

bonjour, voilà j'avoue ne pas être un expert en CSS !
j'ai réussi à aligner des blocs pour avoir un header en haut, un menu vertical à gauche et un conteneur central.
j'aimerais désormais que le contenu du conteneur central soit centré au milieu de cette même div.

voici mon html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<?php
include("inc/config.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title><?php echo $site_name; ?></title>
 
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="js/jqueryui/development-bundle/themes/base/jquery.ui.all.css">
	<link rel="stylesheet" href="js/jqueryui/development-bundle/demos/demos.css">
 
	<script src="js/jqueryui/development-bundle/jquery-1.4.2.js"></script>
 
	<script src="js/jqueryui/development-bundle/ui/jquery.ui.core.js"></script>
	<script src="js/jqueryui/development-bundle/ui/jquery.ui.widget.js"></script>
	<script src="js/jqueryui/development-bundle/ui/jquery.ui.accordion.js"></script>
 
	<script type="text/javascript">
 
		$(function()
		{
			$("#accordion").accordion();
		});
 
		function affiche_page(page)
		{
			$.get(page,
			{
				num_page:'1'
			},
			function success(data)
			{
				$("#conteneur").html(data);
			});
		}
 
	</script>
 
	<link rel="stylesheet" type="text/css" media="screen" href="jqGridPHP_3_8_0_1/themes/redmond/jquery-ui-1.8.2.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="jqGridPHP_3_8_0_1/themes/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="jqGridPHP_3_8_0_1/themes/ui.multiselect.css" />
    <script src="jqGridPHP_3_8_0_1/js/jquery.js" type="text/javascript"></script>
    <script src="jqGridPHP_3_8_0_1/js/i18n/grid.locale-fr.js" type="text/javascript"></script>
	<script type="text/javascript">
	$.jgrid.no_legacy_api = true;
	$.jgrid.useJSON = true;
	</script>
    <script src="jqGridPHP_3_8_0_1/js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="jqGridPHP_3_8_0_1/js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
</head>
<body>
 
<div id="page">
 
	<div id="logo">
 
	</div>
 
	<div id="onglet_info">
		<span>Bienvenue dans votre espace de gestion</span>
		<br/>
		<a href="">retour au site</a>
	</div>
 
	<div id="menu">
		<div class="demo">
			<div id="accordion">
			<?php
			foreach($rub_menu as $rubrique => $sous_rubriques)
			{
				?>
				<h3><a href="#"><?php echo $rubrique; ?></a></h3>
				<div>
					<ul>
					<?php
					foreach($sous_rubriques as $sous_rubrique => $pages_php)
					{
						?><li><a href="javascript:affiche_page('<?php echo $pages_php; ?>');" void="0"><?php echo $sous_rubrique; ?></a></li><?php
						echo"\n";
					}
					?>
					</ul>
				</div>
				<?php
			}
			?>
			</div>
		</div>
	</div>
	<div id="conteneur">
 
	</div>
 
	<div id="footer">
 
	</div>
 
</div>
 
</body>
</html>

css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
body
{
	background-color:#909090;
}
 
#page
{
	width : 1000px;
	margin : 0px auto 0px auto;
}
 
/* header */
#logo
{
	float : left;
	width : 700px;
	height : 120px;
	background-color : #505050;
}
 
#onglet_info
{
	float : left;
	width : 270px;
	height : 90px;
	background-color : #202020;
	padding : 15px;
}
 
#onglet_info span
{
	font-size : 14px;
}
 
#onglet_info a
{
	font-size : 10px;
	text-decoration: none;
	color : #CC9933;
}
 
#onglet_info a:hover
{
	text-decoration: underline;
	color : #CC9933;
	font-weight : bold;
}
 
#onglet_info a:active
{
	text-decoration: none;
	color : #CC9933;
}
 
/* menu vertical */
#menu
{
	float : left;
	width : 250px;
	height : 700px;
	background-color : #ff15ff;
}
 
#menu li
{
	list-style : none;
}
 
#menu .ui-accordion-content
{
	padding: 0px;
}
 
/* contenu principal */
#conteneur
{
	float : left;
	width : 750px;
	height : 700px;
	background-color : #ff9052;
}
 
/* footer */
#footer
{
	float : left;
	width : 100%;
	height : 50px;
	background-color : #90bbff;
}