Couleur et positionnement d'un div

**Denis Placé** · 16/03/2016, 10h45

Bonjour,

Je cale bêtement sur un div qui doit me permettre d'avoir le résultat ci-dessous : Nom : adetruire.JPG
Affichages : 150
Taille : 13,2 Ko

.

Le HTML est le suivant :

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
<html>
	<head>
		<meta charset = "utf-8" />
		<link rel="stylesheet" href="feuille.css">
	</head>
 
	<body>
		<div id="container">
			<header>
				<div id="haut">le haut en blanc
					<div id="nav">Section nav</div>
				</div>
			</header>
 
			<main>
				<div id="article">l'article à gauche en bleu</div>
				<div id="aside">aside à droite en vert</div>
			</main>
 
			<footer>
				<div id="bas">le footer en bas et en blanc</div>
			</footer>
		</div>
	</body>
</html>

Et 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
body
	{
		background:black;
	}
#article
	{
		float:left;
		width:700px;
		height:600px;
		background:blue;
	}
#aside
	{
		width:300px;
		height:600px;
		margin-left: 700px;
		background:green;
	}
#bas
	{
		width:1000px;
		height:40px;
		background:white;
	}
#container
	{
		width:1000px;
	}
 
#haut
	{
		width:1000px;
		height:120px;
		background:white;
	}
#nav
	{
		width:600px;
		height:20px;
		top:100px;
		background:red;
		text-align:center;
		vertical-align: middle;
	}

Le nav n'apparaît pas en bas du header et n'est pas centré dans ce header.
Voyez-vous mon erreur ?
Merci d'avance.

**Jacques Beauregard** · 16/03/2016, 11h13

Bonjour,

Dans ton code css à plusieurs reprises, on peut constater:

Code :

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

1
2
3
{
		background:black;
	}

Si tu ne définis que la couleur de ton background, utilise :

Code :

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

1
2
3
{
		background-color:black;
	}

Si tu utilises la propriété background seule : tu dois spécifier d'autres paramètres que la couleur .
Exemple :

Code :

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

1
2
3
body {
    background: black url("test.png") no-repeat right top;
}

**Denis Placé** · 16/03/2016, 11h27

@Jacques,

Merci pour ta remarque, tu as raison.
Vois-tu pourquoi ma section nav n'est pas centrée ni en bas du header ?

Invité · 16/03/2016, 12h06

Bonjour Denis,

Le design que tu proposes a des dimensions fixes.
Parfait pour TON ordinateur !
Mais pas pour ceux des visiteurs, qui utilisent de plus en plus leur smartphone, tablette tactile,... (= avec des dimensions d'écrans très variées).

il faut que tu commences par apprendre les bases du HTML5 et du "responsive design" :

utilisation correcte (= au bons endroits) des balises HTML5 (<main>, <section>, <nav>, <article>,...)
les largeurs de conteneurs en % !!
tant que faire se peut, laisser les élements dans le flux (n'utiliser float, position:absolute/fixed; que si vraiment nécessaire,...)
display:table; ou display:flex; peuvent remplacer avantageusement les float.

**Denis Placé** · 16/03/2016, 12h25

Bonjour Jreaux62,

J'entends bien tes remarques mais ..... je ne fais que répondre à une demande qui est précisément celle-là !

Invité · 16/03/2016, 12h30

Voici une structure correcte :

Code html :

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
<!DOCTYPE HTML> <!-- IMPORTANT : TOUJOURS mettre un DOCTYPE ! -->
<html>
 
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="feuille.css">
</head>
 
<body>
  <div id="global">
    <header>
      <div id="haut">le haut en blanc </div>
      <nav>Section nav</nav>
    </header>
 
    <main>
      <section>la section à gauche en bleu
        <article>
          <header>TITRE de l'article 1</header>
          <div>l'article 1</div>
        </article>
        <article>
          <header>TITRE de l'article 2</header>
          <div>l'article 2</div>
        </article>
      </section>
      <aside>aside à droite en vert</aside>
    </main>
 
    <footer>
      le footer en bas et en blanc
    </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
body {
  background: black;
}
 
#global {
  max-width: 1000px;
  margin:0 auto;
}
 
#global > header {
  height: 120px; /* peut rester en px si nécessaire (image de fond,...) */
  position: relative;
  text-align: center;
  background: white;
}
 
#haut {
  height: 75%; /* 75% des 120px du header */
  background: white;
}
nav {
  width: 60%;
  height: 20%; /* 20% des 120px du header */
  margin:0 auto;
  background: red;
  text-align: center;
  vertical-align: middle;
}
 
#global > footer {
  min-height: 60px;
  background: white;
}

CSS - SOLUTION 1 (avec éléments float) AJOUTER :

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
main {
  clear:both;
  overflow:hidden; /* IMPORTANT pour remettre dans le flux les éléments float qu'il contient */
}
main > section {
  float: left;
  width: 70%;
  min-height: 600px;
  background: blue;
}
main > aside {
  width: 30%;
  min-height: 600px;
  float: right;
  background: green;
}

CSS - SOLUTION 2 (avec display:flex) AJOUTER :

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
main {
  clear:both;
  display:flex;
  width:100%;
}
main > section {
  width: 70%;
  min-height: 600px;
  background: blue;
}
main > aside {
  width: 30%;
  background: green;
}