Centrer texte en fonction d'une image

**david lefaivre** · 06/10/2012, 18h39

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;
}

**Mahefasoa** · 06/10/2012, 21h17

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

**Muchos** · 07/10/2012, 00h21

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>

**david lefaivre** · 08/10/2012, 20h57

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

**Muchos** · 08/10/2012, 22h37

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 !

**david lefaivre** · 09/10/2012, 17h29

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

Invité · 09/10/2012, 18h05

Bonjour,
puisque chacun donne sa version :

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
<!DOCTYPE html>
<html>
    <head>
        <title>Essai</title>
        <style type="text/css">
            header { position:relative; display:block; }
                        #header_logo { position:absolute; top:0; left:0; }
                        #header_titre { text-align:center; min-width:720px; }
                        #header_titre p { display:inline-block; text-align:left; }
                        #header_titre p label { display:inline-block; width:80px; }
                        #header_titre p span { font-weight:bold; }
        </style>
    </head>
    <body>
        <header>
            <div id="header_logo">
			<img src="http://www.iprotek.net/_img/logo_iprotek.png" alt="Logo de IProTek" id="logo" />
            </div>
            <div id="header_titre">
				<p><label>Tél. :</label><span>418 263-3090</span><br />
				<label>Sans frais :</label><span>1 855 263-3090</span></p>
            </div>
        </header>
    </body>
</html>

**Muchos** · 09/10/2012, 19h15

^ Oui, c'est le bon rendu, même si les versions précédentes supportent mieux le zoom.

Par contre, je crois que les <label> ne s'utilisent qu'avec <form>, non ?
Et un conseil à David Lefaivre, ajoutez des espaces insécables (   ) entre le texte et les deux points ( : ) pour éviter que les deux points ne sautent une ligne sans le reste de texte

Centrer texte en fonction d'une image

HTML

Discussions similaires

Partager

Partager