[Resolu] Conseil pour le graphisme d'un site politique

Conseil pour le graphisme d'un site politique [Resolu] - Web design - Graphisme

Marsh Posté le 21-07-2008 à 16:30:32    

Bonjour à tous, on m'a proposé de créer un kit graphique pour un site web au couleur politique (Belgique, je n'en dirai pas plus  :ange: ).
 
Donc j'ai réalisé un premier kit que je monte via un CSS et je construit une page html tt simple... Jusque la tout va bien... mais jusque mtnt je n'avais jamais travaillé en 1024 et je suis perdu... mon header est coupé il manque presque 2 cm à l'écran et il manque 2 cm sur tout le coté droit de mon site... ça me pose un petit problème surtout que je ne maitrise pas encore les codes CSS pr un site extensible.
 
Donc j'aurais besoin d'une infos... soit je crée un site extensible mais pour mettre ma bannière en flash ds un futur proche j'aurai des ruses, ou bien vous m'indiquez sous quel taille je dois développer mon kit graphique ou comment modifier mon CSS en sachant que j'ai défini le "body pour 1024"
 
Voila le code CSS (allégé juste les cadre principaux)

Code :
  1. /*la page*/
  2. body
  3. {
  4.    width: 1024px;
  5.    margin: auto;
  6.    margin-top: 20px;
  7.    margin-bottom: 20px;   
  8.    background-image: url("images/background_theme1.png" );
  9. }
  11. /* L'en-tête */
  12. #en_tete
  13. {
  14.    width: 1024px;
  15.    height: 180px;
  16.    background-image: url("images/banniere.png" );
  17.    background-repeat: no-repeat;
  18.    margin-bottom: 10px;
  19. }
  21. /* Le menugauche*/
  22. #menugauche
  23. {
  24.    float: left;
  25.    width: 180px;
  26. }
  27. /*partie 1 = rechercher */
  28. .recherche
  29. {
  30. background-color: ;
  31. background-image: url("images/lateralg.jpg" );
  32. background-repeat: repeat;
  33. }
  34. .recherche form
  35. {
  36.    padding: 0px;
  37.    padding-left: 5px;
  38.    margin: 5px;
  39.    margin-bottom: 5px;
  40. }
  42. /*partie 2 = Menu 1&2 */
  43. .menugauche
  44. {
  45.    background-color: ;
  46.    background-image: url("images/lateralg.jpg" );
  47.    background-repeat: repeat;
  48.  
  49.    /*border: 2px solid black;  (utile pr la construction) */
  50.  
  51.    margin-bottom: 20px;
  52. }
  54. /* Quelques effets sur les menus */
  57. .menugauche h3
  58. {   
  59.    color: #B3B3B3;
  60.    font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
  61.    text-align: center;
  62. }
  64. .menugauche ul
  65. {
  66.    list-style-image: url("images/leftpuce2.png" ); /* On change l'apparence des puces */
  67.    padding: 0px;
  68.    padding-left: 20px;
  69.    margin: 10px;
  70.    margin-bottom: 5px;
  71. }
  73. .menugauche a
  74. {
  75.    color: #FFFAFA; /*snow*/
  76. }
  78. .menugauche a:hover
  79. {
  80.    background-color: #800000; /*Maroon*/
  81.    color: #FF4500; /*OrangeRed*/
  82. }
  84. /* Le menudroit*/
  85. #menudroit
  86. {
  87.    float: right;
  88.    width: 180px;
  89. }
  91. .menudroit
  92. {
  93.    background-color: ;
  94.    background-image: url("images/lateralg.jpg" );
  95.    background-repeat: repeat;
  96.  
  97.    /*border: 2px solid black;  (utile pr la construction) */
  98.  
  99.    margin-bottom: 20px;
  100. }
  102. /* Quelques effets sur les menus */
  105. .menudroit h3
  106. {   
  107.    color: #B3B3B3;
  108.    font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
  109.    text-align: center;
  110. }
  112. .menudroit ul
  113. {
  114.    list-style-image: url("images/leftpuce2.png" );
  115.    padding: 0px;
  116.    padding-left: 20px;
  117.    margin: 10px;
  118.    margin-bottom: 5px;
  119. }
  121. .menudroit a
  122. {
  123.    color: #FFFAFA; /*snow*/
  124. }
  126. .menudroit a:hover
  127. {
  128.    background-color: #800000; /*Maroon*/
  129.    color: #FF4500; /*OrangeRed*/
  130. }
  132. /* Le corps de la page */
  134. #corps
  135. {
  136.    margin-left: 190px;
  137.    margin-right: 190px;
  138.    margin-bottom: 20px;
  139.    padding: 5px;
  140.  
  141.    color: #B3B3B3;
  142.    background-color: #626262;
  143.    background-image: url("images/motif.png" );
  144.    background-repeat: repeat-x;
  145.  
  146.    border: 2px solid black;
  147. }
  149. #corps h1
  150. {
  151.    color: #B3B3B3;
  152.    text-align: center;
  153.    font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
  154. }
  156. #corps h2
  157. {
  158.    height: 30px;
  160.    background-image: url("images/titre.png" );
  161.    background-repeat: no-repeat;
  162.  
  163.    padding-left: 30px;
  164.    color: #B3B3B3;
  165.    text-align: left;
  166. }
  168. /* Le pied de page */
  170. #pied_de_page
  171. {
  172.    padding: 5px;
  174.    text-align: center;
  176.    color: #B3B3B3;
  177.    background-color: #626262;
  178.    background-image: url("images/motif.png" );
  179.    background-repeat: repeat-x;
  180.  
  181.    border: 2px solid black;
  182. }


 
Si en lisant mon CSS vous avez une idée de simplification je suis preneur bien sur...
 
Merci


Message édité par Sephirius2 le 24-07-2008 à 16:47:59
Reply

Marsh Posté le 21-07-2008 à 16:30:32   

Reply

Marsh Posté le 21-07-2008 à 23:52:30    

En une phrase , c'est quoi ton probleme au juste ?


---------------
Studio CréeAll
Reply

Marsh Posté le 22-07-2008 à 00:07:54    

C'est clair qu'avec juste le CSS complètement déconnecté du xHTML, je vois pas trop ce qu'on peut en dire... :P


---------------
Blog Musical Spleen-esque - Galerie d'Inspiration Webdesign - Jeux Gratuits en Flash
Reply

Marsh Posté le 22-07-2008 à 14:03:04    

moi je verrais bien un fond noir et du texte noir :D


---------------
Genghis achat/vente
Reply

Marsh Posté le 22-07-2008 à 14:54:42    

avec un slogan blanc "il y a trop de noir"...
:D
Perso tant que je sais même pas pour quel genre de parti politique c'est.. voila quoi :lol:

Message cité 1 fois

---------------
| .:: www.wizopunk-art.com - Développement web ::. |
Reply

Marsh Posté le 22-07-2008 à 15:10:11    

wizopunker a écrit :

avec un slogan blanc "il y a trop de noir"...
:D


Waciste !!
     /
 [:pape diouf]


---------------
www.crayon29.com (incompatible IE) -- Liverpowen a écrit: Moi quand je suis bourré, je suis gay  :o
Reply

Marsh Posté le 24-07-2008 à 14:48:53    

Pas bete le coup du html... mais j'ai résolu mon problème.
Encore merci d'avoir perdu un peu de votre temps

Reply

Sujets relatifs:

Leave a Replay

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