Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
847 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°703283
juanetfann​y
Posté le 19-04-2004 à 22:43:22  profilanswer
 

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
mood
Publicité
Posté le 19-04-2004 à 22:43:22  profilanswer
 

n°703320
gm_superst​ar
Appelez-moi Super
Posté le 19-04-2004 à 23:31:15  profilanswer
 

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
n°704203
juanetfann​y
Posté le 20-04-2004 à 19:25:06  profilanswer
 

: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:  
 

n°704245
gm_superst​ar
Appelez-moi Super
Posté le 20-04-2004 à 20:41:28  profilanswer
 

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
n°704308
juanetfann​y
Posté le 20-04-2004 à 22:21:05  profilanswer
 

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
n°704341
gm_superst​ar
Appelez-moi Super
Posté le 20-04-2004 à 22:54:31  profilanswer
 

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
n°705460
juanetfann​y
Posté le 21-04-2004 à 21:48:41  profilanswer
 

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:  
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
[resolu] Pb lancement mysql (linux)[debutant] Probleme avec include iostream sous VC++
access2000 ajout dans un champ mémo (résolu)[CSS] Probleme d'affichage de taille de police sur IE5
(debutant ²)² bis[Résolu] pb déplacement de composants avec la souris
programme qui change une liste de ligne sur un fichier txt (débutant)[HTML-CSS] pbme imbrication de cadres
[résolu ] Conversion UTF-8 => OEM[résolu] PHP + XML en écriture : gestion accès multiples ?
Plus de sujets relatifs à : [RESOLU][CSS - DEBUTANT] Suis-je dans le vrai ???

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.065 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR