HTML Image qui bouge en réduisant la fenêtre

Fermé
Cécilia - 6 juin 2005 à 11:34
 narutodescrache - 18 mars 2009 à 22:32
Bonjour :o)

Voilà mon problème :

J'ai crée une page .php où j'ai inséré des images et où j'utilise des tableaux pour centrer et aligner mes images et mes textes.

Quand je réduis la taille de la fenêtre avec la petite icône en haut à droite, au lieu que la fenêtre se réduise normalement et que des scroll bars apparaissent pour que je puisse me déplacer dedans, toutes mes images et mes tableaux viennent se chevaucher !

Par exemple mon tableau avec son fond bleu se décale à gauche de la page, et passe en dessous de mon menu qui était situé à gauche de la page. C'est très moche et je ne comprends pas pourquoi ça fait ça... :o(

Merci d'avance pour votre aide !

Cécilia.
A voir également:

17 réponses

Merci pour ta réponse !
Le problème c'est que j'ai environ 270 lignes de code et comme je ne sais pas trop d'où ça vient en particulier je me vois mal vous filer les 270 lignes :)

J'ai des balises <div> mais je ne pense pas que ce soit de là que vienne le problème puisque dans une autre page je n'en ai pas et le même problème survient !

Je pense que c'est à cause des tableaux... Que veux-tu dire par "tableaux en pourcentages" ?

Voilà un exemple de tableau qui se décale quand je réduis la taille de la fenêtre : (j'ai viré le texte contenu dedans ça prenait trop de place)

<TABLE width=600 align=center border=2bordercolor="#00008B">

<TR bgcolor="#6495ED" align=center><TD><FONT SIZE=3 FACE="tahoma" COLOR="#4B0082">HISTORIQUE</TD></TR>

</TABLE>

<BR>

<TABLE width=600 align=center border=1 bordercolor="#6495ED">

<TR bgcolor="#6495ED" align=justify><TD><FONT SIZE=2 FACE="tahoma" COLOR="#4B0082"></TD></TR>
</TABLE>
5
BON COURAGE !! ;o) (j'ai la flême de mettre en page...)


<BODY background="fond bleu2.jpg" onload="return cligno_sectionjs_b(),ejs_scroll_start()" link="#00008B" vlink="#00008B" style=cursor:url("syringe.ani")>

<?
#On se connecte à la base de données
$connect = mysql_connect('localhost','root', '') or die ("Erreur de connexion au serveur.");
mysql_select_db('test', $connect) or die ("Base de données non-ouverte");
?>


<?
#On met dans le variables le contenu de la table ACCUEIL
$req_accueil = mysql_query("SELECT * FROM ACCUEIL;") or die ("Erreur dans la requête");
if (mysql_num_rows($req_accueil) == 0)
{
$textedefilant = "";
$ligne1 = "";
$ligne2 = "";
$adressenom = "";
$adresserue = "";
$adresseville = "";
$adressetel = "";
$adressefax = "";
}
else
{
while ($tab_accueil = mysql_fetch_array($req_accueil))
{
$textedefilant = $tab_accueil["textedefilant"]; #--> $textedefilant contient le texte qui défile en haut
$phrase1 = $tab_accueil["phrase1"]; #--> $phrase1 contient la première ligne de la phrase d'accroche
$phrase2 = $tab_accueil["phrase2"]; #--> $phrase2 contient la deuxième ligne de la phrase d'accroche
$adressenom = $tab_accueil["adressenom"]; #--> $adressenom contient le nom de l'institut
$adresserue = $tab_accueil["adresserue"]; #--> $adresserue contient l'adresse de l'institut (3 avenue Jean jaurès)
$adresseville = $tab_accueil["adresseville"]; #--> $adresseville contient le code posta let la ville de l'institut
$adressetel = $tab_accueil["adressetel"]; #--> $adressetel contient le numéro de téléphone de l'institut
$adressefax = $tab_accueil["adressefax"]; #--> $adressefax contient le numéro de fax de l'institut

};

#On remplace ' par \'
#$textedefilant = str_replace("'", "\'", $textedefilant);
#$phrase1 = str_replace("'", "\'", $phrase1);
#$phrase2 = str_replace("'", "\'", $phrase2);
#$adresse1 = str_replace("'", "\'", $adresse1);
#$adresse2 = str_replace("'", "\'", $adresse2);
}
?>


<!-- Fonctions nécessaires à la gestion des infobulles-->
<SCRIPT LANGUAGE="JavaScript">
function RendElemVisible(Id)
{
var Elem = document.all[Id].style;
Elem.left = event.clientX + 30;
Elem.top = event.clientY + 5;
Elem.visibility = "visible";
}

function RendElemInvisible(Id)
{
document.all[Id].style.visibility = "hidden";
}
</SCRIPT>


<!-----Menu sur la droite----->
<IMG src="Menu.gif" align="right" border="0" usemap ="#Map"> <br>
<MAP name="Map">
<area shape="rect" coords="46,45,186,59" href="presentation.php" name="info1" onMouseOver="RendElemVisible(this.name)" onMouseOut="RendElemInvisible(this.name)">
<area shape="rect" coords="50,110,147,123" href="ecole.htm" name="info2" onMouseOver="RendElemVisible(this.name)" onMouseOut="RendElemInvisible(this.name)">
<area shape="rect" coords=",56,117,169,190" href="droits_patient.htm" name="info3" onMouseOver="RendElemVisible(this.name)" onMouseOut="RendElemInvisible(this.name)">
<area shape="rect" coords="72,246,283,259" href="offre_soins.htm" name="info4" onMouseOver="RendElemVisible(this.name)" onMouseOut="RendElemInvisible(this.name)">
<area shape="rect" coords="109,306,219,318" href="consultations.htm" name="info5" onMouseOver="RendElemVisible(this.name)" onMouseOut="RendElemInvisible(this.name)">
<area shape="rect" coords="140,360,258,374" href="Services/nos_services_soins_medA.htm" name="info6" onMouseOver="RendElemVisible(this.name)" onMouseOut="RendElemInvisible(this.name)">
<area shape="rect" coords=",159,426,325,443" href="Services/nos_services_soins_medA.htm" name="info7" onMouseOver="RendElemVisible(this.name)" onMouseOut="RendElemInvisible(this.name)">
</MAP>


<!-----Logo et Adresse dans un tableau----->
<TABLE width=115 ALIGN=left>
<TR><TD>   <IMG src="logoIFSI.jpg"></TD></TR>
<!--<TR><TD><FONT size=1 face="tahoma" color="#00008B"><B>3, avenue Jean Jaurès</FONT></TD></TR>
<TR><TD><FONT size=1 face="tahoma" color="#00008B"><B>93331 Neuilly-sur-Marne</FONT></TD></TR>
<TR><TD><FONT size=1 face="tahoma" color="#00008B"><B>Tél : 01.49.44.36.00</FONT></TD></TR>
<TR><TD><FONT size=1 face="tahoma" color="#00008B"><B>Fax : 01.49.44.36.01</FONT></TD></TR>-->
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>

<TR><TD> <!-- Nouvelle ligne du tableau avec Agenda Clignotant -->
<FONT SIZE=4 FACE="tahoma"><B>
<DIV ID=a style="WIDTH: 100%"><FONT COLOR="#00008B"> - <A HREF="agenda.html">Agenda</A> -</DIV>
<DIV ID=b style="WIDTH:100%"> </DIV>
</B></FONT>
</TD></TR>

<TR><TD> <!-- Nouvelle ligne du tableau -->
<!------------Cadre défilant---------------------------------------------------------------------------->

<?
$agenda = mysql_query("SELECT * FROM AGENDA;") or die ("Erreur dans la requête");
$req_agenda = mysql_query("SELECT * FROM AGENDA;") or die ("Erreur dans la requête");
while ($tab_agenda = mysql_fetch_array($req_agenda))
{
$ligne1 = $tab_agenda["ligne1"];
$ligne2 = $tab_agenda["ligne2"];
$ligne3 = $tab_agenda["ligne3"];
};

#On remplace ' par \'
$ligne1 = str_replace("'", "\'", $ligne1);
$ligne2 = str_replace("'", "\'", $ligne2);
$ligne3 = str_replace("'", "\'", $ligne3);
?>

<STYLE TYPE="text/css">
.ejs_scroll {font-size:12px;font-family:Verdana;color:#FFFFFF;text-decoration:none}
</STYLE>

<SCRIPT language="JavaScript1.2">
ejs_scroll_largeur = 100; <!--largeur du cadre-->
ejs_scroll_hauteur = 100; <!--hauteur du cadre-->
ejs_scroll_bgcolor = '#00008B'; <!--couleur de fond-->
ejs_scroll_background = ""; <!--image de fond-->
ejs_scroll_pause_seconde = 2; <!--temps de pause entre les défilements-->

ejs_scroll_message = new Array;
ejs_scroll_message[0]='<a href="agenda.html" class="ejs_scroll"><? echo ($ligne1);?></FONT></a>';
ejs_scroll_message[1]='<a href="agenda.html" class="ejs_scroll"><? echo ($ligne2);?></FONT></a>';
ejs_scroll_message[2]='<a href="agenda.html" class="ejs_scroll"><? echo ($ligne3);?></FONT></a>';
function d(texte)
{
document.write(texte);
}
d('<DIV ID=ejs_scroll_relativ STYLE="position:relative;width:'+ejs_scroll_largeur+';height:'+ejs_scroll_hauteur+';background-color:'+ejs_scroll_bgcolor+';background-image:url('+ejs_scroll_background+')">');
d('<DIV ID=ejs_scroll_cadre STYLE="position:absolute;width:'+(ejs_scroll_largeur-8)+';height:'+(ejs_scroll_hauteur-8)+';top:4;left:4;clip:rect(0 '+(ejs_scroll_largeur-8)+' '+(ejs_scroll_hauteur-8)+' 0)">');
d('<DIV id=ejs_scroller_1 style="position:absolute;width:'+(ejs_scroll_largeur-8)+';left:0;top:0;" CLASS=ejs_scroll>'+ejs_scroll_message[0]+'</DIV>');
d('<DIV id=ejs_scroller_2 style="position:absolute;width:'+(ejs_scroll_largeur-8)+';left:0;top:'+ejs_scroll_hauteur+';" CLASS=ejs_scroll>'+ejs_scroll_message[1]+'</DIV>');
d('</DIV></DIV>');

ejs_scroll_mode =1;
ejs_scroll_actuel = 0;

function ejs_scroll_start()
{ if(ejs_scroll_mode == 1)
{ ejs_scroller_haut = "ejs_scroller_1";
ejs_scroller_bas = "ejs_scroller_2";
ejs_scroll_mode = 0;
}
else
{ ejs_scroller_bas = "ejs_scroller_1";
ejs_scroller_haut = "ejs_scroller_2";
ejs_scroll_mode = 1;
}
ejs_scroll_nb_message = ejs_scroll_message.length-1;
if(ejs_scroll_actuel == ejs_scroll_nb_message)
ejs_scroll_suivant = 0;
else
ejs_scroll_suivant = ejs_scroll_actuel+1;
if(document.getElementById)
document.getElementById(ejs_scroller_bas).innerHTML = ejs_scroll_message[ejs_scroll_suivant];
ejs_scroll_top = 0;
if(document.getElementById)
setTimeout("ejs_scroll_action()",ejs_scroll_pause_seconde*1000);
}

function ejs_scroll_action()
{ ejs_scroll_top -= 1;
document.getElementById(ejs_scroller_haut).style.top = ejs_scroll_top;
document.getElementById(ejs_scroller_bas).style.top = ejs_scroll_top+ejs_scroll_hauteur;
if((ejs_scroll_top+ejs_scroll_hauteur) > 0)
setTimeout("ejs_scroll_action()",10);
else
ejs_scroll_stop();
}
function ejs_scroll_stop()
{ ejs_scroll_actuel = ejs_scroll_suivant;
ejs_scroll_start();
}
</SCRIPT>
<!------------Fin du Cadre défilant------------------------------------------------------------------->
</TD></TR> <!--Fin de la ligne contenant le cadre défilant-->
</TABLE> <!-- Fin du tableau -->

<!-----Fonctions pour le texte clignotant------------------------------------------------------------->
<SCRIPT LANGUAGE=javascript>
function cligno_sectionjs_a()
{
a.style.display=''
b.style.display='none'
}
function cligno_sectionjs_b()
{
a.style.display='none'
b.style.display=''
setTimeout("cligno_sectionjs_a()", 500);// changer le 500 et le 1000 le 2eme doit etre le double du 1er plus le chiffre et petit plus ca clignote vite .
setTimeout("cligno_sectionjs_b()", 1000);
}
</SCRIPT>
<!-----Fin du texte clignotant----------------------------------------------------------------------->

<!-----Textes et Photo------------------------------------------------------------------------------->
<FONT FACE="tahoma" COLOR="#00008B">
<BR>
<!--<FONT SIZE=5><marquee behavior=scroll scrollamount="6" direction="left" bgcolor="transparent" border="0" width="550" height="19">Bienvenue à l'Institut de Formation Interhospitalier Théodore Simon</marquee></P><BR>-->

<FONT SIZE=5><marquee behavior=scroll scrollamount="6" direction="left" bgcolor="transparent" border="0" width="550" height="19"><? echo $textedefilant; ?></marquee></P><BR>
<BR>

<TABLE width=425>
<TR><P><IMG src="photoBatiment2.jpg" align=right></P><TR>
</TABLE>
<BR><BR>

<TABLE width=800>
<TR align=center>
<!--<TD><FONT SIZE=3 COLOR="#00008B">"1000 personnes formées chaque année aux métiers de la santé"<BR>
"Un taux de réussite avoisinant les 100%"</TD>-->

<TD><FONT SIZE=3 COLOR="#00008B"> <? echo $phrase1; ?> <BR>
<? echo $phrase2; ?></TD>
</TR>
</TABLE>

<BR><BR><BR><BR>
<TABLE align=center width = 810>
<TR><HR width="70%" align=center size=1 color="#0008B"></TR>
<TR>
<!--<TD align=center><FONT SIZE = 1 color="#0008B" FACE="tahoma"><B>IFI Théodore SIMON  3 avenue Jean Jaurès  93331 Neuilly-sur-Marne CEDEX</B></TD>-->
<TD align=center><FONT SIZE = 1 color="#0008B" FACE="tahoma"><B> <? echo $adressenom; ?>   <? echo $adresserue; ?>   <? echo $adresseville; ?> </B></TD>
</TR>
<TR>
<!--<TD align=center><FONT SIZE = 1 color="#0008B" FACE="tahoma"><B>Tel : 01.49.44.36.00  Fax : 01.49.44.36.01</B></TD>-->
<TD align=center><FONT SIZE = 1 color="#0008B" FACE="tahoma"><B> Tel : <? echo $adressetel; ?>    Fax : <? echo $adressefax ?> </B></TD>
</TR>
</FONT>

<?
mysql_close();
?>

</BODY>
2
Voilà, cette image n'est même pas dans un tableau (je viens de m'en rendre compte) et au lieu de rester à sa place elle reste sur le bord droit de la fenêtre quelqu'en soit sa taille ! :o)

<IMG src="Menu.gif" align="right" border="0" usemap ="#Map"> <br>
<MAP name="Map">

<area shape="rect" coords="46,45,186,59" href="presentation.php" name="info1" onMouseOver="RendElemVisible(this.name)" onMouseOut="RendElemInvisible(this.name)">

<area shape="rect" coords="50,110,147,123" href="ecole.htm" name="info2" onMouseOver="RendElemVisible(this.name)" onMouseOut="RendElemInvisible(this.name)">

<area shape="rect" coords=",56,117,169,190" href="droits_patient.htm" name="info3" onMouseOver="RendElemVisible(this.name)" onMouseOut="RendElemInvisible(this.name)">

<area shape="rect" coords="72,246,283,259" href="offre_soins.htm" name="info4" onMouseOver="RendElemVisible(this.name)" onMouseOut="RendElemInvisible(this.name)">

<area shape="rect" coords="109,306,219,318" href="consultations.htm" name="info5" onMouseOver="RendElemVisible(this.name)" onMouseOut="RendElemInvisible(this.name)">

<area shape="rect" coords="140,360,258,374" href="Services/nos_services_soins_medA.htm" name="info6" onMouseOver="RendElemVisible(this.name)" onMouseOut="RendElemInvisible(this.name)">

<area shape="rect" coords=",159,426,325,443" href="Services/nos_services_soins_medA.htm" name="info7" onMouseOver="RendElemVisible(this.name)" onMouseOut="RendElemInvisible(this.name)">

</MAP>
1
Erdnax Messages postés 2273 Date d'inscription mercredi 1 octobre 2003 Statut Contributeur Dernière intervention 1 octobre 2007 497
6 juin 2005 à 12:05
Salut,

Si tes pages sont déjà en ligne, on pourra mieux savoir d'où vient ton problème. Mais je plancherais pour des balises <div> ou <span> mal programmées, ou des tableaux en pourcentages...

Mais comme ça difficile à dire. Sinon colle ton code, qu'on puisse voir.

@+
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Erdnax Messages postés 2273 Date d'inscription mercredi 1 octobre 2003 Statut Contributeur Dernière intervention 1 octobre 2007 497
6 juin 2005 à 13:29
Euh, juste un petit truc, ce serait possible que tu mette du code avec au moins une image ? C'est pas grave si c'est long, met un bon bout ;)

@+
0
Erdnax Messages postés 2273 Date d'inscription mercredi 1 octobre 2003 Statut Contributeur Dernière intervention 1 octobre 2007 497
6 juin 2005 à 13:46
Bon, en fait, là je peux toujours pas me faire une idée. Copie ici tout ton code de ta page entre <body> et <body>, même si ça te parraît énorme, comme ça on pourra vraiment voir.

Et si ton site est déjà sur Internet, c'est plus simple si tu nous donnes l'adresse, comme ça on a tout sous les yeux.

@+
0
Erdnax Messages postés 2273 Date d'inscription mercredi 1 octobre 2003 Statut Contributeur Dernière intervention 1 octobre 2007 497
6 juin 2005 à 14:05
Lol, c'est un tout petit peu une catastrophe la conception de cette page ! J'ai rarement vu un b*rd*l pareil ! ^^

Bon, euh, tu l'a faite avec quoi ? Front page ? Word ? Dreamweaver ? Essaye de restructurer tout ça. Ce que je peux te dire, c'est que tu as trop de tableaux. Cela ne pose pas forcément problème, pour autant qu'ils soient tous bien organisés les uns par rapport aux autres.

Ainsi, je te conseil de faire un grand tableau, qui prend 100% de la page. Ensuite, tu crée des cellule qui prennent la taille que tu veux. A l'intérieur de ces dernières, tu place une balise <div> toute simple, et c'est à l'intérieur de celle-ci que tu place tes tableaux.

Si tu as besoin d'aide dis-le, mais essaye vraiment de ré-organiser tout ça ! Met des tableaux structurés.

@+
0
Oui merci !! Je travaille avec quelqu'un d'autre qui a eu d'autres réponses sur un autre forum !

On va essayer de se servir de balises DIV pour mettre en forme ! On ne connaissait pas avant ! ;o)

Je vais essayer d'être un peu moins bordélique lol ;o)
0
Erdnax Messages postés 2273 Date d'inscription mercredi 1 octobre 2003 Statut Contributeur Dernière intervention 1 octobre 2007 497
6 juin 2005 à 14:20
Plus tu structurera ton code de manière clair, plus il sera facile, pour toi dans un premier temps de trouver des erreurs et de relire, mais aussi à des personnes extérieures de t'aider ;)

Bonne continuation. N'hésite pas à revenir si tu as un problème.

@+
0
Merci pour ta patience et ta compréhension P'tit Suisse ! ;o)
0
Erdnax Messages postés 2273 Date d'inscription mercredi 1 octobre 2003 Statut Contributeur Dernière intervention 1 octobre 2007 497
6 juin 2005 à 16:25
Quand tu aura obtenu un résultat, montre-le nous ;)
0
x-princess'
20 juin 2007 à 14:18
salut je voudrais avoir un site ou ya plein dimages qui bouge (pas des gifs) mais du genre plusieurs image qui se suivent comme un petit film !! j'espere que vous avez compris !! merci davance si vous pouvez me répondre !!
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
20 juin 2007 à 14:52
salut,

nouveau problème → nouvelle discussion.
poste un message pour ton problème tu auras plus de réponses et le forum ne s'en portera que mieux !
-;o)
0
naruto-kyubi1
2 sept. 2007 à 11:16
Slt je cherche une balise qui peut faire deplacé un texte
0
slt je veu des text script html com un text qui bouje .....exe stpstpstp contacter moi au msn nasro221@hotmail.com
0
Hello,
quelqu'un peut me dire comment changer lacouleure de scrolling en HTML??
merci
0
narutodescrache
18 mars 2009 à 22:25
moui mes les lien la ses les lien des xat est des forum . vous pouvez les métre la comme xat vous aler dnas édit est vs avez 1 mot de passe est apres vs entrez le code ke vs avez ses pour ça aussi
0
narutodescrache
18 mars 2009 à 22:32
le probléme ses ke ge penses ke sait des truck de forum regarder le xat est vs vérez mont adresse ses quentin1927@live.fr jéspli ke pour les xats mes nhésitér pas ah alér la http://web.xat.com/chat_groups.html voila le truck ses ke vs pouvait le métre la allors se spas ça merci davance ^^ pck moi ges msn est tout est voila koi a+ .
0