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;}

Justine78 · 11/04/2011, 10h28

Merci pour ta réponse mais toujours le même problème, le bloc de texte s’agrandit mais pas le bloc graphique gris en fond. Je ne vois vraiment pas où modifier sa taille.

vodiem · 11/04/2011, 12h52

Citation:

Envoyé par Justine78

Merci pour ta réponse mais toujours le même problème

si tu as bien remplacé la totalité du fichier css cela m'étonnerait que ce soit le même problème.

Citation:

Envoyé par Justine78

... s’agrandit mais pas le bloc graphique gris en fond

je vois pas bien le résultat que tu souhaites. il serait plus facile d'avoir un aperçu du résultat final (imprime écran+couper/coller des zones à étirer).

Justine78 · 11/04/2011, 22h16

J'ai bien copier/coller le css.
Voilà le soucis

Le bloc texte est agrandi mais pas le bloc image derrière je ne comprend pas.

vodiem · 12/04/2011, 01h48

désolé, mais là je peux pas faire grand chose pour toi... :
ceux sont les images png qui sont ainsi, il faut les éditer.
si tu veux par contre que le fond soit étirable "dynamiquement" et pas fixe il faut restructurer autrement le css et découper autrement les images.

Justine78 · 12/04/2011, 12h06

d'accord il faut donc que j'augmente la taille de l'image.
Je te remercie beaucoup pour ton aide.

10/04/2011, 16h07	#2
telliak Membre à l'essai Inscription : mai 2006 Messages : 19 Détails du profil Informations forums : Inscription : mai 2006 Messages : 19 Points : 21 Points : 21	Salut, Euh, peut-être un début de réponse, si l'on considère que largeur se traduit en anglais par width ?
	00

10/04/2011, 23h00	#4
sebhm Modérateur Seb Développeur Web Inscription : avril 2004 Messages : 1 063 Détails du profil Informations personnelles : Nom : Seb Âge : 31 Localisation : France, Landes (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : Agroalimentaire - Agriculture Informations forums : Inscription : avril 2004 Messages : 1 063 Points : 1 181 Points : 1 181	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 __________________ Les règles les FAQ Web les Cours Web
	00

11/04/2011, 10h28	#7
Justine78 Invité de passage Inscription : avril 2011 Messages : 6 Détails du profil Informations forums : Inscription : avril 2011 Messages : 6 Points : 0 Points : 0	Merci pour ta réponse mais toujours le même problème, le bloc de texte s’agrandit mais pas le bloc graphique gris en fond. Je ne vois vraiment pas où modifier sa taille.
	00

11/04/2011, 22h16	#9
Justine78 Invité de passage Inscription : avril 2011 Messages : 6 Détails du profil Informations forums : Inscription : avril 2011 Messages : 6 Points : 0 Points : 0	J'ai bien copier/coller le css. Voilà le soucis Le bloc texte est agrandi mais pas le bloc image derrière je ne comprend pas.
	00

12/04/2011, 01h48	#10
vodiem Expert Confirmé Diem VO Vivre Inscription : avril 2006 Messages : 2 644 Détails du profil Informations personnelles : Nom : Diem VO Âge : 40 Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur) Informations professionnelles : Activité : Vivre Secteur : Conseil Informations forums : Inscription : avril 2006 Messages : 2 644 Points : 3 895 Points : 3 895	désolé, mais là je peux pas faire grand chose pour toi... : ceux sont les images png qui sont ainsi, il faut les éditer. si tu veux par contre que le fond soit étirable "dynamiquement" et pas fixe il faut restructurer autrement le css et découper autrement les images.
	00

12/04/2011, 12h06	#11
Justine78 Invité de passage Inscription : avril 2011 Messages : 6 Détails du profil Informations forums : Inscription : avril 2011 Messages : 6 Points : 0 Points : 0	d'accord il faut donc que j'augmente la taille de l'image. Je te remercie beaucoup pour ton aide.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email