debutant en html , j'ai deux trois problèmes

debutant en html , j'ai deux trois problèmes - HTML/CSS - Programmation

Marsh Posté le 09-11-2006 à 01:53:51    

bonjour
je m'entraine actuellement a relooker une page web d'un site html existant  
le site en question  
http://www.bel-hardware.be/ (ce n'est pas mon site hein )
 
bref j'essaie de lui donner un nouveau look et par la même occasion j'apprend la xhtml
 
voici un screnn de ou j'en suis (j'ai commencé hier soir)
 
voici un screnn sous IE 6
http://www.hiboox.com/vignettes/4506/a439e5a3.jpg
 
voici un screnn sous firefox 2.0
http://www.hiboox.com/vignettes/4506/6d5268be.jpg
 
bien evidemment le rendu de firefox s'approche le plus de ce que je veux  
 
je vous expose tout mes problèmes :
 
-sous IE comment faire pour que le cadre de news soit a coté de celui du menu (comme firefox quoi)
-sous IE et firefox , le cadre avec les news matbe est decalé un tout ptit cran vers la gauche , j'aimerais qu'il le soit un tout ptit cran vers la droite  
-dans la catégories articles (là ou ya le panneau stop) , je veux mettre toute les articles cote a cote avec un leger espace quand même(regardé le site d'origine , vous comprendrez)
pour que sa fasse un peu comme matbe.com .
-vous pouvez constatez deux liste a puce composé de <ul><li> , est il possible de mettre autre choses a la place des puces (les ptits losanges noir)
 
avez vous des idées pour améliorez le design ???
il est a notez que les couleurs sont là juste pour voir les differentes balises, elles ne sont pas définitives.
la banniere sera également changé  
avez vous des idées de couleurs a mettre???
 
voici le css , la validation a été un succé sur w3c

Code :
  1. body
  2. {
  3. width : 1000px ;
  4. margin-left: auto; margin-right: auto;
  5. margin-top : 20px ;
  6. margin-bottom : 20px ;
  7. background-color : #093A66 ;
  8. color: #000000;
  9. }
  11. #entete
  12. {
  13. width: 1000px;
  14. height: 100px;
  15. background-image: url("bandeau.jpg" );
  16. background-repeat: no-repeat;
  17. margin-bottom: 10px;
  18. border: 2px solid black;
  19. }
  21. #article
  22. {
  23. width: 1000px;
  24. height: 120px;
  25. background-color: #ffffff;
  26. border: 2px solid black;
  27. margin-bottom: 10px;
  28. color: #000000;
  29. }
  31. .stop
  32. {
  33. width:auto;
  34. height:auto;
  35. padding:5px;
  36. border: none;
  37. }
  39. #menu
  40. {
  41. float: left;
  42. width: 140px;
  43. }
  45. .element_menu
  46. {
  47. background-color: #ffffff;
  48. border: 2px solid black;
  49. margin-bottom: 20px;
  50. color: #000000;
  51. font-weight: bold;
  52. text-align: center;
  53. }
  55. .element_menu ul
  56. {
  57. text-align: left;
  59. }
  61. .element_menu a:hover /* Quand on pointe sur un lien du menu */
  62. {
  63.    background-color: #B3B3B3;
  64.    color: black;
  65. }
  67. #news
  68. {
  69. background-color: #ffffff;
  70. color: #000000;
  71. border: 2px solid black;
  72. padding: 5px;
  73. width: 810px;
  74. margin-left: 180px;
  75. margin-bottom: 30px;
  76. height: auto;
  77. }
  79. .pcinpact
  80. {
  81. background-color: #ffffff;
  82. color: #000000;
  83. border: 2px solid black;
  84. width: 400px;
  85. float: left;
  86. margin-bottom: 10px;
  87. height: 300px;
  88. padding: 10px;
  89. }
  92. #site
  93. {
  94. background-color: transparent;
  95. width: 1000px;
  96. height: 350px;
  97. }
  100. .matbe
  101. {
  102. background-color: #ffffff;
  103. color: #000000;
  104. border: 2px solid black;
  105. width: 400px;
  106. float: left;
  107. height: 300px;
  108. margin-bottom: 10px;
  109. padding: 10px;
  110. margin-left: 152px;
  111. }
  113. #footer
  114. {
  115. text-align: center;
  116. background-color: #ffffff;
  117. color: #000000;
  118. border: 2px solid black;
  119. width: 1000px;
  120. height: 60px;
  121. }


je vous remercie d'avance


Message édité par sebfun le 09-11-2006 à 11:27:22
Reply

Marsh Posté le 09-11-2006 à 01:53:51   

Reply

Marsh Posté le 09-11-2006 à 10:32:10    

Salut,  
 
- Pour mettre d'autres images sur tes puces : http://www.w3.org/TR/REC-CSS2/generate.html
(cherche "list-style-image" sur cette page)
 
- Pour le cadre qui se met en dessous, 99% tu temps c'est un problème avec les float / clear / position:relative ... google cela ou va voir ici :  
http://www.w3.org/TR/REC-CSS2/visuren.html#floats
 
Sans le code HTML de ta page c'est-à-dire sans savoir quel est l'élément auquel s'applique quelle propriété CSS, c'est un peu casse-têter à deviner ...  (on pourrait faire un View Source sur le site existant mais bon ... )

Reply

Marsh Posté le 09-11-2006 à 10:55:46    

ok excuse moi voici mon code html

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3.    <head>
  4.        <title>essai site belhardware</title>
  5.        <link rel="stylesheet" media="screen" type="text/css" title="essai" href="essai.css" />
  6.        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7.    </head>
  8.    <body>
  9. <div id="entete">
  10. <!--voir css-->
  11. </div>
  13. <div id="article">
  14. <div class="stop">
  15. <a href="http://www.bel-hardware.be/fin.html"><img src="stop.jpg" alt="fin du site" title="Bel-Hardware, une "fin programmée !" /></a>
  16. </div>
  18. </div>
  21. <div id="menu">
  22. <div class="element_menu">
  23. <ul>
  24. <li><a href="http://www.bel-hardware.be/index.html">Acceuil</a></li>
  25. <br>
  26. <li><a href="http://www.bel-hardware.be/forum">Forum</a></li>
  27. <br>
  28. <li><a href="http://www.bel-hardware.be/apropos.html">A propos</a></li>
  29. </ul>
  30. <br>
  31. </div>
  32. </div>
  34. <div id="news">
  35. <ul>
  36. <li><a href="http://www.compumsa.be">- 30/07 - Magasin online Computersmsa-Shop ouvert !!!!</li>
  37. <li><a href="http://www.bel-hardware.be/forum/viewtopic.php?id=689">- 04/10 - ATIx1800xt : 9000-10000pts @ 3dm05!</li>
  38. <li><a href="http://www.bel-hardware.be/forum/viewtopic.php?id=673">- 20/09 - Intel : Voici le futur !</li>
  39. <li><a href="http://www.bel-hardware.be/forum/viewtopic.php?id=672">- 20/09 - Coup de main maison pour l'achat d'un 19" TFT !</li>
  40. <li><a href="http://www.bel-hardware.be/forum/viewtopic.php?id=622">- 11/08 - Geforce 7800 GT -> Premier test !</li>
  41. <li><a href="http://www.bel-hardware.be/forum/viewtopic.php?id=612">- 04/08 - X800GT -> Premier test !</li>
  42. </ul>
  43. <p><a href="http://www.bel-hardware.be/forum/viewforum.php?f=16">Toutes les news</p>
  45. </div>
  47. <div id="site">
  49. <div class="pcinpact">
  50. <script type="text/javascript" src="http://www.pcinpact.com/include/newspart.php?nb=8"></script>
  51. </div>
  53. <div class="matbe">
  54. <script language="JavaScript1.1" type="text/javascript" src="http://www.matbe.com/export/exportnews.htm"></script>
  55. </div>
  57. </div>
  59. <div id="footer">
  60. <p>copyright bel-hardware, page d'acceuil créer par <a href="mailto:sebfun2003@hotmail.com">sebfun</a>
  62. </div>
  64.     </body>
  65. </html>*


Message édité par sebfun le 09-11-2006 à 11:26:53
Reply

Marsh Posté le 09-11-2006 à 11:15:16    

Merci d'utiliser la balise [code] pour plus de lisibilité :jap:

Reply

Marsh Posté le 09-11-2006 à 11:27:46    

ok scuse , c'est fait

Reply

Marsh Posté le 09-11-2006 à 11:31:00    

oki essaye de mettre un float:left; dans le "#news" dans ton CSS.
 
et rajoute ceci (toujours dans le CSS) :  
 

Code :
  1. .clear {
  2. clear:both;
  3. }


 
Et maintenant dans le HTML : après la DIV news rajoute une div vide :  

Code :
  1. <div id="clear"></div>


 
C'est plus "propre" ; ta div suivante (site) sera "correctement" mise en-dessous (elle l'est maintenant juste parce que ton cadre global et/ou ta taille d'écran n'est pas suffisante, autrement elle s'afficherait mal.

Reply

Marsh Posté le 09-11-2006 à 11:50:24    

merci , je ne connaissais pas la propriété "clear".
 
sinon euxx dans le css c'est #clear que jdois mettre pas .clear  
vu que c'est un "id" non :d ^^
 
donc sous internet explorer sa rend deja nettement mieux  
mais ptit probleme , le cadre "news" ainsi que le cadre "matbe" n'est pas correctement alligné avec le cadre "article"
 
j'ai definit un margin-left pour "matbe" et "news" mais il reste un tout ptit cran decalé vers la gauche  
je rajoute donc un ptit pixel en plus et là sa fout le cadre carrément en dessous (du genre il passe une ligne et il continue)
 
que faire svp

Reply

Marsh Posté le 09-11-2006 à 14:45:52    

:d

Reply

Marsh Posté le 09-11-2006 à 22:18:00    

:d

Reply

Marsh Posté le 10-11-2006 à 11:10:55    

Alors oui effectivement #clear si tu mets une ID ... mais tu peux mettre ".clear" et utiliser "class"  (<div class="clear"> ) . Vu que le "clear" est susceptible d'être utiliser plusieurs fois, c'est même mieux. (car autant que je sache un ID tu ne peux l'utiliser qu'une fois).
 
Concernant tes cadres décalés, c'est sûrement parce que la somme des pixels fixes que tu mets, dépasser la taille des pixels fixes de ton cadre global et/ou de ton écran.  
 
J'ai pas le courage de me replonger dans ton html/css mais regarde au niveau des margins, padding etc. si tu n'as pas des sommes de valeurs trop grandes.

Reply

Marsh Posté le 10-11-2006 à 11:10:55   

Reply

Marsh Posté le 10-11-2006 à 14:44:27    

ok merci , c'est corrigé  
 
j'ai donc ameliorer le design  
qu'en pensez vous  
index.html
http://www.hiboox.com/vignettes/4506/4afe9f22.jpg
 
apropos.html
http://www.hiboox.com/vignettes/4506/6f8534c8.jpg
 
 

Reply

Marsh Posté le 10-11-2006 à 18:04:48    

sinon , comment ajoutez sur le dessus de chaque bloc , une sorte de cadre (un motif gif que j'ai)

Message cité 1 fois
Reply

Marsh Posté le 11-11-2006 à 11:01:42    

:d

Reply

Marsh Posté le 11-11-2006 à 12:59:00    

up

Reply

Marsh Posté le 13-11-2006 à 09:36:41    

sebfun a écrit :

sinon , comment ajoutez sur le dessus de chaque bloc , une sorte de cadre (un motif gif que j'ai)


 
Eh bien tu fais, au sein de la div représentant ton bloc, deux sous-div :  
 
- la première contiendra ton image ou ce que tu veux
- la suivante contiendra ton texte.
 
Joue avec les float et les clear pour obtenir le design souhaité

Message cité 1 fois
Reply

Marsh Posté le 13-11-2006 à 11:08:34    

ZeBix a écrit :

Eh bien tu fais, au sein de la div représentant ton bloc, deux sous-div :  
 
- la première contiendra ton image ou ce que tu veux
- la suivante contiendra ton texte.
 
Joue avec les float et les clear pour obtenir le design souhaité


 
Moi j'aurais plutôt mis ça dans le background du div du menu, avec un padding-top correspondant à la hauteur du visuel.

Reply

Sujets relatifs:

Leave a Replay

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