18102 sujets

Questions générales et questions de débutants

[résolu] Centrage vertical et scroll...

Bonjour,

Pour centrer divers elements en hauteur (oui j'aime bien) en suivant l'exemple des marges negatives, ici : http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS

Comme vous pouvez le constater, ca marche (nous n'en doutions pas)

http://css.alsacreations.com/xmedia/exemples/centrer/csscentrer.htm

Seulement, quand je réduis la taille de ma fenetre, il arrive un moment ou le contenu "disparait" et la barre de défilement qui apparait ne permet de "ratrapper" le contenu qu'en bas ou a droite. Or, ce qui se trouve a gauche, ou en haut, ou les deux, n'est pas forcement dénué d'interêt et ca serait dommage de le manquer...

Bref, tout cela pour demander; Y aurait il un moyen de contourner ce "soucis",
- soit en faisant de tel façon a ce que la fenêtre ne puisse pas se reduire a moins que la taille de l'element.
- soit en faisant de façon a ce que le contenu soit "ratrapable" par les scrolls, vers la gauche (ou haut) comme vers la droite (ou bas).

Merci et a bientôt,

M.
Modifié par MiCH0L (07 Dec 2006 - 16:01)
certes, mais encore ?... serai tu, a demi mot, en train de dire qu'il n'y pas de solution ?

J'ai évidemment consulté cette partie de la FAQ, mais l'élément a centrer étant en général un DIV contenant le site, j'ai écarté les autres propositions et n'ai consulté que la 1ère proposition, qui pointe vers la page que j'avais cité dans mon premier post. Peut être ai-je été trop vite en besogne... Bon je vais tester, mais si quelqu'un connais la manière ultime de centrer un site au centre de la page, je suis preneur Smiley smile
MiCH0L a écrit :
si quelqu'un connais la manière ultime de centrer un site au centre de la page, je suis preneur Smiley smile 

<!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=UTF-8" />
	<title>Nouvelle page</title>
	<meta name="description" content="" />
	<link rel="stylesheet" type="text/css" media="screen" href="" />
	<style type="text/css">
		html, body {
			margin: 0; padding: 0;
			height: 100%;
		}
		#global-table {
			height: 100%;
		}
		#global-td {
			vertical-align: center;
		}
	</style>
</head>

<body>
<table id="global-table"><tr><td id="global-td">
	<p>Contenu centré.</p>
</td></tr></table>
</div>
</body>
</html>

Voili voilou.

Il doit être possible de faire la même chose avec body + une ou deux div, et le display: table | table-cell, mais il me semble que les hauteurs sont un peu délicates à gérer.
Hmm, je pense m'être mal exprimé : En fait, l'élément que je souhaite centrer en hauteur comme en largeur est un DIV de taille connue et fixe, qui contiendra le site en lui même.
MiCH0L a écrit :
Hmm, je pense m'être mal exprimé : En fait, l'élément que je souhaite centrer en hauteur comme en largeur est un DIV de taille connue et fixe, qui contiendra le site en lui même.

Et si tu remplaces le paragraphe (ici de taille inconnue) par une DIV de taille connue, c'est censé faire capoter toute l'entreprise ? Smiley hein
Smiley confuse et bien je test et... ça ne capote pas du tout, en fait, ça marche ! Bon, j'ai remplacé le 'center' du vertical-align par 'middle' pour être plus propre et j'imagine que la balise fermante </DIV> de ton code doit être une coquille, mais je dois avouer que tu es très très fort, ça doit être le turban sans doute...

En tout cas, merci, merci beaucoup !
Bien sur ! Smiley cligne

Hello Raphaël, et bravo pour ton livre, je l'ai reçu hier... a moi le bon web ! Smiley cligne Smiley biggrin

bonne journée a tous et a bientôt !

M.
Administrateur
MiCH0L a écrit :
Bien sur ! Smiley cligne

Merci pour l'intention, mais en fait, "[ RÉSOLU avec brio ]" ne va pas du tout faciliter les recherches futures Smiley decu
(merci pour les compliments)
Bonjour,

D'abord merci pour ce forum que je viens de découvrir, et qui me semble bien pertinent. Donc je viens d'arriver après avoir passé plusieurs jours à chercher la solution, sur x forums, avec x tests, et il semble que je trouve la solution ici. Smiley biggrin
Alors chapeau Raphael, et j'ai vu ici et là que les compliments pleuvaient à propos de tes interventions ! J'en ajoute plein !!! Smiley cligne

Bref, j'ai poussé le code pour un centrement horizontal, et je l'utiliserai pour mes sites constuits dans un tableau (je sais, c'est pas très W3C, mais en tant que graphiste minutieuse, je crois que je n'ai pas trop le choix…
Je viens de passer mon code au validateur W3C, c'est bon, mais jusqu'à ce soir je ne connaissais que le html 4, et point encore le XHTML (j'y viens…).

Donc je voudrais faire vérifier mon code par l'as des as qui semble-t-il, a trouvé la solution a un problème quasiment résolu nulle part ??!! Car tout le monde semble ignorer le problème des scrolls qui ne donnent pas accès aux parties gauche et haute dans une plus petite fenêtre, avec les marges négatives !??!! (sympa pour accéder aux menus…)

J'ai simplifié mon code en ne laissant que 3 tableaux ("global" pour le centage vertical, "contenu" pour la structure principale avec sa couleur de fond, et le tableau qui calle le texte, puis des spacers pour les callages ou à la place des images…)

Puis-je avoir la certitude que ce code est bon, suivi par tous les navigateurs mac et pc ??? (Car même si des choses comme IE et surtout pour mac, ne devraient pas exister, je ne peux pas me permettre que la mise en page soit détruite).
Si la réponse est oui, je crois que nous seront nombreux à sauter de joie !

Alors pardon pour ce long post, et voilà le code :


<!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=UTF-8" />
	<title>Nouvelle page</title>
	<style type="text/css">
	<!--
		html, body {
			margin: 0; padding: 0;
			height: 100%;
		}
		#global-table {
			height: 100%;
			width: 100%;
		}
		#global-td {
	vertical-align: middle;
	text-align: center;
		}
		#contenu-table {
			height: 500px;
			width: 720px;
			background-color:#1c1c1c;
		}
.phrase {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bold;
	color: #CCCCCC;
	text-align: center;
}
		-->
	</style>
</head>

<body>
<table id="global-table"><tr><td id="global-td">
 <table id="contenu-table">
            <tr>
              <td><img src="spacer.gif" alt="vide" width="720" height="220" /></td>
            </tr>
            <tr>
              <td class="phrase"><table width="720"  border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td><img src="spacer.gif" alt="vide" width="100" height="60" /></td>
                  <td class="phrase">Bienvenue sur mon test !</td>
                  <td><img src="spacer.gif" alt="vide" width="100" height="60" /></td>
                </tr>
              </table></td>
            </tr>
            <tr>
              <td><img src="spacer.gif" alt="vide" width="720" height="220" /></td>
            </tr>
      </table>
  </td>
  </tr>
</table>
</body>
</html>


Donc pour finir, penses-tu que je peux utiliser ça sans risque de me planter, en ne connaissant rien au xhtml, et surtout que je donne cette déclaration que dreamweaver ne propose pas (en tout cas dans ma version mx2004) ???

Smiley confused J'aurais peut-être dû ouvrir un sujet, mais je me suis dit qu'il valait peut-être mieux concentrer les recherches au même endroit…
J'ai pas vraiment pris le temps de me présenter, je suis un peu en urgence sur un boulot, et je tiens à ce que ce soit centré quelque soit la résolution, et que tout soit accessible dans le pire des cas !
J'ai quand même énormément cherché avant de poster ceci, partout, ici et ailleurs !!! Bon, je reviens me présenter très très vite !

Merci d'avance pour les réponses & conseils !
Cordialement,

Bismun
Modifié par bismun (12 Dec 2006 - 16:25)
hello,

pour commencer, je ne saurai que trop te conseiller d'éditer ton post et de mettre tes portions de code dans les balises idoines.

Et apparemment ce que tu propose ne se centre pas horizontalement sous firefox, du moins pas chez moi.

Je te propose donc le code suivant, adapté de la solution présenté par l'homme au turban (et d'un autre truc glané sur le web), qui semble fonctionner avec IE et FF.

<!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" />

<style type="text/css">
		html, body {

			margin: 0; padding: 0;
			text-align: center; /* pour corriger le bug de centrage IE */
			height: 100%;
			width: 100%;
			background-color: #FFFFFF;  /* couleur de fond blanc */


		}

		#global-table {

			height: 100%;
			width: 720px;      /* ici la largeur fixe de l'element a center */
			margin-left: auto;
			margin-right: auto;
			text-align: left; /* on rétablit l'alignement normal du texte */
		}

		#global-td {

			vertical-align: middle;

		}

	</style>
</head>

<body>
<table id="global-table"><tr><td id="global-td">

  ... bla bla bla bla bla bla bla bla bla bla bla ...

</td></tr></table>
</body>
</html>


en esperant que cela puisse te servir...
Modifié par MiCH0L (12 Dec 2006 - 02:13)
Merci Michol, pour ta réponse super rapide et ta solution top au point ! Effectivement, ce n'était plus centré chez FF depuis que je l'avais modifié pour le valider W3C et je n'avais pas revérifié, oups ! Smiley confused

Donc ça marche impec !!!
a écrit :
pour commencer, je ne saurai que trop te conseiller d'éditer ton post et de mettre tes portions de code dans les balises idoines.

>> Ça veut dire quoi éditer mon post ? Que j'aurais dû ouvrir un sujet à part ?… J'ai pensé qu'il vallait mieux ne pas éparpiller ce qui avait à voir ?!
Quant aux balises idoines, celles du forum pour placer le code j'imagine… merci, je viens de les découvrir. En fait je suis lectrice de forums depuis un petit moment, mais "posteuse" novice !

Sur ce, voilà de quoi bien commencer la journée, avec un code tout propre et tout bien !!! Smiley biggrin
Merci, et bonne journée à tous !

Bismun
a écrit :
Ça veut dire quoi éditer mon post ? Que j'aurais dû ouvrir un sujet à part ?… J'ai pensé qu'il vallait mieux ne pas éparpiller ce qui avait à voir ?!

En fait, "editer ton post" signfie simplement qu'en cliquant sur le bouton EDITER placé en haut a droite de ton post, tu peux modifier ton message, pour le corriger par exemple si tu t'es aperçu d'une erreur, ou pour n'importe quel autre raison qui necessite une modification.

a écrit :
Quant aux balises idoines, celles du forum pour placer le code j'imagine… merci, je viens de les découvrir. En fait je suis lectrice de forums depuis un petit moment, mais "posteuse" novice !

voila, c'est exactement ça. tu as réussi avec la balise "citer", tu n'as plus qu'a faire de même avec ton code, en editant ton post. Smiley cligne

Bonne journée !
Et bien merci encore ! J'ai suivi tes conseils !
Sur ce, j'attaque mes nombreuses pages à recentrer avec un bon petit code… hum, quelle éclate en perspective ! Mais le resultat est quand même tellement mieux quand c'est centré de partout !

Bonne journée à toi aussi !
Sujet clos
Aller à