[css]divers problemes d'affichage

divers problemes d'affichage [css] - HTML/CSS - Programmation

Marsh Posté le 07-03-2007 à 16:57:53    

Bonjour a tous  :hello:  
j'ai quelques problemes avec un de mes nouveaux sites : http://www.aminecherkaoui.com/
 
1er probleme :
j'aimerais que le centre prenne tout l'espace jusqu'au footer et que ca marche sur ie et firefox j'ai essayer plusieurs tentatives en mettant un height:100%;  sur la classe centre, mais ca depasse le footer :s
 
2eme probleme :
les hoover s'affichent correctement sur firefox mais pas sur ie.
 
3eme probleme :
j'aimerais mettre une image sur la partie droite, comment puis je faire ca?
 
les css et le code utilisés :

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">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Site Perso</title>
  6. <style type="text/css">
  7. * {padding: 0; margin: 0;}
  8. html, body {
  9. height: 100%;
  10. font: 0.9em "Trebuchet MS", helvetica, sans-serif ;
  11. background: #33333 ;
  12. }
  14. #header {
  15. width: 790px;
  16. margin: 0 0;
  17. height: 109px;
  18. background-color: #99CCCC;
  19. }
  20. /* Le centre que j'aimerais qu'il prenne toute la page sans depasser le footer */
  21. #centre {
  22. background-color:#9999CC;
  23. position: relative;
  24. width: 790px;
  25. }
  26. /* Mon Pied de page */
  27. #pied {
  28. height: 30px;
  29. width: 790px;
  30. position: absolute;
  31. bottom: 0;
  32. background-color: #99CC99;
  33. text-align: center;
  34. }
  35. /* les images de mon header ainsi que les hover */
  36. #header1 {
  37. background-image: url(images/theme_01.gif);
  38. height: 109px;
  39. width: 296px;
  40. float:left;
  41. padding-left:0 px;
  42. padding-right:0 px;
  43. border: 0px;
  44. }
  45. #header2 {
  46. background-image: url(images/theme_02.gif);
  47. height: 109px;
  48. width: 123px;
  49. float: left;
  50. }
  51. #header3 {
  52. background-image: url(images/theme_03.gif);
  53. height: 109px;
  54. width: 72px;
  55. float: left;
  56. }
  57. #header3:hover {
  58. background-image: url(images/theme_03_o.gif);
  59. height: 109px;
  60. width: 72px;
  61. float: left;
  62. }
  63. #header4 {
  64. background-image: url(images/theme_04.gif);
  65. height: 109px;
  66. width: 169px;
  67. float: left;
  68. }
  69. #header4:hover {
  70. background-image: url(images/theme_04_o.gif);
  71. height: 109px;
  72. width: 169px;
  73. float: left;
  74. }
  75. #header5 {
  76. background-image: url(images/theme_05.gif);
  77. height: 109px;
  78. width: 130px;
  79. float: left;
  80. }
  81. #header5:hover {
  82. background-image: url(images/theme_05_o.gif);
  83. height: 109px;
  84. width: 130px;
  85. float: left;
  86. }
  87. </style>
  88. </head>
  89. <body>
  90. <div id="header">
  91.  <div id="header1"></div>
  92.  <div id="header2"></div>
  93.  <div id="header3"></div>
  94.  <div id="header4"></div>
  95.  <div id="header5"></div>
  96. </div>
  97. <div id="centre">
  98. ca c le centre qui ve pas s'arreter ...
  99. </div>
  100. <div id="pied">
  101. le footer
  102. </div>
  103. </body>
  104. </html>


 
merci bien


---------------
Feed-Back
Reply

Marsh Posté le 07-03-2007 à 16:57:53   

Reply

Marsh Posté le 07-03-2007 à 17:52:02    

Sur IE 6 et avant le :hover marche que sur les a, donc fait en sorte d'avoir cette configuration HTML pour faire un effet hover.

 

Pour le centre :
C'est pas possible ce que tu veux avoir....
Si tu veux le bas tout en bas (absolut)... ben le centre aura que la taille du contenu.
Sinon tu enléve le absolut, tu auras le centre coller avec le bas...Mais le bas, sera à la hauteur de la fin du centre...

 

Sinon tu peux un peu tricher, tu englobles tout, est tu mets la couleur du fond de centre...

 

Pour l'image je sais pas ce que tu veux?

 
Code :
  1. <div id="header">
  2.  <div id="header1"></div>
  3.  <div id="header2"></div>
  4.  <div id="header3"></div>
  5.  <div id="header4"></div>
  6.  <div id="header5"></div>
  8. </div>
 

C'est nul, archi nul

 

un menu c'est :

 
Code :
  1. <ul>
  2.   <li>lien1</li>
  3.   <li>lien2</li>
  4.   <li>lien3</li>
  5. </ul>
 

Et après tu styles


Message édité par xtof_83 le 07-03-2007 à 17:54:05
Reply

Marsh Posté le 08-03-2007 à 01:12:49    

salut et merci pour tes nombreuses reponses, j'ai pas eu encore l'occasion de tester tout ce que tu ma di mais voila ou j'en suis:
je vien d'ajouter les "a" comme tu me la specifier, mais rien ne saffiche a present:
 
exemple sur la partie css :
#header5 a {
background-image: url(images/theme_05.gif);
height: 109px;
width: 130px;
float: left;
}
#header5 a:hover {
background-image: url(images/theme_05_o.gif);
height: 109px;
width: 130px;
float: left;
}
sur la partie affichage (html) je specifie :
<div id="header5"></div>
ou
<div id="header5 a"></div>
ca change rien rien ne saffiche?
 
je vien de faire une maj www.aminecherkaoui.com

Reply

Marsh Posté le 08-03-2007 à 12:45:44    

yop yop j'ai trouver une solution pour les hover :
en css:
a.header3 {
en html
<a class="header4" href="#"></a>
Merci :)

Reply

Marsh Posté le 08-03-2007 à 12:59:31    

Bon c'est pas encore ça, mais ça se précise...

Reply

Marsh Posté le 09-03-2007 à 18:09:47    

hello xtof,
j'ai apris quelques trucs et j'en ai profiter pour alléger le code et les choses qui ne sont plus necessaire.
je vien de mettre le site a jour, (un ctrl+f5 peut etre necessaire pour voir la nouvelle version)

Reply

Sujets relatifs:

Leave a Replay

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