CSS Afficher du texte par-dessus plusieurs divs - Page 1

yop,

je voudrais en CSS afficher un texte dans un cadre comportant une bordure en haut et en bas; le cadre doit pouvoir changer de taille en hauteur comme en largeur (donc les bordures doivent être des élements séparés du fond), et je voudrais que le texte "morde" sur les deux bordures, un peu comme ça :



est-ce possible ? je vois comment faire mordre sur l'une des bordures, par exemple celle du haut, mais pas les deux à la fois :/

z-index:9999999999999 ?

ac un float: right ?

nEUrOO > z-index:99999 sur quel div ? (je comprends pas trop ce que ça pourrait changer ?)
yAro > float right sur quel div ? (idem ?)

<style>

.fond
{
	position: relative;
	border-top:20px solid #B9B9B9;
	border-bottom:20px solid #B9B9B9;

	background-color: #E7E7E7;
}
.txt
{
position: absolute;
top: 7px;
font-size: 40px;
}
</style>


<div class='fond'>&nbsp;<div class='txt'>Texte</div></div>

?

et est ce que ça pourrait t'aller ça :

<div style="background:silver">
<div style="background:gray;height:10px;margin-bottom:-10px;"></div>
<div style="font-size:20px;">Texte<br/>Texte 2</div>
<div style="background:gray;height:10px;margin-top:-10px;"></div>
</div>

mais les marges négatives c'est pas standard donc ça peut ne pas passer chez tout le monde :/

edit: oui j'arrive pas à le faire marcher avec ie7

yAro : vi mais c'est pas une bordure pleine que je veux mettre, c'est une image
(et puis ça a l'air de foirer sous FF, mais ça à la limite c'est moins grave)

Nue : faudrait que je fasse un truc qui fonctionne en priorité sous ie (6 & 7), donc c'est gênant :/

bah tu met ton image en background au lieu des border ^^

justement c'est parceque c'est ça qui me pose problème que j'ai fait un topic : on ne peut définir qu'une seule image de fond, donc je vois pas trop comment en coller une en bas et une autre en haut :/

faire 2 div

ui mais comment tu fais pr qu'il y en ai un qui reste tjrs en bas ^^

bah tu met le fond du 2eme en position bottom

"position bottom" ? c'est quoi ça ? pr moi position c'est relative ou absolute (ou fixed ms il me semble que pr ie6 ça marche pas). me balancer un attribut css comme ça c'est pas la peine, si c'est pr que je passe 10 minutes à essayer toutes les combinaisons possibles pr finalement me rendre compte que ça ne marche pas :/

background-position: bottom;

pour l'image qui est censée représenter le truc d'en bas

bon, après avoir testé un paquet de trucs tous plus foireux les uns que les autres, avec le background-position y'a plus forcément besoin de position relatives : http://www.mirari.fr/temp/index.htm

j'ai perdu le fait de pouvoir répeter les textures des bordures haute et basse, mais tant pis, pas pu obtenir mieux que ça :/

un truc hyper important pour que les margin et padding soient bien interprétés de la même manière sous IE et FF :
mettre le doctype approprié

cf ces pages :

http://blog.alsacreations.com/2006/10/23/296-a-propos-du-modele-de-boite-microsoft-ou-quirks

http://www.opera.com/docs/specs/doctype/index.dml

http://css.alsacreations.com/Bases-et-indispensables/DTD-comment-choisir

http://docs.mandragor.org/files/Web_standards/Openweb_fr/CSS/Gerer_les_modeles_de_boites_CSS_standard_et_Microsoft.htm