Discussion :

[sam01]

Bonjour,

j'ai deux images :

http://www.pixenli.com/image1282743259055967800.html

et

http://www.pixenli.com/image1282743295098163900.html

et mon but est de pouvoir "coller ces deux images" mais en jouant sur la hauteur.

Je m'explique, j'aimerais maîtriser la hauteur du cadre arrondi.

voici mon html

Code :

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

1
2
3
4
5
6
7
8
9
10
 
 
 
<div class="test_haut_280"> 
 
</div> 
 
<div class="test_bas_280"> 
 
</div>

et mon css

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
 
 
 
 
.test_haut_280 
{ 
width:280px; 
height:60px; 
border:none; 
background-image: url('../images/test_haut_280.png'); 
} 
 
 
.test_bas_280 
{ 
width:280px; 
height:60px; 
border:none; 
background-image: url('../images/test_bas_280.png'); 
}

Mon souci c'est que ça me donne un cadre coupé...

C'est-à dire que je ne vois pas le bas...

Que dois-je faire pour jouer sur la hauteur de mon cadre arrondi ?

Merrci d'avance pour aide.

[ornitho13]

Salut,

on peut avoir un lien vers une démo?

[EDIT] Désolé, il y a tous ce qu'il faut je regarde

[ornitho13]

En fait c'est l'image de ton background-image qu'il faut positionner

Voici ce que tu dois faire:

Code :

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

1
2
3
4
5
6
7
8
9
 
.test_bas_280 
{ 
width:280px; 
height:60px; 
border:none; 
background-image: url(../images/test_bas_280.png);
background-position:bottom left; 
}

le background-position permet de dire à ton image de fond de ce calé par rapport à la div, donc " bottom left" correspond donc à je met mon image avec pour origine en bas à droite

tu peux aussi utiliser le raccourci "background"

Exemple:

Code :

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

1
2
3
4
5
6
7
8
 
.test_bas_280 
{ 
width:280px; 
height:60px; 
border:none; 
background: url(../images/test_bas_280.png) bottom left;
}

[sam01]

Bonjour,

es-tu sûr de ce que tu me dis ?

Pourquoi positionner l'image du bas vers la gauche ?

Cette image n'est pas décalée à l'origine.

[ornitho13]

Oh oui , j'en suis plutot sûr

En fait ton div se décale vers le bas, donc il faut que le bas de ton image soit toujours visible c'est pour cela qu'on le positionne.

Voici un exemple avec tes images et le code qui va bien et tu verras:

http://debray.jerome.free.fr/demos/b...und/essai.html

[sam01]

Oups, pardon d'avoir douté.

Tu as raison ça fonctionne parfaitement !

Même avec IE6, c'est dire !!!

Un grand merci. Je vais pouvoir appliquer cela à pas mal de box

J'en profite pour te poser une question qui est la suite de ce que je veux faire.

j'aimerais avoir des box de type, mais les une à côté des autres, faut-il que je les encadre par un div qui sera en float left ?