Positionnement objet et image de fond

Positionnement objet et image de fond - HTML/CSS - Programmation

Marsh Posté le 07-02-2009 à 20:40:19    

Bonjour à tous !
 
Voila j'ai un ptit soucis avec une page web :s
En fait, une amie voulais mettre une animation flash en fond d'écran, j'ai donc trouver un sujet qui en parlait, et repris la structure de base.
L'ennui c'est qu'il faudrait que l'animation flash soit en bas a droite, et puis qu'au lieu d'avoir le fond blanc, on puisse y mettre une image, et je suis completement dépassé :pt1cable:  
 
 
Voila mon code :
 

Code :
  1. <html>
  2. <head>
  3. <style>
  4.   body { margin: 0;}
  5. </style>
  6. </head>
  7. <body>
  8. <table cellpadding=0 cellspacing=0 border=0 align=right>
  9. <tr>
  10. <td>
  11. <object type="application/x-shockwave-flash" style="outline:none;" data="C:/fish.swf?up_backgroundColor=B6D0FA&up_backgroundImage=http://&up_fishColor1=F5EAE9&up_fishColor2=A61B08&up_fishColor5=D4791E&up_fishColor9=F45540&up_fishName=Fancygoldfish&up_fishColor8=F45540&up_fishColor6=F45540&up_fishColor3=0D0C0C&up_fishColor4=727E8A&up_numFish=5&up_fishColor7=F45540&up_foodColor=FCB347&up_fishColor10=F45540&" width="300" height="250"><param name="movie" value="C:/fish.swf?up_backgroundColor=B6D0FA&up_backgroundImage=http://&up_fishColor1=F5EAE9&up_fishColor2=A61B08&up_fishColor5=D4791E&up_fishColor9=F45540&up_fishName=Fancygoldfish&up_fishColor8=F45540&up_fishColor6=F45540&up_fishColor3=0D0C0C&up_fishColor4=727E8A&up_numFish=5&up_fishColor7=F45540&up_foodColor=FCB347&up_fishColor10=F45540&"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object><br>
  12. </td>
  13. </tr>
  14. </table
  15. </body>
  16. </html>


 
J'ai réussi à mettre l'anim sur la droite, mais pour la mettre en bas je trouve pas, j'ai essayer avec "align=bottom" mais apparement ça doit pas être ça  :??:  
Et pour le fond d'écran je ne sais pas du tout comme je doit m'y prendre  :heink:  
 
Si quelqu'un pouvais m'apporter quelques éclaircis :)
 
Merci à vous :)


---------------
[Mon Feed-Back]  
Reply

Marsh Posté le 07-02-2009 à 20:40:19   

Reply

Marsh Posté le 08-02-2009 à 11:16:27    

Code :
  1. <html>
  2. <head>
  3. <style>
  4.   body { margin: 0;}
  5. #mydiv {
  6. position:absolute;
  7. bottom:0px;
  8. right:0px;
  9. height: <== taille de ton anim flash
  10. width: <== taille de ton anim
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <div id="mydiv">
  16. <object type="application/x-shockwave-flash" style="outline:none;" data="C:/fish.swf?up_backgroundColor=B6D0FA&up_backgroundImage=http://&up_fishColor1=F5EAE9&up_fishColor2=A61B08&up_fishColor5=D4791E&up_fishColor9=F45540&up_fishName=Fancygoldfish&up_fishColor8=F45540&up_fishColor6=F45540&up_fishColor3=0D0C0C&up_fishColor4=727E8A&up_numFish=5&up_fishColor7=F45540&up_foodColor=FCB347&up_fishColor10=F45540&" width="300" height="250"><param name="movie" value="C:/fish.swf?up_backgroundColor=B6D0FA&up_backgroundImage=http://&up_fishColor1=F5EAE9&up_fishColor2=A61B08&up_fishColor5=D4791E&up_fishColor9=F45540&up_fishName=Fancygoldfish&up_fishColor8=F45540&up_fishColor6=F45540&up_fishColor3=0D0C0C&up_fishColor4=727E8A&up_numFish=5&up_fishColor7=F45540&up_foodColor=FCB347&up_fishColor10=F45540&"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object>
  17. </div>


 
a tester...


---------------
http://poemes.iceteapeche.com - http://www.simuland.net
Reply

Marsh Posté le 08-02-2009 à 15:12:47    

Bonjour à tous, je cherche la solution à mon problème : depuis que j’ai changé d’écran (de 17’’ je suis passé à 22’’) les pages de mon site sont en mosaïque (j’ai mis un jpeg comme fond de l’écran).  
1. Existe-il une fonction dans FrontPage ou Dreamweaver l’équivalente de celle de Windows qui propose de « définir [un jpeg] en tant que papier peint du Bureau » ? Autrement dit : qui rend l’image – avec les zones correspondantes – « extensibles », qui s’adaptent automatiquement en fonction de  l’écran de l’utilisateur ?
2. A default de cette solution : j’ai croisé  l’info selon laquelle la commande background-repeat:no-repeat; peut empêcher ce phénomène de mosaïque. Mais comment la faire ? Moi, quand je la tape dons le code de FrontPage, j’ai sur ma page l’inscription qui apparait : »no repeat », mais l’image est toujours en mosaïque….
3. Une autre solution serait de centrer l’image mais encore : comment créer cette commande ?
Merci beaucoup de votre réponse. Je joins le code d’une de mes pages (désolé, c’est un peu long)
 
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns="http://www.w3.org/TR/REC-html40">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="description" content="Shtrafilclux house-rock, trance-rock, d&amp;b, remix compos">
<meta name="keywords" content="Shtrafilclux house-rock, trance-rock, d&amp;b, remix compos">
<link rel="File-List" href="PAGE-%20Berceuse_fichiers/filelist.xml">
<title>Shtrafilclux house-rock, trance-rock, d&amp;b, remix compos</title>
<!--[if !mso]>
<style>
v\:*         { behavior: url(#default#VML) }
o\:*         { behavior: url(#default#VML) }
.shape       { behavior: url(#default#VML) }
</style>
<![endif]-->
<script language="JavaScript" type="text/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);
//-->
</script>
<!--[if gte mso 9]>
<xml><o:shapedefaults v:ext="edit" spidmax="1027"/>
</xml><![endif]-->
</head>
 
<body background="single-Berceuse.jpg">  
 
<p><!--[if gte vml 1]><v:rect id="_x0000_s1046"
 alt="" href="index.htm" style='position:absolute;left:21pt;top:21.75pt;
 width:49.5pt;height:36pt;z-index:2' filled="f" stroked="f"/><![endif]--><![if !vml]><span
style='mso-ignore:vglayout;position:absolute;z-index:2;left:28px;top:29px;
width:66px;height:48px'><a href="index.htm"><img border=0 width=66 height=48
src="PAGE-%20Berceuse2_fichiers/image001.gif" title="" v:shapes="_x0000_s1046"></a></span><![endif]><!--[if gte vml 1]><v:rect
 id="_x0000_s1043" alt="" href="Berceuse.mp3" style='position:absolute;left:67.5pt;
 top:351.75pt;width:283.5pt;height:26.25pt;z-index:3' filled="f" stroked="f"/><![endif]--><![if !vml]><span
style='mso-ignore:vglayout;position:absolute;z-index:3;left:90px;top:469px;
width:378px;height:35px'><a href="Berceuse.mp3"><img border=0 width=378
height=35 src="PAGE-%20Berceuse2_fichiers/image002.gif" title="" v:shapes="_x0000_s1043"></a></span><![endif]></p>
<p></p>
<p>&nbsp;</p>
<p>&nbsp;
</p>
<p></p>
<p>&nbsp;</p>
 
</body>
 
</html>

Reply

Marsh Posté le 08-02-2009 à 17:33:08    

Bonjour Shtraf,
tu aurais du creer un nouveau sujet pour ton probleme.
 
Il n'est pas possible en css d'etirer une image de fond.
 
Bon sans comprendre les 3/4 de ce que t'as pondu Front page, je dirais..
 
<body background="single-Berceuse.jpg"> devient <body>
Et ensuite tu ajoutes une balise <style type="text/css"> dans <head> :
<style type="text/css">
body {
background:url(single-Berceuse.jpg) no-repeat top center #fff;
}
</style>
 


---------------
http://poemes.iceteapeche.com - http://www.simuland.net
Reply

Marsh Posté le 08-02-2009 à 18:03:44    

Merci beaucoup pour la réponse, je vais essayer et vous tiendrai au courant!

Reply

Marsh Posté le 08-02-2009 à 21:07:24    

Bonsoir, concernant l’image jpeg ça a super bien marché, c’est génial ! Merci !
Mais en même temps un autre problème est apparu : du coup les zones de formes automatiques – où j’ai placé les links pour changer les pages, l’écoute des morceaux etc. – ne correspondent plus à leurs emplacements initiaux, elles ne suivent pas l’image et ne sont pas centrées comme elle….Il y a-t-il une autre formule « magique » à insérer (par exemple) pour qu’elles suivent le mouvement ? Merci encore.  
(je dois dire qu’on bidouillant comme ça –car je n’ai aucune base informatique - j’apprends énormément et, à vrai dire, je m’éclate…)

Reply

Marsh Posté le 08-02-2009 à 21:13:27    

donc tu connais la taille de ton image je presume...
 
<body>
<div id="wrapper">
tout ton bordel
</div>
</body>
 
et dans les styles :
body {
background:url(single-Berceuse.jpg) no-repeat top center #fff;  
text-align:center;
}
#wrapper {
width:100px; /*remplacer 100 par ce que tu veux*/
margin:0 auto;
text-align:left;
}
 
a tester...


---------------
http://poemes.iceteapeche.com - http://www.simuland.net
Reply

Marsh Posté le 08-02-2009 à 21:42:29    

je teste.....merci
Juste pour être sûr : qu’est-ce que je dois mettre à la place de « tout ton bordel » ? (car je suppose que ce n’est pas un code informatique…, ou alors très perfectionné). Dommage, c’est le seul truc que j’ai compris   -:)

Reply

Marsh Posté le 08-02-2009 à 23:52:31    

Coucou, quelques heures plus tard pendant lesquelles j’ai essayé de comprendre et appliquer les conseils de fluminis………..
Voici la manip (qui a marché) concernant le centrage de l’image : par rapport à la page  que j’ai mise plus haut) :
 
</head>
<style type="text/css">
body {
background:url(single-Berceuse.jpg) no-repeat top center #fff;
}
</style>
 
<!--[if gte mso 9]>
<xml><o:shapedefaults v:ext="edit" spidmax="1027"/>
</xml><![endif]-->
 
 
<body>
 
Ca marche nickel !
Par contre, la suite – je n’y a arrive pas….
J’imagine qu’il fallait faire :  
 
<body>
<div id="wrapper">
<p><!--[if gte vml 1]><v:rect id="_x0000_s1046"
 alt="" href="index.htm" style='position:absolute;left:21pt;top:21.75pt;
 width:49.5pt;height:36pt;z-index:2' filled="f" stroked="f"/><![endif]--><![if !vml]><span
style='mso-ignore:vglayout;position:absolute;z-index:2;left:28px;top:29px;
width:66px;height:48px'><a href="index.htm"><img border=0 width=66 height=48
src="PAGE-%20Berceuse53_fichiers/image001.gif" title="" v:shapes="_x0000_s1046"></a></span><![endif]><!--[if gte vml 1]><v:rect
 id="_x0000_s1043" alt="" href="Berceuse.mp3" style='position:absolute;left:67.5pt;
 top:351.75pt;width:283.5pt;height:26.25pt;z-index:3' filled="f" stroked="f"/><![endif]--><![if !vml]><span
style='mso-ignore:vglayout;position:absolute;z-index:3;left:90px;top:469px;
width:378px;height:35px'><a href="Berceuse.mp3"><img border=0 width=378
height=35 src="PAGE-%20Berceuse53_fichiers/image002.gif" title="" v:shapes="_x0000_s1043"></a></span><![endif]></p>
<p></p>
<p>&nbsp;</p>
<p>&nbsp;
</p>
<p></p>
<p>&nbsp;</p>
</div>
</body>
 
J’en suis pas sûr.  
Et concernant la commande à mettre « dans les styles »,   (body {
background:url(single-Berceuse.jpg) no-repeat top center #fff;  
text-align:center;
}
#wrapper {
width:100px; /*remplacer 100 par ce que tu veux*/
margin:0 auto;
text-align:left;
}
   je ne vois vraiment pas où il faut la mettre, j’ai tout essayé – sans résultat.
Et aussi : fluminis, tu demandais la taille de l’image ; elle fait : windth 1024 pixels, height 649 pixels, c’était bien cela ?
J’espère vraiment d’y arriver avec votre aide, merci d’avance – bonne nuit !

Reply

Marsh Posté le 09-02-2009 à 21:03:41    

Bonsoir, bon finalement mon site présente mieux qu’avant même si je suis toujours en train d’essayer de comprendre comment faire pour – à la fois - centrer l’image du fond et les zones des formes automatiques correspondantes.
J’ai modifié légèrement la formule proposée par fluminis (j’ai mis « left center » à la place de « top center » ) et j’ai rajouté un fond noir pour remplir l’écran au cas d’utilisation d’un grand écran. Du coup l’horrible mosaïque a disparue….Si cela pouvait servir à quelqu’un qui a les mêmes soucis que moi….Merci pour l’aide

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed