28173 sujets

CSS et mise en forme, CSS3

Mise en forme verticale... casse tête ^^

Bonjour,

J'aimerai positionner sur la totalité de la zone de l'écran 3 élements verticalement:
2 zones de hauteur fixe en haut et en bas
1 zone qui permettra d'aligner horizontalement et verticalement le contenu par rapport à l'écran.

Malgré mes recherches et mes efforts, impossible d'arriver au résultat souhaité! Je n'arrive pas à étendre le contenu sur l'intégralité de l'écran.

Je manque de connaissance avancée en CSS et je suis donc peut-être partie dans la mauvaise direction... Ou se situe mon erreur?

Merci.




<?xml version="1.0" encoding="ISO-8859-1"?>
<!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" xml:lang="en" >
<head>
<title>raaa</title>
<meta name="author" content="" />
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<style type="text/css">
html, body {
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}

.global {
width: 100%;
height: auto;
margin: 0 auto;
min-height: 100%;
position: relative;
}

.contenu {
border:1px solid black;

}

.header {
height:80px;
border:1px solid black; 
}

.pied {
text-align:center;
position: absolute;
bottom:0; 
left:0;
width:100%;
height:50px;
line-height:50px;
border:1px solid black;
}
</style>
</head>
<body>

<div class="global">
	<div class="header"></div>
	<div class="contenu">
		<div style="margin:auto;width:800px;">
			<h1>comment centrer cette zone verticalement?</h1>
		</div>
	<div class="pied"></div>
</div>

</body>

</html>
Bonjour,

D'habitude c'est assez casse gueule mais pour un height à 100% ça doit le faire.
Si tu connais le height de ton div du centre, il suffit de le positionner en absolute avec un top: 50% et margin-top négatif de la moitié du height du div centre.
		<style type="text/css">
html, body {
height: 100%;
}

body {
margin: 0;
padding: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}

.global {
height: 100%;
margin: 0 auto;
min-height: 100%;
position: relative;
}

.contenu {
border:1px solid black;
overflow: hidden;
}

#centre{
height: 50px;
width: 100%;
position: absolute;
top: 50%;
left: 0;
margin-top: -25px;
background: lime;
text-align: center;
}

.header {
height:80px;
background: yellow; 

}

.pied {
text-align:center;
position: absolute;
bottom:0; 
left:0;
width:100%;
height:50px;
line-height:50px;
background: red;
}

</style>
</head>

<body>
<div class="global">
	<div class="header"></div>
		<div id= "centre">
			<h1>centrage milieu de page</h1>
		</div>
	<div class="pied"></div>
Sujet clos
Aller à