La balise no-script Div interne ne s'affiche pas correctement

Question

Je souhaite afficher un avertissement de noscript lorsque les utilisateurs ont désactivé javascript, de la même manière que StackOverflow.

J'utilise cette html:

<noscript>  
    <div id="noscript-warning"> 
    Este sitio funciona mejor con JavaScript habilitado. Descubrí 
    <a href="">cómo habilitarlo.</a> 
    </div> 
</noscript> 

et ce css:

#noscript-warning 
{ 
    font-family: Arial,Helvetica,sans-serif; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    z-index: 101; 
    text-align: center; 
    font-weight: bold; 
    font-size: 12pt; 
    color: white; 
    background-color: #AE0000; 
    padding: 10px 0; 
    display: block;  
} 

#noscript-warning a 
{ 
    color: #FFFFC6; 
} 

#container 
{ 
    width: 98%; 
    margin: auto; 
    padding: auto; 
    background-color: #fff; 
    color: black; 
    border-style: solid; 
    border-color: #3E4F4F; 
    border-width: 1px 2px 2px 1px; 
    line-height: 130%; 
} 

où #container est le principal élément de contenu de mon modèle.

Lorsque l'étiquette noscript est visible, elle apparaît devant certains contenus. Je ne le veux pas, le contenu devrait être affiché en dessous de l'avertissement.

Comment puis-je faire cela?

Answer 1

Le problème est avec vous définissant position: fixed sur l'avertissement. Vous ne pouvez pas vraiment vous attendre à ce que le contenu de la page se déplace, puisque vous le fixez en haut de la fenêtre du navigateur. Que se passerait-il lorsque vous défileriez vers le bas? Le contenu de la page entière se réorganise pour contourner l'avertissement?

Voulez-vous que l'avertissement soit bloqué en haut de la fenêtre du navigateur, même s'il défile? Sinon, position: fixed n'est pas ce que vous cherchez.

Answer 2

Si vous voulez le comportement de la position: fixed ET devez pousser le contenu initial vers le haut, vous pouvez inclure un second div dans votre zone noscript. Donne cette visibilité div: cachée et d'une hauteur égale à la hauteur de la div avec position: fixe.