Découpage d'une image pour Insertion bloc

**Addict`** · 18/02/2009, 11h42

Bonjour,

J'ai actuellement une image de fond que je voudrais découper pour permettre son agrandissement en fonction du texte.

Cela me parait difficil car je l'applique en background-image

Voici l'image :

J'aimerai que la partie centrale varie en fonction du contenu.

Merci de votre aide.

Site en ligne : ici

L'exemple est clair dans la derniere actu...

**Addict`** · 18/02/2009, 17h01

On m'a conseillé de découper en 3 parties :

-Le top
-une bande centrale que je devrais repeter en y
-le bottom...

Comment je mets ça en place dans mon CSS ?

Merci

**desert** · 18/02/2009, 19h12

Et d'après les conseils que tu as reçu, de quelle manière procèderais-tu ?

**Addict`** · 19/02/2009, 09h47

Ba justement j'ai un peu de mal à savoir comment procéder... Un petit peu d'aide ?

**HiRoN** · 20/02/2009, 14h09

Envoyé par Addict`

Ba justement j'ai un peu de mal à savoir comment procéder... Un petit peu d'aide ?

Je vois pas vraiment le problème...

Sur quoi bloques-tu ?

**Addict`** · 24/02/2009, 16h22

Bon, j'ai éssayé mais rien ne marche voici ce que j'ai fait :

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
<!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="en" lang="fr">
	<head>
        <?php
            include('./include/head.inc.php');
        ?>
	</head>
	<body>
		<div id="sample">
			<div id="top_sample"></div>
			<div id="center_sample">
				Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
				<p><a href="javascript:window.close();" style="text-decoration:none; color:red;">Fermer l'actualit&eacute;</a></p>
			</div>
			<div id="bottom_sample"></div>
		</div>
	</body>
</html>

Code php :

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
#sample{
	background-color:#2B2C2C !important;
    background-repeat: no-repeat;
    height: 600px;
    width: 600px;
	margin:auto;
	font-size:14px !important;
}
#sample p{
	position:relative;
	height: auto;
    width: auto;
    top: 70px;
}
#sample h4{
	position:relative;
	height: auto;
    width: auto;
    top: 70px;
}
#top_sample{
	width: 600px;
	background-image: url(./top_s.png);
}
#bottom_sample{
	width: 600px;
	background-image: url(./bot_s.png);
}
#center_sample{
	width: 600px;
	background-image: url(./center_s.png)repeat-y;
}

Image du top :

Image centrale (repeat-y):

Image du bas:

J'ai aucune images qui s'affiche... je les ai placées à la racine...

Help !

**HiRoN** · 24/02/2009, 16h25

Et avec :

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
12
#top_sample {
	width:600px;
	background: url(top_s.png) no-repeat;
}
#bottom_sample {
	width:600px;
	background: url(bot_s.png) no-repeat;
}
#center_sample {
	width:600px;
	background: url(center_s.png) repeat-y;
}

**Addict`** · 24/02/2009, 16h32

L'erreur venait de l'appel du CSS...

Cependant, l'image centrale s'affiche mais pas les 2 autres...

J'ai bien vérifié les noms des images >> Correct

**HiRoN** · 24/02/2009, 16h33

En spécifiant une hauteur à #top_sample et #bottom_sample ?

**Addict`** · 24/02/2009, 16h41

Bon, déja merci car j'ai toutes mes images !

Maintenant, j'ai un espace verticale entre l'image du ba et le centre...

Ensuite, mon texte inséré dépasse sur les cotés. Est-ce que je peux diminuer la largeur sur laquelle il est affiché?

Voici où en est le 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
29
30
31
32
#sample{
	background-color:#2B2C2C;
	font-size:14px;
	text-align:center;
}
#sample p{
	position:relative;
	height: auto;
    width: auto;
    top: 70px;
}
#sample h4{
	position:relative;
	height: auto;
    width: auto;
    top: 70px;
}
#top_sample {
	background: url(top_s.png);
	height:95px;
	width:600px;
}
#bottom_sample {
	background: url(bot_s.png);
	text-align:center;
	height:80px;
	width:600px;
}
#center_sample {
	width:600px;
	background: url(center_s.png) repeat-y;
}

Merci

**HiRoN** · 24/02/2009, 16h50

Envoyé par Addict`

Maintenant, j'ai un espace verticale entre l'image du ba et le centre...

Sûrement à cause d'un marge générée par ton lien <a> ou ton <p> (à vu d'oeil

)

Envoyé par Addict`

Ensuite, mon texte inséré dépasse sur les cotés. Est-ce que je peux diminuer la largeur sur laquelle il est affiché ?

Tu aurais dû normalement l'intégrer dans un paragraphe (par exemple, mais cela dépend de sa fonction) sur lequel tu aurait appliqué un padding.

Utilité d'encadrer ton lien d'un <p> ?

**Addict`** · 24/02/2009, 17h05

Voilà, j'ai réussi.

Je colle mon code au cas où ça pourrait aider.

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
<!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="en" lang="fr">
	<head>
		<link rel="stylesheet" href="./css.css" type="text/css" media="screen" title="Normal" />
		<title>Ma page</title>
	</head>
	<body>
		<div id="sample">
			<div id="top_sample"></div>
			<div id="center_sample">
				<div id="texte">
				<p>Lorem ipsum Lorem ipsum Lorem iipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Loripsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
				</div>
				<a href="javascript:window.close();" style="text-decoration:none; color:red; margin-top:20px;">Fermer l'actualit&eacute;</a>
			</div>
			<div id="bottom_sample"></div>
		</div>
	</body>
</html>

Le 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
29
30
31
32
#sample{
	background-color:#2B2C2C;
	font-size:14px;
	text-align:center;
}
#sample h4{
	position:relative;
	height: auto;
    width: auto;
}
#top_sample {
	background: url(top_s.png);
	height:95px;
	width:600px;
}
#bottom_sample {
	background: url(bot_s.png);
	text-align:center;
	height:80px;
	width:600px;
}
#center_sample {
	width:600px;
	background: url(center_s.png) repeat-y;
}
#texte{
	margin-left:45px;
	margin-right:45px;
}
#texte p{
	margin-top:0px !important;
}