Centrage site web
cmkader53
-
cmkader53 Messages postés 16 Statut Membre -
cmkader53 Messages postés 16 Statut Membre -
Bonjour tout le monde,
Je amateur autodidact dans l'écriture de site web.
Je développe sous une résolution 1024x768
Pour des résolution supérieure le site se plaque à gauche.
Que dois-je faire pour que le site occupe toute la largeur de l'écran qcq soit sa résolution.
Ou au moins comment avoir le site toujours au centre de l'écran.
Je amateur autodidact dans l'écriture de site web.
Je développe sous une résolution 1024x768
Pour des résolution supérieure le site se plaque à gauche.
Que dois-je faire pour que le site occupe toute la largeur de l'écran qcq soit sa résolution.
Ou au moins comment avoir le site toujours au centre de l'écran.
1 réponse
-
Bonjour,
Tiens regarde cet exemple :
https://jsfiddle.net/mx5mjktp/
1) Premier cas, le bloc bleu : si tu ne spécifie pas de propriété width ou height, ou que tu les défini à 100%, ton bloc prendra la totalité de l'espace disponible.
2) Dans le deuxième cas, tu vois que j'ai appliqué des dimensions au div "body". En imaginant que ce soit ton body à toi, tu vois qu'en attribuant une dimension celui-ci se colle à gauche.
3) Pour le centrer, il suffit d'ajouter la propriété (margin : 0 auto;). Attention : Cette propriété fonctionnera tant qu'un des div parent de l'élément aura une valeur width en BRUT. C'est à dire qu'a un moment dans ton arborescence, qu'il y ait 1 ou 20 DIV enfants, tu devra spécifier à l'un deux une WIDTH en brut (ex : 920px;).-
Bonjour Nexii,
Je vous remercie amplement pour la réponse, malheureusement ça ne fonctionne pas.
Svp vérifiez icihttp://www.winsem.net/Tests
Pour bien voir le non fonctionnement faites la vérification avec une résolution de 1440x900
Encore une fois et toujours merci.
Ci-après mes codes:
html
<!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>
<title>Acceuil</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="TestCentrageDiv.css" media="screen" />
</head>
<body>
<div id="divanimflash">
<embed width="950" height="350" border="0" type="application/x-shockwave-flash" pluginspage="https://get.adobe.com/flashplayer/" src="TestCarrousell.swf"></embed>
</div>
<div id="Principale">
<div id="Secondaire">
<!--
<div id="divgov">
Div1
</div>
<div id="divcarte">
Div2
</div>
<div id="divcat">
Div3
</div>
-->
</div>
</div>
</br></br>
</body>
</html>
css
/* Positionnement des div gouvernorat, carte et categorie */
#divanimflash
{
position:absolute;
margin-left:15px;
margin-top:20px;
width:96%; /* J'utilise le % pour adapter la largeur du div à celle de l'écran
pour les résolution supéririeure à 1024x768 */
height:370px;
border: 1px red solid;
text-align:center; /* Avec [text-align:center] je centre l'animation dans son div et ce quelque soit la résolution de l'écran */
padding:5px;
overflow:auto
}
#Principale
{
position:absolute;
margin-left:5px;
margin-top:475px;
width:97%; /* J'utilise le % pour adapter la largeur du div à celle de l'écran
pour les résolution supéririeure à 1024x768 */
height:385px;
text-align:center; /* Je n'arruve pas à centrer avec [text-align:center]les trois div #divgov, #divcarte et #divcat dans
le div #Principale */
border:1px red solid;
padding:5px;
overflow:auto; /* j'utilise overflow pour contourner un débordement de la fenêtre constaté avec firefox */
}
#Secondaire /* J'ai crée au sein du div #Principale ce div #Secondaire qui englobe les trois
div #divgov, #divcarte et #divcat mais sans résultat */
{
position:absolute;
margin:0 auto;
margin-top:0px;
width:960px;
height:375px;
border:1px blue solid;
padding:5px;
margin:0 auto;
}
/*
#divgov
{
position:absolute;
margin-left:0px;
margin-top:0px;
width:400px;
height:350px;
border:1px grey solid;
background-color:white
}
#divcarte
{
position:absolute;
margin-left:412px;
margin-top:0px;
width:300px;
height:351px;
border:1px green solid;
}
#divcat
{
position:absolute;
margin-left:722px;
margin-top:0px;
width:235px;
height:350px;
border:1px black solid;
background-color:white
}- /
-
-
