Sujet Précédent Sujet Suivant

Centrage site web

Fermé
cmkader53 - 1 déc. 2015 à 16:43
cmkader53 Messages postés 13 Date d'inscription lundi 21 septembre 2009 Statut Membre Dernière intervention 29 mars 2016 - 4 déc. 2015 à 21:11
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 jeudi 13 mars 2014 Statut Membre Dernière intervention 14 mars 2017 577
1 déc. 2015 à 17:57
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 lundi 21 septembre 2009 Statut Membre Dernière intervention 29 mars 2016
2 déc. 2015 à 11:27
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 jeudi 13 mars 2014 Statut Membre Dernière intervention 14 mars 2017 577
4 déc. 2015 à 08:46
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 lundi 21 septembre 2009 Statut Membre Dernière intervention 29 mars 2016 > Nexii Messages postés 338 Date d'inscription jeudi 13 mars 2014 Statut Membre Dernière intervention 14 mars 2017
4 déc. 2015 à 21:11
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