Container qui centre tous mes DIV

**G-Lib** · 24/02/2017, 23h22

Bonjour à tous !

J'ai un petit soucis (de débutant) et je n'arrive pas à trouver la solution.

J'ai un site dont la structure est comme sur l'image : http://www.hawaii.edu/lis/webteam/wo...s/image014.gif

Mon <div id="container"> est centré et le soucis que j'ai c'est que tous les div suivants (ses enfants) sont aussi centrés.

Je ne veux pas que mon <div id="banner"> soit centré, je veux qu'il prenne toute la largeur de la page, comment faire pour qu'il n'est pas la même largeur que son parent ? Je ne veux pas le sortir de son parent car la sémantique n'aurait plus aucun sens

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
<!DOCTYPE html>
<html>
 
<body>
 
    <div id="container">
      <div id="banner">
      </div>
      <div id="nav">
      </div>
     </div>
 
</body>
</html>

Code :

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

1
2
3
4
5
#container
{
  margin: 0 auto;
  width: 960px;
}

**JefReb** · 25/02/2017, 09h37

Ben tu mettrais ton code css complet ça aiderait. Comment veux-tu qu'on devine ce que tu as codé dans banner? et nav et la suite?
Ca me parait normal que banner soit centré. Pour le reste nav en flottant et un margin-left pour content et un petit clear:both pour le footer. Rien de bien compliqué, c'est dans plusieurs tuto.

**JefReb** · 25/02/2017, 09h54

Cadeaux:http://codepen.io/JefReb/pen/LWEzPp

Invité · 25/02/2017, 14h30

Bonjour, et bienvenue sur DVP

Envoyé par G-Lib

Je ne veux pas le sortir de son parent car la sémantique n'aurait plus aucun sens

Parler de "sémantique" avec le code que tu montres ???

Si tu veux un code avec du "sens sémantique", il faut utiliser les balises HTML5 : Introduction à HTML5 (sauf <hgroup>, qui est déprécié)

Envoyé par G-Lib

Je ne veux pas que mon <div id="banner"> soit centré, je veux qu'il prenne toute la largeur de la page, comment faire pour qu'il n'est pas la même largeur que son parent ?

A part en le mettant en position:fixed; (ou position:absolute si #container N'est PAS positionné), il restera DANS son parent.

Et je ne vois pas ce qu'il y a de "non-sémantique" dans le fait de le mettre au dessus de #container

@JefReb
Tu n'as pas compris la demande : la bannière doit faire toute la largeur de la PAGE / fenêtre.
Cela dit, ton utilisation des balises HTML5 est (à peu près) correcte

Par contre, ton CSS, non :

la méthode de disposition n'est pas bonne
pour être "responsive friendly", il est préférable d'utiliser (pour les largeurs) le % plutôt que le px.

Voici une solution sémantiquement correcte (utilisant les flexbox CSS) : http://codepen.io/jreaux62/pen/aJzqVd

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
<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes">
</head>
<body>
  <header>
    bannière
  </header>
 
  <main>
    <nav>
      menu
    </nav>
    <section>
      <article>
        article 1
      </article>
      <article>
        article 2
      </article>
    </section>
  </main>
 
  <footer>
    footer
  </footer>
</body>
</html>

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
* {
  margin:0; padding:0;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* permet de définir les largeurs, sans tenir compte des border / padding */
 
html,
body {
  height: 100%;
  min-height: 100%; /* I.E. */
  font-size: 100%;
  font-family: Georgia, "Times New Roman", Times, serif;
}
 
body > header {
  min-height: 100px; /* visualisation (à supprimer !) */
  border: 2px solid darkmagenta; /* visualisation (à supprimer !) */
}
 
body > main {
  max-width: 960px; /* le SEUL endroit où on impose la largeur en PIXELS*/
  margin: 0 auto; /* centrage horizontal dans la page */
  border: 2px solid red; /* visualisation (à supprimer !) */
  display:flex;
  flex-direction:row;
}
 
main > nav {
  flex: 1 1 30%;
  padding: 10px;
  border: 2px solid deepskyblue; /* visualisation (à supprimer !) */
  min-height: 100px; /* visualisation (à supprimer !) */
  margin:5px; /* visualisation (à supprimer éventuellement) */
}
 
main > section {
  flex: 1 1 70%;
  border: 2px solid orange; /* visualisation (à supprimer !) */
  margin:5px; /* visualisation (à supprimer éventuellement) */
}
 
article {
  padding: 10px;
}
 
body > footer {
  max-width: 960px; margin:0 auto; /* centrage, si on veut...*/
  min-height: 100px; /* visualisation (à supprimer !) */
  border: 2px solid green; /* visualisation (à supprimer !) */
}
 
/* PETIT PLUS */
@media screen and (max-width:640px) {
  /* on change la disposition */
  main {
    display:flex;
    flex-direction:column;
  }
  nav {
    flex: 1 1 100%;
  }
  section {
    flex: 1 1 100%;
  }
}

**G-Lib** · 25/02/2017, 21h24

Merci de votre aide !

**JefReb** · 26/02/2017, 08h25

@Jreaux62
A vrai dire, j'ai pas trop cherché au vu du peu de code qu'il y avait. Sûr que j'ai fait vite et que j'ai utilisé les px au lieu de %.
Mais la question était assez mal posée et j'ai juste voulu montré qu'il était facile de faire comme son dessin. et le dessin ne montrait pas qu'il voulait sortir la bannière du container. Et je voulais aussi montrer qu'avec html5 il y a des balises html5.
Mais merci pour le code ... correct.

Container qui centre tous mes DIV

CSS

Discussions similaires

Partager

Partager