Bonjour.
Sur mon site j'ai positionné mon icone hamburger en haut à gauche. . je voudrais positionner le logo en haut à droite avec flexbox.
j'ai essayé row sur justify content et align items.
Le logo est collé à l'icone. voici le code
et la css
et le javascript
Modifié par edgard03 (27 May 2025 - 01:31)
Sur mon site j'ai positionné mon icone hamburger en haut à gauche. . je voudrais positionner le logo en haut à droite avec flexbox.
j'ai essayé row sur justify content et align items.
Le logo est collé à l'icone. voici le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="Description" content="site personnel d'edgard devaux , photos ,vidéos diaporama" />
<meta name="Keywords" content="photos vidéos diaporama" />
<meta name="robots" content="index,follow,all" />
<meta name="revisit-after" content="1 day" />
<meta name="identifier-url" content="http://www.edgard-devaux.org/" />
<meta name="verify-v1" content="BG85pVqGICDHKO00bW6dl5V5ToAIOdr91FDfeGE/DRE=" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>edgard devaux-site perso</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" type="image/x-icon" href="/monicone.ico" />
<link rel="icon" type="image/png" href="/monicone.png" />
</head>
<body>
<div class="page">
<p> </p>
<header>
<div class="btn">
<div class="hamburger"></div>
</div>
<p>e </p>
<img class="logo" src="edgard.gif" alt="edgard devaux" width="500" height="100" />
</header>
<nav class="menu">
<ul>
<li><a>mon menu</a></li>
<li class="titre"><a>rideau</a></li>
</ul>
</nav>
<script src="script.js"></script>
<p> </p>
<div class="conteneur">
<p> </p>
<h1>«Observer,analyser,synthétiser,s'adapter,agir et réagir»
<br />telle est ma devise.</h1>
<p> </p>
<p align="center">
<img src="jacquemart.jpg"
srcset="jacquemart-small.jpg 300w,
jacquemart.jpg 500w,
jacquemart-large.jpg 1000w"
sizes="(min-width: 300px) and (max-width: 500px ) 300px,(min-width: 501px) and (max-width: 1299px) 500px,
(min-width: 1300px) 1000px, 100vw"
alt="jacquemart-moulins03"/>
</p>
<p> </p>
<h2>«Avec de la publicité un journal n'est pas vraiment libre»<br />
(moi même <img src="smiley_1273.gif" width="32" height="32" alt="rires"/> )</h2>
<p> </p>
<p class="style2">Sur mon site perso je vous propose de partager mes passions :
<br />voyages ,informatique,photos.</p>
<p> </p>
<p> </p>
<p align="center"><img src="mail.gif" alt="e mail" width="141" height="85" /></p>
<p> </p>
<p class="style2" />edgard.devaux@gmx.fr</p>
<p> </p>
<p> </p>
<p align="center"><img src="index.jpeg" width="70" height="45" alt="logo html5" /></p>
<p> </p>
<p> </p>
</div>
</div>
</body>
</html>et la css
header {
display: flex;
justify-content: row;
align-items: row;
margin-top: 25px;
margin-bottom: 15px;
}
header img .logo {
display:flex;
margin-right: 15px;
position: relative;
}
.btn {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
cursor: pointer;
transition: 0.5s ease-in-out;
position: relative;
background-color: yellow;
border: 1px solid black;
border-radius: 10px;
margin-left: 15px;
}
.hamburger {
width: 80px;
height: 7px;
background-color: black;
transition: 0.25s ease-in-out;
border-radius: 10px;
}
.hamburger::before,
.hamburger::after {
content: "";
position: absolute;
width: 80px;
height: 7px;
background-color: black;
transition: 0.5s ease-in-out;
border-radius: 10px;
}
.hamburger::before {
transform: translateY(-20px);
}
.hamburger::after {
transform: translateY(20px);
}
.open .hamburger {
background-color: transparent;
}
.open .hamburger::before {
transform: rotate(-135deg);
}
.open .hamburger::after {
transform: rotate(135deg);
}
.menu {
background-color: yellow;
border: 1px solid black;
border-radius: 10px;
width: 150px;
position: fixed;
display : flex;
opacity: 0;
transition: 0.3s ease-in-out;
transform: translateX(-150px);
pointer-events: none;
}
.titre {
background-color: red;
}
.menu-open {
opacity:1;
transition: 0.3s;
transform: translateX(10px);
pointer-events: all;
}
.logo {
text-align: right;
margin-right: 15px;
display: flex;
flex-direction: row;
}
.page {
background-color: red;
max-width: 1500px;
margin-left: auto;
margin-right: auto;
}
.conteneur {
background-color: red;
}
et le javascript
let isMenuOpen = false;
const menuButton = document.querySelector(".btn");
const menu = document.querySelector(".menu");
menuButton.addEventListener("click", () => {
isMenuOpen = !isMenuOpen;
if(isMenuOpen){
menuButton.classList.add("open");
menu.classList.add("menu-open");
} else {
menuButton.classList.remove("open");
menu.classList.remove("menu-open");
}
});
Modifié par edgard03 (27 May 2025 - 01:31)
