Rechercher : dans
Par :

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

Dernière réponse le 18 mar 2009 à 22:32:26 Cécilia, le 6 jun 2005 à 11:34:57 
 Signaler ce message aux modérateurs

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.

Configuration: Windows 2000 Pro IE 6.0

Meilleures réponses pour « HTML Image qui bouge en réduisant la fenêtre » dans :
[Aspirateur de pages HTML] Comment aspirer un site Web ? VoirHTTrack est un excellent aspirateur, gratuit en licence GNU GPL (libre). HTTrack permet de télécharger un site web d'Internet vers votre disque dur, en construisant récursivement tous les répertoires, récupérant html, images et fichiers du serveur...
[Outlook Express] Créer papier à lettre / Insérer image de fond VoirLe papier à lettre est une fonctionnalité de Outlook Express permettant d'égayer les courriers électroniques envoyés en insérant des illustrations (images, texte, etc.) en image de fond. Créer son papier à lettre sous Outlook Express Dans la fenêtre...
Gestion des images en HTML VoirComment afficher des images sur une page web? Quelques images sur un site Web peuvent le rendre plus attractif et plus convivial, cependant il est important de ne pas sombrer dans l'excès car les images peuvent impliquer un temps de chargement...
Les balises HTML VoirHTML, un langage à balises Le HTML n'est pas un langage de programmation. Il s'agit d'un langage permettant de décrire la mise en page et la forme d'un contenu rédigé en texte simple. Une page HTML est ainsi un simple fichier texte...

1

Erdnax, le 6 jun 2005 à 12:05:26

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.

@+
P'tit Suisse

Répondre à Erdnax

2

Cécilia, le 6 jun 2005 à 13:08:50
  • +1

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>

Répondre à Cécilia

3

Erdnax, le 6 jun 2005 à 13:29:50

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 ;)

@+
P'tit Suisse

Répondre à Erdnax

4

Cécilia, le 6 jun 2005 à 13:38:02
  • +1

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>

Répondre à Cécilia

5

Erdnax, le 6 jun 2005 à 13:46:37

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.

@+
P'tit Suisse

Répondre à Erdnax

6

Cécilia, le 6 jun 2005 à 13:48:32
  • +1

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>

Répondre à Cécilia

7

Erdnax, le 6 jun 2005 à 14:05:13

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.

@+
P'tit Suisse

Répondre à Erdnax

8

Cécilia, le 6 jun 2005 à 14:14:28

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)

Répondre à Cécilia

9

Erdnax, le 6 jun 2005 à 14:20:44

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.

@+
P'tit Suisse

Répondre à Erdnax

10

Cécilia, le 6 jun 2005 à 16:21:15

Merci pour ta patience et ta compréhension P'tit Suisse ! ;o)

Répondre à Cécilia

11

Erdnax, le 6 jun 2005 à 16:25:39

Quand tu aura obtenu un résultat, montre-le nous ;) P'tit Suisse

Répondre à Erdnax

12

x-princess', le 20 jun 2007 à 14:18:01

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 !!

Répondre à x-princess'

13

Dalida, le 20 jun 2007 à 14:52:14

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)
[ Mathieu ]

Il y a surement des pandas pour ne dépendre de rien

Répondre à Dalida

14

naruto-kyubi1, le 2 sep 2007 à 11:16:00

Slt je cherche une balise qui peut faire deplacé un texte

Configuration: Windows XP
Internet Explorer 6.0

Répondre à naruto-kyubi1

15

nasro, le 28 nov 2007 à 19:28:43

Slt je veu des text script html com un text qui bouje .....exe stpstpstp contacter moi au msn nasro221@hotmail.com

Répondre à nasro

16

SOON, le 7 avr 2008 à 08:45:31

Hello,
quelqu'un peut me dire comment changer lacouleure de scrolling en HTML??
merci

Répondre à SOON

17

narutodescrache, le 18 mar 2009 à 22:25:19

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

Répondre à narutodescrache

18

 narutodescrache, le 18 mar 2009 à 22:32:26

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+ .

Répondre à narutodescrache