Centrage site web

cmkader53 -  
cmkader53 Messages postés 13 Date d'inscription   Statut Membre Dernière intervention   -
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.
A voir également:

1 réponse

Réponse 1 / 1
Nexii Messages postés 338 Date d'inscription   Statut Membre Dernière intervention   588
 
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;).
0
cmkader53 Messages postés 13 Date d'inscription   Statut Membre Dernière intervention  
 
Bonjour Nexii,

Je vous remercie amplement pour la réponse, malheureusement ça ne fonctionne pas.

Svp vérifiez ici 
http://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
	}


  • /
0
Nexii Messages postés 338 Date d'inscription   Statut Membre Dernière intervention   588
 
A ce que je vois vous avez réussi !

Pensez à mettre le sujet en résolu.
0
cmkader53 Messages postés 13 Date d'inscription   Statut Membre Dernière intervention   > Nexii Messages postés 338 Date d'inscription   Statut Membre Dernière intervention  
 
Bonsoir Nexii,

En effet qq sur un autre forme m'a montré que j'ai mal appliqué ce que vous m'avez suggéré, donc vous avez participez amplement à la résolution de mon problème (il fallait enlever la position absolute).

Encore une fois merci.
Cordialement.
cmkader53
0

Discussions similaires

C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

2 réponses