Centrer texte en fonction d'une image

Version imprimable

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:

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:

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

Bonsoir,

Je me suis permis de "simplifier" un peu la page HTML et le CSS. Ci-après alors ma proposition:
Code:

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:

div#titre_principal { position: relative; overflow: auto; }

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

Code:

div#titre_principal img { display: block; float: left; }

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

Code:

div#titre_principal p { text-align: center; }

En espérant de t'avoir aidé.

Cordialement,
Mahefasoa

Bien vu !

Je me suis un peu lâché, je propose ça :

Code:

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>

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:

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

08/10/2012, 22h37
Muchos

Citation:

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 !
09/10/2012, 17h29
david lefaivre

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

Bonjour,
puisque chacun donne sa version :

Code:

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>

09/10/2012, 19h15
Muchos

^ 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 :)