Centrage d'un container

**taidasuke** · 26/01/2014, 17h01

bonjour,

je suis en train de faire un site web pour un projet, j'ai un petit problème , je n'arrive pas à centrer le container, j'ai une coupure sur la page web, j'ai beaucoup cherché mais je ne trouve pas de solution.

voici la page html et le code css, je précise que c'est de la production personnelle, je n'ai en aucun cas fais du copier coller sur un site.

Html

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
    <head>
        <title>Manchester city official</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="Custom.css" /> 
    </head>
    <body>
        <div class="header">
        </div>
        <div class="menu">
 
		<a href="Accueil.php">Accueil</a>
		<a href="Historique.php">Historique</a>
		<a href="Effectif.php">Effectif</a>
		<a href="Boutique.php">Boutique</a>
        </div>
        <div class="corps"/>
        <div class="milieu">
         je suis ton pere
        </div>
        <div class="tableau3">
        </div> 
        <div class="zone_membre">
         <div class="tableau">
         Espace client   
         </div>    
        <div class="connexion">
        <form method="post" action="index.html">
            <br>
            <label for=Login"> Login: </label>
            <input type="text" name="Login" id="Login" />
            <br>
            <label for=Password"> Password </label> 
            <input type="password" name="password" id="password" />
            <br><br>
            <input type="submit" name="connexion" value="Se connecter"/>
 
 
        </form> 
 
        </div>
        <div class="onglet">
          Articles
        </div>
        <div class="tableau2">
        </div>
        </div>
 
        <div class="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
.header
{
    width: 1350px;
    height: 90px; 
    background-color:#778899;
    font-family: "Arial Black" ;
 
 
}
body
{
    background-color:#99ccff; 
    opacity: 0.8;
 
}
.menu
{
    background-color:#B0C4DE;
    width: 1350px;
    height: 20px; 
    text-align: center;
 
}
 
.corps
{
    width: 1350px;
    height: 420px; 
    background-color:#99ccff;
 
}
.milieu
      {
    margin-left: auto;
    margin-right: auto;
    width: 6em;
}
 
.zone_membre
{
    width: 180px;
    height: 420px; 
    background-color:#cccccc;
    text-align: center;
 
}
.tableau
{
  width: 180px;  
  height: 20px;
  background-color:#3333ff;
 
}
.connexion
{
   width: 180px;  
   height: 180px;
   background-color: #9999ff
}
.onglet
{
  width: 180px;  
  height: 20px;
  background-color:#3333ff;
  color:black;
 
}
.tableau2
{
   width: 180px;  
   height: 200px;
   background-color: #9999ff;
}
.tableau3
{
    width: 180px;
    height: 420px; 
    background-color:#9999ff;
    float: right;
}
.footer
{
    width: 1350px;
    height: 120px; 
    background-color:#778899;
 
}
a:link
{
    text-decoration:none;
    color:#333333
}

merci d'avance.

**JefReb** · 26/01/2014, 17h13

je n'arrive pas à centrer le container, j'ai une coupure sur la page web

Quel est le conteneur à centrer et c'est quoi cette coupure de page?

http://codepen.io/JefReb/pen/Lcdyv

Un peu plus d'explication svp.

**taidasuke** · 26/01/2014, 17h36

voici un screen pour que tu comprennes mieux

http://www.hostingpics.net/viewer.php?id=794056site.jpg

la ligne "je suis ton pere" est le container qui doit se situer entre les 2 float et c'est cela que je n'aarive pas à faire .

Invité · 26/01/2014, 17h38

Envoyé par taidasuke

...la ligne "je suis ton pere" ...

Bonjour Dark Vador !

Ce screen nous éclaire beaucoup...

margin:0 auto; ?

Invité · 26/01/2014, 18h18

=> Div et CSS : une mise en page rapide et facile
=> Modèles de mise en page

On peut trouver d'autres exemples gabarits en cherchant un peu.

**taidasuke** · 26/01/2014, 18h21

http://hpics.li/ffc5991 voilà le problème.

je vais essayerde regarder ton lien, merci

**taidasuke** · 26/01/2014, 18h39

je ne vois pas comment faire.

**JefReb** · 26/01/2014, 20h33

C'est pas sorcier. Un petit coup de firebug pour trouver le conteneur et rajouter comme l'a dit jreau62

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
...
.zone_membre
{
    width: 180px;
    height: 420px; 
    margin: 0 auto; /* ici pour centrer */
    background-color:#cccccc;
    text-align: center;
 
}
...

Le résultat ici:
http://codepen.io/JefReb/pen/Lcdyv

**taidasuke** · 27/01/2014, 21h11

merci j'ai corrigé le code source.

html

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
    <head>
        <title>Manchester city official</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="Custom.css" /> 
    </head>
    <body>
        <div class="header">
        </div>
        <div class="menu">
 
		<a href="Accueil.php">Accueil</a>
		<a href="Historique.php">Historique</a>
		<a href="Effectif.php">Effectif</a>
		<a href="Boutique.php">Boutique</a>
        </div>
        <div class="corps"/>
        <div class="menu_gauche">
          <div class="mon_compte">
         Espace client   
         </div>    
        <div class="connexion">
        <form method="post" action="index.html">
            <br>
            <label for=Login"> Login: </label>
            <input type="text" name="Login" id="Login" />
            <br>
            <label for=Password"> Password </label> 
            <input type="password" name="password" id="password" />
            <br><br>
            <input type="submit" name="connexion" value="Se connecter"/>
 
 
        </form> 
 
        </div>
        <div class="onglet">
          Articles
        </div>
        <div class="contenu_onglet">
        </div>    
        </div>
        <div class="menu_droite">
        </div> 
 
        <div class="container">
       i'm so fresh man
        </div>
 
        <div class="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
.header
{
    width: 1350px;
    height: 90px; 
    background-color:#778899;
    font-family: "Arial Black" ;
 
 
}
body
{
    background-color:#99ccff; 
    opacity: 0.8;
}
.menu
{
    background-color:#B0C4DE;
    width: 1350px;
    height: 20px; 
    text-align: center;
 
}
.corps
{
    width: 1350px;
    height: 420px; 
    background-color:#99ccff;
 
}
 
.menu_gauche{
    width: 180px;
    height: 420px; 
    background-color:#9999ff;
    float: left;  
    text-align:center;
}
 
.mon_compte
{
  width: 180px;  
  height: 20px;
  background-color:#3333ff;
 
}
.connexion
{
   width: 180px;  
   height: 180px;
   background-color: #9999ff
}
.onglet
{
  width: 180px;  
  height: 20px;
  background-color:#3333ff;
  color:black;
 
}
.contenu_onglet
{
   width: 180px;  
   height: 200px;
   background-color: #9999ff;
}
.container
{
    width: 400px;
    height: 420px; 
    margin: 0 auto; /* ici pour centrer */
    background-color:#9999ff;
    text-align: center;
 
}
.menu_droite
{
    width: 180px;
    height: 420px; 
    background-color:#9999ff;
    float: right;
}
.footer
{
    width: 1350px;
    height: 120px; 
    background-color:#778899;
 
}
a:link
{
    text-decoration:none;
    color:#333333
}

**dev14** · 27/01/2014, 21h18

Envoyé par taidasuke

j'ai un autre soucis je voudrais mettre une image de fond sur la page html, mais le problème c'est qu'en css elle ne saffiche pas.

ja vais essayé ceci

Code :

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

1
2
3
4
5
body
{
    background-image:url('mancity.jpg') ; 
    opacity: 0.8;
}

mais cela ne marche pas elle n'est pas en fond sur la page web et j'ai mis l'image dans le même répertoire .

Elle ne s'affiche pas du tout?

Vérifie l'url par firebug car même si l'image est dans le même répertoire, ça dépend de quel endroit tu appelles tes fichiers css.

**taidasuke** · 27/01/2014, 22h11

j'ai compris c'était un problème d'extension du fichier. maintenant cela s'affiche , merci

sinon c quoi le code pour assurer la compatibilité de bla page web sur tout les navigateur, svp?

**NoSmoking** · 29/01/2014, 19h11

Bonjour,

sinon c quoi le code pour assurer la compatibilité de bla page web sur tout les navigateur, svp?

- un DOCTYPE robuste, <!DOCTYPE html> par exemple

- le respect des standards tant HTML que CSS

**taidasuke** · 31/01/2014, 11h26

très drôle pour ce commentaire.
Me voici confronté à un nouveau problème de formulaire je voudrais y insérer des espace et mettre les 3 premières données du formulaire cote à cote mais avec des espaces puis faire de même pour les autres données mais a la ligne à chaque fois.

voci le code :
html

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
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
<!DOCTYPE html>
<html>
    <head>
        <title>Manchester city official</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="Custom.css" /> 
    </head>
    <body>
        <div class="header">
        </div>
        <div class="menu">
 
		<a href="Accueil.php">Accueil</a>
		<a href="Historique.php">Historique</a>
		<a href="Effectif.php">Effectif</a>
		<a href="Boutique.php">Boutique</a>
        </div>
        <div class="corps"/>
        <div class="menu_gauche">
          <div class="mon_compte">
         Espace client   
         </div>    
       <div class="connexion">
        <form method="post" action="index.html">
            <label for="Login"> Login: </label>
            <input type="text" name="login" id="Login" />
            <br><br>
            <label for="Password"> Password: </label> 
            <input type="password" name="password" id="password" />
            <br><br>
            <input type="submit" name="connexion" value="Se connecter"/>  
        </form>
 
        </div>
        <div class="onglet">
          Articles
        </div>
        <div class="contenu_onglet">
        </div>    
        </div>
        <div class="menu_droite">
        </div> 
 
        <div class="container">
 
  <form method="post" action="Inscription.html">   <!-- formulaire  -->
  <label> Civilité </label><br>
  <select name="civilite" id="civilite">
		<option value="Sélectionner">Sélectionner</option>
		<option value="Mr">Mr</option>
		<option value="Mme">Mme</option>
		<option value="Mlle">Mlle</option>
	</select><br>
   <label> Nom</label>:<br><input type="text" name="nom" value="Nom"/> <br>
  <label> Prénom</label>:<br><input type="text" name="prenom" value="Prénom"/> <br>
 <label> Date de naissance</label>:<br><input type="text" name="Date_de_naissance" value="Date de naissance"/> <br>    
  <label> Adresse mail</label>:<br><input type="text" name="adresse_mail" value="Adresse mail"/>	<br>
  <label> Mot de passe</label>:<br><input type="password" name="mot_de_passe" value="Mot de passe<"/>	<br>
 <label> Pays:</label><br>
	<select name="pays" id="pays">
		<optgroup label="Europe">
			<option value="allemagne">Allemagne</option>
			<option value="autriche">Autriche</option>
			<option value="espagne">Espagne</option>
			<option value="france">France</option>
			<option value="grece">Grêce</option>
			<option value="irlande">Irlande</option>
			<option value="italie">Italie</option>
			<option value="portugale">Portugale</option>
			<option value="royaume-uni">Royaume-uni</option>
		</optgroup>
		<optgroup label="Amérique">
			<option value="argentine">Argentine</option>
			<option value="bresil">Brésil</option>
			<option value="canada">Canada</option>
			<option value="etats-unis">Etats-unis</option>
			<option value="jamaique">Jamaïque</option>
			<option value="mexique">Mexique</option>
			<option value="venezuela">Venezuela</option>
		</optgroup>
		<optgroup label="Asie">
			<option value="birmanie">Birmanie</option>
			<option value="cambodge">Cambodge</option>
			<option value="chine">Chine</option>
			<option value="inde">Inde</option>
			<option value="japon">Japon</option>
			<option value="laos">Laos</option>
			<option value="philippines">Philippines</option>
			<option value="thailande">Thaïlande</option>
			<option value="vietnam">Vietnam</option>
		</optgroup>
		<optgroup label="Autre">
			<option value="afrique_du_sud">Afrique du Sud</option>
			<option value="algerie">algérie</option>
			<option value="australie">Australie</option>
			<option value="maroc">Maroc</option>
			<option value="nouvelle_zelande">Nouvelle-zelande</option>
			<option value="russie">Russie</option>
			<option value="tunisie">Tunisie</option>
		</optgroup>
	</select><br>
	<label> Adresse</label>:<br><input type="text" name="adresse" value="adresse"/><br>
	<label> Ville</label>:<br><input type="text" name="ville" value="ville"/><br>
	<label> Code postal</label>:<br><input type="text" name="code_postal" value="Code Postal"/><br><br>
 
 
<input type="submit" value="Enregistrer" />
   </form>	
        </div>
 
        <div class="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
.header
{
    width: 1350px;
    height: 90px; 
    background-color:#778899;
}
body
{
    background-image: url('mancity.jpg');
    opacity: 0.8;
}
.menu
{
    background-color:#B0C4DE;
    width: 1350px;
    height: 20px; 
    text-align: center;
    font-family: "Arial Black" ;
 
}
.corps
{
    width: 1350px;
    height: 420px; 
    background-color:#99ccff;
 
}
 
.menu_gauche{
    width: 180px;
    height: 420px; 
    background-color:#9999ff;
    float: left;  
    text-align:center;
 
}
 
.mon_compte
{
  width: 180px;  
  height: 20px;
  background-color:#3333ff;
 
}
.connexion
{
   width: 180px;  
   height: 180px;
   background-color: #9999ff;
}
.onglet
{
  width: 180px;  
  height: 20px;
  background-color:#3333ff;
  color:black;
 
}
.contenu_onglet
{
   width: 180px;  
   height: 200px;
   background-color: #9999ff;
}
.container
{
    width: 985px;
    height: 420px; 
    margin: 0 auto; /* ici pour centrer */
    background-color:#9999ff;
    text-align: center;
    font-size: 16px;
    font-family: "Arial Black" ;
 
 
}
.menu_droite
{
    width: 180px;
    height: 420px; 
    background-color:#9999ff;
    float: right;
}
.footer
{
    width: 1350px;
    height: 120px; 
    background-color:#778899;
 
}
a:link
{
    text-decoration:none;
    color:#333333
}

**NoSmoking** · 31/01/2014, 19h47

très drôle pour ce commentaire.

ce n'est pas drôle c'est simplement du bon sens point.

Me voici confronté à un nouveau problème de formulaire je voudrais...

Si ton premier soucis est réglé, il faut considérer la discussion comme résolue et si un autre est à traiter merci d'ouvrir une nouvelle discussion.

Important :
Poser plusieurs questions dans un seul et même fil nuit grandement à la qualité du forum : notamment, lors d'une recherche, tout le contenu du fil n'est pas indiqué dans le titre, elle devient donc plus ardue à suivre.

Vous avez pu bénéficier de ce forum en posant vos questions, laissez la possibilité aux suivants de bénéficier des réponses en leur offrant un sujet moins dispersé.

Merci d'en tenir compte.

Centrage d'un container

Centrer un élément en CSS

Discussions similaires

Partager

Partager