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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème de largueur

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Problème de largueur

n°1975609
sggk
Posté le 21-03-2010 à 07:43:36  profilanswer
 

Bonjour,
 
j'aimerais changer la largeur de mon bloc 'central' qui contient le contenu du texte et je pensais que c'était l'attribut width qui devait être changé (du div #bloc) mais quand je le modifie il change de position mais pas de largeur.
Je vous poste la feuille css:

Code :
  1. * { margin:0;padding:0; }
  2. body {
  3. font:normal 0.7em Verdana, "Trebuchet MS", Tahoma, Helvetica, Sans-serif;
  4. background:white url(./images/interface/bg.png) repeat-x;
  5. color:#535252;
  6. }
  7. #page {
  8. width:720px;
  9. margin:0 auto;
  10. }
  11. h1 {
  12. background:url(./images/interface/header.jpg) top left no-repeat;
  13. text-indent:-9000px;
  14. width:100%;
  15. height:100px;
  16. margin-top:23px;
  17. }
  18. h1 span {
  19. color:#1187CB;
  20. text-transform:uppercase;
  21. }
  22. img#logo { border:0;margin:35px 0 0 20px; }
  23. ul#menu {
  24. list-style-type:none;
  25. float:right;
  26. text-align:center;
  27. margin-top:-2px;
  28. }
  29. ul#menu li {
  30. display:inline;
  31. }
  32. ul#menu a {
  33. display:block;
  34. float:left;
  35. width:80px;
  36. height:25px;
  37. color:#535252;
  38. text-transform:uppercase;
  39. background:url(./images/interface/puce_menu.png) 100px no-repeat;
  40. text-decoration:none;
  41. }
  42. ul#menu a:hover {
  43. display:block;
  44. float:left;
  45. width:80px;
  46. height:25px;
  47. color:#535252;
  48. text-transform:uppercase;
  49. background:url(./images/interface/puce_menu.png) bottom no-repeat;
  50. text-decoration:none;
  51. }
  52. #contenu {
  53. width:654px;
  54. margin-top:-32px;
  55. }
  56. #menu_gauche {
  57. background:url(./images/interface/bg_menu.png) top left no-repeat;
  58. width:161px;
  59. float:right;
  60. }
  61. #menu_gauche h2 {
  62. color:#1187CB;
  63. text-transform:uppercase;
  64. font:normal 1.3em Verdana, Sans-serif;
  65. margin:10px 0 5px 10px;
  66. }
  67. #menu_gauche ul {
  68. list-style-type:none;
  69. margin-left:20px;
  70. width:125px;
  71. }
  72. #menu_gauche a {
  73. border-bottom:1px dotted #CCCACA;
  74. height:20px;
  75. display:block;
  76. padding:15px 0 0 10px;
  77. text-decoration:none;
  78. color:#535252;
  79. }
  80. #menu_gauche a:hover { text-decoration:underline; }
  81. #bloc {
  82. background:url(./images/interface/bg_contenu.png) top left no-repeat;
  83. width:459px;
  84. float:right;
  85. text-align:justify;
  86. }
  87. #bloc h2 {
  88. color:#1187CB;
  89. font:normal 1.6em Verdana, Sans-serif;
  90. background:url(./images/interface/puce_titre.png) left no-repeat;
  91. text-indent:15px;
  92. margin:5px 10px;
  93. }
  94. #bloc p {
  95. width:440px;
  96. margin:0 10px;
  97. }
  98. p.desc { color:#DCDADA;font:normal 0.8em Verdana, Sans-serif;padding:0 0 5px 10px; }
  99. p.desc a { color:#DCDADA;text-decoration:none; }
  100. p.desc a:hover { text-decoration:underline; }
  101. p.commentaires { padding:15px 0 3px 0;text-align:right;width:100%;border-bottom:1px dashed #807F7F; }
  102. p.commentaires a { color:#1187CB;text-decoration:none; }
  103. p.commentaires a:hover { color:#1187CB;text-decoration:underline; }
  104. p.commentaires em { font-style:normal;font-weight:bold; }


 
ET le code HTML :
 

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"
  3. xml:lang="fr" lang="fr">
  4. <head>
  5.   <title>TPE Red Bull -
  6. Introduction</title>
  7.   <meta http-equiv="Content-Type"
  8. content="text/html; charset=UTF-8" />
  9.   <meta http-equiv="Content-Language"
  10. content="fr" />
  11.   <meta http-equiv="Content-Script-Type"
  12. content="text/javascript" />
  13.   <meta http-equiv="Content-Style-Type"
  14. content="text/css" />
  15.   <meta name="DC.Language"
  16. scheme="RFC3066" content="fr" />
  17.   <link rel="stylesheet"
  18. href="style.css" type="text/css" media="screen"
  19. title="Normal" />
  20. </head>
  21. <body>
  22. <div id="page">
  23. <a href="index.htm"><img
  24. src="./images/interface/titre.png" alt="Logo" id="logo" /></a>
  25. <ul style="font-family: monospace;"
  26. id="menu">
  27. </ul>
  28. <h1>VotreSite.Com</h1>
  29. <div id="contenu">
  30. <div id="bloc">
  31. <h2>Introduction</h2>
  32. <p>Un concept repris
  33. Red Bull est une boisson &eacute;nergisante largement
  34. r&eacute;pandue aujourd&rsquo;hui. Son concepteur, Dietrich
  35. Mateschitz, est un homme d'affaires autrichien qui se rendait souvent
  36. en Tha&iuml;lande dans le cadre de son travail. Pour limiter la
  37. g&ecirc;ne li&eacute;e au d&eacute;calage horaire, il a
  38. vite adopt&eacute; une boisson tonique locale &agrave; base de
  39. taurine et de caf&eacute;ine, le &laquo; Krating Daeng
  40. &raquo;, tr&egrave;s populaire dans le pays notamment parmi les
  41. professions qui exigent d'&ecirc;tre attentif pendant la nuit
  42. (comme les chauffeurs routiers).
  43. En 1984, Dietrich Mateschitz cr&eacute;e la
  44. soci&eacute;t&eacute; Red Bull GmbH dont le si&egrave;ge
  45. est situ&eacute; pr&egrave;s de Salzbourg, en Autriche, puis
  46. d&eacute;cide d&rsquo;exporter la boisson tha&iuml;e en
  47. Europe. Il en conserve la composition de base et se contente de la
  48. gaz&eacute;ifier et d&rsquo;all&eacute;ger sa teneur en
  49. sucre ; moins de sucre, plus de bulles : c'est ainsi qu'est
  50. n&eacute; le Red Bull. D&rsquo;ailleurs, le nom m&ecirc;me
  51. de &laquo; Red Bull &raquo; n&rsquo;est que
  52. l&rsquo;&eacute;quivalent anglais du tha&iuml; &laquo;
  53. Krating Daeng &raquo;, qui signifie &laquo; taureau rouge
  54. &raquo;.
  55. </p>
  56. <h2>Billet Second</h2>
  57. <p>Lorem ipsum dolor sit amet,
  58. consectetuer adipiscing elit. Nulla ac
  59. nibh. Aenean lorem augue, vehicula accumsan, dapibus vel, fringilla et,
  60. arcu. Morbi sit amet mi a mi ultrices porta. Duis ultrices. Quisque
  61. tempor feugiat nisl. Integer lobortis convallis dui. Class aptent
  62. taciti sociosqu ad litora torquent per conubia nostra, per inceptos
  63. hymenaeos. Donec feugiat eleifend libero. Vivamus a pede. Donec
  64. dapibus. Aliquam sagittis ipsum quis nunc. Phasellus vitae pede vitae
  65. erat tincidunt molestie. Phasellus eleifend. Nulla eu est vel nunc
  66. pharetra lacinia. Vivamus rutrum sollicitudin neque.</p>
  67. <p>Cras vitae dui interdum sapien
  68. auctor dapibus. Nullam libero. Proin
  69. enim libero, imperdiet a, sollicitudin id, rutrum id, quam. Cras vel mi
  70. vitae ipsum laoreet convallis. Vivamus ac erat ut eros sodales tempus.
  71. Quisque vulputate nibh non odio. Integer euismod scelerisque libero. Ut
  72. suscipit. Curabitur mattis laoreet quam. Donec nonummy magna a leo.
  73. Nulla facilisi. Quisque faucibus facilisis pede. Integer elit neque,
  74. viverra ut, faucibus vel, consequat non, lectus. Etiam bibendum
  75. elementum nunc. Aliquam sollicitudin. Donec odio. Proin at nulla.
  76. Praesent aliquam felis eget pede.</p>
  77. </div>
  78. <div id="menu_gauche">
  79. <h2>introduction</h2>
  80. <h2>les effets</h2>
  81. <ul>
  82.   <li><a
  83. href="">Des composants de base</a></li>
  84.   <li><a
  85. href="">Des composants essentiels</a></li>
  86.   <li><a
  87. href="">Des composants sp&eacute;cifiques</a></li>
  88. </ul>
  89. <br />
  90. <h2>avantages ?</h2>
  91. <ul>
  92.   <li><a
  93. href="">Lutte contre la fatigue</a></li>
  94.   <li><a
  95. href="">Pour les &eacute;tudiants</a></li>
  96.   <li><a
  97. href="">Pour les sportifs</a></li>
  98. </ul>
  99. <h2>risques</h2>
  100. <h2><a
  101. href="forum/index.php">forum</a></h2>
  102. <h2>contacts</h2>
  103. </div>
  104. </div>
  105. </div>
  106. </body>
  107. </html>


 
Merci d'avance de votre aide.


Message édité par sggk le 21-03-2010 à 07:44:26

---------------
Dieu existe, et tu le sais : https://www.youtube.com/watch?v=tpW-3FJ1dQg
mood
Publicité
Posté le 21-03-2010 à 07:43:36  profilanswer
 

n°1975623
gatsu35
Blablaté par Harko
Posté le 21-03-2010 à 10:42:53  profilanswer
 

il faut aussi changer la largeur du conteneur central


---------------
Blablaté par Harko
n°1975628
sggk
Posté le 21-03-2010 à 11:09:10  profilanswer
 

Oui, mais comment faire ? Quelle balise exactement dois-je modifier?  Car j'ai bien changé le width de toutes les balises concernées, mais ça ne fait que changer la position et non la largeur.


---------------
Dieu existe, et tu le sais : https://www.youtube.com/watch?v=tpW-3FJ1dQg
n°1975630
toum_toum
Vivons masqués
Posté le 21-03-2010 à 11:13:24  profilanswer
 

Oui.
 
Il faut penser qu'il existe :
 
#page {
width:720px;
 
#contenu {
width:654px;
 
#menu_gauche {
width:161px;
 
#bloc {
width:459px;
 
 
Donc jouer avec tout ça. Si ça se "décale" c'est que des contenus cumulés sont plus larges que le contenant.
 
Revoir aussi peut-être les "float" ?


Message édité par toum_toum le 21-03-2010 à 11:28:53

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
n°1975632
toum_toum
Vivons masqués
Posté le 21-03-2010 à 11:18:10  profilanswer
 

PS : c'est quoi le
 
#bloc p {
width:440px;
 
?


---------------
“Et maintenant, la météo" - Soloviev 2022-2024

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

  Problème de largueur

 

Sujets relatifs
Probléme menu dans un iframeProbléme daccé a une BDD sous HSQL
[Résolu][SQL/ACCESS] Problème COUNT / GROUP BYprobleme avec marquee et w3c
Mac et windows probleme code.Problème select max mysql
problème avec insertionprobléme formulaire
probleme table 
Plus de sujets relatifs à : Problème de largueur


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