1er site xHTML + CSS. Prob de scroll Moz' et IE. Prob de background !

1er site xHTML + CSS. Prob de scroll Moz' et IE. Prob de background ! - Web design - Graphisme

Marsh Posté le 05-07-2005 à 00:47:47    

Chalut chalut.. :sleep:  
BONSOIR !  :D ... :heink:  
bon..
 
Je suis en train de faire mon (presque) premier site. Il sera compatible 1024x768 et +. Pensez-vous que cela soit trop ? Yen a encore qui tourne en 800x600 !?
 
-Voici le premier prob dans IE, la barre de scroll du bas s'affiche alors qu'elle ne sert strictement a rien. Meme en 1280x1024 ou on voit un grand vide sur la droite,,,elle est toujours la.  :fou:  J'ai bien verifié la taille des calques,,les marges etc...ça fait tte la journée que jsuis dssus  :pt1cable:.
 
Image prob IE:
http://img148.imageshack.us/img148 [...] ite0rl.gif
 
 
-Jai aussi un prob parmis d'autres avec Mozila FireFox (car jessaye de le rendr ecompatible avec les deux) et l'image de fond de mon calque qui contient les "articles" se stope a un certain niveau, sans que je sache pour qu'elle raison. Quel serait le parametre a changer la dedans ? Quel modif dois-je faire ? (j'ai la chance de posseder DWeaver MX).
 
Image sous MFF :
http://img278.imageshack.us/img278 [...] aol0wb.gif
 
 
MERCI a tous !
Je vous met bientot (ce soir ?) un lien vers mon site pour avoir des com's.
thx !  :hello:

Reply

Marsh Posté le 05-07-2005 à 00:47:47   

Reply

Marsh Posté le 05-07-2005 à 00:49:08    

sans code on peut po t'aider à corriger tes problèmes, le mieux c'est d'aller sur HTML/CSS/JS dns le forum programmation

Reply

Marsh Posté le 05-07-2005 à 00:53:47    

Oui mais p-e que c'est un probleme courant, vous pourriez p-e m'indiquer des trucs a verifier et qui pourrait etre la cause de ceci...
 
je vais voir si je post danx la parti prog ce soir..
 
merci a toi..

Reply

Marsh Posté le 05-07-2005 à 01:03:13    

je veux voir le code CSS et le code HTML et là jte répondrai

Reply

Marsh Posté le 05-07-2005 à 01:15:49    

voici le code du jeu de cadre:
 

Code :
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Document sans titre</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7. </head>
  9. <frameset rows="*" cols="222,*" framespacing="0" frameborder="no" border="0">
  10.   <frame src="Frame-menu-2.htm" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" />
  11.   <frame src="index%20ac%20menu.htm" name="mainFrame" id="mainFrame" />
  12. </frameset>
  14. <noframes>
  15. <body>
  16. </body>
  17. </noframes>
  19. </html>


 
 
la feuille de style :

Code :
  1. /*-----Définitions générales, balises-----*/
  2. body {
  3. background-image: url(images/bg.gif);
  4. background-repeat: repeat;
  5. font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  6. font-size: 8pt;
  7. letter-spacing: 1px;
  8. }
  11. /*-----Div global-----*/
  12. #conteneur {
  13. width: 770px;
  14. position: absolute;
  15. left: 0px;
  16. background-image: url(images/bgConteneur.gif);
  17. background-repeat: repeat-y;
  18. padding-left: 5px;
  19. padding-right: 0px;
  20. top: 22px;
  21. height: 621px;
  22. }
  25. /*-----Header-----*/
  26. #header {
  27. margin-bottom: 100px;
  28. /*Taille*/
  29. width: 760px;
  30. height: 154px;
  31. /*BackGround*/
  32. background-image: url(images/header.jpg);
  33. background-repeat: no-repeat;
  34. }
  37. /*-----Logo----*/
  38. #logo {
  39. /*Taille*/
  40. width: 280px;
  41. height: 118px;
  42. /*Positonnement*/
  43. position: absolute;
  44. top: 18px;
  45. left: 272px;
  46. }
  49. /*-----Menu----*/
  50. #menu {
  51. /*Taille*/
  52. width: 424px;
  53. height: 82px;
  54. /*Positonnement*/
  55. position: absolute;
  56. top: 154px;
  57. left: 307px;
  58. margin: 0;
  59. /*BackGround*/
  60. background-image: url(images/menu.jpg);
  61. background-repeat: no-repeat;
  62. /*Contenu*/
  63. padding-top: 3px;
  64. text-align: center;
  65. color: White;
  66. }
  69. /*-----Footer-----*/
  70. #footer {
  71. /*Contenu*/
  72. padding-top: 23px;
  73. text-align: center; /*BackGround*/
  74. background-image: url(images/footer.jpg);
  75. background-position: -1px;
  76. background-repeat: no-repeat;
  77. }
  82. /*--------------------------------------------------------------------------------------------------------------
  83. ----------------------------------------------------------------------------------------------------------------
  84. --------------------------------------------------------------------------------------------------------------*/
  89. /*-----Menu_Cote-----*/
  90. #menuc {
  91. width: 220px;
  92. height: 400px;
  93. background-color: #CCCCCC;
  94. margin-top: 22px;
  95. margin-left: 0px;
  97. position : absolute;
  98. text-align: left;
  99. background-image: url(images/bgmenu_frame_dec.gif);
  100. background-position: -1px;
  101. background-repeat: repeat-y;
  103. }
  106. #menuc_haut {
  107. width: 229px;
  108. height: 16px;
  109. background-color: #CCCCCC;
  110. margin-top: 8px;
  111. margin-left: -11px;
  112. position : absolute;
  113. text-align: left;
  114. background-image: url(images/haut_menu.jpg);
  115. background-position: -1px;
  116. background-repeat: repeat-y;
  117. }
  119. #menuc_bas {
  120. width: 229px;
  121. height: 16px;
  122. background-color: #CCCCCC;
  123. margin-top: 418px;
  124. margin-left: -11px;
  125. position : absolute;
  126. text-align: left;
  127. background-image: url(images/bas_menu_230.jpg);
  128. background-position: -1px;
  129. background-repeat: repeat-y;
  130. }
  135. /*--------------------------------------------------------------------------------------------------------------
  136. ----------------------------------------------------------------------------------------------------------------
  137. --------------------------------------------------------------------------------------------------------------*/
  141. p.signature {
  142. text-align: right;
  143. font-size: 100%;
  144. font-style: italic;
  145. font-weight: bold;
  147. }
  149. .img_cliquable {
  150. border: 3;
  151. }
  154. /*--------------------------------------------------------------------------------------------------------------
  155. ----------------------------------------------------------------------------------------------------------------
  156. --------------------------------------------------------------------------------------------------------------*/
  159. h1 {
  160. margin: 30px 80px 20px 40px;
  161. font-size: 325%;
  162. }
  164. h2 {
  165. margin: 30px 80px 20px 40px;
  166. font-size: 200%;
  167. }
  169. h3 {
  170. margin: 30px 80px 20px 40px;
  171. font-size: 150%;
  172. }
  176. /*--------------------------------------------------------------------------------------------------------------
  177. ----------------------------------------------------------------------------------------------------------------
  178. --------------------------------------------------------------------------------------------------------------*/
  181. /*-----Paragraphes du div#principal-----*/
  182. #main p {
  183. margin: 10px 50px 10px 40px;
  184. /*text-indent: 30px; /* Les paragraphes commenceront 30 pixels sur la droite */ */
  185. }
  187. #main img {
  188. border: 0;
  189. }
  190. /*
  191. #main P:first-letter {  
  192. font-size: 200%;  
  193. font-weight: bold;  
  194. }*/
  196. /*-----Encart-----*/
  197. p#encart {
  198. margin: -20px 20px 20px 20px;
  199. /*Taille*/
  200. /*width: 240px;
  201. height: 122px;*/
  202. /*Positonnement*/
  203. float: left;
  204. }
  206. /*-----EncartIN----*/
  207. p#encart_in {
  208. margin: 20px 20px 10px 20px;
  209. /*Taille*/
  210. /*width: 240px;
  211. height: 122px;*/
  212. /*Positonnement*/
  213. float:left;
  214. }


 
 
J'ai pensé que les deux autre fichiers (la frame menu et frame principale) n'etaient pas necessaire vu qu'il y a le CSS...mais si tu les veux, je les mail ;-)
Je precise que le site n'est psa encore (du tout) terminé...yola..
 
Merci  [:bibije]  j'espere que j'ai pas fait de grosses bourdes..

Reply

Marsh Posté le 05-07-2005 à 01:19:20    

bon on la refait la CSS c'est bien
le jeu de cadre j'en ai rien a battre, c'est la page principale ki a le problème pas la page des frame
et puis les frames C mallllllllll :o

Reply

Marsh Posté le 05-07-2005 à 01:23:30    

les frames c'est mal mais si je dois changer le menu et que j'ai une dizaine de pages ben je vais etre comme un couillon aussi.. :sweat:  
 
le code principal :

Code :
  1. <!DOCTYPE html
  2.      PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  5.   <head>
  6. <title>| Bienvenue | Nomdusite |</title>
  7. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
  8. <link rel="stylesheet" type="text/css" media="all" href="styles ac menu.css" />
  9. <script language="JavaScript" type="text/JavaScript">
  10. <!--
  11. function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  12.   if (init==true) with (navigator) {if ((appName=="Netscape" )&&(parseInt(appVersion)==4)) {
  13.     document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  14.   else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
  15. }
  16. MM_reloadPage(true);
  17. //-->
  18. </script>
  19. </head>
  20.   <body>
  21.  
  22. <div id="conteneur">
  23.   <div id="header"> <img src="images/logo.gif" alt="NomDuSite" name="logo" width="284" height="105" id="logo" />
  24.     <p id="menu"><span>Accueil &nbsp;&nbsp;| &nbsp;&nbsp;Moi/Nous&nbsp;&nbsp;|
  25.       &nbsp;&nbsp;Partenariats&nbsp;&nbsp;| &nbsp;&nbsp;Contact</span></p>
  26.   </div>
  27.   <div id="main">
  28.     <p align="left" id = "encart"><img src="images/prdts.jpg" alt="Nos Produits" /></p>
  29.     <h2>A qui s'adresse ce site ?</h2>
  30.    
  32. <p> Morbi mattis volutpat orci. In malesuada. Donec gravida faucibus felis.
  33.       Morbi volutpat rhoncus lectus. Curabitur pellentesque, lectus id dignissim
  34.       elementum, lacus risus venenatis tortor, at convallis lacuselementum, batus
  35.       a la chupa chups lacus risus venenatis tortor, at convallis lacus alea jakta
  36.       est faire pipi dans la piscine erat id arcu. Duis tellus metus, hendrerit
  37.       et, aliquet eu, accumsan vel, odio. Pellentesque lobortis scelerisque tellus.
  38.       In turpis. Nullam rhoncus. Etiam a nunc. </p>
  39.     <h2>Comment profiter pleinement de la lecture de ce site ?</h2>
  40.    
  43. <p> Aliquam vestibulum, lacus id hendrerit pulvinar, mi turpis auctor nibh,
  44.       a auctor tortor nulla eu diam. Maecenas elit eros, molestie nec, aliquam
  45.       vitae, lobortis ultrices, tellus. Fusce enim. Etiam aliquet ipsum quis sem
  46.       dignissim rhoncus. Sed sapien. Phasellus lectus. Nunc sollicitudin pretium
  47.       velit. Donec congue dignissim sem. Vivamus arcu nisl, aliquam nec, porta
  48.       quis, tempor congue, libero. Quisque cursus. Donec est lectus, eleifend
  49.       eu, aliquet sit amet, volutpat id, wisi. Phasellus est elit, placerat in,
  50.       iaculis in, molestie laoreet, wisi. Praesent placerat neque vitae tellus.
  51.       Duis urna tellus, pulvinar quis, facilisis id, sagittis in, neque. Pellentesque
  52.       habitant morbi tristique senectus et netus et malesuada fames ac turpis
  53.       egestas. Fusce sit amet elit sit amet augue porttitor condimentum. Sed mauris.
  54.       Sed nec mi id mi accumsan varius. Vivamus accumsan metus sed sapien. Fusce
  55.       id tellus. Mauris eget nunc eget turpis lacinia fringilla. Nunc neque. Pellentesque
  56.       interdum fermentum odio. Nulla rutrum tempor eros. Etiam ornare massa sed
  57.       metus tempor consectetuer.</p>
  58.     <h2>Mais qui est donc cette jolie jeune fille ?</h2>
  59.     <p align="left" id="encart_in"><img src="images/visage.jpg" width="280" height="210"/>
  60.     </p>
  61.     <br>
  62.    
  65. <p> Donec in justo. In pulvinar, libero vel scelerisque ultricies, tellus
  66.       lectus porttitor pede, in tempus ligula ligula sed mi. Duis malesuada nulla
  67.       eu dolor volutpat dapibus. Etiam id dui a lacus feugiat semper. Ut id nulla
  68.       sit amet urna feugiat fringilla. In hac habitasse platea dictumst. Phasellus
  69.       iaculis enim sed justo rhoncus elementum. Ut elit lorem, lobortis vel, suscipit
  70.       vitae, pellentesque ut, eros. Pellentesque habitant morbi tristique senectus
  71.       et netus et malesuada fames ac turpis egestas. Morbi est ante, posuere et,
  72.       fringilla in, elementum at, ipsum. Sed blandit. Proin tincidunt. Aliquam
  73.       vitae ante non metus convallis consectetuer. Maecenas vel nulla. Suspendisse
  74.       porttitor, nulla id interdum hendrerit, odio lectus pulvinar elit, eu rhoncus
  75.       urna metus vitae odio. Maecenas nulla purus, adipiscing auctor, commodo.
  76.     </p>
  77.     <h3 align="left">Note de l'auteur :</h3>
  78.    
  80. <p> Praesent velit mauris, mattis et, facilisis in, tristique sed, augue.
  81.       Sed lacus. Suspendisse egestas. Ut lacinia. Fusce ligula. Pellentesque habitant
  82.       morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  83.       Quisque posuere tortor ut diam. Ut accumsan elit non neque. Suspendisse
  84.       euismod mattis pede. Vestibulum ante ipsum primis in faucibus orci luctus
  85.       et ultrices posuere cubilia Curae; In commodo mauris. </p>
  86.     <br>
  87.     <p class="signature">L'auteur.</p>
  88.     <br>
  89.     <br>
  90.     <br>
  91.     <p> <img src="valide_css.jpg" title="ce site est valide css2" alt="validation css2" />
  92.       <img src="valide_xhtml.jpg" title="ce site est valide xhtml 1.0" alt="validation xhtml" />
  93.     </p>
  94.   </div>
  95.   <div id="footer">
  96.     <p>Copyright &copy; 2005 www.Bab-Art.com- Tous droits réservés - Conception
  97.       par <a href="mailto:coincoin1024@hotmail.com">coincoin1024</a></p>
  98.   </div>
  99. </div>
  100.  
  102.  
  103.  
  105.  
  106. </body>
  107. </html>


Message édité par bibije le 05-07-2005 à 01:25:10
Reply

Marsh Posté le 05-07-2005 à 02:01:36    

body {  
    background: url(images/bg.gif) repeat-y center top;
 
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;  
    font-size: 8pt;  
    letter-spacing: 1px;  
}  
 
voila corriged


Message édité par gatsusat le 05-07-2005 à 02:02:32
Reply

Marsh Posté le 05-07-2005 à 02:07:48    

merci de t'etre interressé a mon prob mais la ça ne resout pas le probleme et c'est meme pire :-/. Le font bug dans Mozila et dans IE c'est pire.
 
EDIT: je viens meme d'essayer quelques combinaisons sur ce bout de code et rien n'y fait. Ttjours pareil.. :sleep: ...
tu as testé la page chez toi ?  
 
Voila. Merci.  
Bonne nuit ;-)


Message édité par bibije le 05-07-2005 à 02:11:43
Reply

Marsh Posté le 05-07-2005 à 10:11:00    

jpe po tester j'ai po les images

Reply

Marsh Posté le 05-07-2005 à 10:11:00   

Reply

Marsh Posté le 05-07-2005 à 13:19:37    

ouai : il faudrais peut etre mettre le site en ligne :/

Reply

Marsh Posté le 05-07-2005 à 14:49:08    

C'est ce que j'essayais de faire hier soir, mais voila ne voulait pas de mon zip, alors qu'il les prend normalement, et LeechFTP ne veut pas se connect pour je ne sais quelle raison. Je vais voir ce que je peux faire.
 
EDIT: j'ai essayé Voila me les a pris mais le jeu de cadre me dit que les pages n'existent pas, et la feuille de style n'est pas chargée par la page. Ds easyphp ça marche mais pas la pff.. ca me saoule jsuis à la  bourre thx a+


Message édité par bibije le 05-07-2005 à 15:10:20
Reply

Marsh Posté le 05-07-2005 à 16:52:36    

bibije a écrit :

Je suis en train de faire mon (presque) premier site. Il sera compatible 1024x768 et +. Pensez-vous que cela soit trop ? Yen a encore qui tourne en 800x600 !?


 
juste pour info :
perso je suis en 1024x768 mais je surfe jamais en plein écran car j'ouvre toujours plusieurs sites en même temps. donc vive les sites qui marchent quelque soit la taille de la fenêtre et surtout jamais en plein écran
 
sinon, jette un oeil à ces stats 'pros' même si elles sont un peu anciennes :
http://solutions.journaldunet.com/ [...] eurs.shtml
 
bye

Reply

Marsh Posté le 06-07-2005 à 01:26:42    

Ouai c'est vrai. Merci leZone. J'ai pensé a rendre mon site redimenssionable mais j'ai entendu dire que c'etait plus difficil à mettre en place...en plus je vois pas trop quelle code ajouter..mais c'est pas un prob, je trouverais bien sur le net..
 
merci ;-)
a+

Reply

Sujets relatifs:

Leave a Replay

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