(resolu)Spécifier une taille max (100%) ou get screen res. !

Bonjour

C'est toujours le même problème : Centrer un élément. Là j'ai de la chance, mon client veut carrément faire *pile* ça, mais seulement ça : La page est simplissime : Il veut une page au background fixe (un élément graphique en bas à droite) et au *milieu* XY de cette page, une liste d'items (des titres de chansons, en texte).

Ca fait donc une page ultra-simple :
# Un fond
# Un titre
# une liste centrée qui ne dépassera pas 11 items

------------------
|                |
|      titre     |
|     -item1     |
|     -item2     |
|     -item3     |
|                |
------------------

point final. L'idée, c'est que quand il rajoute un item à sa liste, celle-ci reste centrée.
Heureusement que ledit client n'est pas là, il ne comprendrait pas de me voir m'arracher les cheveux sur un truc aussi basique pour lui : Le centrage de sa *$£=! de liste sur l'axe vertical de sa *$£=! de page

J'ai expérimenté une solution assez douce, que j'ai trouvée ici-même, mais elle utilise des dimentions fixes, connues. Moi, j'ai besoin de remplir l'écran, idéalement d'un PDA (mm, plus tard. Disons juste que j'aimerais bien que cette page, puisqu'elle est simple, puisse être lue sur des écrans très différents) et 100% ne fontionne pas... Même horizontalement !?!

Ce que je trouverai FABULEUX, c'est un script (JS, j'imagine. Je me souviens d'une classe AWT qui fait ça aussi, mais ça m'ennuierai d'implementer JAVA d'autant qu'il n'est pas forcément dispo partout) qui me permettrait de récupérer carrément la VRAIES tailles en X et Y de l'écran courant, et de bosser mon code en fonction. Personne n'a ça dans ses cartons ?

Merci et Bienvenue à moi


Philippe, Paris
Modifié par xaccrocheur (02 Dec 2006 - 16:30)

Sur cette page j'ai trouvé ça mais je ne parviens pas à l'utiliser :

<script language='javascript'>
function sendScreenInfo()
{
FormID.scrWidth.value = window.screen.width;
FormID.scrHeight.value = window.screen.height;
}
</script>

Comment appelleriez-vous cette fonction pour qu'elle me retourne séparément window.screen.width, et window.screen.height ? J'ai tenté pas mal de trucs, dont

document.write("window.screen.width")

mais rien n'est interprété... Je me disais aussi, ça peut pas être aussi magique que ça Heeelp ! Rha, j'ai vraiment décidé de règler le PB cette fois, et de ne pas me contenter de vilains hacks HTML
Modifié par xaccrocheur (02 Dec 2006 - 16:12)

xaccrocheur a écrit :
Ce que je trouverai FABULEUX, c'est un script (JS, j'imagine. Je me souviens d'une classe AWT qui fait ça aussi, mais ça m'ennuierai d'implementer JAVA d'autant qu'il n'est pas forcément dispo partout) qui me permettrait de récupérer carrément la VRAIES tailles en X et Y de l'écran courant, et de bosser mon code en fonction. Personne n'a ça dans ses cartons ?

Quand bien même tu arriverais à récupérer la hauteur non pas de l'écran, mais de la zone d'affichage de page du navigateur (bon courage... d'après ce que j'ai lu, aucune solution vraiment fiable dans ce domaine... mais je suis pas un expert), comment peux-tu savoir à l'avance la hauteur que prendra ton bloc titre+liste ? Le texte a une hauteur figée en pixels ? Si c'est le cas :
1 - çapucépabien (et les malvoyants qui veulent augmenter la taille du texte, ils vont sur un autre site ?) ;
2 - cépapossible (tous les navigateurs, nativement ou avec certaines préférences, permettent de passer outre le choix du webmaster pour ce qui est de la taille du texte).
Pour finir la digression sur la taille du texte, cf. :
http://css.alsacreations.com/Tutoriels-et-articles-divers/gerer-la-taille-du-texte-avec-les-em

Pour revenir à nos moutons de centrage vertical :
1 - en javascript, c'est se prendre la tête pour rien, et en plus c'est pas trop fiable (et puis javascript sur les « protable devices », c'est pas garanti non plus...) ;
2 - en HTML bien comme il faut (une simple div avec un titre h1 et une liste), c'est possible grâce à display: table-cell, mais pas implémenté dans IE6 (sais plus trop pour IE7) ;
3 - en HTML des terroirs, on peut faire ça tout bêtement avec un tableau à une cellule.

Conclusion : en l'état actuel de l'implémentation des spécifications CSS, le tableau à une cellule (parfaitement accessible, si si !) est encore la meilleure solution.


D'autres questions ?

xaccrocheur a écrit :
mais rien n'est interprété... Je me disais aussi, ça peut pas être aussi magique que ça Heeelp ! Rha, j'ai vraiment décidé de règler le PB cette fois, et de ne pas me contenter de vilains hacks HTML

Un gentil tableau à une cellule en HTML vaut mieux qu'un vilain hack Javascript.
Mais je veux bien qu'on me démontre le contraire, je suis ouvert à la controverse.

mpop a écrit :

Mais je veux bien qu'on me démontre le contraire, je suis ouvert à la controverse.

Heu... ... Là tu arrives deux ans, et un jour , trop tard AMHA.

Il faut d'abord déclarer

UserHeight = window.screen.height
UserWidth = window.screen.width

Puis appeler

UserWidth = UserWidth
UserHeight = UserHeight

Puis dans le source HTML :

height="document.write(UserHeight);"

xaccrocheur a écrit :
Il faut d'abord déclarer

UserHeight = window.screen.height
UserWidth = window.screen.width

Puis appeler

UserWidth = UserWidth
UserHeight = UserHeight

Puis dans le source HTML :

height="document.write(UserHeight);"

Tu ne nous a pas dit ce que tu pensais des solutions non-javascript proposées. Un petit commentaire ?

bonsoir ,


1) "qu'on t'reverse" ..
il m'est avis qu'il n'a pas reussi a mettre en application les pistes proposés. (je me trompe peut-etre )

Je pense que ça a avoir avec:

a écrit :
(mm, plus tard. Disons juste que j'aimerais bien que cette page, puisqu'elle est simple, puisse être lue sur des écrans très différents) et 100% ne fontionne pas... Même horizontalement !?!

Peut-etre avait t-il deja essayer le tableau ? , mais omis de dimensionné les parents.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>centrage horizontale/verticale , efficace et sans prise de tête !</title><style type='text/css'>html , body , table , td {
border-collapse:collapse;
margin:0;
padding:0;
height:100%;
width:100%;
text-align:center;
}</style>
</head><body><table>
<tr>
<td>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</td>
</tr>
</table>
</body></html>

(je me suis deja prononcé sur le forum pour l'usage de tableau une cellule dans ce cas , et un post sur ce même forum faisait allusion a l'une de mes pages "test" il y a plusieurs mois deja . http://gcyrillus.free.fr/trucs_css/centrons-un-site-sans-marges-negatives.html )

2) controverse .
J'aime pas les marges negatives , elles ont un gros defaut sur les techniques de centrages ... une partie du contenu peut-etre ejecter hors de la fenetre sans qu'il soit accessible visuellement.

La tecnique du position relative qui fait descendre le conteneur de 50% et remonter de 50% le contenu , disparait lui aussi dans IE en mode quirk ou avec les doctype transitionnal ... un petit plus par rapports aux marges negatives.

La derniere technique , a la mords moi ... Fonctionne et n'as pas d'autre interet que de comprendre/remarquer les differences de comportements des navigateurs ... d'ou , en final :

y'a pas de controverse intelligente a mon avis .l'usage d'un tableau une cellule pour ce cas est la solution la plus solide .

une page a la mords moi :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>HTML 4.01 Transitional</title><style type='text/css'>
html , body  , #pepin  {
	height:100%; /* regles habituelles  dimension des parents */
	width:100%;  /* qui servent de reference aux enfants */
	text-align:center;
	background:ivory;
}
#pomme {
	height:100%;
	display:table;/ * IE est out ! */
	margin:auto;

}

#pepin {
	display:inline-block; /* IE est hype !! */
	width:2px;
	vertical-align:middle;
	background:brown;
}
#croque {
	display:inline;
	zoom:1;   /* IE est Apy (ape ....il singe,  quoi ! ) */
	vertical-align:middle;
}
#pomme > #croque , #pomme > #pepin {
	display:table-cell;/* ff , ne perturbons pas IE , des fois qu'il fasse la grimace */

}
.bouchee {background:yellow;border:2px solid green}
.gorgee {background:lightpink;border:2px solid #999;border-top:0 none;}</style>
<script type='text/javascript'>/* le serpent peut-etre ?*/</script></head><body>
<div id="pomme">
<span id="pepin"></span>
<div id="croque">
<h1 class="bouchee">la premiere bouchée</h1>
<p  class="bouchee">une autre</p>
<p  class="bouchee">et une autre</p>
<h2 class="gorgee">Une gorgée</h2>
<h3 class="bouchee">la quatriéme bouchée</h3>
<p  class="bouchee">et encore une autre</p>
<p  class="bouchee">une autre , qui perd de sa saveur nouvelle</p>
<h5 class="gorgee">Une autre gorgée</h5>
<p  class="gorgee">glou glou , gloup .</p>
<h6 class="fin" >p<span title="burp !">'l</span>us faim !</h6>
</div>
</div></body></html>

++


<edit> et celui qui dit que ça marche pas dans IE 5 , ils donne une largeur a #croque .... ou dans un autre navigateur .... il copie 100 fois ,
je n'eradiquerais pas les tableau à tout prix !
</>
Modifié par gcyrillus (02 Dec 2006 - 23:39)