[Résolu] Cadre extensible en largeur, avec fond transparent et bordure

Bonsoir,

je ne savais pas trop comment intituler mon sujet, alors je m'excuse si il ne correspond pas tout à fait à ce que vous pouvez attendre.

Mon problème est le suivant :
Je veux faire un cadre extensible en largeur, fixe en hauteur, et qui a une bordure gauche et droite "en image" de taille fixe, et le reste du fond une 3ème image qui se répète sur le reste de la largeur.

Ça ne doit pas être très clair alors voici une image de ce que j'ai en ce moment (et vous allez pouvoir constater le problème) :




Une solution à mon problème serait de faire 3 div, et les coller côte à côte.
Cependant je trouve que ça charge le code et nuit à sa lisibilité, d'autant plus que ce cadre peut être appellé plus d'une quinzaine de fois dans la page.

Donc j'ai essayé les nouvelles techniques associées à CSS3, et voici mon code :

div.group h2 {
   float:left;
   height:32px;
   width:98%;
   margin:0;
   padding-top:8px;
   padding-left:2%;
   background-image:url(left.png), url(right.png), url(background.png);
   background-position: left top, right top, 25px top; 
   background-repeat: no-repeat, no-repeat, no-repeat;
   -moz-background-size:25px 100%, 25px 100%, 95% 100%;
}

Je suis conscient des problèmes de compatibilité et tout ça... pour l'instant j'aimerais simplement réussir à obtenir un bon rendu sous Firefox.

Mes 3 images sont des images contenant une grande partie de transparence, et comme on peut le voir sur l'image jointe, la superposition du fond avec l'image de droite provoque une "surbrillance" logique.

Comment faire pour avoir la largeur du fond toujours décalé de 25px à droite, 25px étant la largeur de mon image du bord à droite? J'ai réussi à faire ce décalage sur la gauche, mais sur la droite en faisait (100%-25px) ça ne marche pas encore x)

Merci d'avance pour l'intérêt que vous porterez à mon problème.
Modifié par Parylin (05 May 2010 - 13:41)

Bonsoir.

<div class="gauche">
   <div class="droite">
      <div class="centre"></div>
   </div>
</div>

.gauche
{
   background: url(image_gauche.png) no-repeat top left;
   padding-left: 25px;
}
.droite
{
   background: url(image_droite.png) no-repeat top right;
   padding-right: 25px;
}
.centre
{
   background: url(image_gauche.png) repeat-x;
   height: 32px;
}

Voilà. C'est simple, et ça marchera partout.
Modifié par phpdoesnotcare (05 May 2010 - 00:50)

--------
Modifié par bluety (21 Apr 2019 - 16:44)

Bonjour, merci de vos réponses.

@phpdoesnotcare :

Parylin a écrit :
Une solution à mon problème serait de faire 3 div, et les coller côte à côte.
Cependant je trouve que ça charge le code et nuit à sa lisibilité, d'autant plus que ce cadre peut être appellé plus d'une quinzaine de fois dans la page.

pfoofen a écrit :

Hello,

Si le fond doit se répéter pourquoi avoir la valeur no-repeat ?

Je n'utilise pas la valeur repeat-x car l'image remplit entièrement le cadre sinon.
J'utilise la propriété -moz-background-size pour remplir une certaine proportion pour le moment, je sais que ça ne fonctionne pas comme ça mais je n'ai pas d'autres idées

Je ne vois pas en quoi ça réduit sa lisibilité. De plus, un site codé pour un ou plusieurs navigateurs particuliers est un site mal codé.
Ma solution t'oblige à utiliser 3 blocs, certes, mais néanmoins elle marchera partout, et pour le moment il est difficile de trouver mieux je pense (à quelques nuances près évidemment) sans taper dans quelque chose qui ne sera pas compris par IE, voire d'autres.

Mais puisque tu sembles vraiment vouloir utiliser du CSS3, penche-toi plutôt du côté de display: {-webkit-|-moz-}box; (mais tu devras toujours utiliser 3 blocs, de toute manière, donc c'est idiot pour le coup).
Modifié par phpdoesnotcare (05 May 2010 - 11:45)

Disons que ça m'énerve de devoir utiliser encore aujourd'hui 3 blocs divs pour faire simplement un titre h2 avec un cadre en image
Avoir <h2></h2> plutôt que
<div class="gauche">
<div class="droite">
<div class="centre"></div>
</div>
</div>
c'est quand même pas pareil.
Je me dis qu'avec les nouvelles techniques et possibilités ouvertes grâce au CSS3, on peut peut-être aujourd'hui réussir plus simplement et élégamment ce que je souhaite faire.
Bon ben peut-être pas encore finalement, c'est pas grave, mais si certains ont une idée ou une autre astuce (sans JS bien entendu), je suis preneur.

phpdoesnotcare a écrit :
De plus, un site codé pour un ou plusieurs navigateurs particuliers est un site mal codé.

C'est aller tout de suite trop loin dans son jugement... Vouloir utiliser des techniques nouvelles dans son site signifie qu'il est mal codé CAR ne fonctionnant pas avec tout les navigateurs?

Parylin a écrit :
C'est aller tout de suite trop loin dans son jugement... Vouloir utiliser des techniques nouvelles dans son site signifie qu'il est mal codé CAR ne fonctionnant pas avec tout les navigateurs?

Si le rendu est catastrophique sous d'autres navigateurs parce qu'ils ne comprennent pas du tout ton code : oui, absolument.
Le principe d'avoir une base commune pour tous les navigateurs et de rendre meilleure la navigation, etc., via des technologies plus récentes est une très bonne chose, mais s'il s'agit de ne proposer qu'une méthode qui ne sera comprise que par des navigateurs vraiment à jour niveau CSS3 et compagnie, ce que tu sembles vouloir faire, alors non.
Modifié par phpdoesnotcare (05 May 2010 - 12:24)

C'est une méthode un peu barbare, et peut-être pas omni-compatible, mais ça marche sur FF.

<h2 class="titre">Titre</h2>

Et dans ta feuille de style :

h2.titre {background:url(bg1.png) left top no-repeat; ...}
h2.titre:first-child {background:url(bg2.png) right top no-repeat; display:block; width:100%; ...}

Bien sûr il faut que bg2.png soit une image suffisamment large (1000px ?) et qui contiennent ton fond de droite ainsi que celui du centre répété...

Pour plus de compatibilité, tu peux écrire

<h2 class="titre"><a href="url">Titre</a></h2>

Puis tu remplace h2:first-child par h2.titre>a

@phpdoesnotcare :
Bien, alors non le rendu n'est pas catastrophique sous d'autres navigateurs je fais mes tests en parallèle, et je m'efforce d'avoir un rendu tout aussi propre sur chaque navigateur. Ce n'est pas grave si ce que je veux faire là maintenant ne fonctionne pas sur tout les navigateurs car premièrement:c'est principalement pour tester, deuxièmement:les navigateurs ne supportant pas ces méthodes il suffit de ne pas leur appliquer ce même code.
En gros ceux qui ont la chance de profiter de CSS3 grâce à leur navigateur, ils profitent un peu plus, et pour les autres, ils ne sont pas pénalisés.
Maintenant, je n'ai pas souhaité débattre de ça sur mon sujet, il y plein de topics exprès sur d'autres forums.
Je te remercie pour tes réponses et pense appliquer la solution des 3divs si je ne trouve rien d'autre.
Modifié par Parylin (05 May 2010 - 12:34)

Tu as raison, il est inutile de spammer ton sujet avec un pseudo-débât. Je me permets quand même de réagir sur ceci :

Parylin a écrit :
il suffit de ne pas leur appliquer ce même code.

C'est là justement le problème ! Tu n'es pas censé avoir un code HTML différent pour tel ou tel navigateur...

Merci de ta réponse Boudah Talenka,
je me suis inspiré de ce que tu as donné comme code et j'ai trouvé une solution!

<h2><div>Titre</div></h2>

h2 {
   float:left;
   height:32px;
   width:90%;
   margin:0;
   padding-left:25px;
   padding-right:25px;
   background-image:url(left.png), url(right.png);
   background-position: left top, right top;
   background-repeat: no-repeat, no-repeat;
}
h2>div {
   height:32px;
   margin:0;
   padding-top:8px;
   background:url(background.png) repeat-x;
}

et le résultat (parfaitement extensible en largeur) :

phpdoesnotcare a écrit :
Je me permets quand même de réagir sur ceci :
C'est là justement le problème ! Tu n'es pas censé avoir un code HTML différent pour tel ou tel navigateur...

Je comprends bien, mais je parlais plutot du code CSS et non html, et je limite au maximum d'avoir différentes interprétations à faire. Mais des fois, comme c'est le cas là, je préfère perdre en compatibilité et offrir quelque chose de plus "élégant" pour certains. Et puis qui sait, dans les mois à venir, peut-être que tout les navigateurs seront compatible CSS3, alors je préfère miser sur l'avenir sachant que mon site n'entrera pas en production avant quelques temps
Modifié par Parylin (05 May 2010 - 13:10)