Partage

centrer un header

comment centrer un header

19 mars 2017 à 11:21:01

Salut !!

je suis entrain de créer un site mais je ne sais pas comment centrer son header se header contient des liens de navigation et le logo. le logo est en left et le menu de navigation est en right avec un justify content space between :

nav
{
    display: flex;
    justify-content: space-between;
}

voilà tout s'im vous plait aidez moi

Merci d'avance pour votre réponse rapide et pour votre explication

kev27

19 mars 2017 à 12:54:40

Salut,

Tu demande de l'aide pour centrer ton header et tu présente le code de ta nav (Pas très logique)

Quand tu dit centrer ton header tu parle du contenu du header ou du block complet en imaginant qu'il ne fasse pas 100% de la largeur ?

Montre un visuel de ce que tu veut faire .

La fainéantise est un vilain défaut

Anonyme

19 mars 2017 à 13:12:00

Bonjour...

Alors pour ton cas essaye de mettre ce code :

header{
    width: 300px;
    margin: 0 auto;
}

Sachant qu'il faut mettre un width défini pour que le margin auto fonctionne !

-
Edité par Anonyme 19 mars 2017 à 13:12:45

H1800

19 mars 2017 à 18:43:40

bah je veux centrer tous le block et il prend 80% de largeur

je viens d'essayer la proposition de rayan bsvmais malhereusement même le fond a disparu et il n'est pas centrer

je vais vous copier mon code css et html:

@font-face {
    font-family: 'kaushan_scriptregular';
    src: url('fonts/kaushanscript-regular-webfont.woff2') format('woff2'),
         url('fonts/kaushanscript-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
h1
{
	color: #ffc400;
	font-size: 3em;
	text-align: center;
}
a
{
	color: black;
	font-size: 1em;
}
ul
{
	list-style-type: none;
	display: flex;
    justify-content: space-between;
}
nav
{
	position: absolute;
	top: 40px;
	right: 150px;
	left: 500px;
	flex: 1;
}
section
{
	text-align: center;
}
a:link 
{
 	text-decoration:none; 
}
ul a:hover
{
	/*color: #717100;
	font-size: 1.2em;*/
	text-decoration: underline;
}
ul a
{
	color: #000000;
	font-size: 1em;
}
a
{
	color: orange;
	text-decoration: underline;
}
a:focus
{
	/*color: #717100;
	font-size: 1.1em;*/
	text-decoration: underline;
}
body
{
	background: url('fond.png');
}
html
{
	font-family: 'kaushan_scriptregular';
}
p
{
	color: #0040FF;
	background:url("fonds.png");
	padding-right: 2em;
	padding-left: 2em;
	text-align: center;
	font-size: 1.5em;
	border-radius: 20px;
}
.toutelapage
{
	width: auto;
	position: absolute;
	top: 200px;
	right: 150px;
	left: 150px;
}
.ronde
{
	height: 100px;
	width: 100px;
	border-radius: 50px;
	background-image: url("fonds.png");
}
.entête
{
	background-image: url('fondss.png');
	box-shadow: 0px 8px 50px black;
	position: fixed;
	z-index: 2;
	top: 0px;
	left:auto;
	right:auto;
	margin : 0 auto;
	display: block;
	max-width: 1000px;
	height: 100px;
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 50px;


}
.logofinal-
{
	position: absolute;
	bottom: 10px;
	left: 100px;
}

html:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="teststylecss.css" />
        <script type="text/javascript" src="codejavascript.js"></script>
        <title>Sauvons Apis mellifera</title>
        <meta name="description" content="Sauvons les abeilles. Les abeilles sont en voie de disparution ils ont même entrer dans la liste rouge alors il faut les aider. Un message pour tous les être humain : sauvez les abeilles" />
        <link rel="icon" type="image/png" href="favicon__.png" />
    </head>

    <body>
      <header class="entête">
          <a href="#accueil" title="notre logo qui menne à l'accueil"><img src="logofinal--.png" class="logofinal-" alt="notre logo"></a>
            <nav>
                <ul>
                  <li><a href="#accueil" title="l'acueil de notre site">Accueil</a></li>
                  <li><a href="#notresociété" title="La présentation de notre Société">Notre Société</a></li>
                  <li><a href="#nosarticles" title="Tous nos articles">Nos Articles</a></li>
                  <li><a href="#notreéquipe" title="Notre équipe">Notre Équipe</a></li>
                  <li><a href="#nouscontacter" title="Contactez nous">Nous Contacter</a></li>
                </ul>
            </nav>
        </header>
      <div class="toutelapage">
        <section>
          <img src="image_de_fond.jpg" title="Image De Sauvons Les Abeilles Du Monde" style="width: 900px; height: 400px;" alt="notre photo">
        </section>
        <br>
        <br>
        <br>
          <div id="notresociété">
            <article>
              <h1>Sauvons Les Abeilles Du Monde<br></h1><br>
                <p><br>Sauvons Les Abeilles Du Monde est une communauté qui vous enseigne l'apiculture par des articles pédagogues et qui  cherche à vous convaincre à sauver les abeilles qui sont des épèces menacé(<a href="#nosarticles" title="vous ne srez pas déçus">voir l'article</a>)<br><br></p><br><br>
                <div class="ronde">
                </div>
            </article>
          </div>
              <script>
                  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

                  ga('create', 'UA-89525914-2', 'auto');
                  ga('send', 'pageview');
                
              </script>
        </div>
    </body>
    <audio src="son.mp3" autoplay>
    
    </audio>
</html>

-
Edité par H1800 19 mars 2017 à 18:48:03

Merci d'avance pour votre réponse rapide et pour votre explication

Anonyme

19 mars 2017 à 19:42:17

tu veux centrer quoi comme truc?

H1800

22 mars 2017 à 12:49:59

je veux centrer dans le code css entête mais je n'ai pas réussi je demande de l'aide s'il vous plait

Merci d'avance pour votre réponse rapide et pour votre explication

mrbonhomme84

22 mars 2017 à 14:47:39

Bonjour,

j'essaye de résoudre ton problème, mais je ne comprend pas trop ce que tu veux :|

Pour moi le header est centrer en haut, les liens sont décaler a cause de l'image a coté du nav.

Essaye de mieux m'expliquer

Voila, j'ai modifier le css, dis moi si c'est le résultat attendu !

@font-face 
{
    font-family: 'kaushan_scriptregular';
    src: url('fonts/kaushanscript-regular-webfont.woff2') format('woff2'),
         url('fonts/kaushanscript-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

h1
{
    color: #ffc400;
    font-size: 3em;
    text-align: center;
}
    
a
{
    color: black;
    font-size: 1em;
}
    
ul
{
    list-style-type: none;
    display: flex;
    justify-content: space-between;
}

section
{
    text-align: center;
}
a:link
{
    text-decoration:none;
}
ul a:hover
{
    /*color: #717100;
    font-size: 1.2em;*/
    text-decoration: underline;
}
ul a
{
    color: #000000;
    font-size: 1em;
}
a
{
    color: orange;
    text-decoration: underline;
}
a:focus
{
    /*color: #717100;
    font-size: 1.1em;*/
    text-decoration: underline;
}
body
{
    background: url('fond.png');
}
html
{
    font-family: 'kaushan_scriptregular';
}
p
{
    color: #0040FF;
    background:url("fonds.png");
    padding-right: 2em;
    padding-left: 2em;
    text-align: center;
    font-size: 1.5em;
    border-radius: 20px;
}
.toutelapage
{
    width: auto;
    position: absolute;
    top: 200px;
    right: 150px;
    left: 150px;
}
.ronde
{
    height: 100px;
    width: 100px;
    border-radius: 50px;
    background-image: url("fonds.png");
}
.entete
{
    background-image: url('fondss.png');
    box-shadow: 0px 8px 50px black;
    z-index: 2;
    top: 0px;
    width: 80%;
    margin : auto;
    height: 100px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
 
 
}
.logofinal-
{
    position: absolute;
    bottom: 10px;
    left: 100px;
}

-
Edité par mrbonhomme84 22 mars 2017 à 14:59:54

H1800

22 mars 2017 à 18:25:17

même quand j'ai essayer votre code css le headre semet à gauche. moi je peux center le header( pardon je n'ai pas expliquer avant) mais quand il devient l'écran plus petit que l'écran de mon ordinateur le menu de nav. sort du block du header.j'espère que je vous avez expliquer aussi je colle l'aperçu:

l'image si dessus c'est quand je paeux la centrer mais l'image si dessous est quand le text sort du block:

et même quand je me déplace dans le site la barre reste fixe à l'écran et ceci est a cause de poisition: fixed;

je vous remercie d'avance de pour votre retour

-
Edité par H1800 22 mars 2017 à 18:28:33

Merci d'avance pour votre réponse rapide et pour votre explication

mrbonhomme84

23 mars 2017 à 16:43:25

Bonjour,

Je ne comprend pas trop du fait de vos phrases mal formulées. Pour la première image c'est le résultat attendu c'est ça ? Et la deuxième c'est lorsque vous rapetissez la fenêtre, le texte sort du header ?

Pouvez vous me renvoyer votre code dans l'état où il est en ce moment si vous n'avez toujours pas trouvez la solution ?

Bonne journée !

H1800

23 mars 2017 à 18:14:24

oui bien sûr le code css:

/*la couleur du logo  #717100    la couleur de l'écriture   #ffc400*/
@font-face {
    font-family: 'kaushan_scriptregular';
    src: url('fonts/kaushanscript-regular-webfont.woff2') format('woff2'),
         url('fonts/kaushanscript-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
h1
{
	color: #ffc400;
	font-size: 3em;
	text-align: center;
}
a
{
	color: black;
	font-size: 1em;
}
ul
{
	list-style-type: none;
	display: flex;
    justify-content: space-between;
}
nav
{
	position: absolute;
	top: 40px;
	right: 150px;
	left: 500px;
	flex: 1;
}
section
{
	text-align: center;
}
a:link 
{
 	text-decoration:none; 
}
ul a:hover
{
	/*color: #717100;
	font-size: 1.2em;*/
	text-decoration: underline;
}
ul a
{
	color: #000000;
	font-size: 1em;
}
a
{
	color: orange;
	text-decoration: underline;
}
a:focus
{
	/*color: #717100;
	font-size: 1.1em;*/
	text-decoration: underline;
}
body
{
	background: url('fond.png');
}
html
{
	font-family: 'kaushan_scriptregular';
}
p
{
	color: #0040FF;
	background:url("fonds.png");
	padding-right: 2em;
	padding-left: 2em;
	text-align: center;
	font-size: 1.5em;
	border-radius: 20px;
}
.toutelapage
{
	width: auto;
	position: absolute;
	top: 200px;
	right: 150px;
	left: 150px;
}
.ronde
{
	height: 100px;
	width: 100px;
	border-radius: 50px;
	background-image: url("fonds.png");
}
.entête
{
	background-image: url('fonds.png');
	box-shadow: 0px 8px 50px black;
	position: fixed;
	z-index: 2;
	top: 0px;
	left: 50px;
	right: 50px;
	width: auto;
	height: 100px;
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 50px;


}
.logofinal-
{
	position: absolute;
	bottom: 10px;
	left: 100px;
}
::selection 
{
  	background-color: rgba(0,96,250,0.30);
}
::-moz-selection
{
  	background-color: rgba(0,96,250,0.30);
}

voilà tous le code il faut d'après moi changer: entête et nav et ul mais je ne sais pas comment s'il vous plait aidez moi.

aussi je veux que le width du header prend 80% de la largeur et la page prend 65% de la largeur mais quand j'écris % ca ne marche pas et le header revient à gauche.

Merci

Merci d'avance pour votre réponse rapide et pour votre explication

mrbonhomme84

24 mars 2017 à 8:59:23

Bonjour,

J'ai (je pense) avoir résolu ton problème, dis moi si ça te conviens

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="teststylecss.css" />
        <script type="text/javascript" src="codejavascript.js"></script>
        <title>Sauvons Apis mellifera</title>
        <meta name="description" content="Sauvons les abeilles. Les abeilles sont en voie de disparution ils ont même entrer dans la liste rouge alors il faut les aider. Un message pour tous les être humain : sauvez les abeilles" />
        <link rel="icon" type="image/png" href="favicon__.png" />
    </head>
 
    <body>
      <header class="entête">
          <li><a href="#accueil" title="notre logo qui menne à l'accueil"><img src="logofinal--.png" class="logofinal-" alt="notre logo"></a></li>
          <div id="menu">
              <ul>
                  <li><a href="#accueil" title="l'acueil de notre site">Accueil</a></li>
                  <li><a href="#notresociété" title="La présentation de notre Société">Notre Société</a></li>
                  <li><a href="#nosarticles" title="Tous nos articles">Nos Articles</a></li>
                  <li><a href="#notreéquipe" title="Notre équipe">Notre Équipe</a></li>
                  <li><a href="#nouscontacter" title="Contactez nous">Nous Contacter</a></li>
              </ul>
          </div>
        </header>
        <div class="toutelapage">
            <section>
                <img src="image_de_fond.jpg" title="Image De Sauvons Les Abeilles Du Monde" style="width: 900px; height: 400px;" alt="notre photo">
            </section>
            <br>
            <br>
            <br>
            <div id="notresociété">
                <article>
                    <h1>Sauvons Les Abeilles Du Monde<br></h1><br>
                    <p><br>Sauvons Les Abeilles Du Monde est une communauté qui vous enseigne l'apiculture par des articles pédagogues et qui  cherche à vous convaincre à sauver les abeilles qui sont des épèces menacé(<a href="#nosarticles" title="vous ne srez pas déçus">voir l'article</a>)<br><br></p><br><br>
                    <div class="ronde">
                    </div>
                </article>
            </div>
            <script>
                (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
                ga('create', 'UA-89525914-2', 'auto');
                ga('send', 'pageview');
            </script>
        </div>
    </body>
    <audio src="son.mp3" autoplay />
</html>

/*la couleur du logo  #717100    la couleur de l'écriture   #ffc400*/
@font-face {
    font-family: 'kaushan_scriptregular';
    src: url('fonts/kaushanscript-regular-webfont.woff2') format('woff2'),
         url('fonts/kaushanscript-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
    
h1
{
    color: #ffc400;
    font-size: 3em;
    text-align: center;
}
    
a
{
    color: black;
    font-size: 1em;
}
    
ul
{
    list-style-type: none;
    display: flex;
    justify-content: space-between;
}

#menu
{
    width: 80%;
    margin: auto;
}

section
{
    text-align: center;
}
    
a:link
{
    text-decoration:none;
}
    
ul a:hover
{
    /*color: #717100;
    font-size: 1.2em;*/
    text-decoration: underline;
}
    
ul a
{
    color: #000000;
    font-size: 1em;
}
    
a
{
    color: orange;
    text-decoration: underline;
}
    
a:focus
{
    /*color: #717100;
    font-size: 1.1em;*/
    text-decoration: underline;
}
    
body
{
    background: url('fond.png');
}
    
html
{
    font-family: 'kaushan_scriptregular';
}
    
p
{
    color: #0040FF;
    background:url("fonds.png");
    padding-right: 2em;
    padding-left: 2em;
    text-align: center;
    font-size: 1.5em;
    border-radius: 20px;
}
    
.toutelapage
{
    width: auto;
    position: absolute;
    top: 200px;
    right: 150px;
    left: 150px;
}
    
.ronde
{
    height: 100px;
    width: 100px;
    border-radius: 50px;
    background-image: url("fonds.png");
}
    
.entête
{
    background-image: url('fonds.png');
    box-shadow: 0px 8px 50px black;
    position: fixed;
    z-index: 2;
    top: 0px;
    left: 50px;
    right: 50px;
    width: auto;
    height: 100px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    border: 2px solid black;
    width: 80%;
    margin: auto;
}

.logofinal-
{
    position: absolute;
    bottom:20px;
    left: 50px;
    width: 70px;
    height: 70px;
}
    
::selection
{
    background-color: rgba(0,96,250,0.30);
}

::-moz-selection
{
    background-color: rgba(0,96,250,0.30);
}

-
Edité par mrbonhomme84 24 mars 2017 à 11:07:11

H1800

24 mars 2017 à 17:07:46

OUI mais pardon le menu n'est pas à gauche il est center avec le logo et il ya un point noir j'ai essayer de l'enlever mais ca ne marche pas voilà la captire d'écran:

cette image représente le logo et le menu et moi je veux que le menu soit à gauche avec un space-between et le logo à gauche merci pour votre réponse

Merci d'avance pour votre réponse rapide et pour votre explication

mrbonhomme84

27 mars 2017 à 10:43:16

Bonjour,

Il faut que le logo soit en dehors de la zone plus foncée ?

H1800

27 mars 2017 à 13:23:19

n le logo reste à sa place mais le menu ce place à droite avec un space-between comme la premiere photo . il ya de l'espace entre le menu et l'autre menu et le logo est placé à gauche: et merci une autre fois

Merci d'avance pour votre réponse rapide et pour votre explication