Bonjour, bonsoir,

J'ai un problème avec un site web que je doit rendre pour mes études,

j'ai eu beau chercher, je n'ai pas pu trouver de solution viable, c'est pourquoi je poste ce message ici.

Mon problème est que j'ai un site web vitrine statique avec un menu en position fixe qui cache mon contenu (car position:fixed sort le conteneur du flux normal),

Ma question serait existe-t-il une solution pour fixer mon menu sans le faire sortir du flux, ou, à minima, empecher que mon contenu passe dessous ?

Voici mon HTML :

 <header>
            <h1>Accueil</h1>
            <div id = "nav">
                <ul class = "menu">
                    <li><a href = "index.html">Accueil</a>
                    </li>
                    <li><a href = "#">Bilan personnel général</a>
                        <ul class = "sub-menu">
                            <li><a href = "monBilan.html">Mon bilan</a></li>
                        </ul>
                    </li>
                    <li><a href = "#">Bilan scolaire</a>
                        <ul class = "sub-menu">
                            <li><a href = "monParcours.html">Mon parcours</a></li>
                            <li><a href = "monRessenti.html">Mon ressenti</a></li>
                        </ul>
                    </li>
                    <li><a href = "#">Projet professionnel</a>
                        <ul class = "sub-menu">							
                            <li><a href = "projet2A.html">Mon Projet de deuxième année d'études</a></li>
                            <li><a href = "monStage.html">Mon stage</a></li>
                            <li><a href = "apresMonStage.html">Après le stage</a></li>
                            <li><a href = "aLongTerme.html">A long terme</a></li>
                            <li><a href = "mesMetiersEnvisages.html">Mes métiers envisagés</a></li>
                            <li><a href = "mesPoursuitesEnvisagees.html">Mes poursuites d'étude envisagées</a></li>
                        </ul>
                    </li>
                    <li><a href = "#">Réalisations</a>
                        <ul class = "sub-menu">							
                            <li><a href = "mesRealisations.html">Mes réalisations</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </header>

Et mon CSS associé :

/*header style*/
header{
    width : 100%;
    text-align : center;
    margin : auto;
    background : #1d890c;
    color : #ffc81d;
    position : absolute;
    top : 0;
    left : 0;
    right : 0;
}

Merci d'avance pour vos réponses.

Bonjour,

Mauvais forum

Le sujet est déplacé de la section Autres langages (VBA, Ruby,...) vers la section HTML / CSS

Pas d'urgence sur ce forum

Vous êtes sur un forum d'entraide, pas sur un site de service. Ici les intervenants vous répondent quand ils le veulent, s'ils le veulent, sans aucune obligation. Aussi, ce genre d'indications rendent le forum moins agréable à utiliser et moins équitable. De ce fait, les mentions de quelconque "urgence" ne sont pas admises sur ce forum. La meilleure façon d'avoir de l'aide rapidement ici est de fournir toutes les informations nécessaires et de les présenter correctement. N'hésitez pas à lire les règles épinglés en haut des sections du forum, elles indiquent généralement ce qui est nécessaire.

Salut,

un simple padding-top ou margin-top sur body de la hauteur approximative de ton header devrait suffire.

Tu dis que ton menu est en fixed mais dans ta CSS c'est absolute.
Et les width:100% et margin:auto sont complètement inutile dans ton cas.

PS : puisque tu utilise <header> pourquoi ne pas utiliser <nav > aussi ?

Salut,

déjà merci pour ta reponse,

mais j'ai trouvé une solution entre temps.

ps : j'avais remplacé nav a des fins de test