Centrer un objet dans un élément CSS

Centrer un objet dans un élément CSS - HTML/CSS - Programmation

Marsh Posté le 22-04-2007 à 15:58:03    

Salut à tous !
 
Réalisant actuellement un mini-site pour un pote photographe, je souhaite inclure dans sa page consacrée à la photo un objet type flash. Le code est inclu dans la page html et l'objet apparait sans souci dans l'élément en question.
 
Problème, je souhaiterais qu'il soit centré dans cet élément. Voici le code que j'utilise pour l'élément en question :
 

Code :
  1. #corps
  2. {
  3.    text-align:center;
  4.    height: 450px;
  5.    margin-left: 140px;
  6.    margin-bottom: 20px;
  7.    padding: 5px;
  8.  
  9.    color: #B3B3B3;
  10.    background-color: #4B4B4B;
  11.    background-image: url("images/motif.gif" );
  12.    background-repeat: repeat-x;
  13.  
  14.    border: 2px solid black;
  15. }
  16. #corps h1
  17. {
  18.    color: #B3B3B3;
  19.    text-align: center;
  20.    font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
  21. }
  22. #corps h2
  23. {
  24.    height: 30px;
  25.    background-image: url("images/titre.png" );
  26.    background-repeat: no-repeat;
  27.  
  28.    padding-left: 30px;
  29.    color: #B3B3B3;
  30.    text-align: center;
  31. }


 
J'ai recopié l'ensemble du code concernant l'élément. Cependant ni H1 ni H2 ne concernent le code de l'élément dans la page html. Comme vous pouvez le voir j'ai inclu du "text-align" center dans le code mais ça n'a aucun effet sur l'élément.
 
Autre question, je souhaiterais que la hauteur du bloc puisse varier selon le contenu. Dans certaines pages il y aura un objet comme indiqué au-dessus, dans d'autres ce sera sans doute du texte bête et méchant.  
 
La hauteur que j'ai fixée dans le code ne servant pour l'instant qu'à être une hauteur maximale et à éviter que l'objet dépasse, mais dans certaines pages où il n'y a quasiment aucune information, ça sert carrément à rien et c'est surtout moche !
 
Merci d'avance pour toute réponse !

Reply

Marsh Posté le 22-04-2007 à 15:58:03   

Reply

Marsh Posté le 22-04-2007 à 16:17:10    

La solution propre pour centrer un élément est normalement du lui mettre les marges gauche et droite à auto. Donc

 

margin-right:auto;
margin-left:auto;

 

Mais IE n'en voudra pas et ça se règle normalement avec un text-align:centeur; dans le conteneur. Donc si ça ne fonctionne pas je pense qu'il faudrait ajouter à ton flash un conteneur supplémentaire, style div, de la même taille que ton flash et le centrer.

 

Concernant ton problème de hauteur tu as les propriété min-height et max-height mais pas sûr que ce soit complètement standard et pas sur que IE y comprenne. Donc je vois pas vraiment de solution comme ça...

 

Quoique logiquement ton conteneur doit prendre la taille de son contenu en l'absence de précision de sa hauteur. Sauf si des éléments sortent du flux standard. Auquel cas tu peux placer quelque chose en bas de tout ton contenue style <hr /> avec les propriétés suivantes :

 

clear:both;
visibility:hidden;

 

ça devrait jouer.

Message cité 1 fois
Message édité par dwogsi le 22-04-2007 à 16:17:49

---------------
-- Debian -- Le système d'exploitation universel | Le gras c'est la vie! | /(bb|[^b]{2})/
Reply

Marsh Posté le 22-04-2007 à 16:26:55    

Effectivement la solution d'un nouveau conteneur me paraissait la plus appropriée, même si je n'aime pas trop diviser à outrance les conteneurs.
 
Pour IE, j'ai pu testé mon site sur un IE 5.0 et ça devient carrément illisible étant donné qu'il ne gère pas du tout certaines règles de CSS.
 
Sinon il me reste la possibilité d'imposer des résolutions aux utilisateurs dans la page index.html mais cette solution me parait un peu désuète.

Reply

Marsh Posté le 22-04-2007 à 16:44:53    

Bon, pour la hauteur auto c'est réglé ! Un paramètre que j'avais oublié d'enlever il y a un moment et sur lequel je n'avais pas bloqué en relisant mon code.
 
Pour le centrage de mon objet, je suis un peu paumé, j'ai créé une nouvelle classe que j'ai intitulé anim et dans laquelle je n'ai fait qu'intégrer mon objet.
 
Dans mon fichier CSS j'ai alors intégré le code suivant :
 

Code :
  1. .element_anim
  2. {
  3.    text-align: center
  4. }


 
à la suite du div #corps.
 
Ca ne résout pas pour autant mon problème, à quel moment dois-je intégrer ce code, que dois-je intégrer ?

Reply

Marsh Posté le 22-04-2007 à 16:49:17    

C'est dans le conteneur de element_anim que tu dois mettre le text-align:center; et dans .element_anim tu met :
margin-left:auto;
margin-right:auto;

 

et normalement c'est centré. A noter que .element_anim doit avoir des dimensions, sinon pas de centrage.

Message cité 1 fois
Message édité par dwogsi le 23-04-2007 à 08:14:24

---------------
-- Debian -- Le système d'exploitation universel | Le gras c'est la vie! | /(bb|[^b]{2})/
Reply

Marsh Posté le 22-04-2007 à 17:14:59    

dwogsi a écrit :

Concernant ton problème de hauteur tu as les propriété min-height et max-height mais pas sûr que ce soit complètement standard et pas sur que IE y comprenne. Donc je vois pas vraiment de solution comme ça...


IE7 comprend les min et max-height. C'est IE6 qui les comprend pas.


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 23-04-2007 à 10:26:55    

dwogsi a écrit :

C'est dans le conteneur de element_anim que tu dois mettre le text-align:center; et dans .element_anim tu met :
margin-left:auto;
margin-right:auto;
 
et normalement c'est centré. A noter que .element_anim doit avoir des dimensions, sinon pas de centrage.


 
Voici le code que j'ai écrit par rapport à ce que tu m'as conseillé :
 

Code :
  1. #anim
  2. {
  3. text-align: center;
  4. }
  5. .element_anim
  6. {
  7. margin_left: auto;
  8. margin_right: auto;
  9. }


 
Or ça ne passe toujours pas, mon objet flash est collé à gauche du cadre susnommé corps.
 
Autre question, je cherche actuellement des solutions pour publier des photos facilement sur un site en html/css (je ne connais pas assez le php et je n'ai pas le temps pour un site en flash).
 
Dans un premier temps j'ai utilisé le code CSS qui permet d'agrandir des vignettes mais je ne trouve pas ça très esthétique (là aussi pas assez de temps pour bidouiller le code en profondeur), puis dans un 2nd temps je me suis rabattu sur les solutions flash dispo sur le net (Dewslider par exemple).
Existe-t-il une autre façon de publier facilement son book de photos sur son propre site web ?
 
Merci & a+

Reply

Marsh Posté le 23-04-2007 à 16:53:23    

tu as un screenshot de ton probleme qu'on ait une idée plus précise du bins ?


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 23-04-2007 à 17:51:21    

Ouaip, j'ai mis en ligne la page en question :
 
http://matrig.free.fr/TEST/cat2.html.
 
Surtout fais pas attention au design global du site, il est encore en cours de peaufinage. Celui-ci n'est destiné qu'à estimer la place des éléments.
 
N'hésite pas aussi à me dire ce qui va / ne va pas chez toi et quel navigateur tu utilises.
 
Merci pour ton aide !

Reply

Marsh Posté le 23-04-2007 à 21:52:09    

Je suis sous IE6
http://www.imageshotel.org/thumbs/dartyduck/cos02.jpg http://www.imageshotel.org/thumbs/dartyduck/cos01.jpg


Message édité par dartyduck le 23-04-2007 à 21:52:46

---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 23-04-2007 à 21:52:09   

Reply

Marsh Posté le 24-04-2007 à 00:49:16    

Et comme tu peux le constater l'objet n'est pas au centre de mon cadre. C'est là tout mon problème !  :D  
 
En tous cas je te remercie de m'aider ! je ne suis pas du tout webmaster ni designer c'est mon premier vrai site et j'aborde pas mal de petits problèmes au fur et à mesure, c'est sympa !

Reply

Marsh Posté le 24-04-2007 à 09:42:46    

ben moi quand je regarde ton code html et ton code css, je me rends compte que tu n'as pas défini les propriétés css de ton anim. je ne vois pas ".anim" dans "styles.css"...
alors mets le et essaye de lui appliquer un margin-left:auto; et margin-right:auto;


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 24-04-2007 à 10:55:31    

Oui j'avais supprimé cette partie du code après l'avoir testé. Je vais la remettre dès que possible.

Reply

Marsh Posté le 25-04-2007 à 11:41:08    

Je l'ai uploadé ce matin mais je m'aperçois là que je n'ai pas changé le nom de fichier donc ça sera en ligne ce soir.
 
Sinon j'ai une question existentielle, qu'apportera le PHP à mon site ? Là je dispose d'un peu de temps pour m'y former et je me rends également compte qu'une bonne galerie photo est généralement faite en PHP.
 
Cependant s'il n'y a pas d'avantage concret, n'ai-je pas intérêt à rester en dehors de ce système ?

Reply

Marsh Posté le 25-04-2007 à 16:39:15    

Je ne connais pas ton site mais l'intérêt est souvent d'une part d'automatiser les tâches récurrentes (ajout de photos dans une galerie par exemple) et d'autre part de proposer aux visiteurs d'interagir avec le site (commentaires, forums par exemple).

 

Pour détailler un peu mon exemple :
Si tu veux ajouter une photo à une galerie non dynamique, donc n'utilisant pas de langage côté serveur tel que php, tu dois créer une miniature, uploader l'originale et la miniature, insérer le code pour afficher les deux, insérer le code des titres, des liens, etc... Avec du PHP tout cela peu être résumé au seul remplissage d'un formulaire ayant seulement deux champs. Toutes les tâches sont ensuite exécutées automatiquement.

 

Donc oui il y a de réels avantages à utiliser du PHP. Cela dit, ne te risque pas à vouloir aller plus vite que la musique! Un bon apprentissage est nécessaire et mieux vaut apprendre avec un projet test plutôt qu'avec un projet qui sera finalement mis en ligne. Les premiers essais que j'avais fait avec PHP c'était pour un petit site perso. Et bien, faille de sécurité oblige, je me suis pris un gros deface dans les dents. Pourtant mon site était pas vraiment connu. J'ai retenu la leçon!


Message édité par dwogsi le 25-04-2007 à 16:40:13

---------------
-- Debian -- Le système d'exploitation universel | Le gras c'est la vie! | /(bb|[^b]{2})/
Reply

Marsh Posté le 25-04-2007 à 17:41:02    

Je te remercie pour ta réponse précise et encourageante ! Il est vrai que je souhaiterais favoriser le design de ce site plutôt que son interaction, d'autant plus que j'ai récupéré une solution FLASH de publication de photos plutôt facile à base d'XML.
 
J'ai potassé à mon boulot un bouquin sur le PHP et j'ai repéré cette possibilité d'upload facile. C'est très alléchant mais question temps et surtout niveau support c'est un peu risqué. Ce n'est pas mon boulot, je fais ça pour rendre service et par plaisir envers le langage HTML, mais je n'ai pas l'intention de jouer les SAV tous les jours.
 
Dernière question, purement subsidiaire, existe-t-il un moyen de protection efficace contre le "vol" des photos ? Là je compte publier les photos au maximum en 640*480, qualité JPEG suffisante pour le web, mais mon ami aurait préféré pouvoir montrer certaines photos dans toute leur splendeur, or il me semble qu'il n'existe pas de solution réellement efficace pour les protéger.

Reply

Marsh Posté le 25-04-2007 à 22:39:03    

Qu'est ce que tu entends par protéger?

 

Protéger contre le téléchargement/enregistrement? Impossible! Tout ce qui est transmis au client peut être sauvegardé par celui-ci. Quelqu'un sur le forum avait émit l'idée de tracer chacun des pixels de l'image avec un div pour réellement protéger les images contre la sauvegarde mais en plus d'être stupide, cette solution n'est pas efficace puisqu'une capture d'écran suffira pour copier l'image.

 

Si tu parle de protéger les images de façon à éviter que quelqun fasse le lien sur ton serveur au lieu de les héberger il existe quelques solutions qui consiste à vérifier le référent. Ce n'est pas réellement efficace et à utiliser avec prudence.

 

Les seules solutions sont :
- Filigrane
- Petits formats

 

Edit :
Je viens de voir ça...

COS_Thyrrus a écrit :

Voici le code que j'ai écrit par rapport à ce que tu m'as conseillé :

 
Code :
  1. #anim
  2. {
  3. text-align: center;
  4. }
  5. .element_anim
  6. {
  7. margin_left: auto;
  8. margin_right: auto;
  9. }



Ce ne sont pas de _ mais des -
ce qui donne donc :

Code :
  1. #anim
  2. {
  3. text-align: center;
  4. }
  5. .element_anim
  6. {
  7. margin-left: auto;
  8. margin-right: auto;
  9. }



Message édité par dwogsi le 25-04-2007 à 22:44:57

---------------
-- Debian -- Le système d'exploitation universel | Le gras c'est la vie! | /(bb|[^b]{2})/
Reply

Marsh Posté le 26-04-2007 à 17:13:16    

Salut à tous !
 
J'ai retesté ce que m'a donné dwogsi et je ne parviens toujours pas à centrer mon flash.
 
Mais j'ai également voulu centrer ma "page", donc je me suis attaqué au body et il se trouve que je n'arrive pas à le centrer lui non plus.
 
Voilà le code qui le concerne :
 

Code :
  1. body
  2. {
  3.    width: 760px;
  4.    margin: auto;
  5.    margin-top: 20px;
  6.    margin-bottom: 20px;
  7.    background-image: url("images/background.png" );
  8. }


 
Finalement je n'arrive à rien centrer ! Au secours !

Reply

Marsh Posté le 26-04-2007 à 18:08:44    

Bon, centrage horizontal réussi pour ce fichu élément FLASH. Voici le code, attention ça fait mal :
 

Code :
  1. .anim
  2. {
  3.    text-align: center;
  4.    margin: auto;
  5. }


 
En clair, le div class n'avait qu'à être nommé ainsi dans le code CSS, sans nommer la class avec un # comme ça m'avait été recommandé sur un autre site.
 
Maintenant il me reste à trouver une bonne solution de publication d'image.

Reply

Marsh Posté le 27-04-2007 à 01:55:25    

Oui enfin faut pas tout confondre! Utiliser un # dans ta CSS c'est pour un ID et non pas une classe.


---------------
-- Debian -- Le système d'exploitation universel | Le gras c'est la vie! | /(bb|[^b]{2})/
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed