18073 sujets

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

[RESOLU] Centrage d'un bloc sans connaitre les width ?

Bonjour
je viens de relire le très bon tutoriel sur le centrage des élements.

Pour ce qui est du centrage horizontal, je comprends les techniques proposées, mais elles supposent qu'on connaisse a l'avance la taille de l'élément à centrer (le conteneur ou un bloc enfant ...).

J'aimerai rester dans un design fluide (dans le cadre des galeries d'un peintre pour tirer parti de l'augmentation de l'espace disponible en largeur avec l'augmentation des résolutions d'écran.

supposons que je prenne le body à 100%

que je construise un conteneur qui a des marges en % égale de chaque cotés par exemple 5% à gauche, 5% à droite, à priori il va etre centré et avec une taille élastique selon les résolutions, donc jusque là c'est OK.

La question c'est comment centrer une image ou une ligne d'image dans ce conteneur, sachant qu'aucune de mes images n'est standardisée ?

Est-ce qu'il faut récuperer leur width via un script ? et l'inserer (?) dans la feuille de style ?

ou est-ce que le width qui apparait dans la balise html <img> permet de définir ce parametre sans avoir a le faire en style et du coup de pouvoir utiliser les auto sans se poser de question pour centrer l'image dans le contenuer initial ?

Je ne sais pas si j'ai été très claire, je donne un lien dès que j'ai construit une page Smiley langue

http://60gp.ovh.net/~sirl/essaiscss.html
Modifié par Madrilene (16 Oct 2005 - 14:34)
Bonjour !

si je ne m'abuse, les balises <img> sont de type inline, et il suffit donc d'appliquer 
text-align: center
au bloc qui les contient pour les centrer.
Ah oui merci,
zut j'étais restée sur l'idée que <div align="center"> était dépréciée sans pensée au caractere en ligne des images, du coup j'ai écrasé une puce avec un marteau Smiley cligne
(mais du coup j'ai fait quelques progrès en php...)
Certes Sopo, mais text-align permet le centrage horizontal. Pour le centrage vertical, si on ne connait pas la taille de l'image je ne sais pas comment faire, le tuto "Centrer les éléments ou un site web en CSS" explique que l'on peut utiliser un display=tab-cell, plus la propriété vertical-align, mais cela ne marche pas sous IE.

Pour ma part, je n'arrive pas à faire fonctionner cette soluce sous firefox, non plus

Vous pouvez avoir une idée du problème en regardant sur mon site de test .... http://www.drillaudweb.info (page sur la crète)

Je suis preneur d'une solution qui marche dans tous les cas
en fait ma soluce php+marge négative suppose que vous ayez une base de donnée où sont sockées vos images.

Pour ma part n'étant pas programmatrice, j'utilise le très bon logiciel open source "spip".
http://www.spip.net

Donc ce que je vais coller ici contient du php mais aussi des "briques" de langage spip qui permette d'éviter d'écrire toutes les instructions en php, je vous les commente en texte ce qui permets surement de trouver son equivalent en php pur (ce que fais spip après moulinette)

<BOUCLE_tailleimage(DOCUMENTS){id_article=1}{extension==jpg|png|gif}{mode=document}>

commentaire = ordre a spip d'aller chercher dans la base de donner le document lié à l'article dont l'id=1


<?php $largeur="#LARGEUR" ;
$hauteur="#HAUTEUR" ;
$largeurdiv=-"#LARGEUR"/2 ;
$hauteurdiv=-"#HAUTEUR"/2 ?>

commentaire = ici j'associe en php une variable à chaque valeur sortie de la base par la boucle spip, et je construis 2 variables $largeurdiv et $hauteurdiv qui ont pour respectivement valeur la moitiée de la largeur de mon image et la moitié de la hauteur de mon image 

</BOUCLE_tailleimage>



commentaire = ensuite j'injecte les variables dans les styles aux endroits concernés

<style type="text/css">
<!--
/* pour corriger le bug de centrage IE */
body {margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; width: 100%; text-align: center}

/* on rétablit l'alignement normal du texte */
.conteneur {background:  #C0C0C0; margin-left: 3%; margin-right: 3%; text-align: left; width: 100%}


img {position:absolute; left: 50%; top: 50%; width:<?php echo $largeur ;?>; height:<?php echo $hauteur ;?>; margin-top: <?php echo $hauteurdiv ;?>; /* moitié de la hauteur */
     margin-left: <?php echo $largeurdiv ;?>; /* moitié de la largeur */}

/* Fin de la section de style généré par WebExpert le 12/10/2005 10:29:53 */
-->
</style>


</head>

commentaire = dans le corps de la page je demande a spip d'afficher le document, le tout dans le div conteneur, sachant que spip inserera automatiquement les tag d'image width et heidth
<body>
<div class="conteneur">

<BOUCLE_image(DOCUMENTS){id_article=1}{extension==jpg|png|gif}{mode=document}>
[(#EMBED_DOCUMENT)]
</BOUCLE_image>
</div>


Dernier point connaitre la hauteur et la largeur de l'écran, j'avais l'impression d'avoir lu il y a quelques temps qu'on pouvait avoir direct ces variables en php, mais les articles que je lis disent qu'il faut un java script mais en tout cas c'est possible d'obtenir 2 variables screen height et screen width et de les réinjecter dans du php...

En espérant que ca t'aidera... Smiley smile
Modifié par Madrilene (16 Oct 2005 - 14:36)
oups, mes excuses
qu'est ce que je dois faire mieux ou pas faire du tout ?
dissocier le php et le html ?
mettre une balise code quand y en a (quel qu'il soit spip ou php ?)

ps : j'ai un probleme ,je n'arrive pas a savoir ou aller pour m'identifier, sans avoir a poster de message, je dois l'avoir ne face des yeux mais je ne vois pas les champs ... Smiley biggol
Administrateur
a écrit :
mettre une balise code quand y en a

Oui, tout simplement Smiley smile

a écrit :
j'ai un probleme ,je n'arrive pas a savoir ou aller pour m'identifier

Je ne suis pas sûr d'avoir compris. Tu parles bien de la case en bas de la page d'accueil du forum ? Celle qui demande si tu es identifié ?
Modifié par Raphael (16 Oct 2005 - 14:03)
oui !!!!!

mais comme je ne passais pas par la page d'accueil, mais par un répondre via mail ben ca m'était passé sous le nez Smiley langue
bon cette fois ci je vais pouvoir faire les modifs !!!
Madrilene,

J'ai pris ta soluce (c'est à dire faire du code) mais coté client. J'ai donc ajouté 2 lignes de javascript :

var hauteur = (400-document.images[0].height)/2;
big_photo.style.marginTop = hauteur + 'px';


Document.images[0].height permet de recupérer la hauteur de la première balise IMG du code XHTML
xx.style.marginTop de setter la marge de la photo

Mon code est dispo sur mon site http://www.drillaudweb.info

Le seul problème, dans mon contexte, est que je dois précharger mes images. comme si cette méthode ne fonctionnait que si les images sont dans le cache.

Mais bon, on a connu pire Smiley smile
Madrilene,

J'ai pris ta soluce (c'est à dire faire du code) mais coté client. J'ai donc ajouté 2 lignes de javascript :

var hauteur = (400-document.images[0].height)/2;
big_photo.style.marginTop = hauteur + 'px';


Document.images[0].height permet de recupérer la hauteur de la première balise IMG du code XHTML
xx.style.marginTop de setter la marge de la photo

Mon code est dispo sur mon site http://www.drillaudweb.info

Le seul problème, dans mon contexte, est que je dois précharger mes images. comme si cette méthode ne fonctionnait que si les images sont dans le cache.

Mais bon, on a connu pire Smiley smile
Sujet clos
Aller à