CSS: bannière fine en haut de la page (comme celle orange sur cette page)

Je dois mettre une fine bannière en haut de la page un peu comme la notification orange sur cette page. J'ai besoin qu'il soit absolument positionné, car lorsque vous cliquez dessus, il doit être déroulé (sur la page en cours, ne pas pousser la page en cours). La bannière doit étirer toute la largeur de la fenêtre, mais le contenu doit être au sein de 800px au milieu. Je l'ai déjà fait mais j'ai du mal avec le positionnement CSS de celui-ci.CSS: bannière fine en haut de la page (comme celle orange sur cette page)

Merci!

Source

2009-10-15 JD Isaacks

Voici un exemple. L'élément principal #banner s'étire en plein écran et est épinglé en haut de la fenêtre en utilisant position: absolute; top: 0; left: 0. Le width: 100% le fait s'étirer sur toute la largeur. Le #banner-content est l'endroit où vous mettez votre contenu. Ceci est centré et fixé à 800px de largeur. J'ai mis une bordure autour pour que vous puissiez voir.

Remarque: J'ai également 'réinitialisé' les marges et le remplissage de tous les éléments pour effacer le remplissage par défaut. Vous pouvez utiliser quelque chose comme Reset CSS d'Eric Meyer dans votre application finale.

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title>Test</title> 
    <style type="text/css" media="screen"> 
    * { 
     margin: 0; 
     padding: 0; 
    } 

    div#banner { 
     position: absolute; 
     top: 0; 
     left: 0; 
     background-color: #DDEEEE; 
     width: 100%; 
    } 
    div#banner-content { 
     width: 800px; 
     margin: 0 auto; 
     padding: 10px; 
     border: 1px solid #000; 
    } 
    div#main-content { 
     padding-top: 70px; 
    } 
    </style> 
</head> 

<body> 
    <div id="banner"> 
    <div id="banner-content"> 
    This is your banner text, centered and fixed at 800px in width 
    </div> 
    </div> 
    <div id="main-content"> 
    <p>Main page content goes here</p> 
    </div> 
</body> 
</html>

Source

2009-10-15 14:40:50 Olly

J'ai créé un violon pour cela tout en recherchant un problème similaire: http://jsfiddle.net/marvo/FJZfW/ – Marvo

#banner { 
    position: absolute; 
    top: 0px; 
    left: 0px; 

    margin: 0 auto; 
    text-align: center; 
} 

#banner_contents { 
    width: 800px; 
}

Doit être aussi simple que de faire deux divs ... le principal encapsule le contenu et le centre.

Source

2009-10-15 14:34:08 espais

Ceci ne répondra pas aux besoins de l'OP. Il va centrer le texte, mais pas le div interne. La marge extérieure: 0 auto est également redondante. – alex

CSS: bannière fine en haut de la page (comme celle orange sur cette page)

Répondre

Questions connexes