Mise en page avec CSS

**zeplin1** · 10/12/2016, 22h18

Bonjour par ici !

Rapidement : Je suis un voyageur a long court qui aimerais -d´'une certaine maniere- aider un peu ses paternels.
Ils sont aquaculteurs (Huitres/crevettes) et j'aimerais leur faire un site vitrine pour qu'il puissent partager leur savoir. Car ce sont de veritables passionnes (malgre le travail penible qui caracterise le metier (qui a fait la collecte/tri d'huitres en saison d'hiver savent..)).

Afin de faire quelque chose de leger et portable j'ai donc commence un site statique en HTML/CSS (sans javascript) Et me voila deja a mes premieres bosses... Si vous pouviez me donner un petit coup de pouce ..

NOTE : Les sources sont telechargeables en .zip a la fin du post. Ces fichiers sont lisibles sous les spoilers aussi.

1.

Je me demande pourquoi le bloc <article> ce met en dessous du <div class="bloc-g"> (le bloc avec le champ de recherche a gauche) LORSQUE la fenetre est REDIMENSSIONNEE en largeur ().

Autrement dis : j'ai donc un second menu sur la gauche qui est en "inline-block" pour etre a coter de mon <article>.
Quand je redimenssionne la fenetre en largeur mon <article> ce met automatiquement en bas du <div> .. Moi pas demande ca. m'voyez ?

Alors j'ai cree un autre <div> pour que ces deux blocs soit vu comme un seul et unique bloc. Mais ca na pas solutionne mon probleme...
Une idee ?

margin: auto ne me sert pas
min-margin. %; non plus

Precision : Ces deux blocs sont dans la balise parent <section> . Un rapport ?

2.

J´aimerais aussi que le menu ce colle (en diminuant de taille aussi) en haut de l'ecran lorsque je defile vers le bas de la page (il n'y a pas de contenu dans la page 'index' mais une fois rajoute, on devra 'scroller' vers le bas.
autrement dis :
la proprietee "position" avec la variable "fixed" sert a ancrer un objet a un endroit precis sur l'ecran/page, et restera la, meme quand on fera defiler la page.

C'est super ! Mais dans mon cas je voudrais que le menu ne ce fixe QUE sur le haut de la page, quand elle vient buter sur ce menu et
l'emporte avec lui dans sa descente.

3.

Comment avoir un Background (banniere) different sur le <header> des differentes pages du site ( Je ne vous est pas file les autres pages du menu puisque la page 'index' (accueil) est ma base) ?

4.

Pour centrer et limiter mon site sur les plus grandes resolutions, j'agis sur la balise <body> avec un 'position: center' et un 'max-width' defini en pixels ?

...

J'allais poser que la premiere question mais je me suis laisser emporter ... En tout cas c'est celle dont la logique me depasse et qui me chamboulle vraiment le design.

j'ai fais quelques recherches mais le cybercafe + debit tres bas ne m'aide pas trop. J'habite sur une montagne en ce moment, deconnecte d'internet (c'est pas plus mal) donc je risque d'etre peux reactif mais je suivrais le fil !

Merci de m'avoir lu !

Voici les sources du site (fichier HTML 'index'(2kb) et CSS 'style' (4kb) + image de banniere 'port' (229kb) (archive .zip de 226.4 kB) :

https://framadrop.org/r/HL-QFWXzDe#H...ffbhFgZuHEsok=

ou en direct :

accueil HTML

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
 
<!DOCTYPE html>
 
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="style.css"/>
		<title> website </title>
	</head>
	<body>
 
		<div class="bloc_page">
 
		<header> 
				<nav> 
<p>
					<a href="index.html">Acceuil</a> 
					<a href="idee.html">L'idée</a>
					<a href="personnages.html">Personnages</a>
					<a href="ferme.html">La ferme</a><br />
 
 
					<a href="extra.html">Extra</a>
</p>
<!-------- Essayer <br /> sans <p> lors de validation -------->
				</nav>				
 
		</header>
 
 
	<section>
		<div class="bloc-g">
				<p> 
					<label for="recherche">Recherche :</label> <input type="search" name="recherche" id="recherche" size="20" maxlenght="40" placeholder="mots-clef" />
				</p>
			<p>
			chouette<br />
			cacahuete
 					<a href="ecrire.html">Nous ecrire </a>
			</p>
		</div>
 
		<article class="centrer-texte">
 
<h1 id="bienvenu">Bienvenue sur le <strong>nouveau site web</strong> </h1>
 
 
		</article>
	</section>
 
	<footer> <p>webmaster contact </p> </footer>
 
	</div>
 
 
	</body>
</html>

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
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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
 
 
.bloc_page
 
{
 
max-width: 100%;
margin: auto;
}
 
body
{
 
background-color: rgba(126,64,4,0.3);
font-family: "DejaVu Serif", "Trebuchet MS", Arial, sans-serif, "DejaVu Serif";
}
 
header
{
display: inline-block;
position: relative;
 
 
right: 0.2%;
width: 100%;
height: 20em;
margin: auto;
 
 
background-image: url("port.jpg");
background-repeat: no-repeat;
background-position: bottom;
background-size: 100%;
 
 
border: 3px solid black; 
border-bottom: 0px;
border-radius: 10px;
box-shadow: 0px -3px 3px black ;
 
}
 
 
nav
{
 
display: inline-block;
position: absolute;
bottom: 0%;
 
 
max-height: 100%;
width: 100%;
 
 
margin: auto;
padding-top: 0.4%;
padding-bottom: 0.1%;
 
background-color: rgb(24,24,24); /* Pour les anciens navigateurs*/
background-color: rgba(24,24,24,0.5);
border-radius: 5px;
 
text-align: center;
 
}
 
nav p     /******* verifier validite*******/
 
{
display: inline;
 
}
 
nav a   /***mots/cases de navigation**/
 
{
 
display: inline-block;
position: relative;
 
 
margin: 0.1% 2% 0.1% 0;
padding: 0.2% 0.4%;
 
 
border: 1px solid black;
border-radius: 5px;
background-color: rgba(126,64,4,0.6);
box-shadow: 4px -2px 4px black;
 
font-size: 1.8em;
color: rgba(100,200,250,0.9);
text-shadow: 4px -2px 4px black;
 
white-space: pre;
}
 
 
 
a
{
text-decoration: none;
}
 
nav a:hover
{
color: rgba(50,300,300,1);
 
}
 
 
section
{
display: block;
}
 
.bloc-g
{
display:inline-block;
vertical-align: top;
 
margin-left: 0.5%;
 
 
width: 17.4%;
min-width: 6em;
height: 60em;
 
padding-left: 10px;
 
border: 2px solid black;
border-right: 1px solid black;
 
box-shadow: -3px -2px 3px black;
 
overflow: auto;
border-top: 1px solid black;
}
 
 
article
{
display: inline-block;
vertical-align: top;
width: 80.1%;
 
 
padding-top: 0.5% 5%;
 
 
 
 
border: 1px solid black ;
 
box-shadow: 3px -2px 3px black;
 
 
 
}
 
article p
 
{
margin: 30px 70px 30px 70px;
line-height: 23px;
font-size: 18px;
}
 
 
footer
{
display: block;
position: absolute;
vertical-align: baseline;
text-align: center;
 
}
 
 
.centrer-texte
 
{
text-align: center;
}
 
#bienvenu
{
color: rgba(0,50,350,1);
font-size: 2em;
}
 
 
h1
{ 
font-family: Georgia, "Trebuchet MS", sans-serif, "DejaVu Sans";
text-align: center;
padding: 2em 2em;
 
}
 
.espace
 
{
margin-top: 50px;
}
 
em
{
font-variant: small-caps;
font-style: normal;
}
 
 
.inter /* Garde le mot internet normal en Acceuil */
{
font-weight: normal;
}
 
.comfin /* commentaire de fin en Acceuil. */
{
font-size: 0.7em;
}
.port /* dimension banderole tourisme */
{
display: block;
 
width: 97%;
margin: auto;
 
border: 5px solid black;
border-radius: 50px;
}
 
 
.palais  /* enlever le small-caps defini a tout les <em></em> */
{
font-variant: normal;
}
 
 
/***************  formulaire de contat **********************/
 
form 
 
{
position: relative;
text-align: center;
}
 
 
 
 
textarea		
{
display:inline-block;
vertical-align: top;
 
width: 35%;
height: 20em;
}
 
.message
{
display: inline-block;
vertical-align: top;
}
 
.nom
{
position: relative;
right: 5.6%;
}
.messag
{
position: relative;
left: 2.8%;
}
 
.e-mail
{
position: relative;
right: 8.5%;
}
 
.tel
{
position: relative;
right: 7.3%;
}
 
.envoyer
{
position: relative;
left: 5%;
}
/********************fin formulaire contact **********************/

banniere

http://pix.toile-libre.org/?img=1481402677.jpg

Invité · 11/12/2016, 09h19

Bonjour, et bienvenue sur DVP.

1/ Merci de lire les règles du forum.

Pour résumer, ton message est trooooooooooooooooooooooop looooooooooooooooooooooooong...
On "décroche" avant la fin...

Pose UNE question à la fois + montre le code nécessaire et suffisant (ni +, ni -).

Tu auras plus de chance d'avoir des réponses.

2/ A consulter / lire :

3/ Si tu ne maitrises pas le codage (ou que tu ne veux pas trop te prendre la tête mais obtenir un résultat rapide), pourquoi ne pas te tourner vers du "prêt-à-l'emploi", comme WordPress,... ?

N.B. On écrit "Accueil", pas "Acceuil".

**Cyberdome** · 12/12/2016, 18h10

Bonjour,

Q1: Vous avez un padding-left de 10px à .bloc-g

Une mesure fixe dans un design extensible ne fait jamais bon ménage, supprimez le padding ou mettez le en % et le bloc restera en place jusqu'à ce qu'il n'y ai plus de place pour le h1. Si vous voulez réduire encore plus alors il faut rendre le h1 extensible aussi.

Q2: Pour ce genre de menu il faut passer par javascript ou autre, le principe est de mesurer le défilement de la page et d'activer la position fixed au passage.

Q3: Tout simplement en attribuant un id à votre header ce qui vous permet de distinguer le header de chaque page et donc de leur attribuer des backgrounds différents.

Q4: En principe la balise body sert à ça, dans l'usage il y avait par le passé quelques différences entre navigateurs et la pratique répandue consiste à utiliser un div général qui contient tout le site. C'est la méthode la plus sûre, quoiqu'aujourd'hui ca ne semble plus poser de problème de positionner le body d'aprs une discussion que j'ai lu sur stackoverflow. Vous pouvez positionner le div en position:relative; avec un margin:auto; pour centrer le site et lui attribuer un max-width en px;

**zeplin1** · 12/12/2016, 23h29

Merci jreaux mais c'etait dur de faire conci pour des problemes technique sur un/des languages que je ne maitrise pas. Si j'ai afficher toute la page c'est justement parce que je ne vois pas ou est le probleme (pour le 1.)

Et si je ne me toune pas vers un CMS c'est parce que je veux faire quelque chose de leger et portable tout en apprenant

Cyberdome.

Merci beaucoup !

J'avais un espoir qu'avec le CSS3 il y aurais eu une alternative a javascript pour le menu qui defile avec la page.

Pour le reste, je m'y mettrais une fois rentre.

Je vous tiens au jus !

Mise en page avec CSS

CSS

Discussions similaires

Partager

Partager