images dans les coins d'un texte

**Cinorian** · 11/03/2010, 10h31

Bonjour, je débute complet en CSS, j'ai lu quelques tutoriaux, mais je ne trouve rien pour résoudre mon problème, je ne sais même pas s'il est solvable...

Je cherche à réaliser ceci :
http://picasaweb.google.fr/113489136...02987294708242
Mes contraites : Je souhaiterai utiliser une seule image par coins et éviter d'avoir à les découper. (Il faut que mon div de texte vienne se superposer en parti aux autres j'imagine...)
Je souhaiterai également que mes coins bougent en fonction du texte de mon div.
Un lien pour télécharger les fichiers et images
https://docs.google.com/leaf?id=0B7X...ZTk4Nzc4&hl=fr

Voici actuellement mon code, c'est très basique, j'ai tenté par mal de chose, mais je n'ai pas obtenu de meilleurs résultat que celà !

code 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
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<link rel="stylesheet" type="text/css" href="style_div5.css">
</head>
<body>
 
 
	<div id="pcl1c1"><img src="images5/spacer.png"></div>
	<div id="pcl1c2"><img src="images5/spacer.png"></div>
	<div id="pcl2c1">
		<p>Bla bla bla bla bla bla bla bla bla bla bla bla</p>
		<p>Bla bla bla bla bla bla bla bla bla bla bla</p>
		<p>Bla bla bla bla bla bla bla bla bla bla</p>
		<p>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
		<p>Bla bla bla bla bla bla bla bla bla bla bla bla </p>
		<p>Bla bla bla bla bla bla bla bla bla bla</p>
		<p>Bla bla bla bla bla bla bla bla bla bla bla </p>
		<p>Bla bla bla bla bla bla bla bla</p>
		<p>Bla bla bla bla bla bla bla bla bla bla bla bla</p> 
		<p>Bla bla bla bla bla bla bla bla bla bla </p>
		<p>Bla bla bla bla bla bla </p>
		<p>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
		<p>Bla bla bla bla bla bla bla bla bla bla bla </p>
		<p>Bla bla bla bla bla bla bla bla bla bla bla </p>
		<p>Bla bla bla bla bla bla bla bla bla bla bla bla</p>
		<p>Bla bla bla bla bla bla bla</p></div>
	<div id="pcl3c1"><img src="images5/spacer.png"></div>
	<div id="pcl3c2"><img src="images5/spacer.png"></div>
</body>
</html>

code 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
24
25
26
27
28
div#pcl1c1 {
	float:left;
	height:91px;
	width:91px;
	background:url(images5/coin-A-1.png) left top;
	}
div#pcl1c2 {
	float:right;
	height:91px;
	width:91px;
	background:url(images5/coin-A-2.png) right top;
	}
div#pcl2c1 {
	background-color:#CCCCCC;
	clear:both;
	}	
div#pcl3c1 {
	float:left;
	height:91px;
	width:91px;
	background:url(images5/coin-A-3.png) left bottom;
	}
div#pcl3c2 {
	float:right;
	height:91px;
	width:91px;
	background:url(images5/coin-A-4.png) right bottom;
	}

Merci par avance pour vos conseils

**xess91** · 11/03/2010, 12h54

Salut il faut faire comme ça:

Code :

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

1
2
3
4
5
6
 
<div style="background:url('images/essai1.jpg') top no-repeat;width:500px;">
	<div style="background:url('images/essai2.jpg') bottom no-repeat;padding:80px;width:340px;">
	<!--ICI TON TEXTE-->
	</div>
</div>

Voici le resultat :

Le padding dans la div sert à ce que le text ne chevauche pas les images de fond. Avec cette structure tu peux mettre le texte que tu veux les images se positionneront correctement.

Il y a que deux images le fond du haut:

Et l'image de fond positionné en bas:

**Cinorian** · 11/03/2010, 15h17

Merci, ta réponse est très claire

Cependant la largeur de ton cadre est fixe.
J'aurais aimé que les coins "suivent" le texte aussi dans la largueur. C'est là que je bute...

**xess91** · 11/03/2010, 16h29

Je penses que si tu fais quatre div avec quatre fonds et dans la propriété background tu les positionnes respectivement en haut à gauche, en haut à droite, en bas à gauche et en bas à droite ça devrait marcher.

Bien sûr il faut que tes div soient imbriquées.

**12monkeys** · 11/03/2010, 20h56

Bonsoir

Tu as une méthode expliquée ici : http://christophe-f.developpez.com/t...oins-arrondis/

Ce sont des bords arrondis mais le principe est le même...

**Cinorian** · 12/03/2010, 11h00

Super merci à vous deux, j'étais dubitatif sur la réponse de xess91 à 16h29, je n'avais pas complétement saisi le principe de l'imbrication qui correspond à une superposition des calques (à mon sens), après une nuit de réflexion, j'ai fini par comprendre la simplicité de la chose...

Ce qui donne comme résultat ceci :
(j'ai mis une table pour qu'on se rende bien compte que le div suit le texte en largeur)

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
<table>
<tr>
<td>
 
 <div style="background:url('images7/coin-A-1.png') top left no-repeat;" >
	<div style="background:url('images7/coin-A-2.png') top right no-repeat;">
		<div style="background:url('images7/coin-A-3.png') bottom left no-repeat;">
			<div style="background:url('images7/coin-A-4.png') bottom right no-repeat;padding:20px 50px 20px 50px;">
				<!--ICI TON TEXTE-->
				<p>bla bla bla bla bla bla bla bla bla </p>
				<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>
				<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>
				<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>
				<p>bla bla bla bla bla bla bla bla bla bla </p>
				<p>bla bla bla bla  bla bla bla bla </p>
				<p>bla bla bla bla bla bla bla bla bla bla bla bla </p>
				<p>bla bla bla bla bla bla bla bla bla bla bla bla bla </p>
				<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>
				<p>bla bla bla bla bla bla bla </p>
				<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>
				<p>bla bla bla bla bla bla bla bla </p>
				<p>bla bla bla bla bla bla bla bla bla bla bla bla </p>
			</div>
		</div>
	</div>
</div>
 
</td>
</tr>
</table>

Un énorme merci pour votre réactivité, merci pour le tuto des coins arrondis, dans mon esprit il ne correspondait pas à ce que je cherchais car je compliquais mon problème...

Merci à http://www.developpez.net/ et sa communauté

images dans les coins d'un texte

CSS

Discussions similaires

Partager

Partager