1 pièce(s) jointe(s)
Positionnement de certains éléments flex box
Bonjour, je souhaiterais savoir si c'était possible de positionner différemment certains éléments avec la propriété FLEX.
Je souhaiterais mettre le TITRE un peu plus haut, et le bouton " Par ici " un peu plus haut également.
Est-ce possible avec Flex ou dois-je plutôt me tourner vers la propriété float pour ce genre de chose?
Je précise que j'ai utilisé display flex pour la mise en page de mon header ( un titre et un menu ) et pour la partie "main" qui contient l'image, un titre et un bouton.
Voir l'image ci dessous commentée avec les flèches pour comprendre ce que je souhaiterais faire et voir le code html et css de ma page d'essai sous l'image:
Pièce jointe 575931
Code:
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
| <!DOCTYPE html>
<html>
<head>
<title>Travel Agency</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<div class="conteneur_header">
<h1 class="titre">Travel Agency<span class="dot">.</span></h1>
<nav>
<ul>
<li><a href="#main">Acceuil</a></li>
<li><a href="#planification">Destinations</a></li>
<li><a href="#circuit">Circuits</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section id="main">
<div class="conteneur_main">
<h2>Organisez votre <br><span class="bold">voyage sur mesure</span></h2>
<a href="#" class="button1">Par ici</a>
</div>
</section>
<section id="planification">
</section>
<section id="circuit">
</section>
<section id="contact">
</section>
<footer>
</footer>
</body>
</html> |
Code:
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 117 118 119 120 121
| /**************REGLAGES GENERAUX************************/
*
{
margin:0;
padding:0;
font-family: arial,serif,sans-serif;
}
h2
{
text-transform: uppercase;
font-weight: normal;
font-size: 50px;
color: #6B696C;
text-align: center;
}
@font-face
{
font-family: "creteround";
src: url("/Users/florent/Desktop/projethtml/Crete_Round/CreteRound-Regular.ttf"),
url("/Users/florent/Desktop/projethtml/Crete_Round/CreteRound-Italic.ttf") ;
}
/**********PARTIE HEADER**********************************************************/
/* FORMATAGE DU TITRE */
.titre
{
font-family: creteround;
font-size: 45px;
color: #6B696C;
}
.dot
{
color: orange;
}
/*SUPPRESSION PUCE ET FORMATAGE DU MENU */
nav ul
{
list-style: none;
}
nav ul li a
{
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
color: #6B696C;
padding-right: 15px;
font-size: 15px;
}
nav ul li a:hover
{
color:black;
}
nav ul li
{
display: inline;
}
/**************************************/
.conteneur_header
{
display: flex;
height:100px;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
/*********************************PARTIE MAIN ************************************/
.bold
{
font-weight: bold;
}
.conteneur_main
{
background:url(/Users/florent/Desktop/projethtml/images/main.jpg) center;
height: 550px;
width: 100%;
display:flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
/*************BOUTON PAR ICI*********************/
.button1
{
display:block;
width:125px;
line-height:40px;
text-align:center;
vertical-align:middle;
background:#ff7700;
color:white;
border:none;
text-decoration:none;
border-radius: 10px;
}
.button1:hover
{
background:#ffa14f;
}
/******************************************************/ |
Je suis très débutant, certainement de nombreuses choses sont à reprocher sur ce code, n'hésitez-pas à me faire part de vos impressions..
Merci pour votre aide !