[Problème] Header d'un cadre avec coins ronds

Bonjour,

Voila, j'aimerais obtenir un header de cadre comme ceci :

C'est à dire :
- Une image à gauche du Header
- Un texte descriptif H2
- Une image à droite du Header

Le problème est que mon texte peut etre sur plusieurs lignes comme ceci :


Je n'arrive pas à réaliser ça. J'ai essayé de mettre 3 divs inline je n'arrive pas à augmenter la taille des images extremes pour qu'elles s'adaptent à la taille du header...

J'aimerais juste savoir comment il faut que je m'y prenne car j'ai essayé plusieurs méthodes mais là je suis un peu perdu :s

Merci d'avance

Bonjour,

Partant du principe que la taille de ton encart est fixe en largeur, la méthodologie que je te conseillerais est la suivante :
- un <div> global de taille fixe pour ton encart qui reçoit le fond général (comprendre celui de la partie texte).
- dans lequel tu places un titre <h2> qui va recevoir le fond de ton titre.

Il suffit que ce dernier soit suffisament grand (en hauteur) pour accueillir une ou deux lignes et le tour est joué : tu le places en haut, et si ton titre passe sur deux lignes, alors l'arrière-plan attaché à ton titre apparaîtra automatiquement en cas de besoin.

Pense également à placer un léger padding-bottom à ton titre pour que l'arrière-plan ne s'arrête pas pile poil au niveau du titre.

Euuuhm...
Est-ce assez clair ?!?

Hello !
Thanks for your answer. Si mo, cadre n'a pas de taille fixe, c'est grave ?
En fait, mon image du centre est une bande de 1px en repeat-x...

Dans l'absolu non...
Mais si tu veux que ton titre passe sur 2 lignes, il faut bien fixer une largeur ... Non ?

actuellement, je n'ai pas de "corner", et j'ai fixé 30% comme taille (30% de la taille de l'écran ca doit vouloir dire). C'est considéré comme fixe ?

thomus38 a écrit :
j'y suis presque mais les derniers pas sont coriasses!!
Mon image ne s'adapte pas automatiquement au cadre en hauteur. C'est à dire que mon image se répète au lieu de s'étirer... Y'a une propriété qui permet à une image de rentre dans le moule de son div parent ?

Coriace ?!?
Rhaaa, sale bête !

En fait, l'idée ce n'est pas de répéter tes images.
Tu dois les créer suffisament longues pour que lorsque le titre passe sur deux lignes, le fond suivent le mouvement.

Pour faire simple l'idée c'est que lorsque tu as deux lignes, tu laisses apparaître toute l'image de fond. Mais par contre, lorsque tu n'as qu'une seule ligne, tu en masques la moitié.

Je pense que tu trouveras ton bonheur ici:

http://web.covertprestige.info/test/06-page-fluide-avec-bordures-en-html-et-css.html

Le code source la page contient le css également et est prévu pouvoir une page fluide.
Modifié par xis (04 Jul 2007 - 17:11)

Salut,

xis a écrit :
Je pense que tu trouveras ton bonheur ici:

http://web.covertprestige.info/test/06-page-fluide-avec-bordures-en-html-et-css.html

Le code source la page contient le css également et est prévu pouvoir une page fluide.

Oui, il y a ça qui est bien aussi :

http://www.clb56.fr/test_css/test_4bordures/

La technique fonctionne très bien, d'autant qu'il ne s'agit pas d'un cadre général de page mais d'un élément précis avec visiblement des dimensions très controlables même si fluides.
Modifié par Christian Le Bouler (04 Jul 2007 - 19:55)

Christian Le Bouler a écrit :
Salut,

moi je sais comment faire, même si dans ton cas il faudrait un peu plus de code, un code plus complet quoi.

Mais comme on me prend pas trop au sérieux là dessus j'ai plus trop envie d'aider en fait.



Oui, il y a ça qui est très bien aussi :

http://www.clb56.fr/test_css/test_4bordures/

Bref, tout ça pour dire que si j'avais ton problème je le résoudrais sans doute très facilement. D'autant qu'il ne s'agit pas d'un cadre général de page mais d'un élément précis avec visiblement des dimensions très controlables même si fluides.

Mais bon comme tu auras très rapidement des propositions avec tableaux et <div> vides tous azimuts alors je te laisse profiter de ces futurs conseils.

Bref

Bonjour Christian

Hummmmmm ! Voilà encore des propos que nous n'apprécions pas trop sur le forum... Soit tu aides soit tu n'aides pas, personne ne t'y oblige.
Merci de tenir compte de ma remarque, s'il te plait

Hello,

Pour ma part, si c'est possible, je partirais sur quelque chose de beaucoup plus simple.

thomus38 a écrit :
Voila, j'aimerais obtenir un header de cadre comme ceci :
upload/12782-screen1.jpg

C'est le design que tu dois réaliser ou c'est un exemple «qui ressemble mais c'est pas tout à fait ça»?

Pour réaliser ce design précis, le plus simple est de fonctionner ainsi :

<div id="boite">
<h2>Mon titre</h2>
<div class="sous-boite">
<p>Mon texte ou autre contenu...</p>
</div>
</div>

On s'occupe alors d'abord du cadre global (bordure rectangulaire de 1px de large, pas de padding), de la décoration du titre (image de fond avec dégradé, peut-être une bordure en bas de 1px, padding pour que le texte ne colle pas aux bords), et des éléments de contenu (un peu de padding sur div.sous-boite, et pour le reste tout ce qu'on voudra).

Restent alors juste à placer 4 petits coins arrondis. Ça peut se faire grâce à quatre éléments (par exemple des span) positionnés en absolu par rapport à un div#boite positionné en relatif.

<div id="boite">
<span class="haut-gauche"></span>
<span class="haut-droite"></span>
<span class="bas-gauche"></span>
<span class="bas-droite"></span>
<h2>Mon titre</h2>
<div class="sous-boite">
<p>Mon texte ou autre contenu...</p>
</div>
</div>

Un exemple pour le premier :

div#boite .haut-gauche {
position: absolute;
left: -1px; top: -1px;
width: 10px; height: 10px;
background: ... ;
}

Quelque chose du genre...

La technique avec les quatre coins positionnés en absolu est détaillée quelque part sur Alsa, je crois.

À noter que ça doit pouvoir s'automatiser facilement (le rajout des quatre span de décoration) en Javascript. Et en l'absence de JS, on rebascule sur quelque chose de plus carré, ce qui n'est pas catastrophique.

Hello!

Simplement pour répondre à la premiere question : c'est tout à fait le design que je dois produire...
Je suis en train de coder une autre sol en lisant vos propositions !

dominique a écrit :

Merci de tenir compte de ma remarque, s'il te plait

Bonjour Dominique, OK je corrige.

Bonjour à vous

Merci Christian