28172 sujets

CSS et mise en forme, CSS3

Centrer un site sur une page web quelque soit la résolution

Bonjour à tous,

Je sais déjà ce que vous allez me dire Smiley smile
Le sujet a déjà été abordé à plusieurs reprise et en cherchant j'aurais pu trouver !
Mais je vous arrête tout de suite, je suis débutante, vraiment débutante !
Je suis en train de finaliser mon site mais je me heurte au même problème que pas mal de gens à ce que j'ai pu lire.
Comment puis-je centrer mon site sur une page quelque soit la résolution ?

Pour info, je travaille actuellement avec Dreamweaver 8. Mon site est composé de calques (et non de tableaux). Je ne l'ai testé que sur Internet Explorer 8 et ma priorité et tout de même que ça puisse fonctionner aussi bien sur IE 6, 7 et 8. Pour les autres navigateurs tant pis !

Voici le code d'une des pages :


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Home</title>
<style type="text/css">
<!--
#LienEntrez {
	position:absolute;
	width:188px;
	height:94px;
	z-index:1;
	left: 515px;
	top: 653px;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('Images/entrez_v.png')">
<div id="Fond" style="position: absolute; left: 117px; top: 36px; width: 1024px; height: 770px; z-index: 1; vertical-align: middle"><img src="Images/im_home.png" width="1024" height="768" />
  <div id="LienEntrez"><a href="menu.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Entrez','','Images/entrez_v.png',1)"><img src="Images/entrez_r.png" name="Entrez" width="190" height="90" border="0" id="Entrez" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Entrez','','Images/entrez_v.png',1)"></a></div>
</div>

</body>
</html>


Petite précisions suplémentaires, il faudrait que ceux qui me répondront me précise le code mais aussi l'emplacement exact où l'insérer car comme je vous l'ai dit précédament je suis vraiment débutante et je ne maîtrise pas du tout le code.


Merci d'avance de vos réponses[/i][/i][/i][/i][/i][/i]
Modifié par valou31384 (11 Jun 2009 - 23:08)
Re

J'ai oublié une petite chose comme vous pouvez le voir dans le code : mon calque principal est de taille 1024*770 et pour tricher avec ma résolution (1280*1024) et ma taille d'écran (17 pouces), j'ai placé mon calque principal à G 117px et S 36px.

Autre précision, avant d'avoir la remarque : mon site n'est pas encore hébergé c'est pour ça que j'ai des liens vers la racine de mon pc.

Voilà je crois que je vous ai tout dit..

En espérant avoir des nouvelles rapidement.
Modifié par valou31384 (11 Jun 2009 - 23:06)
bonsoir,

Il n'y a pas trop le choix pour un debutant :

Un tableau composé d'une cellule unique comme conteneur global de ta page .... ce qui implique d'inserer 3 balise ouvrantes puis trois fermantes ... En tableau super solide plein de bons sens , ou en div plus ou moins bien maitrisée et plein de frustration le choix s'impose de lui même.

Sinon , si tu est vraiment anti-tableaux Smiley smile voici des pistes : http://yidille.free.fr/plux/valign/?10-5-pistes-pour-centrer-en-xy-vos-pages tableau compris Smiley smile .

Les exemples proposé demontre qu'il sont applicable a l'ensemble d'une page ou a l'interieur d'un conteneur , il s'agit simplement de centré visuellement un conteneur au milieu d'un autre (viewport , html , body , div , ... même combat) .

edit , pour le centrage horizontal , c'est tout simple : margin:auto;
Modifié par gc-nomade (11 Jun 2009 - 23:54)
Hello,

valou31384 a écrit :
Je sais déjà ce que vous allez me dire Smiley smile
Le sujet a déjà été abordé à plusieurs reprise et en cherchant j'aurais pu trouver !
Mais je vous arrête tout de suite, je suis débutante, vraiment débutante !
Ben oui... comme 90% des personnes qui posent des questions sur ce forum. Cela ne t'empêche pas d'effectuer une recherche. Smiley cligne

D'autre part Alsacréations accompagne dans l'apprentissage du (x)html et du css mais ne peut pas se substituer à cet apprentissage (sinon il faudrait 10 pages par question) Smiley murf .

Sinon un petit exemple :
<!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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css" media="screen">
#global {
	width: 940px;
	margin: 20px auto;
	padding: 20px;
	background: green;
}
</style>
</head>
<body>
<div id="global">
	<p>Bla bla.</p>
	<p>Bla bla.</p>
</div>
</body>
</html>
Au passage lire Quelle est la différence entre un DIV et un «calque» ?


Edit: pour un centrage vertical voir Un bloc centré horizontalement et verticalement dans la page.
Modifié par Heyoan (12 Jun 2009 - 00:01)
Bonsoir,

Tout d'abord réponse à gc-nomade :
Je ne suis pas "anti tableaux" mais j'ai fait tout mon site en calque alors je ne vais pas tout refaire. De plus, je trouve le mode calque beaucoup plus fluide. J'avais fait un essai avec des tableaux mais je m'arrachais les cheveux. Il faut dire aussi que j'ai l'habitude de travailler avec des calques puisque je travaille régulièrement avec Adobe Illustrator qui utilise aussi ce système même si ce n'est pas exactement la même chose, c'est la même logique. Et puis autant apprendre directement avec les bons outils ! Smiley smile Mais merci quand même du conseil.

Réponse à Heyoan :
Pour info, j'avais effectué cette recherche et trouvé ces articles mais le soucis c'est que ce sont des fragments de code et que je n'y comprend rien si je ne vois pas le code en totalité. Ton exemple me parle bien plus que toutes les portions de code que j'ai pu trouver !
Je vais faire un essai tout à l'heure en partant de ce que tu as écris et je te tiendrais au courant si j'y suis arrivée Smiley smile

Merci pour vos réponses en espérant que j'y arrive
Pour compléter, tu n'ai pas obliger de mettre
margin: 20px auto;

	padding: 20px;


tu peux tout simplement mettre

margin:0 auto;


pour expliquer cette ligne de margin, il faut savoir que ça veut dire de mettre 0px en haut et en bas, et auto dit que la marge va se répartir équitablement sur gauche et droite de la div. D'où l'importance de mettre une largeur à la div global.
Il faut savoir que les atribut que tu donnes après les ":" vont dans ce sens : haut,droite,bas,gauche.
Ici on aurait pu mettre 
margin:0 auto 0 auto;
Sujet clos
Aller à