Comment faire un titre texte et image sur la même ligne comme dans cet exemple ?

**Alexandrebox** · 10/08/2010, 16h18

Bonjour les amis designers,
Je suis un petit débutant en design. Voici le tittre en rouge avec image qui suit comme dans l'exemple de cette page que je cherche désespéremment à faire.
http://www.europe1.fr/France/Une-tax...s-Unis-249383/
Merci beaucoup pour votre aide

**SpaceFrog** · 10/08/2010, 16h46

float ?

**Alexandrebox** · 10/08/2010, 21h10

dis comme ça, c'est hyper clair pour le débutant que je suis

Merci mais je ne suis pas très avancé. Un exemple peut-être modirateur ?

**ornitho13** · 10/08/2010, 21h39

Voici un exemple de code pour pouvoir le faire en utilisant le float:

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
<html>
	<head>
		<style type="text/css">
			body{
				background:#111;
				color:#fff;
				font-family:Arial, verdana;
				font-size:14px;
			}
			.titre{
				width:300px;
			}
			.titre div{
				float:left;
				padding:10px;
			}
			.imageBackground{
				background:url(chemin_image.extension) repeat-x left center;
				height:20px;
				width:200px;
			}
		</style>
	</head>
	<body>
		<div class="titre">
			<div>Title</div>
			<div class="imageBackground"></div>
		</div>
	</body>
</html>

ce code est un exemple, à toi de l'arranger

**Alexandrebox** · 11/08/2010, 10h26

Merci beaucoup pour ta réponse. Je suis déjà pas mal avancé.
Cependant, l'image ne se répète pas pour combler l'espace vide de la boite.
Je m'explique :
dans l'exemple du site, il y a un div pour le contenu. Ce div est width 400px par exemple. Dans le div contenu, il y a titre et texte.
Supposons le titre est hommes (occupe 80 px de place) le reste doit place doit être la répétion de l'image.

Quand je fais exactement ton code, l'image est mise à la ligne sous le titre.
J'ai changé width 200px en width 100% étant donné que l'image doit combler l'espace restante. Mais l'image reste toujours sous le texte.
Ensuite j'ai fait ceci :

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
<style type="text/css">
			body{
			background:#111;
			color:#fff;
			font-family:Arial, verdana;
			font-size:14px;
			}
			.contenu
			{
			width:400px;
			}
			.titre{
			width:400px;
 
			}
			.titre div{
			float:left;
			padding:10px;
 
			}
			.imageBackground{
			background:url(title.png) repeat-x left center;
			height:20px;
			}
			.arreterfloat
			{	
			clear:both;
 
			}
 
</style>

Et dans mon code, je fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<body>
<div class="contenu">
<div class="titre">
<div>Les hommes</div>
<div class="imageBackground"></div>
</div><br / class="arreterfloat">
Mon texte est ici. je ne voi pas pourquoi l'image ne se répète pas. lol
</div>
</body>

L'image est à la même ligne que le texte mais ne se répète pas pour combler l'espace vide. Quand je définis width alors l'image se déplace pour se mettre sous le texte titre. Que faire?

D'avance merci pour votre aide

**SpaceFrog** · 11/08/2010, 11h05

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background:url(title.png) repeat-x;

**Alexandrebox** · 11/08/2010, 11h34

Merci beaucoup modérateur.
Mais quand je fais ceci,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background:url(title.png) repeat-x;

au lieu de ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background:url(title.png) repeat-x left center;

, non seulement il ne répète pas l'image mais en plus, il me place l'image au dessus du texte comme vous pouvez le voir sur l'image ci-jointe. Donc je pense que le problème serait ailleurs, mais où ? ...

**SpaceFrog** · 11/08/2010, 14h11

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background-image: url('.....'); background-repeat: repeat-x; background-position: 50%

**Alexandrebox** · 11/08/2010, 15h10

Merci modérateur.
Je viens de tester le code. L'image est bien sur la mêmne ligne que le titre mais elle ne se multiplie toujours pas pour occuper toute l'espace qui lui est due. Même quand je fais background-position : 100%; rien ne change.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
.imageBackground{
	        background-image :url(title.png);
	        background-repeat: repeat-x;
	        background-position: 50%;
	        height:20px;
 
	  }

Merci d'acance

**SpaceFrog** · 12/08/2010, 10h18

elle se multiplie, mais sur la largeur de son conteneur.
c'est donc que ton conteneur n'est pas assez large

**Alexandrebox** · 12/08/2010, 15h39

Merci pour ta réponse.
Comme tu peux le remarquer sur le code suivant, la largeur du conteneur fait 400px alors que se qui se multiplie ne fait même pas 10px de large. (Voir l'image au-dessus)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
.contenu
{
width:400px;
}

Merci d'avance pour toute aide.

**SpaceFrog** · 12/08/2010, 17h14

si ton conteneur ne contient que l'image en background ... il est vide pour le navigateur

pour tester mets des   dedans
et si ton image s'agrandit faudra mettre un doctype correct un eun css html body width : 100%

**Alexandrebox** · 12/08/2010, 19h40

Oui effectivement modérateur.
Plus j'ajoute  plus l'image s'allonge. Mais que faire pour que je n'ai pas besoin d'ajouter des espaces dans mon conteneur?
Voici mes metas.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />

D'avance je te remercie infiniment.

**vodiem** · 13/08/2010, 08h57

salut ornitho13, SpaceFrog et Alexandrebox

pourquoi ne pas partir de la méthodologie de ton exemple?

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
32
33
34
35
36
37
<html>
<style type="text/css">
                        body{
                        background:#111;
                        color:#fff;
                        font-family:Arial, verdana;
                        font-size:14px;
                        }
                        .contenu
                        {
                        width:400px;
                        }
                        .titre{
                        width:400px;
                        background:url(title.png) repeat-x left center;
                        }
                        .titre span{
                        background: repeat 0 0 #111;
                        padding-right: 5px;
                        }
                        .arreterfloat
                        {       
                        clear:both;
 
                        }
 
</style>
<body>
<div class="contenu">
<div class="titre">
<span>Les hommes</span>
</div>
<br / class="arreterfloat">
Mon texte est ici. je ne voi pas pourquoi l'image ne se répète pas. lol
</div>
</body>
</html>

même sans doctype cela fonctionne correctement.

**Alexandrebox** · 13/08/2010, 09h19

Wawoo ça marche correctement et en plus, ça marche de la même manière sur tous les navigateurs

Bravo vodiem. Je m'incline

Merci beaucoup vodiem. Et merci également au modérateur et à ornitho13.

Bonne journée à vous tous. Je suis trop content

Comment faire un titre texte et image sur la même ligne comme dans cet exemple ?

Tableau en CSS

Discussions similaires

Partager

Partager