IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Centrage de texte avec une image en arriere plan


Sujet :

HTML

  1. #1
    Rédacteur
    Avatar de MasterOfChakhaL
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2004
    Messages
    2 147
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2004
    Messages : 2 147
    Points : 3 264
    Points
    3 264
    Par défaut Centrage de texte avec une image en arriere plan
    bonjour le forum

    Mon problème m'avait l'air assez simple mais il se trouve que je n'en ai pas trouvé la solution...

    J'ai une balise div qui me sert à écrire le titre de ma page de manière centrée. Jusque là pas de souci...

    Le hic, c'est que je voudrais mettre un logo collé à gauche sans que cela ne change la position du texte.

    J'ai donc défini la propriété css background-image de mon div pour y définir mon logo avec background-repeat : no-repeat.
    Le problème, c'est que si le texte est trop court, mon image est rogné en bas...

    Je ne suis pas sur que définir mon logo comme image de fond soit la meilleure solution mais c'est la seule manière que j'ai trouvée pour régler le problème de placement. Si j'utilise une balise img, ca me décalle le texte

    Et les quelques essais que j'ai fait avec des propriétés overflow, inline m'ont donné une image qui s'affiche entière mais ce qui suit le div ne vas pas à la ligne et donc mon menu (le div d'après) se décalle à droite.

    J'espère que mes explications ne sont pas trop embrouillée et je reste convaincu qu'il existe une solution simple (j'ai souvent tendance à chercher compliqué...)

    Merci à tous ceux qui pourront m'apporter un élément de réponse
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    N'oubliez pas de cliquer sur quand votre question à trouvé une solution.

    Si vous n'avez pas encore lu les règles du club, mieux vaut tard que jamais!

  2. #2
    Membre expert Avatar de KiLVaiDeN
    Profil pro
    Inscrit en
    Octobre 2003
    Messages
    2 851
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2003
    Messages : 2 851
    Points : 3 481
    Points
    3 481
    Par défaut
    Tu pourrais donner un height et un width par défaut à ton div, qui seraient les mêmes que les dimensions de ton image de fond, ainsi ton div aurait toujours la taille au moins de ton image de fond.
    K

  3. #3
    Rédacteur
    Avatar de MasterOfChakhaL
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2004
    Messages
    2 147
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2004
    Messages : 2 147
    Points : 3 264
    Points
    3 264
    Par défaut
    oui, tu as raison

    mais le truc que j'aurai du préciser surement, c'est que je génère ma page en php et qu'a priori l'image n'est pas défini.
    Si je trouve une fonction en php qui me renvoie la hauteur de l'image, c'est gagné...
    Quoique, il faudra aussi que j'ai la hauteur de ma zone de texte (on sait jamais...)

    en ce qui concerne le width, c'est déjà fait, et c'est 100%

    Ce qui me chagrine, c'est que je pensais vraiment pouvoir m'en tirer avec des block des floats et compagnie mais je n'arrive pas à centrer le text par rapport à la fenetre du naviguateur...
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    N'oubliez pas de cliquer sur quand votre question à trouvé une solution.

    Si vous n'avez pas encore lu les règles du club, mieux vaut tard que jamais!

  4. #4
    Membre expert Avatar de KiLVaiDeN
    Profil pro
    Inscrit en
    Octobre 2003
    Messages
    2 851
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2003
    Messages : 2 851
    Points : 3 481
    Points
    3 481
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <div align="center"></div>
    Ca ne marche pas ?
    Ou tu veux dire en alignement central en vertical ?

    Pour centrer un texte en vertical tu peux utiliser :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <div style="line-height&#58;100px;">texte centré</div>
    En précisant la hauteur de ton image

    Et je pense qu'il y a un moyen de connaitre la hauter/largeur de ton image en php avec getimagesize
    K

  5. #5
    Membre confirmé
    Avatar de ilood
    Inscrit en
    Mars 2005
    Messages
    468
    Détails du profil
    Informations forums :
    Inscription : Mars 2005
    Messages : 468
    Points : 529
    Points
    529
    Par défaut
    Salut,

    Et en plaçant l'imge dans le div qui te sert pour le titre de ta page ? Tout positionnant cette image en position absolue.

    html
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id="titre"><img src="logo.jpg" alt="Mon logo" width="100" height="100">Mon titre</div>
    css
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    #titre &#123;
    	text-align&#58; center;
    &#125;
    #titre img &#123;
    	position&#58; absolute;
    	left&#58; 0px;
    &#125;
    Qui aime bien, charrie bien

  6. #6
    Rédacteur
    Avatar de MasterOfChakhaL
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2004
    Messages
    2 147
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2004
    Messages : 2 147
    Points : 3 264
    Points
    3 264
    Par défaut
    Merci pour vos réponses

    Pour l'alignement vertical, là c'est bon car je ne m'en préoccupe pas.

    Ilood:
    avec tes lignes, je me rapproche pas mal de la solution que je recherche, mais le souci est que même si je peux récupérer la hauteur de mon image grace à la fonction php que m'indique KiLVaiDeN, je trouve ca dommage d'être obligé de présumer de la taille de l'image...

    en fait, le truc, si j'ai bien compris ce que j'ai lu a droite a gauche, c'est que dès que je postionne mon image "à la main", cet élément sort du flux de la page et peux donc mordre sur d'autres parties

    C'est pour ca que j'avais parlé de background-image, mais en fait, c'est juste que je déplace le problème: au lieu d'être embété par mon imae qui mord sur le reste de la page, c'est le reste de la page qui m'embete et qui mord sur mon image...

    Je travaille encore dessus pour essayer de trouver quelque chose de plus générique et sinon je me conteterai de mixer vos réponses en récupérant la taille de l'image par php.
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    N'oubliez pas de cliquer sur quand votre question à trouvé une solution.

    Si vous n'avez pas encore lu les règles du club, mieux vaut tard que jamais!

  7. #7
    Membre confirmé
    Avatar de ilood
    Inscrit en
    Mars 2005
    Messages
    468
    Détails du profil
    Informations forums :
    Inscription : Mars 2005
    Messages : 468
    Points : 529
    Points
    529
    Par défaut
    Citation Envoyé par MasterOfChakhaL
    [...]mais le souci est que même si je peux récupérer la hauteur de mon image grace à la fonction php que m'indique KiLVaiDeN, je trouve ca dommage d'être obligé de présumer de la taille de l'image...
    Je ne comprends pas trop le problème concernant la taille de l'image.
    Tu parles des propriétés width et height de la balise img :
    Si c'est cela qui te gène tu n'es pas obligé de les mettre (elles permettent d'éviter au navigateur d'avoir à les calculer)
    Donc
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id="titre"><img src="logo.jpg" alt="Mon logo">Mon titre</div>
    Fonctionnera quelque soit la taille de l'image.
    en fait, le truc, si j'ai bien compris ce que j'ai lu a droite a gauche, c'est que dès que je postionne mon image "à la main", cet élément sort du flux de la page et peux donc mordre sur d'autres parties
    [...]
    Oui. Mais la difficulté dans ton cas, c'est d'avoir une image de taille aléatoire.
    Qui aime bien, charrie bien

  8. #8
    Rédacteur
    Avatar de MasterOfChakhaL
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2004
    Messages
    2 147
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2004
    Messages : 2 147
    Points : 3 264
    Points
    3 264
    Par défaut
    Le problème (tel que je le percois) est que l'ensemble de mon div doit avoir pour hauteur le max de mon image ou du texte que je lui mets (n lignes)

    En fait tu me donnes une solution pour caler le coin haut gauche de mon image tout en gardant le texte centré par rapport à toute la fenetre du naviguateur.

    Le truc, c'est que la hauteur du block div est égale à la hauteur du texte (quelque soit l'image). Ce qui, si j'ai bien compris est dû au positionnement absolu (qui réglait la première partie de mon problème)

    en fait, je ne suis pas sur, mais je crois que mon problème revient à poser deux éléments indépendamment l'un de l'autre puis un troisième (le reste de la page) dont la position (haut et gauche) dépend des deux premiers
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    N'oubliez pas de cliquer sur quand votre question à trouvé une solution.

    Si vous n'avez pas encore lu les règles du club, mieux vaut tard que jamais!

Discussions similaires

  1. Table avec une image en arriere plan
    Par AyManoVic dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 20/09/2010, 14h40
  2. Comment alterner un texte avec une image ?
    Par sircus dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 29/01/2008, 18h06
  3. afficher un texte avec une image en arriere plan
    Par etud_ini dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 21/09/2007, 13h05
  4. mettre une image en arriere plan
    Par ricardvince dans le forum Graphisme
    Réponses: 11
    Dernier message: 23/05/2006, 11h04
  5. Comment mettre une image en arriere plan
    Par huon dans le forum Access
    Réponses: 1
    Dernier message: 13/09/2005, 17h16

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo