[RESOLU][CSS - DEBUTANT] Suis-je dans le vrai ???

Suis-je dans le vrai ??? [RESOLU][CSS - DEBUTANT] - HTML/CSS - Programmation

Marsh Posté le 19-04-2004 à 22:43:22    

Bonjour à tous !
 
Voilà, je me mets à la mise en page via CSS et voilà le résultat auquel je souhaite arriver :
 
http://wahloo.free.fr/mapage.gif
 
Voici ma CSS qui correspond (je l'ai épurée largement) :
 

Code :
  1. body {
  2.       margin-top:35px;
  3.       margin-bottom:15px;
  4.       margin-right:0px;
  5.       margin-left:0px;
  6.       padding:0;
  7.       height: 100%;
  8.       background-color: #ececec;}
  10. .corps {
  11.          width: 700px;
  12.  border-style: dotted;}
  14. .entete1 {
  15.  background-color: #edc099;
  16.  width: 700px;
  17.  height: 15px;}
  19. .logo1 {
  20.        background-color: #ffffff;
  21.        width: 200px;
  22.        height: 120px;
  23.        margin-left: 10px;
  24.        float: left;}
  26. .liens_entete {
  27. width: 200px;
  28. height: 105px;
  29. margin-top: 15px;
  30. margin-right: 10px;
  31. float: right;}
  33. /* Pour la réalisation du menu de gauche */
  35. ul {
  36.    margin-top: 200px;
  37.    margin-left: 40px;
  38.    text-align: left;}
  40. .menu a {
  41.      width: 150px; /* on définit la taille du bouton de menu */
  42.      height: 10px;
  43.      display: block;}
  45. .central {
  46. position: absolute;
  47. margin-left: 0px;
  48. margin-top: 130px;
  49. background: yellow;
  50. }


 
Donc, 2 questions :
 
1) Est-ce que en fonction du schéma que j'ai donné en image, ma démarche est la bonne ou bien dois-je procéder autrement ?
 
2)Et surtout, c'est le cadre central que je n'arrive pas à placer correctement. Il devrait être tel que sur le schéma mais là il est n'importe ou sauf au bon endroit :-(
 
Merci de votre aide  :jap:  :jap:  
 :hello:


Message édité par juanetfanny le 22-04-2004 à 14:47:43
Reply

Marsh Posté le 19-04-2004 à 22:43:22   

Reply

Marsh Posté le 19-04-2004 à 23:31:15    

Juanetfanny a écrit :

1) Est-ce que en fonction du schéma que j'ai donné en image, ma démarche est la bonne ou bien dois-je procéder autrement ?


C'est pas mal, sauf que le "float: right" pour .liens_entete est inutile (lui donner une marge d'au moins la largeur du logo reviendra au même tout en le laissant dans le flux normal).
"width: 700px" pour .entete1 est aussi inutile vu que par défaut un DIV prend toute la largeur disponible soit les 700px du corps.
 
A la limite je mettrais le logo et les liens d'en-tête dans un DIV (idem pour le menu et le bloc central)

Juanetfanny a écrit :


2)Et surtout, c'est le cadre central que je n'arrive pas à placer correctement. Il devrait être tel que sur le schéma mais là il est n'importe ou sauf au bon endroit :-(


Normal ses divers conteneurs ne sont pas positionnés.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 20-04-2004 à 19:25:06    

:jap: beaucoup pour ton avis, je vais épurer ma CSS en conséquence  ;)  
 
Donc, selon toi, le mieux serait d'intégrer le .logo et le .lien_entete dans un div et le .menu de gauche et le .central dans un autre, c'est ca ?
 
Je vais essayer cette solution qui me parait pas bête du tout  :)  
 
Merci encore de ton aide en tout cas,
 
 :hello:  
 

Reply

Marsh Posté le 20-04-2004 à 20:41:28    

Juanetfanny a écrit :


Donc, selon toi, le mieux serait d'intégrer le .logo et le .lien_entete dans un div et le .menu de gauche et le .central dans un autre, c'est ca ?


Voilà. Autant profiter du fait que les blocs s'empilent les uns sur les autres par défaut...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 20-04-2004 à 22:21:05    

gm_superstar a écrit :

C'est pas mal, sauf que le "float: right" pour .liens_entete est inutile (lui donner une marge d'au moins la largeur du logo reviendra au même tout en le laissant dans le flux normal).
"width: 700px" pour .entete1 est aussi inutile vu que par défaut un DIV prend toute la largeur disponible soit les 700px du corps.


 
Effectivement, je pensais comme toi mais quand j'ai enlevé le width: 700px, l'entete à pris toute la largeur de la page, sans tenir compte des marges  :??:  
 
Le mieux, c'est que je te donnes le source de ma page, y a probablement un truc que j'ai pas fait comme il faudrait  :pt1cable:  
 

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" lang="fr">
  3. <head>
  4.       <title>Ma page</title>
  5.       <link rel="stylesheet" type="text/css" href="i.css" />
  6.       <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  7. </head>
  8. <body>
  9. <div class="entete1"></div>
  10. <div class="corps">
  11.      <div class="logo1">
  12.         <img src="logo.jpg" alt="logo" />
  13.      </div>
  14.      <div class="liens_entete">
  15.         <a href="page1.php" />Page 1&nbsp;&nbsp;
  16.         <a href="page2.php" />Page 2&nbsp;&nbsp;
  17.         <a href="page3.php" />Page 3</a>
  18.      </div>
  19.               <ul class="menu">
  20.            <li><a href="">Menu</a></li>
  21.           <li><a href="">Menu</a></li>
  22.            <li><a href="">Menu</a></li>
  23.    <li><a href="">Menu</a></li>
  24.     <li><a href="">Menu</a></li>
  25.              </ul>
  27.   <div class="central"><img src="rubrique1.gif" border="0"></div>
  28. </div>
  29. </body>
  30. </html>


 
Vilà !
 
Mais le mieux serait peut être que je recode ça correctement d'après ton premier post, non ?
 
 
 :hello:  


Message édité par juanetfanny le 20-04-2004 à 22:22:05
Reply

Marsh Posté le 20-04-2004 à 22:54:31    

Ah mais je pensais que .entete1 était dans le corps ! S'il est en dehors alors il faut laisser la largeur effectivement.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 21-04-2004 à 21:48:41    

Bon, j'ai refait un essai en restructurant un peu. Le problème, c'est que j'ai un décalage : le bloc orange (qui s'appelle .milieu) devrait être collé horizontalement avec le bloc juste au dessus mais non, il y un espace d'environ 15pixels  :??:  
 
Voilà ma CSS :
 

Code :
  1. body {
  2.       margin-top:35px;
  3.       margin-bottom:15px;
  4.       margin-right:0px;
  5.       margin-left:0px;
  6.       padding:0;
  7.       height: 100%;
  8.    }
  11. .entete {
  12.  width: 700px;
  13.  height: 15px;
  14. }
  16. .corps {
  17.          width: 700px;
  18. }
  20. .contenu_haut {
  21. background-color: yellow;
  22. }
  25. .logo {
  26.        width: 200px;
  27.        height: 120px;
  28.        margin-left: 10px;
  29.        float: left;
  30.        }
  32. .liens_entete {
  33. width: 200px;
  34. height: 105px;
  35. margin-top: 15px;
  36. margin-right: 10px;
  37. margin-left: 450px;
  38. }
  41. /* Pour la réalisation du menu de gauche */
  43. ul {text-align: left;}
  45. .menu a {
  46.      width: 150px; /* on définit la taille du bouton de menu */
  47.      height: 10px;
  48.      display: block;
  49.      vertical-align: top;
  50.       }
  52. .milieu {background-color: orange;}
  54. .menu a:hover {
  55.      background: #edc099;
  56.      }
  58. .menu a:active {
  59.      background: #6e2c04;
  60.      color: #fff;
  61.      }
  63. .central {
  64. margin-left: 0px;
  65. margin-top: 0px;
  66. background: #ffffff;
  67. }


 
 
Et le code :
 

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" lang="fr">
  3. <head>
  4.       <title</title>
  5.       <link rel="stylesheet" type="text/css" href="i.css" />
  6.        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  7. </head>
  8. <body>
  9. <div class="entete"></div>
  10. <div class="corps">
  11.      <div class="contenu_haut">
  12.         <div class="logo">
  13.            <img src="logo.jpg" />
  14.           </div>
  15.           <div class="liens_entete">
  16.        <a href="1.php" />1&nbsp;&nbsp;
  17.              <a href="2.php" /> 2&nbsp;&nbsp;
  18.              <a href="3.php"> 3</a>
  19.           </div>
  20.      </div>
  21.      <div class="milieu">
  22.          <ul class="menu">
  23.            <li><a href="">Menu</a></li>
  24.           <li><a href="">Menu</a></li>
  25.            <li><a href="">Menu</a></li>
  26.    <li><a href="">Menu</a></li>
  27.     <li><a href="">Menu</a></li>
  28.           </ul>
  29.   <div class="central"><img src="img.gif" border="0"></div>
  30.      </div>
  31. </div>
  32. </body>
  33. </html>


 
C'est quoi donc qui cloche, s'y ou plait ???
 
Merci bien de votre aide  :jap:  
 
 :hello:  
 

Reply

Sujets relatifs:

Leave a Replay

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