Problème de largueur

Problème de largueur - HTML/CSS - Programmation

Marsh Posté le 21-03-2010 à 07:43:36    

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; }
  5. body {
  7. font:normal 0.7em Verdana, "Trebuchet MS", Tahoma, Helvetica, Sans-serif;
  9. background:white url(./images/interface/bg.png) repeat-x;
  11. color:#535252;
  13. }
  17. #page {
  19. width:720px;
  21. margin:0 auto;
  23. }
  27. h1 {
  29. background:url(./images/interface/header.jpg) top left no-repeat;
  31. text-indent:-9000px;
  33. width:100%;
  35. height:100px;
  37. margin-top:23px;
  39. }
  43. h1 span {
  45. color:#1187CB;
  47. text-transform:uppercase;
  49. }
  53. img#logo { border:0;margin:35px 0 0 20px; }
  57. ul#menu {
  59. list-style-type:none;
  61. float:right;
  63. text-align:center;
  65. margin-top:-2px;
  67. }
  71. ul#menu li {
  73. display:inline;
  75. }
  79. ul#menu a {
  81. display:block;
  83. float:left;
  85. width:80px;
  87. height:25px;
  89. color:#535252;
  91. text-transform:uppercase;
  93. background:url(./images/interface/puce_menu.png) 100px no-repeat;
  95. text-decoration:none;
  97. }
  101. ul#menu a:hover {
  103. display:block;
  105. float:left;
  107. width:80px;
  109. height:25px;
  111. color:#535252;
  113. text-transform:uppercase;
  115. background:url(./images/interface/puce_menu.png) bottom no-repeat;
  117. text-decoration:none;
  119. }
  123. #contenu {
  125. width:654px;
  127. margin-top:-32px;
  129. }
  133. #menu_gauche {
  135. background:url(./images/interface/bg_menu.png) top left no-repeat;
  137. width:161px;
  139. float:right;
  141. }
  145. #menu_gauche h2 {
  147. color:#1187CB;
  149. text-transform:uppercase;
  151. font:normal 1.3em Verdana, Sans-serif;
  153. margin:10px 0 5px 10px;
  155. }
  159. #menu_gauche ul {
  161. list-style-type:none;
  163. margin-left:20px;
  165. width:125px;
  167. }
  171. #menu_gauche a {
  173. border-bottom:1px dotted #CCCACA;
  175. height:20px;
  177. display:block;
  179. padding:15px 0 0 10px;
  181. text-decoration:none;
  183. color:#535252;
  185. }
  189. #menu_gauche a:hover { text-decoration:underline; }
  195. #bloc {
  197. background:url(./images/interface/bg_contenu.png) top left no-repeat;
  199. width:459px;
  201. float:right;
  203. text-align:justify;
  205. }
  209. #bloc h2 {
  211. color:#1187CB;
  213. font:normal 1.6em Verdana, Sans-serif;
  215. background:url(./images/interface/puce_titre.png) left no-repeat;
  217. text-indent:15px;
  219. margin:5px 10px;
  221. }
  225. #bloc p {
  227. width:440px;
  229. margin:0 10px;
  231. }
  235. p.desc { color:#DCDADA;font:normal 0.8em Verdana, Sans-serif;padding:0 0 5px 10px; }
  237. p.desc a { color:#DCDADA;text-decoration:none; }
  239. p.desc a:hover { text-decoration:underline; }
  243. p.commentaires { padding:15px 0 3px 0;text-align:right;width:100%;border-bottom:1px dashed #807F7F; }
  245. p.commentaires a { color:#1187CB;text-decoration:none; }
  247. p.commentaires a:hover { color:#1187CB;text-decoration:underline; }
  249. 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">
  3. <html xmlns="http://www.w3.org/1999/xhtml"
  5. xml:lang="fr" lang="fr">
  7. <head>
  9.   <title>TPE Red Bull -
  11. Introduction</title>
  13.   <meta http-equiv="Content-Type"
  15. content="text/html; charset=UTF-8" />
  17.   <meta http-equiv="Content-Language"
  19. content="fr" />
  21.   <meta http-equiv="Content-Script-Type"
  23. content="text/javascript" />
  25.   <meta http-equiv="Content-Style-Type"
  27. content="text/css" />
  29.   <meta name="DC.Language"
  31. scheme="RFC3066" content="fr" />
  33.   <link rel="stylesheet"
  35. href="style.css" type="text/css" media="screen"
  37. title="Normal" />
  39. </head>
  41. <body>
  43. <div id="page">
  45. <a href="index.htm"><img
  47. src="./images/interface/titre.png" alt="Logo" id="logo" /></a>
  49. <ul style="font-family: monospace;"
  51. id="menu">
  53. </ul>
  55. <h1>VotreSite.Com</h1>
  57. <div id="contenu">
  59. <div id="bloc">
  61. <h2>Introduction</h2>
  63. <p>Un concept repris
  65. Red Bull est une boisson &eacute;nergisante largement
  67. r&eacute;pandue aujourd&rsquo;hui. Son concepteur, Dietrich
  69. Mateschitz, est un homme d'affaires autrichien qui se rendait souvent
  71. en Tha&iuml;lande dans le cadre de son travail. Pour limiter la
  73. g&ecirc;ne li&eacute;e au d&eacute;calage horaire, il a
  75. vite adopt&eacute; une boisson tonique locale &agrave; base de
  77. taurine et de caf&eacute;ine, le &laquo; Krating Daeng
  79. &raquo;, tr&egrave;s populaire dans le pays notamment parmi les
  81. professions qui exigent d'&ecirc;tre attentif pendant la nuit
  83. (comme les chauffeurs routiers).
  85. En 1984, Dietrich Mateschitz cr&eacute;e la
  87. soci&eacute;t&eacute; Red Bull GmbH dont le si&egrave;ge
  89. est situ&eacute; pr&egrave;s de Salzbourg, en Autriche, puis
  91. d&eacute;cide d&rsquo;exporter la boisson tha&iuml;e en
  93. Europe. Il en conserve la composition de base et se contente de la
  95. gaz&eacute;ifier et d&rsquo;all&eacute;ger sa teneur en
  97. sucre ; moins de sucre, plus de bulles : c'est ainsi qu'est
  99. n&eacute; le Red Bull. D&rsquo;ailleurs, le nom m&ecirc;me
  101. de &laquo; Red Bull &raquo; n&rsquo;est que
  103. l&rsquo;&eacute;quivalent anglais du tha&iuml; &laquo;
  105. Krating Daeng &raquo;, qui signifie &laquo; taureau rouge
  107. &raquo;.
  109. </p>
  111. <h2>Billet Second</h2>
  113. <p>Lorem ipsum dolor sit amet,
  115. consectetuer adipiscing elit. Nulla ac
  117. nibh. Aenean lorem augue, vehicula accumsan, dapibus vel, fringilla et,
  119. arcu. Morbi sit amet mi a mi ultrices porta. Duis ultrices. Quisque
  121. tempor feugiat nisl. Integer lobortis convallis dui. Class aptent
  123. taciti sociosqu ad litora torquent per conubia nostra, per inceptos
  125. hymenaeos. Donec feugiat eleifend libero. Vivamus a pede. Donec
  127. dapibus. Aliquam sagittis ipsum quis nunc. Phasellus vitae pede vitae
  129. erat tincidunt molestie. Phasellus eleifend. Nulla eu est vel nunc
  131. pharetra lacinia. Vivamus rutrum sollicitudin neque.</p>
  133. <p>Cras vitae dui interdum sapien
  135. auctor dapibus. Nullam libero. Proin
  137. enim libero, imperdiet a, sollicitudin id, rutrum id, quam. Cras vel mi
  139. vitae ipsum laoreet convallis. Vivamus ac erat ut eros sodales tempus.
  141. Quisque vulputate nibh non odio. Integer euismod scelerisque libero. Ut
  143. suscipit. Curabitur mattis laoreet quam. Donec nonummy magna a leo.
  145. Nulla facilisi. Quisque faucibus facilisis pede. Integer elit neque,
  147. viverra ut, faucibus vel, consequat non, lectus. Etiam bibendum
  149. elementum nunc. Aliquam sollicitudin. Donec odio. Proin at nulla.
  151. Praesent aliquam felis eget pede.</p>
  153. </div>
  155. <div id="menu_gauche">
  157. <h2>introduction</h2>
  159. <h2>les effets</h2>
  161. <ul>
  163.   <li><a
  165. href="">Des composants de base</a></li>
  167.   <li><a
  169. href="">Des composants essentiels</a></li>
  171.   <li><a
  173. href="">Des composants sp&eacute;cifiques</a></li>
  175. </ul>
  177. <br />
  179. <h2>avantages ?</h2>
  181. <ul>
  183.   <li><a
  185. href="">Lutte contre la fatigue</a></li>
  187.   <li><a
  189. href="">Pour les &eacute;tudiants</a></li>
  191.   <li><a
  193. href="">Pour les sportifs</a></li>
  195. </ul>
  197. <h2>risques</h2>
  199. <h2><a
  201. href="forum/index.php">forum</a></h2>
  203. <h2>contacts</h2>
  205. </div>
  207. </div>
  209. </div>
  211. </body>
  213. </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
Reply

Marsh Posté le 21-03-2010 à 07:43:36   

Reply

Marsh Posté le 21-03-2010 à 10:42:53    

il faut aussi changer la largeur du conteneur central


---------------
Blablaté par Harko
Reply

Marsh Posté le 21-03-2010 à 11:09:10    

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
Reply

Marsh Posté le 21-03-2010 à 11:13:24    

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
Reply

Marsh Posté le 21-03-2010 à 11:18:10    

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


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

Sujets relatifs:

Leave a Replay

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