28220 sujets

CSS et mise en forme, CSS3

Ecrire dans un cadre dont tous les bords sont des images ?

Salut à tous !!

J'ai réalisé un cadre que vous pouvez voir ici http://galilandt.free.fr/cadre.html

Seulement j'aimerais pouvoir ecrire dedans (en haut sur la partie verte, au milieu, et en bas dans lautre partie verte) J'ai essayé plusieurs manieres mais ca remplace toujours un des cotés ou du texte est écrit par une zone blanche qui déborde sur le cadre :o.

Savez vous comment je peux procéder pour ecrire nimporte ou dans ce cadre ?

voici les codes :

#cadre_conteneur
{
background-color: #FFFFFF;
height: 500px;
border: 1px solid black;
}

#cadre_haut
{
height: 50px;
width: 100%;
background-image: url(images/cadre_contenu/haut.jpg);
background-repeat: repeat-x;
}

#cadre_haut_gauche
{
height: 50px;
width: 10px;
background-image: url(images/cadre_contenu/haut_gauche.jpg);
background-repeat: repeat-x;
}

#cadre_haut_droite
{
float: right;
height: 50px;
width: 15px;
background-image: url(images/cadre_contenu/haut_droite.jpg);
background-repeat: repeat-x;
}

#cadre_milieu_gauche
{
height: 300px;
width: 10px;
background-image: url(images/cadre_contenu/milieu_gauche.jpg);
background-repeat: repeat-y;
}

#cadre_milieu_droite
{
float: right;
height: 300px;
width: 15px;
background-image: url(images/cadre_contenu/milieu_droite.jpg);
background-repeat: repeat-y;
}

#cadre_bas
{
height: 50px;
width: 100%;
background-image: url(images/cadre_contenu/bas.jpg);
background-repeat: repeat-x;
}

#cadre_bas_gauche
{
height: 50px;
width: 10px;
background-image: url(images/cadre_contenu/bas_gauche.jpg);
background-repeat: repeat-x;
}

#cadre_bas_droite
{
float: right;
height: 50px;
width: 15px;
background-image: url(images/cadre_contenu/bas_droite.jpg);
background-repeat: repeat-x;
}


et le html :
<body>
<div id="cadre_conteneur">
	<div id="cadre_haut">
		<div id="cadre_haut_droite"></div>
		<div id="cadre_haut_gauche"></div>
	</div>
	<div id="cadre_milieu">
		<div id="cadre_milieu_droite"></div>
		<div id="cadre_milieu_gauche"></div>
	</div>
	<div id="cadre_bas">
		<div id="cadre_bas_droite"></div>
		<div id="cadre_bas_gauche"></div>
	</div>
</div>
</body>

Modifié par galinette (06 Apr 2005 - 12:49)
bonjour,

je pense que tu dois pouvoir trouver la réponse ici

( voir construction d'un cadre entierement fluide )
Modifié par ganou66 (06 Apr 2005 - 15:48)
merci mais je n'ai toujours pas la réponse, ce tutorial explique avec 4 cotés or moi, tous les bords de mon cadre sont des images : haut-gauche, haut, haut-droite, droite, bas droite, bas, bas-gauche, gauche.

Donc c'est la qu'est le probleme, enfin vous pouvez regardez la pour vous rendre compte du resultat obtenu http://galilandt.free.fr/cadre2.html
Pourquoi tu feras pas trois images?
La 1ere : le haut qui regroupe haut-gauche, haut, haut-droite.
La 2eme : centre avec les marges qui se repete horizontalement.
La 3eme : la bas qui regroupe bas-gauche, bas, bas-droite.

Le code Html : 

<div id="haut"></div>
<div id="centre">blablablabla</div>
<div id="bas"></div>


Personnellement, je ferais comme ca mais bon...
Sujet clos
Aller à