28220 sujets

CSS et mise en forme, CSS3

[résolu]Comment creer un tableau avec un fond dans un des coins

Bonjour a tous

tout d'abord je voudrais vous remercier pour toute l'aide que vous m'avez apporté sur ce forum qui m'as énormément aidé.

voici mon casse tete du moment:
j'aimerai reproduire en css ce tableau ci upload/717-total.gif

j'ai commencé en decoupant 3 zone:
le haut, le bas et le milieu et un conteneur pour le tableau (avec en bakground une image en longueur du tableau)
dans haut et bas, je colle 2 div avec coin gauche et coin droit
mais pour le conteneur du bas, j'arrive pas à ce que l'image en grand soit utilisée et que on puisse écrire dessus.

Voici le code css
_h_g = haut gauche
#jeux_secret {
	background-color:#74C684;
	background: url(images/secret_m.jpg) repeat-y;
	width: 560px;
}
#jeux_secret_h
{
	height: 5px;
	background: url(images/secret_h_f.jpg) repeat-x;	
}

#jeux_secret_h_g {
	height: 5px;
	width: 5px;
	background-repeat: no-repeat;
	font-size:1px;
	background: url(images/secret_h_g.jpg);
	float: left;
}
#jeux_secret_h_d {
	height: 5px;
	width: 5px;
	background-repeat: no-repeat;
	font-size:1px;
	background: url(images/secret_h_d.jpg);
	float: right;
}
#jeux_secret_b
{
	height: 5px;
	background: url(images/secret_b_f.jpg) repeat-x;	
}

#jeux_secret_b_g {
	height: 5px;
	width: 5px;
	background-repeat: no-repeat;
	font-size:1px;
	background: url(images/secret_b_g.jpg);
	float: left;
}
#jeux_secret_b_d {
	height: 5px;
	width: 5px;
	background-repeat: no-repeat;
	font-size:1px;
	background: url(images/secret_b_d.jpg);
	float: right;
}


html:
		<div id="jeux_secret">
			<div id="jeux_secret_h"><div id="jeux_secret_h_g"></div><div id="jeux_secret_h_d"></div></div>
			test<br />
			du tableau pour voir si cela fonctionne<br />
			<br />
			tableau &eacute;tirable<br />
		  <br />
			a volont&eacute;
	        <div id="jeux_secret_b"><div id="jeux_secret_b_g"></div><div id="jeux_secret_b_d"></div>
	        </div>
		</div>


merci d'avance pour votre aide
Salut,

Tu parles d'un tableau, qui n'est pas visible sur ton image.
Pourrais-tu fournir un lien vers une page en ligne, et mettre des données fictives dedans afin qu'on voie mieux le problème.

Merci
Salut,

Tu parles d'un tableau, qui n'est pas visible sur ton image.
Pourrais-tu fournir un lien vers une page en ligne, et mettre des données fictives dedans afin qu'on voie mieux le problème.

Merci
Modifié par Marvin Le Rouge (01 Apr 2005 - 14:55)
Sur internet explorer "height" n'est pas toujours pris en compte pour les taille de <div> inférieure à 10 (d'après ce que j'ai remarqué). Si t'es sur ce navigateur, essaie de mettre un espace (&nbsp;) dans les <div> _b_g et _b_d


Sinon met un lien vers ta page, on a du mal à voir le problème sans avoir accès aux images...
ca je me doute, je vous demande si vous auriez une solution?
c'etais juste histoire de faire un test pour l'affichage complet, pcq je peut afficher dans un conteneur de taille xx px mais le prob restera que je ne pourrai pas écrire dessus Smiley decu
Modifié par comicway (01 Apr 2005 - 15:48)
comicway a écrit :
ca je me doute, je vous demande si vous auriez une solution?
c'etais juste histoire de faire un test pour l'affichage complet, pcq je peut afficher dans un conteneur de taille xx px mais le prob restera que je ne pourrai pas écrire dessus Smiley decu



Ben si, met ton texte entre tes balises <div> et le texte apparait par dessus ton image si elle est en background : url("");

Moi j'ai que des images de fond sur mon site :

http://www.final-fantasy.ch/newdesign/

Et ça marche très bien pour mes menus.

Je te conseille une architecture genre 


<div class="entete">
   <span class="enteteleft"></span>
   <span class="entetemiddle"></span>
   <span class="enteteright"></span>
</div>
<div class="plaintext">
tout ton texte autant que tu veux, ça élargira vers le bas (et vers la droite suivant ton css)
</div>
<div class="footer">
   <span class="footerleft"></span>
   <span class="footermiddle"></span>
   <span class="footerright"></span>
</div>


Les span te permettent de simuler les cases haut gauche, haut droite, bas gauche et bas droite d'un tableau.

Si tu veux écrire dans ton footer, tu peux le faire sur le footermiddle, tu peux mettre un menu à gauche de ton plaintext..............
c'est pas exactement ce que je voulais, je sais appliquer des images de fond, le probleme vien que j'aimerai que le conteneur bas ne sois pas fixe et que les autres puissent déborder (milieu)
Modifié par comicway (01 Apr 2005 - 22:15)
Sujet clos
Aller à