Discussions actives
CSS, formulaire et labels multilignes (2)CSS, XHTML et formulaire (12)
Espresso : étapes de construction des CSS (7)
Images de fond, boites rondes (13)
Images d'arrière plan (8)
Centrage vertical d un bloc rigide avec marge auto
je souhaite centrer un bloc rigide horizontalement et verticalement avec des marges auto...
pour l horizon. pas de soucis, mais pour le vertical la c une autre affaire voici ma css
body {
background-color : #ffff00;
background-image: none;
}
.conteneur {
background-color : #ff0000;
text-align: center;
}
.bloc {
background-color : #ffffff;
font-size: 11px;
width: 815px;
height:500px;
border: 5px solid #000000;
margin: auto;
}
j ai bien essaye avec un align-vertical ss succes
Ecrit par sfa, le Mercredi 14 Mai 2003, 03:15 dans la rubrique "Premiers Pas".
Commentaires :
Re: C'est possible, mais déconseillé
j ai finalement trouver chaussure a mon pied pour une boite de 760px et 420px.
centrer horizontalement et verticalement avec marges auto.
voici le code au cas où...
body{
background-color: #fff;
color: #000;
font-family: "Helvetica", Verdana, Geneva, Arial, trebuchet ms, sans-serif;
font-size:0.7em;
margin: 2em 1%;
padding:0;
widht:auto;
height:auto;
}
.conteneur {
position: absolute;
background-color: #ff6600;
left: 50%;
width: 760px;
margin-left: -380px;
top:50%;
height:420px;
margin-top: -210px;
border: 5px double #ffffff;
}
et encore merci de t etre penche sur le pb
centrer horizontalement et verticalement avec marges auto.
voici le code au cas où...
body{
background-color: #fff;
color: #000;
font-family: "Helvetica", Verdana, Geneva, Arial, trebuchet ms, sans-serif;
font-size:0.7em;
margin: 2em 1%;
padding:0;
widht:auto;
height:auto;
}
.conteneur {
position: absolute;
background-color: #ff6600;
left: 50%;
width: 760px;
margin-left: -380px;
top:50%;
height:420px;
margin-top: -210px;
border: 5px double #ffffff;
}
et encore merci de t etre penche sur le pb
popd3z
02-12-03
à 15:23
Re: Re: C'est possible, mais déconseillé
voui mais une partie de ta page continura a disparaitre.. :/
Bluerobot propose deux techniques pour obtenir ce résultat. C'est assez proche de ce qui a déjà été discutté je penses...
En ne dépassant pas les 750px de large, ton site devrait rester correctement visible sur les résolution en 800x600. Les résolution plus petites sur PC sont aujourd'hui vraiment très marginale je penses.
Par contre, une feuille de style alternative moins sensible à la largeur limitée serait un bonus.
De même, prévoir une feuille de style spécifique pour les accès via Palm et Telephone portable serait aussi un plus. enfin, ca dépends à qui tu t'adresses...
Mais c'est l'avanatge de passer par un code propre (et sémantique?) pour le contenu et par du CSS pour sa mise en forme: on peut prévoir un style diffèrent selon l'utilisation et/ou l'accès au site.
J'aime aussi bcp la possibilité de définir le style à utiliser pour imprimer un document: ca permet de suprimer les menus et ce genre de truc et même d'afficher les adresses de liens après ceux ci si on veut...
CSS powa!
En ne dépassant pas les 750px de large, ton site devrait rester correctement visible sur les résolution en 800x600. Les résolution plus petites sur PC sont aujourd'hui vraiment très marginale je penses.
Par contre, une feuille de style alternative moins sensible à la largeur limitée serait un bonus.
De même, prévoir une feuille de style spécifique pour les accès via Palm et Telephone portable serait aussi un plus. enfin, ca dépends à qui tu t'adresses...
Mais c'est l'avanatge de passer par un code propre (et sémantique?) pour le contenu et par du CSS pour sa mise en forme: on peut prévoir un style diffèrent selon l'utilisation et/ou l'accès au site.
J'aime aussi bcp la possibilité de définir le style à utiliser pour imprimer un document: ca permet de suprimer les menus et ce genre de truc et même d'afficher les adresses de liens après ceux ci si on veut...
CSS powa!
en pourcentages
en pourcentages c'est plus simple car apres tou moi c afait 7 ans que je suis en => 1024, alors pourquoi se limiter a 800 ?
ici le code :
<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>boite centree</title>
<style type="text/css" media="all">
html,body
{
width:100%;
height:100%;
overflow:hidden;
margin: 0px;
padding:0px;
border:0px;
text-align:center;
vertical-align:top;
}
body
{
font-family:Verdana,arial;
font-size:10px;
font-style:normal;
font-weight:400;
background:#1C516E;
color:#F6F7EB;
}
body #Content
{
height:100%;
width:100%;
margin:0px;
padding:0px;
border:0px;
overflow:auto;
text-align:center;
vertical-align:top;
background-color:ivory;
color:#1C516E;
}
#Boite
{
width:50%;
height:40%;
overflow:auto;
margin:20% 25% auto auto;
padding:0px;
border:1px solid red;
text-align:center;
vertical-align:top;
background:#F6F7EB;
}
</style>
</head>
<body>
<div id="content">
<div id="boite">a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br /></div>
</div>
</body>
</html>
ici le code :
<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>boite centree</title>
<style type="text/css" media="all">
html,body
{
width:100%;
height:100%;
overflow:hidden;
margin: 0px;
padding:0px;
border:0px;
text-align:center;
vertical-align:top;
}
body
{
font-family:Verdana,arial;
font-size:10px;
font-style:normal;
font-weight:400;
background:#1C516E;
color:#F6F7EB;
}
body #Content
{
height:100%;
width:100%;
margin:0px;
padding:0px;
border:0px;
overflow:auto;
text-align:center;
vertical-align:top;
background-color:ivory;
color:#1C516E;
}
#Boite
{
width:50%;
height:40%;
overflow:auto;
margin:20% 25% auto auto;
padding:0px;
border:1px solid red;
text-align:center;
vertical-align:top;
background:#F6F7EB;
}
</style>
</head>
<body>
<div id="content">
<div id="boite">a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br /></div>
</div>
</body>
</html>
Version XML
- Cette page est peut-être encore valide XHTML1.1 et CSS sans tableaux.
Thème inspiré par Bryan Bell.
Thème inspiré par Bryan Bell.
C'est possible, mais déconseillé