Alignement flexbox [débutant] par QuentinMarignier - page 1

Bonjour,

Je débute en programmation et me voilà déjà qui butte sur un problème depuis plusieurs heures sans comprendre mon erreur :

Dans mon <header> j'ai mis un titre <h1> et une <nav> qui correspond à des liens. J'aimerais pouvoir aligner les 2 deux sur une même colonne ainsi qu'obtenir un espacement égal entre le haut de page et le titre, le titre et mes liens, et enfin mes liens et le bas du header. Pourriez-vous me donner un petit indice ?

Le HTML

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style_book_page_principale.css" />
        <link rel="stylesheet" media="screen and (max-width: 760px)" href="style_book_page_principale_MINI.css" /> 
        <title>sitewebdelamort</title>
    </head>


    <body>
    	
    	
    	<header>

    		<! Titre de la page avec retour à la page principale quand on clique dessus> 
    		<h1 > <a href="book_page_principale.html">Site web de la mort</a> </h1>
    	

		<nav>
          	        <ul>
          	        <li><a href="book_page_work.html">Creations</a></li>
             	   	<li><a href="book_page_about.html">About Me</a></li>
             	   	<li><a href="book_page_contact.html">Contact Me</a></li>
           		</ul>
        	</nav>

    	</header>

Le CSS

body
{
	background-image: url("../images/background/blackbg.jpg");
	background-attachment: fixed;
}


header h1 a
{
	border: 2px solid red;
	text-decoration: none;
	font-size: 1em;
	font-family: poiretone;
	/*
	text-align: center, justify, right, left;
	*/
	color: #D4AF37;
	padding: 0;
	margin: 0;
}

nav ul 
{
	border: 2px solid green;
 	list-style-type:none;
	margin: 0;
 	padding: 0;
}

nav li 
{

 margin-left: 2em;
  margin-right: 2em;
  padding: 0;
}

nav a
{
	text-decoration: none;
	font-size: 0.6em;
	font-family: poiretone;
	color: #D4AF37;
	padding: 0;
	margin: 0;
}


header
{
	border: 2px solid blue;
   	background-image: url("../images/background/blackbg.jpg");
	display: flex;
	flex-direction: column;
	justify-content: center;
    align-content: center;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    margin: 0;
    padding: 0;
}

Il y a des margin: 0 et des padding:0 partout car j'ai testé pour voir ce que cela changeait (de même les
border ne sont la que pour m'aider) mais sans succès.

Visuellement, ça donne ça :

Merci d'avance pour votre aide !

-
Edité par QuentinMarignier 17 février 2020 à 18:32:08

Alignement flexbox [débutant]

Alignement flexbox [débutant]

Supprimer

Modérer

Signaler le message aux modérateurs