Agrandir la taille d'un bloc

**Justine78** · 10/04/2011, 12h55

Bonjour,
Je suis actuellement entrain de faire un petit site vitrine pour ma galerie peinture. J'ai téléchargé et installé un kit-graphique sur mon ftp je me débrouille un petit peu en HTML et CSS mais je bloque sur un truc.

Voilà mon problème je voudrais agrandir le bloc central mais je ne sais pas quelle ligne modifier dans mon css. Je pense qu'il faut modifier ou ajouter une commande à la ligne "#page" mais quoi je ne sais pas. Merci pour votre aide.

Ci-joint le screen de la page + le css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
/* CSS par dig pour http://www.kits-gratuits.net */
 
* {margin:0;padding:0;}
 
body {
	background:#444343 url(./images/interface/fond.png) 0 65px repeat-x;
	font:normal 0.8em "Trebuchet MS", Tahoma, Verdana, Arial, Sans-serif;
}
 
#page {
	width:586px;
	margin:0 auto 20px auto;
	border-top:1px solid #676767;
	border-bottom:1px solid #676767;
	background:url(./images/interface/fond_contenu.png) top repeat-y;
}
 
ul#menu {
	width:100%;
	list-style-type:none;
	margin:0 50px 0 50px;
}
 
ul#menu li {display:block;float:left;width:100px;height:100%;}
 
ul#menu a {display:block;width:70px;height:65px;text-align:center;font:bold 1em Tahoma;color:#FFF;text-decoration:none;padding-top:40px;border-top:3px solid #484848;text-transform:uppercase;}
ul#menu a:hover {display:block;width:70px;height:65px;text-align:center;font:bold 1em Tahoma;color:#FFF;text-decoration:none;border-top:3px solid #01CCFF;}
 
h1#header {
	background:url(./images/interface/header.png) top no-repeat;
	width:572px;
	height:146px;
	margin:64px 6px 0 6px;
	border:1px solid #6E6E6E;
	text-indent:-9000px;
}
 
#gauche {margin:10px 0 0 12px;}
#gauche {
	width:564px;
	float:left;
	text-align:justify;
}
 
#gauche h2 {
	background:url(./images/interface/fond_titre.png) no-repeat;
	width:563px;
	height:28px;
	font:bold 1em Verdana;
	color:#FFF;
	text-transform:uppercase;
	padding:6px 0 0 15px;
}
 
#gauche h3 {
	color:#01CCFF;
	font:bold 0.8em Verdana;
}
 
#gauche p {
	color:#FFF;
	padding:5px;
}
 
p#copyright {
	text-align:center;
	width:100%;
	color:#EFEFEF;
}
 
p#copyright a{text-decoration:none;color:#EFEFEF;}
p#copyright a:hover{text-decoration:none;color:#EFEFEF;}

Merci pour votre aide

**telliak** · 10/04/2011, 16h07

Salut, Euh, peut-être un début de réponse, si l'on considère que largeur se traduit en anglais par width

?

**Justine78** · 10/04/2011, 20h45

Merci pour ta réponse en effet j'ai essayer de modifier

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
#page {
	width:586px;

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
#page {
	width:886px;

et voilà ce que ça donne

Le bloc central a été décalé. Mais impossible de comprendre pourquoi il n'augmente pas.
Une solution ?

**sebhm** · 10/04/2011, 23h00

il y a d'autres spécifications de taille dans le CSS.
Si tu as une page en ligne, ca serait tres utile pour t'aider

**Justine78** · 10/04/2011, 23h27

Je dois avouer que je suis un petit peu perdue.
Mon fichier html est le suivant si c'est cela qu'il faut modifier.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<!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>Justine Duhayon</title>
 
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <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">
  <ul id="menu">
		<li><a href="">Accueil</a></li>
		<li><a href="">Services</a></li>
		<li><a href="">Portfolio</a></li>
		<li><a href="">Forums</a></li>
		<li><a href="">Philo</a></li>
	</ul>
  <h1 id="header">Justine Duhayon</h1>
 
  <div id="gauche">
		<h2>Titre de catégorie</h2>
			<h3>Titre de paragraphe</h3>
				<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem.</p><p>Sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
			<h3>Titre de paragraphe</h3>
				<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p><p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
	</div>
  <hr style="visibility:hidden;clear:both;" />
</div>
	<p id="copyright">~ Copyright &copy; Kits-Gratuits.Net, une réalisation dig ~</p>
</body>
</html>

Merci pour votre aide

**vodiem** · 11/04/2011, 02h51

salut sebhm, telliak et bienvenu Justine78,

voilà un css plus approprié qui te permettra du "width" de #page de redimensionner à ta guise la largeur:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
/* CSS par dig pour http://www.kits-gratuits.net */
 
* {margin:0;padding:0;}
 
body {
	background:#444343 url(./images/interface/fond.png) 0 65px repeat-x;
	font:normal 0.8em "Trebuchet MS", Tahoma, Verdana, Arial, Sans-serif;
}
 
#page {
	width:886px;
	margin:0 auto 20px auto;
	border-top:1px solid #676767;
	border-bottom:1px solid #676767;
	background:url(./images/interface/fond_contenu.png) top repeat-y;
}
 
ul#menu {
	width:100%;
	list-style-type:none;
	margin:0 50px;
}
 
ul#menu li {display:block;float:left;width:100px;height:100%;}
 
ul#menu a {display:block;width:70px;height:65px;text-align:center;font:bold 1em Tahoma;color:#FFF;text-decoration:none;padding-top:40px;border-top:3px solid #484848;text-transform:uppercase;}
ul#menu a:hover {display:block;width:70px;height:65px;text-align:center;font:bold 1em Tahoma;color:#FFF;text-decoration:none;border-top:3px solid #01CCFF;}
 
h1#header {
	background:url(./images/interface/header.png) top no-repeat;
	height:146px;
	margin:64px 6px 6px;
	border:1px solid #6E6E6E;
	text-indent:-9000px;
}
 
#gauche {margin:10px 0 12px;}
#gauche {
	padding:0 16px;
	float:left;
	text-align:justify;
}
 
#gauche h2 {
	background:url(./images/interface/fond_titre.png) no-repeat;
	height:28px;
	font:bold 1em Verdana;
	color:#FFF;
	text-transform:uppercase;
	padding:6px 0px 0 15px;
}
 
#gauche h3 {
	color:#01CCFF;
	font:bold 0.8em Verdana;
}
 
#gauche p {
	color:#FFF;
	padding:5px;
}
 
p#copyright {
	text-align:center;
	width:100%;
	color:#EFEFEF;
}
 
p#copyright a{text-decoration:none;color:#EFEFEF;}
p#copyright a:hover{text-decoration:none;color:#EFEFEF;}

Agrandir la taille d'un bloc

CSS

Vue hybride

Discussions similaires

Partager

Partager