débutant un css, comment aligner et centrer des blocs
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:
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:
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;
} |
les élements de mon conteneur sont alignés à gauche :/
pourriez-vous m'aider svp ?
