Déplacement de bloc en css

AskaL

Premium
Inscription
14 Janvier 2015
Messages
1 531
Réactions
136
Points
9 836
Bonsoir, je débute dans la programmation web, et a cet instant même je voudrais déplacer mon titre principal, mon menu et mon séparateur, et le lol (en gros ce qu'il y a dans mon header). Mais je n'y arrive pas.. Merci de votre aide
Mon code css :
Code:
/*Définition des polices*/

@font-face {
    font-family: 'ambleregular';
    src: url('police/Amble-Regular-webfont.eot');
    src: url('police/Amble-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('police/Amble-Regular-webfont.woff2') format('woff2'),
         url('police/Amble-Regular-webfont.woff') format('woff'),
         url('police/Amble-Regular-webfont.ttf') format('truetype'),
         url('police/Amble-Regular-webfont.svg#ambleregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*Eléments principaux de la page*/

body
{
    background: url('image/fond2.png') no-repeat;
    background-attachment: fixed;
}

#bloc_page
{
    width: 900px;
    margin: auto;
    background: ;
}

/*Header*/

header
{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border: 3px solid black;
}

#titre_principal
{
    display: flex;
    font-family: 'ambleregular', impact;
    font-size: 1.5em;
    flex-direction: column;
    color: white;
}

#logo
{
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

#logo img
{
    width: 189px;
    height: 190px;
}

/*Navigation*/
nav ul
{
    list-style-type: none;
    display: flex;
}

nav li
{
    margin-right: 15px;
}

nav a
{
    font-size: 1.3em;
    color: black;
    padding-bottom: 3px;
    text-decoration: none;
    color: gray;
}

nav a:hover
{
    color:#760001;
    border-bottom: 3px solid #760001;
}


/*Section*/
#titre_secondaire
{
    text-align: center;
    font-family: 'ambleregular', impact;

}

Mon code html :
Code:
<DOCTYPE html>
<html>
      
      <head>
           <meta charset="utf-8" />
           <link rel="stylesheet" href="style.css" />
           <title>Advent Official</title>
      </head>

      <body>
          <div>
              <div id="bloc_page">
                  <header>
                      <div id="titre_principal">
                          <div id="logo">
                              <img src="image/MacsotteAdvent.png" alt="Logo de la AdvenTeam" />
                              <h1>Advent</h1>
                          </div>
                      </div>
                  
                              <nav>
                                   <ul>
                                      <li><a href="#">Accueil</a></li>
                                      <li><a href="#">Joueurs</a></li>
                                      <li><a href="#">Placements</a></li>
                                      <li><a href="#">Date</a></li>
                                  </ul>
                             </nav>
                  </header>


                  <section>
                      <article>
                          <div id="titre_secondaire">
                              <h2>Présentation de la Team Advent</h2> </div>
                              <p>Advent est une équipe esport Français présente sur le jeu League of Legends. Fondée en 2017, elle est exclusivement française. Actuellement, Askal est l'adc et fondateur,  est support, BurdHeros est au mid, Unhin toplaner, et Torpak joue jungler. Avec originellement un niveau silver, les ambitions de l'équipe sont grandes, et prévois de participer à de nombreux tournois, et faire croitre sa renommée. Il ne fut pas évident de trouver les bons membres fidèle au projet Advent, mais cela n'empèche pas l'équipe d'etre efficace quand il le faut.</p>
                    </article>
                </section>

                    <footer>
                        <div id="copyrate">
                            <p>Copyrate by Advent</p>
                        </div>
                    </footer>
                </div>
            </div>
        </body>
</html>

Merci de votre aide
 

AskaL

Premium
Inscription
14 Janvier 2015
Messages
1 531
Réactions
136
Points
9 836
Comme ça par exemple :
1512253611-d.png
 

AskaL

Premium
Inscription
14 Janvier 2015
Messages
1 531
Réactions
136
Points
9 836
Mais, je ne comprend pas, car je test plein de chose côté css et rien ne bouge.. Donc je ne comprend pas et je commence vraiment a perdre espoir et a me décourager, depuis hier je suis deçu je n'arête pas toujours rien..
 
Haut