Comment élargir une colonne

**débutant quercy** · 10/08/2015, 09h32

Bonjour à tous, je suis tout nouveau parmi vous, je viens vers vous pour si vous l'acceptez m'aider car je suis bien embêté ne connaissant hélas pas le Css, ma question est je l'imagine bien d'une grande simplicité pour celui qui maitrise le sujet.
Je compte bien apprendre et peut être me débrouiller dans le Css .
Mais avant de me lancer j'aurais besoin d'aide (je me répète lol) je suis en train de 'construire' un site pour une association, hélas je suis dans l'impossibilité de répondre à une de leurs exigence qui est d'élargir la colonne principale. je vous copie ici le code dans lequel je pense qu'il est possible de rajouter ou modifier la ou les lignes pour agrandir la colonne

pouvez vous me dire ce que je dois faire pour pouvoir jouer sur la largeur de la colonne principale ?

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
/*
-----------------------------------------------
Layout 1001: Screen Styles
----------------------------------------------- */
 
body {
	margin: 0;
	padding: 0;
}
 
.altcolor {
	background-color: #|:bg_color1|:;
}
 
 
/* Container */
 
div#container {
	margin: 0 auto;
	width: 940px;
	background-image: url(1001-container_bg.gif);
	background-repeat: repeat-y;
	background-position: 239px 0;
}
 
 
/* Header */
 
div#header {
	position: relative;
	padding-bottom: 40px;
	background: #fff;
	zoom: 1;
}
div#header_wrapper {
	padding-top: 20px;
}
 
div#emotion-header {
	position: relative;
}
div#emotion-header strong#emotion-header-title {
	position: absolute;
	top: 0;
	left: 0;
}
 
 
/* Content */
 
div#content {
	width: 700px;
	float: right;
	background: #fff;
}
div#content div.gutter {
	padding: 0 100px 60px 100px;
}
 
 
/* Sidebar */
 
div#sidebar {
	width: 239px;
	float: left;
	padding: 0 0 40px 0;
}
 
div#jimdobox {
	margin-bottom: 20px;
}
 
 
/* Navigation */
 
div#navigation {
	margin: 0 0 20px;
	padding: 0 0 30px;
	background: url(1001-navigation_bg.gif) repeat-x 0 100%;
}
 
ul.mainNav1 {
	margin: 0;
	padding: 1px 0 0;
	list-style: none;
	background: url(1001-dots.gif) repeat-x;
}
ul.mainNav1 li {
	width: 239px;
}
ul.mainNav1 li a {
	font-weight: bold;
	display: block;
	width: 219px;
	padding: 5px 10px;
	background: url(1001-dots.gif) repeat-x 0 100%;
	background-color: #fff !important;
	text-align: right;
	text-decoration: none;
}
ul.mainNav1 li a:hover, ul.mainNav1 li a.current {
	background: transparent !important;
	color: #fff;
}
ul.mainNav2 {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.mainNav2 li a {
	padding: 5px 30px 5px 10px;
	width: 199px;
}
ul.mainNav3 {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.mainNav3 li a {
	padding: 5px 50px 5px 10px;
	width: 179px;
}
 
div#sidebar_content {
	margin: 0 0 20px;
	padding: 0 20px;
}
 
 
/* Footer */
 
div#footer {
	width: 700px;
	margin-left: 240px;
}
div#footer div.gutter {
	background: url(1001-dots.gif) repeat-x;
	background-color: #fff;
	float: left;
	width: 660px;
	padding: 10px 20px;
}
 
br.c {
	display: block;
}

Merci d'avance

Invité · 10/08/2015, 10h05

Bonjour et bienvenu sur DVP.

Code css :

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

1
2
3
4
5
6
7
8
9
/* Container */
 
div#container {
	margin: 0 auto;
	width: 940px;
	background-image: url(1001-container_bg.gif);
	background-repeat: repeat-y;
	background-position: 239px 0;
}

Il est pratique de connaitre quelques mots d'anglais :

"width" signifie "largeur"

Tu trouveras sur DVP des cours, FAQ,... pour apprendre :

**débutant quercy** · 10/08/2015, 11h33

Bonjour et merci pour l'accueil c'est sympas, ok pour la largeur, mais pourrais-tu me dire si pour ce qui concerne la colonne principale je doives rajouter des lignes ? (cf: le code déjà posté) j'ai déjà testé çà et là mais hélas je n'y suis pas arrivé
Je vais dès que possible visionner les liens dont tu me parles, merci encore

Invité · 10/08/2015, 11h52

Re.

Pour un site "adaptatif" ("responsive"), il est préférable de mettre les largeurs en %, et pas en pixels (px).

A toi alors de mettre les bons pourcentages

N.B. On peut aussi définir une largeur maxi au conteneur global :

Code css :

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