Bonjour.
Je cherche à créer des albums photo qui s affiche correctement sur tout les supports.
Le problème est le suivant mon menu s affiche bien sur mon ordinateur mais sur mon téléphone c'est une autre pair de manche..
Le menu hamburger que j'ai créer ne s 'affiche correctement qu'une fois qu'il a été cliqué. C'est à dire que on voit pas mon header autrement qu'aprés avoir cliqué sur le menu hamburger.
J'ai bien essayé de régler le problème avec différente IA mais rien n'y fait. Je précise que je suis débutant désolé si le soucis paraît simple et que je vous fais perdre un peu de temps mais moi je n'ai pas trouvé la solution malgré de longue heures à chercher la solution
.
voici le code :
Je cherche à créer des albums photo qui s affiche correctement sur tout les supports.
Le problème est le suivant mon menu s affiche bien sur mon ordinateur mais sur mon téléphone c'est une autre pair de manche..
Le menu hamburger que j'ai créer ne s 'affiche correctement qu'une fois qu'il a été cliqué. C'est à dire que on voit pas mon header autrement qu'aprés avoir cliqué sur le menu hamburger.
J'ai bien essayé de régler le problème avec différente IA mais rien n'y fait. Je précise que je suis débutant désolé si le soucis paraît simple et que je vous fais perdre un peu de temps mais moi je n'ai pas trouvé la solution malgré de longue heures à chercher la solution
.voici le code :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mes Albums Photos - Version Design Personnalisé</title>
<!-- Styles de base de lightGallery + Plugins (Miniatures & Téléchargement) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/css/lightgallery-bundle.min.css">
<style>
/* ========================================================
VOS STYLES CSS PERSONNALISÉS (INTÉGRÉS)
======================================================== */
body {
background-image : url('fond.jpg');
background-color : #440909;
margin: 0px;
margin-bottom : 10px;
font-family : "Trebuchet MS", "sans serif";
font-size: 14px;
color : white;
}
#header{
height : 112px;
background: url('header.jpg');
background-repeat : no-repeat;
background-color : #5c0e1b;
border : 1px solid #25060b;
margin: auto;
margin-top : 0px;
}
h1,h2,h3,h4{
border-left: 3px solid black;
border-bottom : 1px solid black;
border-radius: 4px;
box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.5);
padding-left: 4px;
width: 290px;
padding-bottom: 3px;
background: #701705;
background-position : right;
background-repeat: no-repeat;
color: white;
margin-top: 0px;
font-size: 14px;
}
#menu-toggle { display: none; }
/* ========== MENU RESPONSIVE ========== */
/* Bouton hamburger (caché sur grand écran) */
#menu-toggle {
display: none;
background: #680D15;
border: 1px solid #25060b;
border-radius: 4px;
padding: 8px 12px;
cursor: pointer;
position: absolute;
top: 10px;
right: 15px;
z-index: 200;
}
#menu-toggle span {
display: block;
width: 22px;
height: 2px;
margin: 5px 0;
background: #ffffff;
transition: 0.3s;
}
/* Version mobile */
@media (max-width: 700px) {
#menu-toggle {
display: block;
}
#menu {
display: none;
flex-direction: column;
width: 100%;
background-color: #680D15; /* couleur du menu */
border: 1px solid #25060b;
border-radius: 4px;
box-shadow: 3px 3px 8px rgba(0,0,0,0.5);
position: absolute;
top: 50px;
left: 0;
z-index: 150;
padding: 10px 0;
}
#menu.ouvert {
display: flex;
}
#menu dl {
width: 100%;
margin: 0;
border: none;
background-color: #701705; /* couleur des boutons */
border-bottom: 1px solid #25060b;
}
#menu dt {
height: auto;
padding: 12px 0;
font-size: 15px;
}
#menu dt a {
color: white;
text-decoration: none;
display: block;
}
#menu dt:hover {
background-color: #5c0e1b; /* couleur au survol */
}
}
#menu-toggle span {
display: block; width: 22px; height: 2px; margin: 5px 0;
background: #fff;
}
@media (max-width: 600px) {
#menu-toggle { display: block; }
#menu { display: none; flex-direction: column; }
#menu.ouvert { display: flex; }
}
#menu {
box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.5);
border-radius : 4px;
width: 100%;
font-family: "Arial";
font-size: 12px;
background-color: #680D15;
border: 1px solid #25060b;
height: 20px;
position: relative;
top: 96px;
margin-bottom: 96px;
left: -1px;
z-index: 100;
}
#menu dl {
background-color: #701705;
border-left: 1px solid black;
border-right: 1px solid black;
border-radius: 2px;
float: left;
width: 150px;
margin: 0px;
color: white;
margin-left: 25px;
}
#menu dt{
cursor: pointer;
text-align: center;
font-weight: bold;
color: white;
height: 19px;
}
#menu dd{
text-align : center;
color: white;
margin: 0;
padding: 0;
list-style-type: none;
}
#menu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
#menu li{
width: 107px;
height : 19px;
border: 1px solid #25060b;
border-top : 0px;
text-align: center;
color: white;
list-style-type: none;
padding: 0px;
padding-top: 4px;
}
#menu li a:hover{
padding-top: 1px;
text-align: center;
}
#menu li a, #menu dt a{
color: white;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover{ color: white; }
#menu dt a:hover{ color: white; }
#nav{
padding: 0;
height: 20px;
position: relative;
top : -30px;
left: 132px;
}
#navlist{
margin: 0px;
padding: 0px 0px;
display: block;
}
#navlist li{
list-style: none;
float: left;
border-right : 1px solid #bababa;
}
#nav a, #navlist li.extend{
margin: 0px;
display: block;
border-bottom: 1px solid black;
padding: 1px 6px;
text-decoration: none;
background: white;
font: normal 12px verdana, serif;
color: black;
}
#nav a:hover{
position : relative;
top : 1px;
z-index: 100;
}
#menu a#current{
padding: 0px 5px;
padding-top : 65px;
background: #651220;
border: 1px solid #25060b;
border-bottom : 0px;
color: black;
font-weight : bold;
height : 92px;
position : relative;
top : -22px;
z-index: 100;
}
#photo a{ text-decoration: none; }
#photo a:hover{ background: none; }
#photo a:span{ display: none; }
#photo a:hover span{
display: inline;
position : absolute;
top: 24px;
left: 22px;
width: 536px;
height: 304px;
background: none;
color: #efefd3;
}
div.contenu {
width: 98%;
border: 1px solid #25060b;
background: #651220;
padding: 4px;
padding-top: 15px;
padding-bottom: 12px;
color: white;
position: relative;
margin: 0 auto;
margin-top: 10px;
margin-bottom: 10px;
min-height: 550px;
box-sizing: border-box;
}
div.contenu ul { margin: 8px; padding: 8px; }
div.contenu li { margin-bottom: 6px; }
#foot {
border: 1px dashed #74474e;
background-color : #671926;
text-align : center;
color : black;
font-weight : bold;
margin-top : 50px;
padding : 8px;
}
/* ========================================================
STYLES PROPRES À LA GRILLE DES ALBUMS (ADAPTATIF MOBILE)
======================================================== */
.section-album {
margin-bottom: 40px;
}
.galerie-grille {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
margin-top: 15px;
}
.galerie-grille a {
display: block;
overflow: hidden;
border-radius: 6px;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
border: 1px solid #25060b;
}
.galerie-grille img {
width: 100%;
height: 150px;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.galerie-grille a:hover img {
transform: scale(1.05);
}
</style>
</head>
<body>
<!-- ZONE DE L'ENTÊTE -->
<div id="header">
<button id="menu-toggle" aria-label="Ouvrir le menu">
<span></span><span></span><span></span>
</button>
<div id="menu">
<dl>
<dt><a href="#ancres-album photo general">album general</a></dt>
</dl>
<dl>
<dt><a href="#ancres-album nature">album nature</a></dt>
</dl>
<dl>
<dt><a href="#ancres-album dessin">album dessin</a></dt>
</dl>
</div>
<!-- ZONE PRINCIPALE DE CONTENU (Reçoit vos albums) -->
<div class="contenu">
<!-- ALBUM 1 -->
<div id="ancres-album photo general" class="section-album">
<h2>album photo général</h2>
<div id="album-general" class="galerie-grille">
<a href="album_photo_general/1.jpg" data-src="album_photo_general/1.jpg">
<img src="album_photo_general/miniatures/1.jpg" alt=""loading="lazy" />
</a>
<a href="album_photo_general/2.jpg" data-src="album_photo_general/2.jpg">
<img src="album_photo_general/miniatures/2.jpg" alt="" loading="lazy"/>
</a>
<a href="album_photo_general/3.jpg" data-src="album_photo_general/3.jpg">
<img src="album_photo_general/miniatures/3.jpg" alt="" loading="lazy"/>
</a>
<a href="album_photo_general/4.jpg" data-src="album_photo_general/4.jpg">
<img src="album_photo_general/miniatures/4.jpg" alt="" loading="lazy" />
</a>
<a href="album_photo_general/5.jpg" data-src="album_photo_general/5.jpg">
<img src="album_photo_general/miniatures/5.jpg" alt="" loading="lazy"/>
</a>
<a href="album_photo_general/6.jpg" data-src="album_photo_general/6.jpg">
<img src="album_photo_general/miniatures/6.jpg" alt="" loading="lazy"/>
</a>
<a href="album_photo_general/7.jpg" data-src="album_photo_general/7.jpg">
<img src="album_photo_general/miniatures/7.jpg" alt="" loading="lazy"/>
</a>
<a href="album_photo_general/8.jpg" data-src="album_photo_general/8.jpg">
<img src="album_photo_general/miniatures/8.jpg" alt="" loading="lazy"/>
</a>
<a href="album_photo_general/9.jpg" data-src="album_photo_general/9.jpg">
<img src="album_photo_general/miniatures/9.jpg" alt="" loading="lazy"/>
</a>
<a href="album_photo_general/10.jpg" data-src="album_photo_general/10.jpg">
<img src="album_photo_general/miniatures/10.jpg" alt="" loading="lazy"/>
</a>
<a href="album_photo_general/11.png" data-src="album_photo_general/11.png">
<img src="album_photo_general/miniatures/11.png" alt="" loading="lazy"/>
</a>
</div>
</div>
<!-- ALBUM 2 -->
<div id="ancres-album nature" class="section-album">
<h2>album nature</h2>
<div id="album-nature" class="galerie-grille">
<a href="album_nature/1.jpg" data-src="album_nature/1.jpg">
<img src="album_nature/miniatures/1.jpg" alt="" loading="lazy"/>
</a>
<a href="album_nature/2.jpg" data-src="album_nature/2.jpg">
<img src="album_nature/miniatures/2.jpg" alt="" loading="lazy"/>
</a>
<a href="album_nature/3.jpg" data-src="album_nature/3.jpg">
<img src="album_nature/miniatures/3.jpg" alt="" loading="lazy"/>
</a>
<a href="album_nature/4.jpg" data-src="album_nature/4.jpg">
<img src="album_nature/miniatures/4.jpg" alt="" loading="lazy"/>
</a>
<a href="album_nature/5.jpg" data-src="album_nature/5.jpg">
<img src="album_nature/miniatures/5.jpg" alt="" loading="lazy"/>
</a>
<a href="album_nature/6.jpg" data-src="album_nature/6.jpg">
<img src="album_nature/miniatures/6.jpg" alt="" loading="lazy" />
</a>
<a href="album_nature/7.jpg" data-src="album_nature/7.jpg">
<img src="album_nature/miniatures/7.jpg" alt="" loading="lazy"/>
</a>
<a href="album_nature/8.jpg" data-src="album_nature/8.jpg">
<img src="album_nature/miniatures/8.jpg" alt="" loading="lazy"/>
</a>
<a href="album_nature/9.jpg" data-src="album_nature/9.jpg">
<img src="album_nature/miniatures/9.jpg" alt="" loading="lazy"/>
</a>
</div>
</div>
<!-- PIED DE PAGE INTERNE -->
<div id="foot">
© Mon Site Photo - Tous droits réservés
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/lightgallery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/plugins/thumbnail/lg-thumbnail.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/plugins/download/lg-download.min.js"></script>
<script>
// Options partagées (Miniatures + Téléchargement)
const optionsGalerie = {
speed: 500,
licenseKey: '0000-0000-000-0000',
plugins: [lgThumbnail, lgDownload],
download: true,
thumbnail: true,
showThumbByDefault: true
};
// Activation des galeries
lightGallery(document.getElementById('album_photo_general'), optionsGalerie);
lightGallery(document.getElementById('album_nature'), optionsGalerie);
</script>
<script>
document.getElementById('menu-toggle')
.addEventListener('click', function () {
document.getElementById('menu').classList.toggle('ouvert');
});
</script>
</body>
</html>