Bordures Flash

Bordures Flash - HTML/CSS - Programmation

Marsh Posté le 26-10-2008 à 20:25:38    

Bonjour à tous,
 
j'ai une page d'accueil à réaliser en html avec un style css et je rencontre des problèmes de compatibilité entre les différents navigateurs: Firefox 3.0.3 et IE7.
 
J'ai une bordure à réaliser autour d'un flash et d'une image, pour ce faire j'utilise une image.
 
Deux choses que je n'arrive pas à régler:
- J'ai un espace en dessous de mon flash et la bordure sous Firefox
- Ma bordure horizontal ne fais pas 4 mais 19 px sous IE7
Savez vous egalement comment centrer verticalement du texte? Comme dans <div id="acceuil">
 
Voici les codes :

Code :
  1. HTML :
  2. <html>
  3. <head>
  4. <title>Aerosph'air</title>
  5. <link rel="stylesheet" type="text/css" href="style.css" />
  6. </head>
  8. <body>
  9. <div id="contenu">
  10. <div id="menu">
  11. <b>
  12. <div id="bordureg"></div>
  13. <div id="acceuil"><a href="#"><font color=#FF0033><br>Acceuil</font></a></div>
  14. <div id="centre"></div>
  15. <div id="menusuite"><a href="#">A propos...</a></div>
  16. <div id="centre"></div>
  17. <div id="menusuite"><a href="#">Evenement</a></div>
  18. <div id="centre"></div>
  19. <div id="menusuite"><a href="#">Photo</a></div>
  20. <div id="centre"></div>
  21. <div id="menusuite"><a href="#">Forum</a></div>
  22. <div id="centre"></div>
  23. <div id="menusuite"><a href="#">Contact</a></div>
  24. <div id="bordured"></div>
  25. </div>
  26. <div id="bordurehflash"></div>
  27. <div id="bordurevflash"></div>
  29. <div id="flash"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="410" height="220">
  30. <param name="movie" value="flashs finalisés/ballon.swf">
  31. <param name="quality" value="high">
  32. <embed src="flashs finalisés/ballon.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="410" height="220"></embed>
  33. </object></div>
  34. <div id="bordurevflash"></div>
  35. <div id="aerosphair"></div>
  36. <div id="bordurevflash"></div>
  37. <div id="bordurehflash"></div>
  38. </div>
  39. </body>
  40. </html>


Et voici le style.css:

Code :
  1. body{
  2. background-color:#42BCFD;
  3. margin:0 auto;
  4. font-family:candara;
  5. text-align:center;
  6. }
  7. /*contenu,pas centrer sur explorer-------------------------*/
  8. #contenu{
  9. width: 767px;
  10. position:relative;
  11. margin-left:auto;
  12. margin-right:auto;
  13. background-color:#0AAAFE;
  14. background-repeat:repeat-y;
  15. }
  16. /* Banniere avec bouton------------------------------------------------------------------*/
  18. #menu a{
  19. text-decoration:none;
  20. color:#0AAAFE;
  21. font-size:22;
  22. }
  23. /*bordure gauche menu------------------------------------*/
  24. #bordureg{
  25. float:left;
  26. width:3px;
  27. height:80px;
  28. background-image:url(image-aerosphair/img01.gif);
  29. background-repeat:repeat;
  30. }
  31. /*bordure droite menu---------------------------------------*/
  32. #bordured{
  33. float:left;
  34. width:4px;
  35. height:80px;
  36. background-image:url(image-aerosphair/img01.gif);
  37. background-repeat:repeat;
  38. }
  40. /*bouton acceuil-----------------------------------------*/
  41. #acceuil{
  42. color:#FF0033;
  43. text-align:center;
  44. float:left;
  45. width:125px;
  46. height:80px;
  47. background-image:url(image-aerosphair/img03.gif);
  48. }
  49. /*separation boutons du menu---------------------------------*/
  50. #centre{
  51. float:left;
  52. width:2px;
  53. height:80px;
  54. background-image:url(image-aerosphair/img01.gif);
  55. background-repeat:repeat;
  56. }
  57. /*boutons du menu---------------------------------------------------*/
  58. #menusuite{
  59. text-align:center;
  60. float:left;
  61. width:125px;
  62. height:80px;
  63. background-image:url(image-aerosphair/img02.gif);
  65. }
  66. #flash{
  67. float:left;
  68. }
  69. /*bordure horizontal du flash--------------------------------*/
  70. #bordurehflash{
  71. float:left;
  72. width:767px;
  73. height:4px;
  74. background-image:url(image-aerosphair/img01.gif);
  75. background-repeat:repeat;
  76. background-attachment: fixed;
  77. ;
  78. }
  79. /*bordure vertical du flash------------------------------------*/
  81. #bordurevflash{
  82. float:left;
  83. width:4px;
  84. height:220px;
  85. background-image:url(image-aerosphair/img01h.gif);
  86. background-repeat:repeat;
  87. }
  88. #flash{
  89. float:left;
  90. }
  91. #aerosphair{
  92. float:left;
  93. width:345px;
  94. height:220px;
  95. background-image:url(image-aerosphair/aerosphair.jpg);
  96. background-repeat:no-repeat;
  97. }
  99. #gauche {
  100. width:350px;
  101. margin-left:30px;
  102. text-align:justify;
  103. }
  104. /#stopflot{
  105. clear:both;
  106. }


 
 
Merci d'avance pour vos réponse et pour votre aide.
 
Édité par Elmoricq : les titres en majuscules sont interdits.


Message édité par Elmoricq le 27-10-2008 à 14:32:39
Reply

Marsh Posté le 26-10-2008 à 20:25:38   

Reply

Marsh Posté le 27-10-2008 à 13:35:48    

vertical-align : center
 
... Sinon, les autres problèmes, ça donne quoi avec un DOCTYPE ?


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 27-10-2008 à 15:09:46    

Merci abais,
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">

 
 
Ceci arrange le problème pour IE7 mais pas pour firefox,
 
vertical-align:center ne marche pas, j'avais déjà essaayé

Reply

Marsh Posté le 27-10-2008 à 21:28:46    

et avec un doctype XHTML Strict 1.0  ?


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Sujets relatifs:

Leave a Replay

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