Probleme avec CSS et Layout ou webdesign

Probleme avec CSS et Layout ou webdesign - HTML/CSS - Programmation

Marsh Posté le 02-02-2005 à 20:04:59    

Salut a tous,
 
Je debute avec le HTML et le CSS, j ai trouvé ce code css dans le net et j ai essayé d adapter a mon gout et c bon. mais le PB que je rencontre que lorsque je diminue la fenetre du navigateur c est du desordre totale de mon design. la Photo qui se trouve au centre descend au fond de la page ainsi que le fond blanc.
 
Que dois je faire pour que ca marche bien, que egal la grosseur du navigateur que mon design soit reduit automatiquement ou s´adapte.
 
Merci bien pour vos sujections.
 
le code est le suivant.
 

Code :
  1. body {
  2. font-family:Verdana, Arial, Helvetica, sans-serif;
  3. font-size: 10px;
  4. color:black;
  5. margin: 20px;
  6. padding: 0;
  7. background-color: blue;
  8. }
  9. /*
  10. .head1 {
  11.         position: relative;
  12.         background-image: url('design/head1.gif');
  13.         width:  966px;
  14.         height: 90px;
  15.         padding-bottom: 0px;
  16.         background-align: center;
  17. }
  18. */
  19. .logo {
  20.         float: center; /* alignement du logo à droite */
  21.         margin-right: 10px;  /* placement du logo dans son conteneur, head1 */
  22.         margin-top: 3px;
  23.         border: 0;
  24. }
  25. /*
  26. .conteneur {
  27. position: relative;
  28. width: 750px;
  29. left: 50%;
  30. margin-left: -375px;
  31. background-color: blue;
  32. background: url('design/head.gif');
  33. padding-bottom: 0px;
  34. }
  35. */
  36. .gauche {
  37. float:left;
  38. min-width:  23%;
  39.         min-height: 100%;
  40. background-color: lightgreen;
  41. padding-bottom: 0px;
  42. }
  44. .droite {
  45. float:right;
  46. min-width:  23%;
  47.         min-height: 100%;
  48. background-color: lightgreen;
  49. padding-bottom: 0px;
  50. }
  52. .centre {
  53. background-color: white;
  54. min-width:  100%;
  55.         min-height: 100%;
  56. padding:5px;
  57. text-align : center;
  58. <!-- margin-left: 20%; -->
  61. }
  63. .pied {
  64. position: relative;
  65. width: 966px;
  66. /* left: 25%; */
  67. margin-left:  0px;
  68. margin-right: 0px;
  70. background-color: lightskyblue;
  71. text-align : center;
  72. padding-top:10px;
  73. color : White;
  74. height : 20px;
  75. }
  76. /*------------------------------------------------------------------------------*/
  77. .menu { /* on définit un conteneur pour le menu */
  78.      
  79.       margin-top: 30px;
  80.       width:  180px;
  81.       height: 815px;
  82.   /*  border: 12px groove #060C6F;
  83.       background-image: url('design/head2.gif');  */
  84.       font-family: verdana, arial;
  85.       font-size:180%;
  86.       text-align: center;
  87. }
  89. /* On en profite pour définir les balises de titres dans le CSS */
  90. h1 {
  91.       font-size: 290%;
  92.       text-align: center;
  93.       color: red;
  94. }
  96. h2 {
  97.     font-size: 200%;
  98.     text-align: center;
  99.     color: cyan;
  100. }
  102. ul,li {
  103. list-style-type: none; /* pour ne pas avoir de puces */
  104. margin: 0;
  105. padding:0;
  106. line-height: 30px; /* interligne */
  107. }
  108. /*------------------------------------------------------------------------------*/
  109. div.spacer {
  110.   clear: both;
  111.   height: 1px; /* donne compatibilité IE6 - Mozilla */
  112.   background-color: red;
  113. }
  114. div.spacer hr {
  115.   display: none;
  116. }



---------------
Merci bien !
Reply

Marsh Posté le 02-02-2005 à 20:04:59   

Reply

Marsh Posté le 02-02-2005 à 23:23:47    


est ce que quelqu´un pourrais me conseiller un bon lien pour Tutoriel qui parle de comment faire le Webdesign avec du CSS.
ce serait sympa !
Merci!


---------------
Merci bien !
Reply

Marsh Posté le 02-02-2005 à 23:26:00    

http://www.alsacreations.com/
http://glish.com/css/
http://www.alistapart.com/articles/practicalcss/
 
et souviens-toi que google est ton meilleur ami ! :o


Message édité par Mr Mala le 02-02-2005 à 23:27:20
Reply

Marsh Posté le 02-02-2005 à 23:39:37    

Merci bien quant a google j y penserais toujours.


---------------
Merci bien !
Reply

Marsh Posté le 03-02-2005 à 00:11:07    

Il y a aussi cet excellent site :
http://openweb.eu.org

Reply

Marsh Posté le 03-02-2005 à 10:12:33    

+1 pour openweb.eu.org....et ya pas que du css il est genial ce site !!

Reply

Sujets relatifs:

Leave a Replay

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