#1 Le 03/03/2008, à 11:20
- DZ
HTML - Javascript - Image de fond + Texte centré
Bonjour!
Je ne pensais vraiment pas galérer sur un problème aussi simple.
Je m'explique:
Précédemment j'affichais du texte sur tout l'écran, centré horizontalement, et verticalement.
J'utilisais ceci:
function joue_texte_libre($police, $couleurP, $taille , $txt_libre)
{
echo('<font id="TexteLibre" face="'.$police.'" style="color:'.$couleurP.';font-size:'.$taille.'">'.str_replace("LF-CR","<br>",$txt_libre).'</font>');
}Je souhaite ajouter une image de fond, qui prenne tout l'écran, qui soit étirée, quelque soit la résolution.
Et bien, échec complet.
Soit l'image de fond ne s'affiche pas en entier, uniquement une partie, celle où y a du texte
(en gros si j'ai 2 lignes de textes, j'ai l'image qui commence sur la première ligne, et qui est tronquée en bas de la 2°).
Soit j'ai l'image de fond, et le texte tout en dessous, ce qui fait qu'en hauteur ca prend la taille de 2 écrans.
Il suffirait pourtant d'un calque d'arrière plan contenant l'image, et d'un calque au-dessus qui contienne le texte, mais ils refusent de se superposer. Où quand ils le font, le texte n'est pas centré verticalement...
Je sèche donc complet!
Si quelqu'un voit comment je pourrai m'en sortir...
Edition:
Précisons que ca n'a besoin de marcher que sous firefox, car on livre le pc, l'application et tout ce qui va avec... 
Dernière modification par DZ (Le 03/03/2008, à 11:40)
Hors ligne
#2 Le 03/03/2008, à 11:43
- KristoV
Re : HTML - Javascript - Image de fond + Texte centré
Oui, je vois ^^
Tu réponds toi même à ton message dans celui-ci en disant qu'il faut superposer des calques. Il te suffit de créer deux div, une contenant ton image et l'autre contenant ton texte que tu supperpose l'une à l'autre. je te renvoie là http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS pour une explication plus poussée sur la superposition des div ^^
Et pour le centrage vertical du texte, http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS voila.
Hors ligne
#3 Le 03/03/2008, à 12:41
- DZ
Re : HTML - Javascript - Image de fond + Texte centré
Alors, première solution, avec les marges négatives, si je comprends bien (pas gagné), je dois avoir ca:
#textelibre
{
margin-left: <?echo(ratioW($resolution,40)."px")?>;
width: 93%;
height: 82%;
border: 1px solid black;
text-align:center;
}
#arrieretextelibre
{
position: absolute; /* dimension et positionnement du bloc conteneur de l'image */
left: 50%;
top: 50%;
height:100%;
width: 100%;
margin-top: -400px; /* moitié de la hauteur */
margin-left: -640px; /* moitié de la largeur */
background-image:url(./images/TexteLibre/textelibreublanc.jpg);
}Puis
<body>
<div id="arrieretextelibre">
<div id="textelibre"><p>
<?
joue_texte_libre($police, $couleurP,$taille , $txt_libre);
?></p>
</div>
</div>Avec ce code le texte n'est pas centré verticalement, je vais essayé avec l'autre méthode décrite...
Merci pour les indications.
Edition:
#textelibre
{
margin-left: <?echo(ratioW($resolution,30)."px")?>;
width: 95%;
height: 82%;
border: 1px solid black;
text-align:center;
display: table-cell;
vertical-align: middle;
}Avec ce code non plus 
Dernière modification par DZ (Le 03/03/2008, à 12:51)
Hors ligne
#4 Le 04/03/2008, à 12:15
- DZ
Re : HTML - Javascript - Image de fond + Texte centré
Bonjour,
Personne ne voit ce qui peut clocher avec les 2 derniers essais?
Merci
Hors ligne