Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2917 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Centrer un objet dans un élément CSS

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Centrer un objet dans un élément CSS

n°1546592
COS_Thyrru​s
Le Diable Rit Avec Nous
Posté le 22-04-2007 à 15:58:03  profilanswer
 

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 !

mood
Publicité
Posté le 22-04-2007 à 15:58:03  profilanswer
 

n°1546602
dwogsi
Défaillance cérébrale...
Posté le 22-04-2007 à 16:17:10  profilanswer
 

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})/
n°1546605
COS_Thyrru​s
Le Diable Rit Avec Nous
Posté le 22-04-2007 à 16:26:55  profilanswer
 

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.

n°1546610
COS_Thyrru​s
Le Diable Rit Avec Nous
Posté le 22-04-2007 à 16:44:53  profilanswer
 

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 ?

n°1546611
dwogsi
Défaillance cérébrale...
Posté le 22-04-2007 à 16:49:17  profilanswer
 

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})/
n°1546625
dartyduck
n00b AttitudE
Posté le 22-04-2007 à 17:14:59  profilanswer
 

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
n°1546891
COS_Thyrru​s
Le Diable Rit Avec Nous
Posté le 23-04-2007 à 10:26:55  profilanswer
 

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+

n°1547379
dartyduck
n00b AttitudE
Posté le 23-04-2007 à 16:53:23  profilanswer
 

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
n°1547467
COS_Thyrru​s
Le Diable Rit Avec Nous
Posté le 23-04-2007 à 17:51:21  profilanswer
 

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 !

n°1547671
dartyduck
n00b AttitudE
Posté le 23-04-2007 à 21:52:09  profilanswer
 

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
mood
Publicité
Posté le 23-04-2007 à 21:52:09  profilanswer
 

n°1547774
COS_Thyrru​s
Le Diable Rit Avec Nous
Posté le 24-04-2007 à 00:49:16  profilanswer
 

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 !

n°1547816
dartyduck
n00b AttitudE
Posté le 24-04-2007 à 09:42:46  profilanswer
 

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
n°1547898
COS_Thyrru​s
Le Diable Rit Avec Nous
Posté le 24-04-2007 à 10:55:31  profilanswer
 

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

n°1548579
COS_Thyrru​s
Le Diable Rit Avec Nous
Posté le 25-04-2007 à 11:41:08  profilanswer
 

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 ?

n°1548725
dwogsi
Défaillance cérébrale...
Posté le 25-04-2007 à 16:39:15  profilanswer
 

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})/
n°1548766
COS_Thyrru​s
Le Diable Rit Avec Nous
Posté le 25-04-2007 à 17:41:02  profilanswer
 

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.

n°1548896
dwogsi
Défaillance cérébrale...
Posté le 25-04-2007 à 22:39:03  profilanswer
 

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})/
n°1550165
COS_Thyrru​s
Le Diable Rit Avec Nous
Posté le 26-04-2007 à 17:13:16  profilanswer
 

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 !

n°1550214
COS_Thyrru​s
Le Diable Rit Avec Nous
Posté le 26-04-2007 à 18:08:44  profilanswer
 

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.

n°1550329
dwogsi
Défaillance cérébrale...
Posté le 27-04-2007 à 01:55:25  profilanswer
 

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})/

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Centrer un objet dans un élément CSS

 

Sujets relatifs
[Ajax] Transport d'objet ?objet ole et path associé
JavaScript - Les attributs d'un élément de formulaireDécouper une image avec CSS
[javascript] savoir si une variable ou un objet existe déjàNom d'objet dynamique
problème de casting objet[CSS] Image de fond se repetant (repeat-y)
Centrer un site internet [RESOLU]CSS, 1px de différence à trouver...
Plus de sujets relatifs à : Centrer un objet dans un élément CSS


Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)