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 :

Centrer texte en fonction d'une image


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Février 2011
    Messages
    28
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2011
    Messages : 28
    Par défaut Centrer texte en fonction d'une image
    Salut,

    le titre est pas super claire, alors j'ai fait ce petit chef d’œuvre pour mieux vous expliquer : http://www.imagup.com/data/1164206739.html. Alors, j'ai une image à gauche et je veux écrire du texte à droite de cette image. De plus, je veux que le texte à droite soit centrer en fonction de l'espace disponible (donc, le texte ne doit pas embarquer par dessus l'image). Quelqu'un sait comment faire ?

    Merci

    Ps : Voici le bout de code que j'ai fait :

    HTML

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
      <header>
          <div id="titre_principal">
             <img src="images/iprotek.png" alt="Logo de IProTek" id="logo" />
    	    <section id="coord_top_wrapper">
    	       <div id="coord_top">
    	          <p>Tel : </p>
    		  <a href="tel:418-263-3090">418 263-3090</a>
    		  <br />
    		  <p>Sans frais</p>
    		  <a href="tel:1-855-263-3090">1 855 263-3090</a>
    	       </div>
    	    </section>
    	 </div>
       </header>

    CSS

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    #titre_principal
    {
    	display: inline-block;
    	height: 60px;
    	width: 320px;
    }
     
    #coord_top_wrapper
    {
    	display: inline-block;
    }
     
    #coord_top
    {
    	display: block;
    	width: 180px;
    	margin-left: auto;
    }
     
    #coord_top p
    {
    	display: inline-block;
    }

  2. #2
    Membre Expert
    Avatar de Mahefasoa
    Homme Profil pro
    Manager IT
    Inscrit en
    Octobre 2003
    Messages
    835
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Madagascar

    Informations professionnelles :
    Activité : Manager IT

    Informations forums :
    Inscription : Octobre 2003
    Messages : 835
    Par défaut
    Bonsoir,

    Je me suis permis de "simplifier" un peu la page HTML et le CSS. Ci-après alors ma proposition:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <html>
        <head>
            <title>Essai</title>
            <style type="text/css">
                div#titre_principal { position: relative; overflow: auto; }
                div#titre_principal img { display: block; float: left; }
                div#titre_principal p { text-align: center; }
            </style>
        </head>
        <body>
            <header>
                <div id="titre_principal">
                    <img src="http://www.iprotek.net/_img/logo_iprotek.png" alt="Logo de IProTek" id="logo" />
                    <p>Tel : <a href="tel:418-263-3090">418 263-3090</a></p>
                    <p>Sans frais <a href="tel:1-855-263-3090">1 855 263-3090</a></p>
                </div>
            </header>
        </body>
    </html>
    Le principe:
    1. un div #titre_principal qui sera le conteneur global par rapport auquel tous les autres éléments qu'il contient vont se référer.
    Code css :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    div#titre_principal { position: relative; overflow: auto; }


    2. dans ce conteneur global, le logo sera positionné à gauche et le reste à droite.
    Code css :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    div#titre_principal img { display: block; float: left; }


    3. le texte contenu dans <p> sera centré.
    Code css :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    div#titre_principal p { text-align: center; }


    En espérant de t'avoir aidé.

    Cordialement,
    Mahefasoa

  3. #3
    Membre extrêmement actif
    Avatar de Muchos
    Homme Profil pro
    Enseignant
    Inscrit en
    Décembre 2011
    Messages
    1 704
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Décembre 2011
    Messages : 1 704
    Billets dans le blog
    6
    Par défaut
    Bien vu !

    Je me suis un peu lâché, je propose ça :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
     
    <!doctype html>
    <html>
    <head>
    	<meta charset="UTF-8" />
    	<title>Header IProTek</title>
    	<style type="text/css">
    #iprotek-header {display: table; width: 100%;}
    #header-logo,
    #header-contact {display: table-cell; text-align: center; vertical-align: middle;}
    #header-logo {width: 245px; background-color: cyan;}
    #header-contact {background-color: red;}
    #header-contact * {display: inline; margin: 0;}
            </style>
    </head>
    <body>
    	<header id="iprotek-header">
    		<div id="header-logo">
    			<img src="http://www.iprotek.net/_img/logo_iprotek.png" width="241" height="80" alt="IProTek, la fusion des services pour PME." />
    		</div>
    		<dl id="header-contact">
    			<dt>Tel :</dt>
    			<dd><a href="tel:418-263-3090">418 263-3090</a></dd>
    			<br />
    			<dt>Sans frais :</dt>
    			<dd><a href="tel:1-855-263-3090">1 855 263-3090</a></dd>
    		</dl>
    	</header>
    	<article>Texte du site...<article/>
        </body>
    </html>

  4. #4
    Membre averti
    Profil pro
    Inscrit en
    Février 2011
    Messages
    28
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2011
    Messages : 28
    Par défaut
    Merci

    J'aurais néanmoins une autre question. En m'inspirant de l'approche de Muchos, celà n'aurait pas été aussi bien de carrément tout mettre dans un tableau ?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <html>
        <head>
            <title>Essai</title>
            <style type="text/css">
                #left {background-color: red;}
                            #right {background-color: green; width: 100%;}
                            #contact {display: block; width: 180px; margin-left: auto; margin-right: auto;}
                            p {display: inline-block; margin: 0; padding: 0;}
            </style>
        </head>
     
    	<body>
    		<header id="iprotek-header">
    			<table>
    				<tr>
    					<td id="left"> 
    						<img src="http://www.iprotek.net/_img/logo_iprotek.png" width="241" height="80" alt="IProTek, la fusion des services pour PME." />
    					</td>
    					<td id="right">
    						<div id="contact">
    							<p>Tel :</p>
    							<a href="tel:418-263-3090">418 263-3090</a>
    							<br />
    							<p>Sans frais :</p>
    							<a href="tel:1-855-263-3090">1 855 263-3090</a>
    						</div id="contact">
    					</td>
    				</tr>
    			</table
    		</header>
    		<article>Texte du site...<article/>
        </body>
    </html>
    Je demandes, car on m'a dit que la sur-utilisation de tableaux n'est pas recommandé. Mais de cette façon, les 2 numéros de tel sont aligner et centrer en groupe, et non centrer individuellement

    Merci

  5. #5
    Membre extrêmement actif
    Avatar de Muchos
    Homme Profil pro
    Enseignant
    Inscrit en
    Décembre 2011
    Messages
    1 704
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Décembre 2011
    Messages : 1 704
    Billets dans le blog
    6
    Par défaut
    Je demandes, car on m'a dit que la sur-utilisation de tableaux n'est pas recommandé.
    Ce n'est pas un problème de sur-utilisation. Les tableaux html servent aux données, pas à la mise en page.

    La version de Mahefasoa est très bien !

  6. #6
    Membre averti
    Profil pro
    Inscrit en
    Février 2011
    Messages
    28
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2011
    Messages : 28
    Par défaut
    Ouais, je comprends, sauf que dans les 2 solutions, il y a un détail que j'aime pas. J'avais négliger de le mentionner, mais j'aurais aimé que les deux # de tel soient alignés 1 par rapport à l'autre. Voici ce que je veux dire (le haut est le résultat souhaité).

    http://imageshack.us/photo/my-images/248/wwwgl.png/

    Dans le fond, ce qu'il faut, c'est centrer une div, et non les balises <p> (je crois).
    Merci
    David

Discussions similaires

  1. Centrer du texte verticalement par rapport à une image
    Par gb1963 dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 09/06/2010, 09h40
  2. Redimensionnement fenêtre en fonction d'une image
    Par skyjoe dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 17/12/2006, 13h54
  3. Texte en forme d'une image
    Par yarf dans le forum Tableaux - Graphiques - Images - Flottants
    Réponses: 2
    Dernier message: 10/09/2006, 20h09
  4. Ecrire du texte à côté d'une image
    Par chebil dans le forum Tableaux - Graphiques - Images - Flottants
    Réponses: 2
    Dernier message: 11/05/2006, 16h55
  5. Afficher du texte area par dessus une image
    Par Battosaiii dans le forum Composants
    Réponses: 3
    Dernier message: 14/12/2005, 01h35

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