[Résolu] 3 images dont une en repeat au milieu, possible en css ?

Bien le bonjour à vous,
Je me permet de venir poster ici car je ne trouve pas de réponse à ma question, certains m'ont dit que ce n'était pas possible mais j'ai un doute donc je préfère vous poser la question des fois que vous ayez une idée.

Bref, j'aimerai savoir si à partir de mon fichier css je peux définir 3 images à la suite, j'aimerai ce schema la :

IMAGE aligné à gauche | IMAGE en repeat | IMAGE aligné à droite

Je ne peux pas mettre d'image fixe car 3 éléments utilise la même classe c'est pour ça que j'aimerai qu'il puisse s'adapter sur la longueur via l'image du milieu.

La j'ai utilisé le border-radius pour arrondir les bordures en attendant mais ce n'ai pas pris en comptes sur tout les navigateurs puis c'est pas vraiment ce que je veux coté design.
C'est pour ça que j'aimerai remplacer ça par 3 image plutôt que remplir une zone et y mettre une bordure arrondis.

Une image de la chose en question (je veux remplacer le background bleu que vous voyez sous les titres d'articles)

http://img841.imageshack.us/img841/7636/images3ey.jpg

Voilou, est ce seulement réalisable ?
Pourriez vous me donner un exemple que je puisse le mettre en pratique ?

En vous remerciant
Mario
(Site sur mon profil si vous avez besoin de voir le CSS)
Modifié par Mario520 (03 Aug 2010 - 09:19)

Hello Mario et bienvenue,

il y a plusieurs solutions comme par exemple de n'utiliser qu'une seule image (assez large pour tes besoins) :



et de faire quelque chose comme ça :

h2 {
	background: url(include/images/cadre_bleu.jpg) left center no-repeat;
	padding-left: 6px;
} 

h2 a {
	background: url(include/images/cadre_bleu.jpg) right center no-repeat;
	display: block;
	text-decoration: none;
}

#premier {
	width: 350px;
}

#second {
	width: 550px;
}

<div id="premier">
	<h2><a href="mapage1.html">Mon lien 1</a></h2>
	<p>Lorem Ipsum</p>
	<p>Lorem Ipsum</p>
	<p>Lorem Ipsum</p>
</div>
<div id="second">
	<h2><a href="mapage2.html">Mon lien 2</a></h2>
	<p>Lorem Ipsum</p>
	<p>Lorem Ipsum</p>
</div>

En faites je me suis mal exprimer je pense ...
Si c'était si simple je ne serai pas venu vous embêter pour mettre juste une image en css :-P

En gros j'ai 3 éléments différents qui utilise cette bande bleu ils ont tous en commun ceci :

.post h2 {
	height:34px;
	margin:0;
	padding:0;
	text-align:left;
	margin-bottom:10px;
	padding-left:2px;
	background-color:#3c83c5;
	border-radius:10px;
	-moz-border-radius:10px;
	-khtml-border-radius:10px;
	-webkit-border-radius:10px;
	z-index: 1;
}

Le problème c'est qu'ils ont tout les 3 une taille différente d'ou ma demande d'avoir une image au milieu qui ce mettrais en repeat entre l'image de droite et de gauche.

C'est pour ça que mon image doit être dans le .post h2 et elle doit pouvoir s'adapter quelque soit la taille en largeur de mon div.

Je ne veux pas me contenter de mettre une simple bande de couleur, j'aimerai mettre quelquechose dans ce genre que je découperai en 3 parties :

http://www.mon5800.com/wp-content/themes/wp-soul/images/block-title.png

J'espère m'être correctement fait comprendre.

Merci pour ta réponse.
Modifié par Mario520 (02 Aug 2010 - 18:17)

Eh bien en fait j'avais bien compris (ou alors tu n'es vraiment pas clair ).

Donc je me répète : il suffit d'agrandir ton image (qu'il y ait ou non une flèche vers le bas à droite) et de la mettre en background left sur le H2 et en background right sur l'élement contenu dans le H2 (SPAN ou lien). Ensuite ce n'est plus qu'une question de padding...

Tu peux éventuellement utiliser 2 images (même si dans ce cas ça ne me semble pas utile) mais 3 sont inutiles puisqu'encore une fois il suffit que l'une soit très large pour correspondre à toutes les largeurs possibles.

As-tu essayé l'exemple que j'ai donné plus haut ?

PS: ton z-index est inutile puisque le H2 n'est pas positionné.

Le Z-index c'est un reste de quand j'ai essayer de résoudre un petit soucis avec mon menu du haut et un bug IE7 j'ai oublier de le retirer

Alors pour la suite je pensais que je m'étais mal exprimé et que du coup tu n'avais pas compris.
Je vais essayer ce que tu propose dans la soirée si madame me laisse le temps sinon ce sera demain matin et je te tiens au courant.

Je te remercie.

EDIT : Par contre si je met qu'une seul image il va forcément me la redimensionner ou la couper et du coup ma flèche du bas sera déformé je me trompe ?
Modifié par Mario520 (02 Aug 2010 - 19:03)

Mario520 a écrit :
EDIT : Par contre si je met qu'une seul image il va forcément me la redimensionner ou la couper et du coup ma flèche du bas sera déformé je me trompe ?

Oui.

Aucune raison que l'image soit déformée et pour ce qui est de "couper" la flèche du bas il suffit de faire quelques essais (il n'y a pas des dizaines de solutions possibles).

Edit : Post à effacer pardon j'avais oublier le

display: block;

Je joue du padding pour voir ce que ça donne.
Modifié par Mario520 (02 Aug 2010 - 20:19)

J'ai donc essayer ta solution à une image :

.post h2 {
	height:43px;
	margin:0;
	padding:0;
	margin-bottom:10px;
	padding-left:2px;
	text-align:left;
	background: url(http://www.mon5800.com/wp-content/themes/wp-soul/images/bar_title_max.png) left center no-repeat; 

}

.post h2 a{
	height:43px;
	display: block;
	text-align:left;
	background: url(http://www.mon5800.com/wp-content/themes/wp-soul/images/bar_title_max.png) right center no-repeat; 

}

Mon div long (celui du haut avec la grande barre)

<?php while (have_posts()) : the_post(); ?>
			<?php if (is_sticky()) : ?>
				<div class="post" id="post-<?php the_ID(); ?>" style='clear: both;'>
				<div <?php post_class('sticky'); ?> >
					<h2><img src='http://www.mon5800.com/images/postit.png' alt='sticky' /><a href="<?php the_permalink() ?>" rel="bookmark" title="Lien permanent sur <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
					<div class="postmetadata">Publié le <?php the_time('j/n/y') ?> à <?php the_time(get_option('time_format')) ?> par <?php the_author() ?> <?php edit_post_link('| Modifier', ''); ?>
					</div>

Le petit (celui que tu vois en double en dessous sur l'image)

<div class="post" id="post-<?php the_ID(); ?>" style='width: 395px; float: left;'>
				
<div <?php post_class('post_home'); ?> style='position: relative;'>
					<h2 style='font-size: 14px; line-height: 34px;'><a href="<?php the_permalink() ?>" rel="bookmark" title="Lien permanent sur <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
					<div class="postmetadata">Publié le <?php the_time('j/n/y') ?> à <?php the_time(get_option('time_format')) ?> par <?php the_author() ?> <?php edit_post_link('| Modifier', ''); ?>
					</div>

Mais malheureusement voila ce que ça donne :

http://img844.imageshack.us/img844/4748/test12598.jpg

Même en changeant padding (top, bottom, left ou right) de .post h2 et .post h2 a je n'arrive pas à faire monter le .post h2 a pour mettre l'image au même niveau que la première.

Aurais tu une idée ?
Ou est ce que je peux merdouiller ?

D'avance merci pour ta lecture.
Modifié par Mario520 (03 Aug 2010 - 09:16)

Je t'ai fait une page d'exemple à cette adresse.

Je comprend beaucoup mieux comme ça c'est exactement ce que je voulais !
A chercher loin alors que la solution était simple ...
Un grand merci à toi Heyoan.
Modifié par Mario520 (03 Aug 2010 - 09:19)