Cadre encadré

Bonjour,

J'aimerais créer un site avec un cadre en dégrader et un second cadre à l'interieur pour donner un effet de style. le plus simple et un exemple par image :
http://img142.imageshack.us/img142/9701/image15vw7.jpg

le texte peut etre variable et sur plusieurs lignes.
Je sais réalisé celà par tableau avec des background horizontal et vertical.Mais sans tableau, et en CSS je ne sais pas faire.
donc comment d'un <div id=text">Bonjour et autre <br>..</div>, passer de l'image que je souhaite avec une feuille CSS.
Merci davance

PS: Ma grande difficulté est que je sais mettre une image de fond dans les div, mais je ne sais pas mettre une image de fond qui "entoure" le div, et encore moins à longueur variable

Bonjour,

Peut-être que tu peux t'inspirer de http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html ?

Bonjour,

Largeur fixe (en pixels) ou fluide?

Largeur fixe:
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html

Largeur fluide:
http://web.covertprestige.info/test/35-boites-fluides-bords-coins-en-images.html (bien lire la partie sur les «contraintes facilitantes» et exploiter toutes celles que l'on pourra)
Modifié par Florent V. (14 Mar 2008 - 12:36)

Ensuite, en lisant les tutoriels que vous m'avez fournie, j'ai revue à la baisse mes exigences.
Vu qu'il est très très compliqué de faire un tableau 100% variable, j'ai décidé de fixer la hauteur.

voici mon code html:
<div="conteneur">
<div="entete"></div>
<div="corp">Bonjour</div>
<div="pied"></div>
</div>

en css:
#conteneur{
width: 88%;
background: url(fond_vertical.jpg) top left repeat;
}
#header {
background: url(hauteur_gauche.jpg) top left no-repeat;
width: 19px;
height: 605px;
}
#pied {
background: url(hauteur_droit.jpg) top left no-repeat;
width: 19px;
height: 605px;
position:absolute;
right:40px;
top:0px;
}

le problème est sur le cadre droit de ma page (pied).
je fixe sa position a 40px à droite du bord.
Le problème est que le cadre (conteneur) est variable soit 88% de la taille de la page.
Je n'arrive donc pas à position correctement le cadre droit pour qu'il vient bien compléter le conteneur à droit.

PS: Je suis a l'écoute sur toute remarque de mon code, si besoin.

Bonjour,

On n'utilisera pas des blocs séparés mais des blocs imbriqués. Deux blocs imbriqués peuvent suffire. Pour faire une mise en page de type «boite» avec seulement du texte brut comme contenu, par exemple pour un titre, on peut avoir un code comme ceci:

<h1 id="header"><span>Bonjour</span></h1>

(On passera alors le span en display: block.)

Pour faire une boite pour un contenu plus important, on peut avoir la structure suivante:

<div id="header">
	<div id="header-bis">
		Contenu
	</div><!-- #header-bis -->
</div><!-- #header -->

Pour le reste, il me semble que c'est dans le tutoriel indiqué pour une boite avec une largeur fixe. Il faut juste transposer: largeur fixe -> hauteur fixe.

Non, si je suis ton tutorial et je le transpose sur ma page, ca devient une catastrophe. Plus rien à leur place.
Toute est les uns en dessous des autres

laclac1 a écrit :
Non, si je suis ton tutorial et je le transpose sur ma page, ca devient une catastrophe. Plus rien à leur place.

Ben là je peux pas faire grand chose, ça ressemble plutôt à un manque de compétence/connaissances qui t'aurait amené à bidouiller du code à partir d'un exemple sans le comprendre. Ça se soigne en apprenant HTML et CSS.

L'exemple du tutoriel est fonctionnel. La méthode est éprouvée. Rien d'autre à ajouter que: retravaille cette méthode, mais plutôt en partant de deux éléments imbriqués pour dessiner le cadre.