28172 sujets

CSS et mise en forme, CSS3

Modifier la largeur d'un bloc

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:



* { margin:0;padding:0; }

body {
	font:normal 0.7em Verdana, "Trebuchet MS", Tahoma, Helvetica, Sans-serif;
	background:white url(./images/interface/bg.png) repeat-x;
	color:#535252;
}

#page {
	width:720px;
	margin:0 auto;
}

h1 {
	background:url(./images/interface/header.jpg) top left no-repeat;
	text-indent:-9000px;
	width:100%;
	height:100px;
	margin-top:23px;
}

h1 span {
	color:#1187CB;
	text-transform:uppercase;
}

img#logo { border:0;margin:35px 0 0 20px; }

ul#menu {
	list-style-type:none;
	float:right;
	text-align:center;
	margin-top:-2px;
}

ul#menu li {
	display:inline;
}

ul#menu a {
	display:block;
	float:left;
	width:80px;
	height:25px;
	color:#535252;
	text-transform:uppercase;
	background:url(./images/interface/puce_menu.png) 100px no-repeat;
	text-decoration:none;
}

ul#menu a:hover {
	display:block;
	float:left;
	width:80px;
	height:25px;
	color:#535252;
	text-transform:uppercase;
	background:url(./images/interface/puce_menu.png) bottom no-repeat;
	text-decoration:none;
}

#contenu {
	width:654px;
	margin-top:-32px;
}

#menu_gauche {
	background:url(./images/interface/bg_menu.png) top left no-repeat;
	width:161px;
	float:right;
}

#menu_gauche h2 {
	color:#1187CB;
	text-transform:uppercase;
	font:normal 1.3em Verdana, Sans-serif;
	margin:10px 0 5px 10px;
}

#menu_gauche ul {
	list-style-type:none;
	margin-left:20px;
	width:125px;
}

#menu_gauche a {
	border-bottom:1px dotted #CCCACA;
	height:20px;
	display:block;
	padding:15px 0 0 10px;
	text-decoration:none;
	color:#535252;
}

#menu_gauche a:hover { text-decoration:underline; }


#bloc {
	background:url(./images/interface/bg_contenu.png) top left no-repeat;
	width:459px;
	float:right;
	text-align:justify;
}

#bloc h2 {
	color:#1187CB;
	font:normal 1.6em Verdana, Sans-serif;
	background:url(./images/interface/puce_titre.png) left no-repeat;
	text-indent:15px;
	margin:5px 10px;
}

#bloc p {
	width:440px;
	margin:0 10px;
}

p.desc { color:#DCDADA;font:normal 0.8em Verdana, Sans-serif;padding:0 0 5px 10px; }
p.desc a { color:#DCDADA;text-decoration:none; }
p.desc a:hover { text-decoration:underline; }

p.commentaires { padding:15px 0 3px 0;text-align:right;width:100%;border-bottom:1px dashed #807F7F; }
p.commentaires a { color:#1187CB;text-decoration:none; }
p.commentaires a:hover { color:#1187CB;text-decoration:underline; }
p.commentaires em { font-style:normal;font-weight:bold; }
Voilà le code HTML correspondant : (je ne peux malheuresement pas le mettre en ligne pour le moment)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xml:lang="fr" lang="fr">
<head>
  <title>TPE Red Bull -
Introduction</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=UTF-8" />
  <meta http-equiv="Content-Language"
 content="fr" />
  <meta http-equiv="Content-Script-Type"
 content="text/javascript" />
  <meta http-equiv="Content-Style-Type"
 content="text/css" />
  <meta name="DC.Language"
 scheme="RFC3066" content="fr" />
  <link rel="stylesheet"
 href="style.css" type="text/css" media="screen"
 title="Normal" />
</head>
<body>
<div id="page">
<a href="index.htm"><img
 src="./images/interface/titre.png" alt="Logo" id="logo" /></a>
<ul style="font-family: monospace;"
 id="menu">
</ul>
<h1>VotreSite.Com</h1>
<div id="contenu">
<div id="bloc">
<h2>Introduction</h2>
<p>Un concept repris
Red Bull est une boisson &eacute;nergisante largement
r&eacute;pandue aujourd&rsquo;hui. Son concepteur, Dietrich
Mateschitz, est un homme d'affaires autrichien qui se rendait souvent
en Tha&iuml;lande dans le cadre de son travail. Pour limiter la
g&ecirc;ne li&eacute;e au d&eacute;calage horaire, il a
vite adopt&eacute; une boisson tonique locale &agrave; base de
taurine et de caf&eacute;ine, le &laquo; Krating Daeng
&raquo;, tr&egrave;s populaire dans le pays notamment parmi les
professions qui exigent d'&ecirc;tre attentif pendant la nuit
(comme les chauffeurs routiers).
En 1984, Dietrich Mateschitz cr&eacute;e la
soci&eacute;t&eacute; Red Bull GmbH dont le si&egrave;ge
est situ&eacute; pr&egrave;s de Salzbourg, en Autriche, puis
d&eacute;cide d&rsquo;exporter la boisson tha&iuml;e en
Europe. Il en conserve la composition de base et se contente de la
gaz&eacute;ifier et d&rsquo;all&eacute;ger sa teneur en
sucre ; moins de sucre, plus de bulles : c'est ainsi qu'est
n&eacute; le Red Bull. D&rsquo;ailleurs, le nom m&ecirc;me
de &laquo; Red Bull &raquo; n&rsquo;est que
l&rsquo;&eacute;quivalent anglais du tha&iuml; &laquo;
Krating Daeng &raquo;, qui signifie &laquo; taureau rouge
&raquo;.
</p>
<h2>Billet Second</h2>
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Nulla ac
nibh. Aenean lorem augue, vehicula accumsan, dapibus vel, fringilla et,
arcu. Morbi sit amet mi a mi ultrices porta. Duis ultrices. Quisque
tempor feugiat nisl. Integer lobortis convallis dui. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos. Donec feugiat eleifend libero. Vivamus a pede. Donec
dapibus. Aliquam sagittis ipsum quis nunc. Phasellus vitae pede vitae
erat tincidunt molestie. Phasellus eleifend. Nulla eu est vel nunc
pharetra lacinia. Vivamus rutrum sollicitudin neque.</p>
<p>Cras vitae dui interdum sapien
auctor dapibus. Nullam libero. Proin
enim libero, imperdiet a, sollicitudin id, rutrum id, quam. Cras vel mi
vitae ipsum laoreet convallis. Vivamus ac erat ut eros sodales tempus.
Quisque vulputate nibh non odio. Integer euismod scelerisque libero. Ut
suscipit. Curabitur mattis laoreet quam. Donec nonummy magna a leo.
Nulla facilisi. Quisque faucibus facilisis pede. Integer elit neque,
viverra ut, faucibus vel, consequat non, lectus. Etiam bibendum
elementum nunc. Aliquam sollicitudin. Donec odio. Proin at nulla.
Praesent aliquam felis eget pede.</p>
</div>
<div id="menu_gauche">
<h2>introduction</h2>
<h2>les effets</h2>
<ul>
  <li><a
 href="">Des composants de base</a></li>
  <li><a
 href="">Des composants essentiels</a></li>
  <li><a
 href="">Des composants sp&eacute;cifiques</a></li>
</ul>
<br />
<h2>avantages ?</h2>
<ul>
  <li><a
 href="">Lutte contre la fatigue</a></li>
  <li><a
 href="">Pour les &eacute;tudiants</a></li>
  <li><a
 href="">Pour les sportifs</a></li>
</ul>
<h2>risques</h2>
<h2><a
 href="forum/index.php">forum</a></h2>
<h2>contacts</h2>
</div>
</div>
</div>
</body>
</html>
Bonjour,
ton block change bien de taille, mais comme tu as défini une largeur aux paragraphes de ce block, visuellement, tu as l'impression qu'il se déplace.

Enlève la propriété width de la ligne "#bloc p", la longueur du texte va s'adapter à son conteneur.
Sujet clos
Aller à