Aller au contenu

Faux colums

jipé

Par jipé
dans Le salon de Webmaster Hub

 Partager

Sujets conseillés

jipé

jipé

Posté
Posté

Bonjour,

Vous l'aurez deviné par la question posée, je ne suis pas un expert.

Le site que j'ai appris à gérer, je ne l'ai pas construit. Il l'a été sous Dreamweaver MX.

Je m'aperçois - depuis que j'ai un écran de 17'' - que la colonne de droite apparaît sur les écrans de cette dimension :-(

Que faudrait-il modifier dans le code (images liens ci-joints) pour y remédier?

Vous remerciant à l'avance pour votre aide,

Ernestine

Ernestine

Posté
Posté

Bonjour,

Plutôt que faire une capture d'écran du site web, il vaudrait mieux donner le lien, parce que là, impossible de comprendre où est le problème.

De même pour le code : plutôt qu'une image, tu devrais le copier-coller dans le forum, en utilisant bien sûr les balises adéquates (code et /code).

(de plus, la portion de code que l'on peut voir sur cette image ne peut en aucun cas nous aider à cerner le problème).

jipé

jipé

Posté
  • Auteur
Posté

Bonsoir,

Mes excuses pour cette réponse tardive...

En fait, j'attendais d'être averti d'une réponse par email.

Mais je n'ai rien vu arriver.

Tout d'abord, inutile de me dire que le code est "pourri", je le sais. Le site a été construit sans utiliser de CSS et avec une utilisation abusive de cadres, balises inadéquates et redondantes, etc.

1) Voici un aperçu du problème (texte empiétant sur la colonne de droite).

2) Voici l'adresse de la page:


/>http://albertville.stools.net/text_affreux_kongolo.htm

3) Voici le code de cette même page (j'ai éliminé un peu de texte afin d'abréger):

<html>
<head>
<title>www.albertville.be --- Les Affreux de Kongolo - Insurrection
des Baluba</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="Author"
content="(c)2000-2004 XXXXXXX - YYYYYYY">
<meta name="revisit-after" content="10 days">
<meta http-equiv="content-language" content="fr">
<meta name="description"
content="Site des anciens d'ALBERTVILLE-KALEMIE au Katanga (R.D.du Congo), au bord du lac Tanganyika, des années 50 à nos jours">
<meta name="keywords"
content="Italia, italia, Belga, belga, STORMS, Storms, storms, REGINA, PACIS, Regina, regina, Pacis, pacis, Lac Tanganyka, lac tanganyka, Lac Tanganyika, lac tanganyika, Lac Tanganika, lac tanganika, barrage de la Kyimbi, barrage de la kyimbi, makala, Makala">
<script language="JavaScript">

<!--

<!--

function MM_reloadPage(init) { //reloads the window if Nav4 resized

if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}

else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

}

MM_reloadPage(true);

// -->



function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}



function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}



function MM_findObj(n, d) { //v4.0

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

if(!x && document.getElementById) x=document.getElementById(n); return x;

}



function MM_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script>
</head>
<body
onload="MM_preloadImages('BoutonsJPG/buttonon1.jpg','BoutonsJPG/buttonon2.jpg','BoutonsJPG/buttonon3.jpg')"
alink="#ff6600" background="Fonds/bloc_roze_degrade.jpg"
bgcolor="#ffffff" link="#006600" text="#003399" vlink="#993399">
<p><img src="Titres_jpegs/entete_de_page.jpg" height="123" width="656">
</p>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<table align="center" width="40%">
<tbody>
<tr>
<td height="64">
<p align="center"><font color="#663366"
face="Verdana, Arial, Helvetica, sans-serif" size="6"><strong>Les
Affreux de Kongolo<br>
Insurrection des Baluba</strong></font></p>
</td>
</tr>
<tr>
<td height="43">
<div align="center"><font color="#663366"
face="Verdana, Arial, Helvetica, sans-serif" size="3"><strong>Jean-Pierre
SONCK </strong></font></div>
</td>
</tr>
</tbody>
</table>
<div align="left"><font color="#663366"
face="Verdana, Arial, Helvetica, sans-serif" size="2"><br>
</font> </div>
<blockquote>
<div align="left">
<div class="Section1"></div>
</div>
<div align="left"></div>
<div align="left">
<div class="Section1"><strong><font
face="Verdana, Arial, Helvetica, sans-serif" size="3">Insurrection des
Baluba</font></strong></div>
</div>
<div align="left">
<div class="Section1"><font
face="Verdana, Arial, Helvetica, sans-serif" size="3"><br>
Quelques jours après les festivités de l’indépendance, la Force
Publique se mutina et le Congo ex-Belge sombra dans l’anarchie. Au
Katanga, le président provincial...

entraînés au camp Massart à Elisabethville. En cas de besoin,
chaque Groupe Mobile était appuyé par un peloton d’intervention composé
d’une trentaine gendarmes katangais transporté en camion</font></div>
</div>
<div align="left">
<div class="Section1"><font
face="Verdana, Arial, Helvetica, sans-serif" size="3"><br>
<br>
<strong>Les Affreux du Groupe Mobile « C »</strong></font></div>
</div>
<div align="left">
<div class="Section1"><font
face="Verdana, Arial, Helvetica, sans-serif" size="3"><br>
Le 5 octobre, le Groupe Mobile « C » du cpn BALTUS embarqua sur un
convoi ferroviaire du BCK pour gagner Kongolo, à l’extrême nord du pays
où la situation tournait à l’avantage de la rebellion (voir l'article
"La CFL et la révolte des Balubas")...

"GramE">rattachaient</span> à Elisabethville car les Baluba
s’étaient emparés de Kabalo. Ils bloquaient le trafic fluvial et
ferroviaire du CFL et dressaient des barrages sur toutes les routes. </font></div>
</div>
<div align="left">
<div class="Section1"><font
face="Verdana, Arial, Helvetica, sans-serif" size="3">Patrouilles de
combats</font></div>
</div>
<div align="left">
<div class="Section1"><font
face="Verdana, Arial, Helvetica, sans-serif" size="3"><br>
Tous les deux jours, le capitaine BALTUS organisait des patrouilles sur
l’un ou <span class="GramE">l’autre  axe</span> routier pour
dégager les barrages érigés par les rebelles. Le 5 novembre, il décida
d’emprunter la route d’Ebombo, ...

hommes de se reposer et il fit envoyer par radio un compte-rendu
de l’attaque au QG d’Elisabetville. </font></div>
</div>
<div align="left">
<div class="Section1"><font
face="Verdana, Arial, Helvetica, sans-serif" size="3"><br>
<br>
<strong>Le "général" KABILA</strong></font></div>
</div>
<div align="left">
<div class="Section1"><font
face="Verdana, Arial, Helvetica, sans-serif" size="3"><br>
Les Baluba mirent plusieurs jours à digérer leur défaite, puis ils
organisèrent une attaque en règle contre Kongolo. ...

té de la Balubakat réclama par télégramme des
médicaments et des secours à l’ONUC car une épidémie très spéciale
avait touché ses frères baluba.</font></div>
</div>
</blockquote>
<div align="left"><font color="#663366"
face="Verdana, Arial, Helvetica, sans-serif" size="2"> </font></div>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
<p> </p>
<p align="center"><img src="Separateurs/ligne_rose.jpg" height="29"
width="573"></p>
<table align="center" border="0" width="571">
<tbody>
<tr>
<td bgcolor="#ffcccc" height="85">
<div align="center"><font face="Times New Roman, Times, serif"
size="2"><font color="#003366"
face="Verdana, Arial, Helvetica, sans-serif"> </font><font
face="Times New Roman, Times, serif" size="2"><font color="#003366"
face="Verdana, Arial, Helvetica, sans-serif"><b>©</b></font></font> <font
color="#003366" face="Verdana, Arial, Helvetica, sans-serif">Les
images et les textes restent la propriété exclusive des auteurs
respectifs. <br>
Reproduction interdite sans l'accord écrit des auteurs.</font> <font
face="Verdana, Arial, Helvetica, sans-serif"><br>
Voyez notre page " <a href="copyright.htm" target="_self">protection
de la vie privée et droits d'auteur</a> "</font></font></div>
</td>
</tr>
</tbody>
</table>
<div align="center"><br>
<font face="Verdana, Arial, Helvetica, sans-serif" size="2">
<script language="JavaScript"
src="http://www.compteur.com/cpt?ID=237629&num=1"></script> </font></div>
<p align="center"><font face="Verdana, Arial, Helvetica, sans-serif"
size="2">Belstat<!-- Start of belstat.be Counter -->
<script language="JavaScript" type="text/javascript">

<!--

d=document;

col="";scr=0;b=navigator.appName;

scr=screen.width+"*"+screen.height;

ref=parent==self ? escape(window.document.referrer) : escape(top.document.referrer);

pag=escape(document.URL);

if (b != "Netscape") {col=screen.colorDepth}

else {col=screen.pixelDepth}

if(col=="undefined"){col="";}

d.write("<a href=http://www.belstat.be/viewstat.asp?UserID=albertville target=_blank><img border=0 src=\"http://www.belstat.be/regstat.aspx?");

d.write("UserID=albertville&BColor=red&refer=" + ref + "&pag=" + pag + "&b=" + b + "&col=" + col + "&scr=" + scr);

d.write("\" align=center width=16 height=16 alt=\"Monitored by BelStat - Your Site Counts\"><\/a>");

// -->

</script><!-- End of belstat.be Counter --> Counter </font></p>
<p align="center"> </p>
<div id="Layer1"
style="position: absolute; width: 118px; height: 173px; z-index: 1; left: -3px; top: 147px;">
<table border="0" height="323" width="125">
<tbody>
<tr>
<td height="17"><a href="index.htm"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Image3','','BoutonsJPG/buttonon1.jpg',1)"
target="_self"><img name="Image3" src="BoutonsJPG/buttonoff1.jpg"
border="0" height="34" width="144"></a></td>
</tr>
<tr>
<td><a href="accueil.htm" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Image4','','BoutonsJPG/buttonon2.jpg',1)"
target="_self"><img name="Image4" src="BoutonsJPG/buttonoff2.jpg"
border="0" height="34" width="144"></a></td>
</tr>
<tr>
<td><a href="mailto:jp.1047_AT_skynet.be"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Image5','','BoutonsJPG/buttonon3.jpg',1)"><img
name="Image5" src="BoutonsJPG/buttonoff3.jpg" border="0" height="34"
width="144"></a></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<div align="center"> </div>
<br>
</td>
</tr>
<tr>
<td>
<div align="center"> </div>
<br>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Voilà, houf !

A+

Ernestine

Ernestine

Posté
Posté

Chez moi, il n'y a pas de colonne à droite, et la partie centrale (contenant le texte) se rétrécit correctement quand on diminue la largeur de la fenêtre. Donc aucun problème (testé avec Firefox, IE6 et IE8)

jipé

jipé

Posté
  • Auteur
Posté

Chez moi, il n'y a pas de colonne à droite, et la partie centrale (contenant le texte) se rétrécit correctement quand on diminue la largeur de la fenêtre. Donc aucun problème (testé avec Firefox, IE6 et IE8)

Merci pour votre aide,

cependant, malgré différents essais, le problème reste bien réel: image1 et image2... sous IE 8 et Windows 7.

Bonne journée,

captain_torche

captain_torche

Posté
Posté

Il faut que tu forces la répétition de ton image de fond (dans le body) sur un axe vertical uniquement.

Ça pourrait donner quelque chose du genre :

body {
	background-repeat: repeat-y;
}

jipé

jipé

Posté
  • Auteur
Posté

Bonjour,

Merci à tous d'avoir cherché une solution.

J'ai trouvé la solution à mon problème.

L'image (.jpeg) utilisée comme fond avait les dimensions suivantes : 1280 / 20 pixels.

Pour rappel, cette image laissait apparaître sur écran (très) large une "colonne" sur la droite de l'écran.

En procédant à plusieurs essais, il a suffit de créer une image de dimension : 1580 / 20 pixels.

Cette fois, plus de "colonne" intempestive sur la droite de l'écran. J'en ai profité pour choisir le format .gif plutôt que .jpeg

Voilà, tout finit bien. Si mon petit problème peut aider d'autres participants à ce forum, tant mieux.

Merci encore,

Ernestine

Ernestine

Posté
Posté

Tu n'as pas résolu le problème : sur un écran plus large, ce sera la même chose. Aujourd'hui, les écrans d'une résolution supérieure à 1580 pixels en largeur sont de plus en plus fréquents.

La solution préconisée par Captain Torche ne fonctionnait-elle donc pas ? (en y ajoutant éventuellement un background-position: left top;)

jipé

jipé

Posté
  • Auteur
Posté (modifié)

Tu n'as pas résolu le problème : sur un écran plus large, ce sera la même chose. Aujourd'hui, les écrans d'une résolution supérieure à 1580 pixels en largeur sont de plus en plus fréquents.

La solution préconisée par Captain Torche ne fonctionnait-elle donc pas ? (en y ajoutant éventuellement un background-position: left top;)

Hello !

En effet, je peux essayer sur une page avec la solution préconisée et écrite dans un code plus orthodoxe à proprement parler. Cependant, comme je le faisais remarquer au début de l'exposé du poblème, je ne retrouve aucune trace dans le code d'une spécification de background stipulé de cette façon. Il est juste écrit quelque chose comme Background="adresse de l'image jpeg" et rien d'autre.

J'ai déjà pu observer sur l'écran plus large actuel (laptop avec pavé numérique)que j'ai acquis, que je pouvais déplacer cette fameuse colonne de droite, c'st déjà un bon résultat. Je suis d'accord d'admettre que ce n'est là qu'une demi solution. Que si le site est visualisé sur des écrans de salon hyper-large, elle peut réapparaître.

C'est pour cela que je vais faire un essai avec un code tel que celui que vous me préconisez. Si le résultat fonctionne, je l'adopterai et vous en ferai part.

A bientôt,

----------------------------------------------------------------------------------

Re,

Désolé, je viens d'essayer d'ajouter le code préconisé et... ça ne fonctionne pas.

Ce dernier est déjà plus élaboré que ce qui se faisait en 2004 avec DreamweaverMX, il me semble.

Finalement, le petit "truc" que j'ai trouvé me satisfait pleinement puisque j'arrive à repousser cette satanée colonne comme je le veux.

Après tout, seul le résultat compte. Je suis seulement au début de la migration de DreamweaverMX vers Kompozer. En effet, ce dernier semble prendre en charge le site sans trop de difficultés. D'une manière générale, avec le code il y a encore beaucoup de travail en perspective. Bien que visuellement, cela peut être acceptable pour l'internaute lambda.

A+

Modifié par jipé
Ernestine

Ernestine

Posté
Posté

Coucou,

Dans la page que tu nous as montrée plus haut, il n'y a aucune inclusion de feuille de style, et aucun style défini dans la page. Ce qui m'amène à penser que la portion de code donnée par Captain, si elle ne fonctionne pas, c'est que tu ne l'as pas mise au bon endroit.

Tu peux par exemple ajouter ceci quelque part dans le head de ta page (par exemple juste avant </head>) :

<style type="text/css">		
body {
	background-repeat: repeat-y;
}		
</style>

Et là ça devrait marcher. L'avantage, c'est qu'au final tu pourrais même te contenter d'une image de 210 pixels (largeur de la marge) de large sur 1 pixel (pourquoi 20 ?) de haut.

jipé

jipé

Posté
  • Auteur
Posté

Coucou,

Dans la page que tu nous as montrée plus haut, il n'y a aucune inclusion de feuille de style, et aucun style défini dans la page. Ce qui m'amène à penser que la portion de code donnée par Captain, si elle ne fonctionne pas, c'est que tu ne l'as pas mise au bon endroit.

Tu peux par exemple ajouter ceci quelque part dans le head de ta page (par exemple juste avant </head>) :

<style type="text/css">		
body {
	background-repeat: repeat-y;
}		
</style>

Et là ça devrait marcher. L'avantage, c'est qu'au final tu pourrais même te contenter d'une image de 210 pixels (largeur de la marge) de large sur 1 pixel (pourquoi 20 ?) de haut.

Je veux bien encore faire cet essai... demain, car pour aujourd'hui j'en ai assez.

Merci encore,

J'avais lu quelque part que la répétition d'images trop petites demandait trop de ressources aux processeurs peu puissants, il faudrait que je retrouve la source.

Oui, j'ai également lu cette remarque.

A+

jipé

jipé

Posté
  • Auteur
Posté

Salut à tous,

C'est super, vous aviez raison, il y a moyen de faire la même chose en utilisant les styles (qui n'ont jamais été utilisés pour construire ce site, quel dommage!).

J'ai donc fait un essai avec l'image "column" la moins gourmande en pixels et... ça marche (plus de barre intempestive sur la droite d'un écran plus large que ne l'était celui de l'ancien pc).

Je vais m'atteler à corriger (toutes) les pages une à une (il doit y envoir une bonne centaine).

Je peux continuer ma route, mon objectif final étant de faire prendre en charge le site par Kompozer (à première vue il n'a pas l'air de trop rechigner à cause du code créé par DreamweaverMX). Je dois encore me documenter notamment à propos de la version de Kompozer à utiliser, les programmes annexes à utiliser, etc.

Un tout grand merci pour m'avoir aidé à résoudre mon problème de faux-columns.

A bientôt, ou à plus tard sans doute !

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...