begin process at 2012 05 29 07:56:46
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

descendre un texte...


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

descendre un texte...

vendredi 6 novembre 2009 à 18:02:46 | descendre un texte...

mlies

Hello,

On m'a donné un joli coup de main pour améliorer l'affichage d'une photo en plein écran.
Le souci c'est que maintenant le texte qui venait par dessus se retrouve en plein milieu de l'écran...
J'aimerais le mettre en transparence mais surtout le placer centrer et tout en bas de l'écran.
Zobibol à améliorer joliment mon script et m'a proposé d'utiliser un petit logiciel "Paint" pour rendre le fond transparent et incruster le texte. (textehome.gif dans le script)
Si en attendant quelqu'un peut m'aider pour descendre le texte et le centrer, ça serait super.
Le site en question :

[ Lien ]

Voici le script :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<meta name="generator" content="Adobe GoLive 6">
<title>- compagnie MA2 -</title>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">

<meta name="description" content="Nicolas Maloufi - Compagnie MA2 nicolas maloufi - bettina masson">
<meta name="keywords" content="compagnie ma2, nicolas maloufi, Danse Dense, Journees Danse Dense, Adiam 95, Escales 2009, Escales en Val d'Oise, Talents Danse, Adami, Drac Ile de France, ex-tension, et s il n'etait question que de ?a, Soyons Baroque, les effondres, Emilie Legret, Daniel Ciampolini, Cyril Leclerc, Aurore Ugolin, Dominique Mabileau, Bertrand Gauguet, Dan Weinstein">
<meta name="generator" content="Adobe GoLive 6">
<title> - COMPAGNIE MA2 - </title>
<style>
/**
* Style appliqué à l'image d'acceuil
*/
#backEnterPict{
position:absolute;
top:0px;
}

/**
* Le texte
*/
#welcomeText{
position:absolute;
z-index:5;
}
</style>
<script language="JavaScript" type="text/javascript">
// mis en commentaire,ça me gonfle ce genre de redimensionnement ;o)
//self.moveTo(0,0);
//self.resizeTo(screen.availWidth,screen.availHeight);
function resizeBackPict(){
var _img = document.getElementById("backEnterPict");
var _ratio = (640/1024);
var _newWidth =document.body.clientHeight / _ratio;
with( _img.style){
height = document.body.clientHeight + "px";
width= _newWidth +"px";
// centre l'image horizontalement alors
if ( document.body.clientWidth > _newWidth){
left = (document.body.clientWidth - _img.offsetWidth) /2 + "px";
}
}
// centrage du texte
var _welcomeText = document.getElementById("welcomeText");
with ( _welcomeText.style){
top = (document.body.clientHeight - _welcomeText.offsetHeight)/2 +"px";
left = (document.body.clientWidth - _welcomeText.offsetWidth)/2 +"px";
}

}

</script>
</head>

<body bgcolor="black" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0" onload="resizeBackPict()">
<img src="home1.jpg" alt="" border="0" id="backEnterPict" onmousedown="document.location='enter.html'" />
<img src="textehome.gif" alt="" height="180" width="600" border="0" id="welcomeText"/>

</body>

</html>


D'avance merci
bien à vous
nicolas

samedi 7 novembre 2009 à 10:46:39 | Re : descendre un texte...

kazma

Administrateur CodeS-SourceS
bonjour

retire la ligne que j'ai mis en rouge

centrage du texte
var _welcomeText = document.getElementById("welcomeText");
with ( _welcomeText.style){
top = (document.body.clientHeight - _welcomeText.offsetHeight)/2 +"px";
left = (document.body.clientWidth - _welcomeText.offsetWidth)/2 +"px";
}

dans le style met ceci

<img style="bottom:0px;margin:auto"
src="-%20compagnie%20MA2%20-_files/textehome.gif" alt=""
id="welcomeText" border="0" width="600" height="180">
samedi 7 novembre 2009 à 12:05:35 | Re : descendre un texte...

mlies

Hello,
Merci pour ta réponse, mais autant la 1ère manip est très clair.
La 2ème j'avoue j'ai un peu de mal à localiser où ce trouve le style et ce que je dois ajouter précisément.
Désolé, si tu peux m'éclairer ?
D'avance merci
nicolas
samedi 7 novembre 2009 à 12:18:28 | Re : descendre un texte...

mlies

Euh des précisions donc :
Voici le script d'après ce que j'ai compris avec en rouge les parties modifiées, sauf pour la ligne top = (document.body.clientHeight - _welcomeText.offsetHeight)/2 +"px"; que j'ai supprimé.
Le problème c'est que le texte n'apparait plus, on voit juste l'emplacement :

// centrage du texte
var _welcomeText = document.getElementById("welcomeText");
with ( _welcomeText.style){
left = (document.body.clientWidth - _welcomeText.offsetWidth)/2 +"px";
}

}

</script>
</head>

<body bgcolor="black" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0" onload="resizeBackPict()">
<img src="home1.jpg" alt="" border="0" id="backEnterPict" onmousedown="document.location='enter.html'" />
<img style="bottom:0px;margin:auto"
src="-%20compagnie%20MA2%20-_files/textehome.gif" alt=""
id="welcomeText" border="0" width="600" height="180">


</body>

</html>

Merci à toi
nicolas
samedi 7 novembre 2009 à 12:19:42 | Re : descendre un texte...

kazma

Administrateur CodeS-SourceS


c'est mieux la

</script>
</head>

<body bgcolor="black" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0" onload="resizeBackPict()">
<img src="home1.jpg" alt="" border="0" id="backEnterPict" onmousedown="document.location='enter.html'" />
<img src="textehome.gif" style="bottom:0px;margin:auto" alt="" height="180" width="600" border="0" id="welcomeText"/>

</body>

</html>
samedi 7 novembre 2009 à 12:49:39 | Re : descendre un texte...

mlies

Merci,
c'est super cool.
Je vais essayer de déplacer le texte un peu sur la droite.
Mais merci beaucoup pour le coup de main
A+
nicolas


Cette discussion est classée dans : texte, document, body, px, welcometext


Répondre à ce message

Sujets en rapport avec ce message

petite question sur document.body.innerHTML [ par Bestdoud ] Bonjour,j'utilise la focntion document.body.innerHTML pour ajouter du texte dans ma page. et je me suis aperçu qu' à chaque ajout, la page était comme fond étiré et texte ajouté par dessus [ par Bestdoud ] Bonjour,J'ai essayé de mettre un fond qui s'étire dans ma page webj'avais trouvé ca:  function makeIm(){ NS4=(document.layers); IE4=(docum Surligner un mot clé sur une page à partir d'une toolbar [ par Chisai ] Bonjour, Je veux faire un stabilo, a peut près comme celui proposé dans la toolbar de google. Voici ce que j'ai: ------------------------------------- erreur sous safari [ par laubro ] Bonjour j'essai de monter un script de compte a rebourg avec de l'ajax le principe un compte a rebourg de 2mn, qui peut être relancé à 2mn en cliquan OnChange sur liste déroulante! [ par Daroude29 ] Bonjour,Voilà, j'ai un petit soucis avec l'utilisation d'un onChange sur un select, voici le code :dans fichier1.php j'ai le code de la fonction javas Forcer un texte à une balise SELECT [ par Axl1 ] Bonsoir.J'espère trouver une réponse dans ce forum pour un problème que je n'arrive vraiment pas à résoudre et je vous remercie d'avance.J'ai une bali Probleme avec IE et Opera [ par SuperChouquette ] Bonjour, je suis débutant et je tente de faire un script qui permette d'effectuer une recherche dans une liste, celui- ci fonctionne parfaitement sous Aide SVP [ par Brigadiste ] salutSVP, je veux un code javascript qui prend en charge comme document texte en entrée, il le découpe en phrase puis les envoi une à une sur un moteu Recuperation d'ID DE DIV [ par grandpa006 ] Bonjour,Voila je voudrais recuperer l'ID de mes DIV en meme temps que le click de la souris mais j'y arraive pas.Si une ame charitable a une idée se s info bulle js [ par misskis ] Bonjour,J'ai récupéré un script "merci TeDeum" pour créer des info bulle en jsTrés sympa mais j'ai un bug sur ie.Le script :&l


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,624 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales