Texte décalé suivant résolutions d'écran

YvesNa · le 17 octobre 2007

Bonjour,

J'ai appliqué le script ci-dessous (texte défilant de bas en haut), mais me heurte à un problème quand je change de résolution d'écran.

- Pour mon écran 1024 x 768, j'ai placé mon script animé à 834 px du bord gauche de la fenêtre. C'est OK.

- Mais quand je passe à un écran 1280, ce script se retrouve déporté plus à gauche, et chevauche d'autres éléments de la page...

Le script est, en effet, sur le site "acestgratuit" ci-dessous :

// La distance par rapport au bord gauche de la fenêtre.

var scrollerleft=34 (834 dans mon cas)

Lien à voir :

http://acestgratuit.free.fr/scripts_dhtml/scroll28.html

Quelqu'un a-t-il des pistes ? Il faudrait "caler" cette valeur par rapport au bord de mon cadre, et ça, je ne sais pas...

Attention : je ne suis pas un expert...

Merci d'avance.

KewlCat · le 17 octobre 2007

Effectivement, il faudrait éviter de travailler en absolu en calculant tout en fonction de ta résolution de travail.

Si tu précises que le cadre dans lequel se fait le défilement est en position absolue ou relative, tu pourras faire scroller son contenu sans te soucier de la résolution d'affichage (en fait, de la taille de la fenêtre du navigateur !) parce que les sous-éléments des blocs positionnés en absolu ou relatif utilisent ce bloc comme référentiel (et non l'intégralité du document).

Si tu veux un exemple de "boite défilante" qui ne subit pas les changements de résolution / taille de fenêtre, je te propose de partir sur un travail que j'ai déjà effectué et de l'adapter à tes besoins : http://kewlcat.no-ip.org/tests/scroller.html (et surtout, il est compatible avec beaucoup plus de navigateurs, et nettement moins lourdingue que celui que tu as choisi) ;-)

Dylav · le 17 octobre 2007

Oui, c'est tout le problème du positionnement fixe dans un écran dont les dimensions changent... En fait, le seul endroit qui ne te causerait aucun souci, c'est de fixer ta boîte déroulante en haut à gauche de ton écran.

Ceci dit, je ne comprends pas bien : si par ton positionnement tu donnes une marge gauche fixe de 834px, je ne vois pas pourquoi cettte marge gauche changerait quand l'écran change de résolution ? Ce qui changera, c'est la partie droite de ton écran, qui deviendra plus spacieuse en 1280x1024 qu'en 1024x768...

Argh... grillé par KewlCat !

KewlCat · le 17 octobre 2007

Oui, tiens, d'ailleurs.... Comment se fait-il que tu définisses une marge fixe à ton texte déroulant alors que tu sembles laisser se balader le reste du contenu ? Pourquoi ne pas avoir fixé une marge à tous les éléments une bonne fois pour toutes et laisser "l'autre côté" libre de s'agrandir au gré des résolutions ?

YvesNa · le 18 octobre 2007

Bonjour,

Merci à tous deux pour vos éléments de réponse. Mais le script que j'ai utilisé (et que je ne sais pas modifier...) se fait avec une "distance par rapport au bord gauche de la fenêtre" (varscrollerleft=). Donc, quand ma fenêtre change de résolution, le tableau déroulant se balade...

En revanche, j'ai établi toute ma page avec "align=center" et "width=1000". Le site est optimisé pour 1024 x 768, mais j'ai fait en sorte que, pour les écrans de 1280 x 1024, il y ait de part et d'autre (tout autour en fait) un arrière-plan coloré.

Si cela peut vous aider, je vous livre :

- le script du texte aligné (je ne parviens pas à mettre la main sur l'auteur)

- les définitions de ma page

SCRIPT

// Copyright Peter Gehrig and Urs Dudli at www.24fun.ch/

// If you add this script to a script-library or script-archive

// you have to add a hyperlink to www.24fun.ch on the webpage

// Le titre | le texte|le lien des messages

var message= new Array()

message[0]="Grande Nuit Africaine | Réservez dès à présent votre soirée du 24 novembre. | "

message[1]="Qui sommes-nous ? | Nous avons pour vocation de participer au développement social, sanitaire, alimentaire, médical, éducatif, culturel et économique dans les zones défavorisées. | "

message[2]="Soutenez notre action | Adhérez en ligne à l'Association Pangée en cliquant sur ce titre. | "

// La hauteur de la boite de messages.

var scrollerheight=129

// La largeur de la boite de messages.

var scrollerwidth=140

// La distance par rapport au bord supérieur de la fenêtre.

var scrollertop=17

// La distance par rapport au bord gauche de la fenêtre.

var scrollerleft=834

// La distance entre le bord et le texte.

var scrollerpadding=5

// La largeur du bord de la boite de messages.

var backgroundborder=0

// La couleur de l'arrière-plan de la boite de messages.

var scrollerbgcolor="#CC9900"

// Les attributs de la police du titre.

var font_titleface="Verdana"

var font_titlecolor="FFFFFF"

var font_titlesize=1

// Les attributs de la police du texte;

var font_copyface="Verdana"

var font_copycolor="3151DC"

var font_copysize=1

// Le temps de pause entre les message (en millisecondes).

var standstillfix=3000

////////////////////////////////////////////////

etc................

MA PAGE :

</div>

</div>

<td>

etc....

Si tout cela peut vous aider !

Merci d'avance.

Dylav · le 18 octobre 2007

Bon, je vois où réside le problème.

Tu réserves d'une part une zone en position fixe pour installer ton texte déroulant.

Et tu fais d'autre part flotter au centre de ton écran une autre zone de dimensions fixes.

Forcément, il y a un risque de recouvrement, si l'une bouge et l'autre pas.

A mon avis, une solution simple serait d'intégrer ta zone à texte déroulant dans ta zone centrale. Attention, elle serait alors à positionner par rapport au coin haut gauche de cette zone centrale.

<table width="1000" border="3" cellspacing="0" cellpadding="10" align="center" bordercolor="#000000" background="images/fonds/fond.jpeg">
<tr valign="top">

<td>

...

<div id="scrollerbg" style="position:absolute;top:-1000px">

<p> </p>

</div>

<div id="scrollertext" style="position:absolute;top:-1000px">

<p> </p>

</div>

...

</td>

</tr>

</table>

Une remarque au passage : il n'est pas raisonnnable d'utiliser des tableaux (balises <table>, <tr>, <td>) comme artifices de mise en page. Il vaut mieux utiliser des blocs <div>, qui sont faits pour ça.

Les tableaux sont, comme leur nom l'indique, réservés aux énumérations. C'est important pour l'accès aux handicapés visuels, auxquels un système vocal explique le contenu de l'écran : que vont-ils comprendre lorsque le système en question leur parlera d'un tableau sans entêtes de colonnes (balise <th>), et ne contenant qu'une ligne ne contenant elle-même qu'une case ?

YvesNa · le 18 octobre 2007

A mon avis, une solution simple serait d'intégrer ta zone à texte déroulant dans ta zone centrale. Attention, elle serait alors à positionner par rapport au coin haut gauche de cette zone centrale.

J'avance un petit peu : j'ai "coupé-collé" la partie que tu m'avais indiqué en rouge et l'ai placée dans ma zone centrale :

</div>

</div>

Mais après, je ne sai plus comment paramétrer. Je reste en position absolute (ou relative) ? Et quelles données entrer pour scrollerbg et scrollertext ?

J'ai essayé plusieurs manips : je retrouve maintenant le panneau à sa bonne place (834 px), mais le cadre et les textes se baladent maintenant au-dessus et à droite...

Dylav · le 18 octobre 2007

Si ta page ne contient rien de confidentiel, pourrais-tu nous en lister le code intégral, parce que ton montage me semble quand même un peu compliqué, et rien de tel pour comprendre que d'avoir tout sous la main

Pour ça, insère dans ton message ton copier/coller entre les balises [codebox] et [/codebox]. En ouvrant une boîte de dimensions contingentées, c'est meilleur que les balises [quote] plutôt réservée aux citations, et [code] qui produit un drap de lit...

-edit- Pour ta question, tu seras en absolu... mais par rapport au coin haut gauche de ta cellule de table : <td>

YvesNa · le 18 octobre 2007

Voilà je te donne les codes de la page entière :

(dans le HEAD, tu peux aussi retrouver l'adresse exacte du site)

Je précise que je ne suis pas vraiment un "pro" en la matière, et ai quasiment tout appris par moi-même en html...

Merci.

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<TITLE>Association Pangée, aide au développement durable</TITLE>
<LINK REL="SHORTCUT ICON" href="http://perso.orange.fr/pangee/favicon.ico">

<script language="JavaScript1.2">
// Copyright Peter Gehrig and Urs Dudli at www.24fun.ch/
// If you add this script to a script-library or script-archive 
// you have to add a hyperlink to www.24fun.ch on the webpage 
// Le titre | le texte|le lien des messages
var message= new Array()
message[0]="Grande Nuit Africaine | Réservez dès à présent votre soirée du 24 novembre. | [url="http://perso.orange.fr/pangee/06actualites/index.html""]http://perso.orange.fr/pangee/06actualites/index.html"[/url]
message[1]="Qui sommes-nous ? | Nous avons pour vocation de participer au développement social, sanitaire, alimentaire, médical, éducatif, culturel et économique dans les zones défavorisées. | [url="http://perso.orange.fr/pangee/01presentation/index.html""]http://perso.orange.fr/pangee/01presentati...ndex.html"[/url]
message[2]="Soutenez notre action | Adhérez en ligne à l'Association Pangée en cliquant sur ce titre. | [url="http://perso.orange.fr/pangee/07adhesion/index.html""]http://perso.orange.fr/pangee/07adhesion/index.html"[/url]
// La hauteur de la boite de messages.
var scrollerheight=129
// La largeur de la boite de messages.
var scrollerwidth=140
// La distance par rapport au bord supérieur de la fenêtre.
var scrollertop=17
// La distance par rapport au bord gauche de la fenêtre.
var scrollerleft=834
// La distance entre le bord et le texte.
var scrollerpadding=5
// La largeur du bord de la boite de messages.
var backgroundborder=0
// La couleur de l'arrière-plan de la boite de messages.
var scrollerbgcolor="#CC9900"
// Les attributs de la police du titre.
var font_titleface="Verdana"
var font_titlecolor="FFFFFF"
var font_titlesize=1
// Les attributs de la police du texte;
var font_copyface="Verdana"
var font_copycolor="3151DC"
var font_copysize=1
// Le temps de pause entre les message (en millisecondes).
var standstillfix=3000

////////////////////////////////////////////////
var cliptop=0
var clipbottom=scrollerheight-2*scrollerpadding
var clipleft=0
var clipright=scrollerheight
var i_message=0
var mes_joined
var mes_split
var contenttext
var contentbg
var totalheight=scrollerheight*(message.length)
var i_height=0
var step=1
var pause=20
var standstillflex=0

function initiate(){
contenttext="<table cellpadding=0 cellspacing=0 border=0 width="+(scrollerwidth-2*scrollerpadding)+">"
contenttext+="<tr valign='top'><td height='"+scrollerheight+"'><br></td></tr>"
for (i=0;i<=message.length-1;i++) {
	mes_joined=message[i]
	mes_split=mes_joined.split("|")
	contenttext+="<tr valign='top'><td height='"+scrollerheight+"'><a href='"+mes_split[2]+"'><font face='"+font_titleface+"' color='"+font_titlecolor+"' size='"+font_titlesize+"'>"+mes_split[0]+"</font></a><br><font face='"+font_copyface+"' color='"+font_copycolor+"' size='"+font_copysize+"'>"+mes_split[1]+"</font></td></tr>"
}
contenttext+="</table>"

contentbg="<table cellpadding=0 cellspacing=0 border="+backgroundborder+" width='"+scrollerwidth+"'><tr><td height='"+scrollerheight+"' bgcolor="+scrollerbgcolor+"> </td></tr></table>"

if (document.all) {
	scrollertext.innerHTML=contenttext
	scrollerbg.innerHTML=contentbg
	document.all.scrollertext.style.posTop=scrollertop
	document.all.scrollertext.style.posLeft=scrollerleft
	document.all.scrollerbg.style.posTop=scrollertop-scrollerpadding
	document.all.scrollerbg.style.posLeft=scrollerleft-scrollerpadding
	document.all.scrollertext.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
}
if (document.layers) {
	document.scrollertext.document.write(contenttext)
	document.scrollertext.document.close()
	document.scrollerbg.document.write(contentbg)
	document.scrollerbg.document.close()
	document.scrollertext.top=scrollertop
	document.scrollertext.left=scrollerleft
	document.scrollerbg.top=scrollertop-scrollerpadding
	document.scrollerbg.left=scrollerleft-scrollerpadding	
	document.scrollertext.clip.left=clipleft
       document.scrollertext.clip.right=clipright
       document.scrollertext.clip.top=cliptop
       document.scrollertext.clip.bottom=clipbottom
}
scroll()
}

function scroll(){
standstillflex=standstillfix
if (document.all){
	if (i_height<scrollerheight) {
		i_height+=step
		cliptop+=step
		clipbottom+=step
		document.all.scrollertext.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
		document.all.scrollertext.style.posTop-=step
		var timer=setTimeout("scroll()",pause)
	}

	else {
		if (document.all.scrollertext.style.posTop<=-(totalheight)) {
			document.all.scrollertext.style.posTop=scrollertop
			cliptop=0
			clipbottom=scrollerheight-2*scrollerpadding
			document.all.scrollertext.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
			standstillflex=0
		}
		i_height=0
		clearTimeout(timer)
		var timer=setTimeout("scroll()",standstillflex)
	}
}

	if (document.layers){
		if (i_height<scrollerheight) {
			i_height+=step
			cliptop+=step
			clipbottom+=step
			document.scrollertext.clip.left=clipleft
       		document.scrollertext.clip.right=clipright
       		document.scrollertext.clip.top=cliptop
       		document.scrollertext.clip.bottom=clipbottom
			document.scrollertext.top-=step
			var timer=setTimeout("scroll()",pause)
		}

	else {
		if (document.scrollertext.top<=-(totalheight)) {
			document.scrollertext.top=scrollertop
			cliptop=0
			clipbottom=scrollerheight-2*scrollerpadding
			document.scrollertext.clip.left=clipleft
       		document.scrollertext.clip.right=clipright
       		document.scrollertext.clip.top=cliptop
       		document.scrollertext.clip.bottom=clipbottom
			standstillflex=0
		}
		i_height=0
		clearTimeout(timer)
		var timer=setTimeout("scroll()",standstillflex)
	}
}
}
</script>



</HEAD>

<BODY MARGINWIDTH="0" MARGINHEIGHT="0" TOPMARGIN="0"  leftmargin="0" BGCOLOR="#FFB062" text="#CC9900" onLoad="initiate()" link="#CC9900" vlink="#CC9900" alink="#CC9900">
<div id="scrollerbg" style="position:absolute;top:-1000px"> 
 <p> </p>
</div>
<div id="scrollertext" style="position:absolute;top:-1000px"> 
 <p> </p>
</div>


<table width="1000" border="3" cellspacing="0" cellpadding="10" align="center" bordercolor="#000000" background="images/fonds/fond.jpeg">
 <tr valign="top"> 
   <td> 
     <div align="center"> 
       <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" height="130">
         <tr> 
           <td width="200"> <a href="index.html"><img src="images/logo_g.gif" width="140" height="129" border="0" alt="Accueil"></a></td>
           <td width="600" valign="top"> 
             <div align="center"><font size="7"><b>ASSOCIATION PANGEE</b></font><br>
               <b><font size="5">Aide au développement durable</font></b></div>
           </td>
           <td width="200">  </td>
         </tr>
       </table>
       <table width="100%" border="0" cellspacing="0" cellpadding="0">
         <tr> 
           <td width="200"><a href="index.html"><img src="images/boutons/00_accueil.gif" width="140" height="40" border="0" alt="Accueil"></a></td>
           <td width="160"><b><a href="01presentation/index.html"><img src="images/boutons/01_presentation.gif" width="140" height="40" border="0" alt="Présentation"></a></b></td>
           <td width="160"><b><a href="02projets/index.html"><img src="images/boutons/02_projets.gif" width="140" height="40" border="0" alt="Projets"></a></b></td>
           <td width="160"><b><a href="03nous_aider/index.html"><img src="images/boutons/03_nous_aider.gif" width="140" height="40" border="0" alt="Nous aider"></a></b></td>
           <td width="160"><b><a href="04livre_or/index.html"><img src="images/boutons/04_livre_or.gif" width="140" height="40" border="0" alt="Livre d'or"></a></b></td>
           <td width="160"><b><a href="05forum/index.html"><img src="images/boutons/05_forum.gif" width="140" height="40" border="0" alt="Forum"></a></b></td>
         </tr>
         <tr> 
           <td width="200"> </td>
           <td colspan="5"> </td>
         </tr>
       </table>
       <table width="100%" border="0" cellspacing="0" cellpadding="0">
         <tr> 
           <td rowspan="2" width="195" valign="top"> 
             <table width="100%" border="0" cellspacing="0" cellpadding="0">
               <tr> 
                 <td width="200"><font size="4"><a href="06actualites/index.html"><img src="images/boutons/06_actualites.gif" width="140" height="40" border="0" alt="Actualités"></a></font></td>
               </tr>
               <tr> 
                 <td width="200"><font size="4"><a href="07adhesion/index.html"><img src="images/boutons/07_adhesion.gif" width="140" height="40" border="0" alt="Adhésion"></a></font></td>
               </tr>
               <tr> 
                 <td width="200"><font size="4"><a href="08publications/index.html"><img src="images/boutons/08_publications.gif" width="140" height="40" border="0" alt="Publications"></a></font></td>
               </tr>
               <tr> 
                 <td width="200"><font size="4"><a href="09photos/index.html"><img src="images/boutons/09_photos.gif" width="140" height="40" border="0" alt="Photos"></a></font></td>
               </tr>
               <tr> 
                 <td width="200"><font size="4"><a href="10liens/index.html"><img src="images/boutons/10_liens.gif" width="140" height="40" border="0" alt="Liens"></a></font></td>
               </tr>
               <tr> 
                 <td width="200"><font size="4"><a href="11contacts/index.html"><img src="images/boutons/11_contacts.gif" width="140" height="40" border="0" alt="Contacts"></a></font></td>
               </tr>
               <tr> 
                 <td width="200">  </td>
               </tr>
               <tr> 
                 <td width="200"><font size="4"><a href="12espace_prive/index.html"><img src="images/boutons/12_espace_prive.gif" width="140" height="40" border="0" alt="Espace privé"></a></font></td>
               </tr>
               <tr> 
                 <td valign="middle" width="200"> 
                   <table width="75%" border="0" cellspacing="0" cellpadding="0" align="center">
                     <tr> 
                       <td> <!--DEBUT WEBOSCOPE FREE - Weborama --> 
                         <script type="text/javascript">
WEBO_ZONE=1;
WEBO_PAGE=1;
webogold_ok=0;</script>
                         <script type="text/javascript" src="http://script.weborama.fr/gold.js"></script>
                         <script type="text/javascript">
if(webogold_ok==1){webogold_zpi(WEBO_ZONE,WEBO_PAGE,322988);}</script>
                         <noscript></noscript><!--FIN WEBOSCOPE FREE - Weborama --> 
                       </td>
                     </tr>
                   </table>
                 </td>
               </tr>
               <tr> 
                 <td valign="middle" width="200"> 
                   <table width="100%" border="0" cellspacing="0" cellpadding="0">
                     <tr> 
                       <td width="25%"> </td>
                       <td width="75%"><a href="http://www.xiti.com/xiti.asp?s=330905" title="WebAnalytics"> 
                        <script type="text/javascript">
<!--
Xt_param = 's=330905&p=accueil';
try {Xt_r = top.document.referrer;}
catch(e) {Xt_r = document.referrer; }
Xt_h = new Date();
Xt_i = '<img width="39" height="25" border="0" alt="" ';
Xt_i += 'src="http://logv144.xiti.com/hit.xiti?'+Xt_param;
Xt_i += '&hl='+Xt_h.getHours()+'x'+Xt_h.getMinutes()+'x'+Xt_h.getSeconds();
if(parseFloat(navigator.appVersion)>=4)
{Xt_s=screen;Xt_i+='&r='+Xt_s.width+'x'+Xt_s.height+'x'+Xt_s.pixelDepth+'x'+Xt_s.colorDepth;}
document.write(Xt_i+'&ref='+Xt_r.replace(/[<>"]/g, '').replace(/&/g, '$')+'" title="Internet Audience">');
//-->
</script>
                         <noscript> Mesure d'audience ROI statistique webanalytics 
                         par <img width="39" height="25" src="http://logv144.xiti.com/hit.xiti?s=330905&p=accueil" alt="WebAnalytics" /> 
                         </noscript></a></td>
                     </tr>
                   </table>
                 </td>
               </tr>
               <tr> 
                 <td valign="middle" width="200"> </td>
               </tr>
             </table>
           </td>
           <td width="797" colspan="2" rowspan="2" valign="top"> 
             <table width="100%" border="0" cellspacing="0" cellpadding="10">
               <tr> 
                 <td width="50%" valign="top"><b></b> <b></b> <b></b> </td>
                 <td width="50%">  </td>
               </tr>
               <tr valign="top"> 
                 <td width="100%" colspan="2"> 
                   <div align="center"> 
                     <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
                       <tr valign="top"> 
                         <td width="50%" valign="top"> 
                           <table width="300" border="0" cellspacing="0" cellpadding="0">
                             <tr> 
                               <td bgcolor="#FFEF03"> 
                                 <div align="center"><b><font color="#000000" size="4">Samedi 
                                   24 novembre 2007</font><font color="#000000"><br>
                                   <font size="3">L'Association Pangée 
                                   organise une<br>
                                   Grande Nuit Africaine </font></font></b><font size="3"><br>
                                   <b><font color="#000000">de 20 heures jusqu'à 
                                   l'aube</font></b></font></div>
                               </td>
                             </tr>
                             <tr> 
                               <td bgcolor="#40A636"> 
                                 <div align="center"><b><font color="#000000">Avec 
                                   :<br>
                                   <font size="4"> MANO 2 MANO - AYANO - DODO 
                                   PELAGIE<br>
                                   LA SELESAO - LEROU KP</font></font></b> </div>
                               </td>
                             </tr>
                             <tr> 
                               <td bgcolor="#FFEF03"> 
                                 <div align="center"><font color="#000000">Le 
                                   Bourget - Saint-Denis<br>
                                   <font size="4">Info Line Réservation 
                                   : 06 63 86 47 08</font> </font></div>
                               </td>
                             </tr>
                             <tr bgcolor="#E2491D"> 
                               <td> 
                                 <div align="center"> 
                                   <p align="center"><font color="#FFFFFF" size="4"><a href="06actualites/index.html"><font color="FFFFFF" size="3">Lire 
                                     la suite</font></a></font></p>
                                 </div>
                               </td>
                             </tr>
                             <tr> 
                               <td>  </td>
                             </tr>
                           </table>
                           <table width="300" border="0" cellspacing="0" cellpadding="5" bgcolor="#3151DE">
                             <tr> 
                               <td> 
                                 <div align="center"><font size="4"><b>Prochaines 
                                   réunions de<br>
                                   l'Association Pangée : </b></font></div>
                               </td>
                             </tr>
                             <tr> 
                               <td> 
                                 <div align="center"><font size="3">Vendredi 
                                   26 octobre <br>
                                   et vendredi 30 novembre 2007 </font></div>
                               </td>
                             </tr>
                             <tr valign="top"> 
                               <td> 
                                 <div align="center"> 
                                   <p align="center"><font size="4" color="#FFFFFF"><a href="06actualites/index.html#reunion"><font color="FFFFFF" size="3">Lire 
                                     la suite</font></a></font></p>
                                 </div>
                               </td>
                             </tr>
                           </table>
                           <br>
                         </td>
                         <td width="50%"> <img src="images/photos/00accueil/Animation1.gif" width="300" height="225"></td>
                       </tr>
                     </table>
                   </div>
                 </td>
               </tr>
             </table>
           </td>
         </tr>
         <tr> </tr>
       </table>
     </div>
   </td>
 </tr>
</table>
</BODY>
</HTML>

Dylav · le 18 octobre 2007

Bonsoir,

A propos de la balise codebox, tu en as réussi l'utilisation dès ton premier post (je l'avais présentée en couleur pour la mettre en valeur, et en italique pour qu'elle ne se déclenche pas). Je me suis donc permis d'effacer ton second post (devenu inutile).

Dans la codebox, j'ai également supprimé les balises HTML <META> de ta page, dont certaines fournissaient des renseignements que tu ne souhaitais peut-être pas étaler au grand jour (nom, adresse mail, etc). Je te fais d'ailleurs remarquer que n'importe qui peut accéder à ces renseignements en capturant ta page par les boutons Fichier / Enregistrer sous de son navigateur.

En particulier, pour éviter qu'un automate malveillant aspire ton adresse mail, je te conseille d'y remplacer par exemple l'arobace par [at] : jean.dupondt [at] monfai.com. Sinon, bonjour le spamming !

Ceci dit, je vais jeter un œil sur ton code. @+

Connexion

Pas encore inscrit ?

Texte décalé suivant résolutions d'écran

Messages recommandés

YvesNa

Lien vers le commentaire

Partager sur d’autres sites

KewlCat

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

KewlCat

Lien vers le commentaire

Partager sur d’autres sites

YvesNa

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

YvesNa

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

YvesNa

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer