28111 sujets

CSS et mise en forme, CSS3

Mettre ma nav en li centree dans la page

Bonjour,

j'aimerais mettre ma barre de navigation qui est en ul li centree sur ma page, j'ai beau essaye de mettre align-text:center; ça ne marche pas.
Voici mon HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>xxxxxx</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all"/>
</head>
<body>
<header class="header">
<h1 class="header-title">xxxxxx</h1>
<nav class="header-nav">
<ul>
<li><a href="Performances">Performances</a></li>
<li><a href="About">About Us</a></li>
<li><a href="Prices">Prices</a></li>
<li><a href="Contact">Contact</a></li>
</ul>
</nav>
<img src="#" alt="">
</header>

et mon CSS:
body{
margin: 0;
}

.header{
background:grey;
height:auto;
font-family: sans-serif;
text-align:center;
}

.header img{
width:100%;
height:auto;
}

.header-title{
margin-top:25px;
font-size:40px;
color:white;
}

.header-nav{
display:inline;
margin:50px 0;
font-size:20px;
width:100%;
}

.header-nav a{
padding:0 30px;
}

.main-image{
width:100%;
}

ul{
display:flex;
list-style-type:none;
padding:0px;
}

a{
text-decoration:none;
}

Merci de votre aide
Salut, utilise les balises code pour simplifier la lecture de ton code ^^
Modifié par Efeelios (25 Oct 2019 - 20:15)
<!DOCTYPE html>
<html  lang="en">
<head>
    <meta charset="UTF-8">
    <title>xxxxxx</title>
    <link rel="stylesheet" type="text/css" href="style.css" media="all"/>
    <link href="https://fonts.googleapis.com/css?family=Amatic+SC:400,700&display=swap" rel="stylesheet">
</head>
<body>
  <header class="header">
    <h1 class="header-title">xxxxx</h1>
      <nav class="header-nav">
        <ul>
          <li><a href="Performances">Performances</a></li>
          <li><a href="About">About Us</a></li>
          <li><a href="Prices">Prices</a></li>
          <li><a href="Contact">Contact</a></li>
        </ul>
      </nav>
    </header>


et 

@font-face{
    font-family:"Amatic SC", cursive, serif;
    src:url("https://fonts.googleapis.com/css?family=Amatic+SC:400,700&display=swap") format("truetype");
    font-weight: normal;
	font-style: normal;
  } 

  body{
    background-color: black;
    font-family:Amatic SC, sans-serif;
    margin: 0;
  }
  
  .header{
    background-image:url("https://images.unsplash.com/photo-1428891786829-23a17f38b8f0?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1000&amp;q=80");
    background-position:top, fixed;
    background-size:100%;
    height:800px;
    font-family:Amatic SC, sans-serif;
    text-align:center;
  }
  
  .header-title{
    float: left;
    margin:22px 30px 0px 50px;
    font-size:30px;
    color:white;
  }
  
  .header-nav{
    text-align: center;
    font-size:20px;
    width:100%;
  } 
  
  .header-nav a{
    float: right;
    padding: 30px 30px;
    color:white;
  }

  .header-nav a:hover{
    text-decoration:underline; 
  }
  
  ul{
    display:flex;
    justify-content:space-between;
    list-style-type:none;
    padding:0px 0px;
    margin:0px;
  }

  a{
    text-decoration:none;
  }
  
  h2, h3{
    font-family:"Amatic SC", cursive, serif;
    color:white;
    text-align:center;
  }
Du coup j'ai change ma disposition je ne vais plus mettre au le titre et la barre de navigation centree, car j'ai essayer differentes options et rien ne marche.
La je veux mettre tout sur une ligne, avec le titre du site a gauche, et la barre de nav a droite, par contre je n'arrive pas regler les espaces entre les differents elements de mon nav?

Bon par contre je voudrais quand meme savoir si il y aurait une piste pour le titre et la barre de nav en dessous et centre aussi Smiley smile
Bonjour,

de ce que je vois, " text-align: center;" aligne le texte du menu, pas le .header-nav dans la page.
Voici ce que j'ai mis sur mon nav :
.nav {
	position: -webkit-fixed; /* Pour Safari */
	position: fixed;  
	top: 0;
	right: 0;
	left: 0;
	opacity:1;
	text-align: center;
	color: #FFF;
	z-index: 9000;
	}


Mais mon container est sous grid, peut-être que ça change tout.
En passant, encore une personne qui va chercher sur Google des fontes qui pourraient être sur place ! Mais c'est un choix, que fait presque tout le monde.

Bonne journée.
Salut archin,
Tu as une maquette, une image du résultat souhaité. Je ne vois pas trop du coup comment tu souhaites afficher tes différents éléments.
On pourra t'orienter suite à ça vers une solution d'intégration.

Dans tous les cas, tu n'auras pas à utiliser un positionnement absolu ou fixe.
Alors comme dit vu que j'ai pas reussi a centrer le nom de mon site et la barre de navigation, du coup je les ai mis sur la meme ligne, par contre je n'arrive pas regler les espaces entre les differents elements de mon nav...

le HTML:
<!DOCTYPE html>
<html  lang="en">
<head>
    <meta charset="UTF-8">
    <title>XXXXXX</title>
    <link rel="stylesheet" type="text/css" href="style.css" media="all"/>
    <link href="https://fonts.googleapis.com/css?family=Amatic+SC:400,700&display=swap" rel="stylesheet">
</head>
<body>
  <header class="header">
    <h1 class="header-title">XXXXXX</h1>
      <nav class="header-nav">
        <ul>
          <li><a href="Performances">Performances</a></li>
          <li><a href="About">About Us</a></li>
          <li><a href="Prices">Prices</a></li>
          <li><a href="Contact">Contact</a></li>
        </ul>
      </nav>
    </header>


Et le CSS:
@font-face{
    font-family:"Amatic SC", cursive, serif;
    src:url("https://fonts.googleapis.com/css?family=Amatic+SC:400,700&display=swap") format("truetype");
    font-weight: normal;
	  font-style: normal;
  } 

  body{
    background-color: black;
    font-family:Amatic SC, sans-serif;
    margin: 0;
  }
  
  .header{
    background-image:url("https://images.unsplash.com/photo-1428891786829-23a17f38b8f0?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1000&amp;q=80");
    background-position:top, fixed;
    background-size:100%;
    height:800px;
    font-family:Amatic SC, sans-serif;
    text-align:center;
  }
  
  .header-title{
    float: left;
    margin:22px 30px 0px 50px;
    font-size:30px;
    color:white;
  }
  
  .header-nav{
    text-align: center;
    font-size:20px;
    width:100%;
  } 
  
  .header-nav a{
    float: right;
    padding: 30px 30px;
    color:white;
  }

  .header-nav a:hover{
    text-decoration:underline; 
  }
  
  ul{
    display:flex;
    justify-content:space-between;
    list-style-type:none;
    padding:0px 0px;
    margin:0px;
  }

  a{
    text-decoration:none;
    color:white;
  }


Et voila un aperçu de ce que j'ai du coup en ce moment: (en document joint)
Sujet clos
Aller à