Barre de menu flottante

04 juil. 2008, 10:04

Salut

,

J'ai découvert sur le site de HyWaN le principe de la barre flottante et ça m'intéresse. Juste un truc: comment le refaire? Pasque les résultats Google, c'est un peu faible, pour dire!

I'm counting on you, comme diraient les British.

Damien

04 juil. 2008, 10:15

Loin de moi l'idée de répondre à la place d'HyWan, mais je pense qu'il suffit pour faire cela d'avoir un div en position fixed avec les coordonnées du haut à 0px...
Aussi avoir un z-index assez haut pour que le div reste toujours au dessus et le tour est joué...

Exemple dans ton css (ou balise style) :

Code : Tout sélectionner

#texte_flottant {
    position: fixed;
    top: 0px;
    z-index: 100;
	background-color:#000000;
	color:#FFFFFF;
}

Dans ta page :

Code : Tout sélectionner

<div id="texte_flottant">
Ce texte sera toujours au dessus
</div>

Test avec plein de <br/> sur ta page pour t'assurer du bon fonctionnement...

04 juil. 2008, 10:24

J'y crois pas! C'est la première fois que j'obtiens une réponse juste, fiable... en moins de 30 min. Merci bcp.

$\:D/$

15 juil. 2008, 10:34

Hey

,

Sinon tu n'as qu'à regarder mes feuilles CSS

.

Code : Tout sélectionner

http://hoa-project.net/Css/Layout.css

div#nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 13000;
    padding: 0 0 10px 0;
    background: transparent url("../Media/Image/NavBkg.png") 0 100% repeat-x;
}

    div#nav p {
        margin: .1em;
        padding: 0;
    }

    div#nav p a {
        color: #930;
        margin: 0 .5em;
        padding: 0 .5em;
        border: 0;
        background: none;
    }

    div#nav p a:hover,
    div#nav p a:focus {
        color: #000;
    }

Et une mention spéciale pour IE < 7 :

Code : Tout sélectionner

http://hoa-project.net/Css/IE.css

div#nav {
    padding: 0;
    background: transparent url("../Media/Image/NavBkg.gif") 0 100% repeat-x;
}

On vire le png pour un gif, et je mets le pas à 0. En plus, IE ne comprend pas la position fixed, mais bon … On limite la casse hein

.

Et pour information, on appelle ça une barre de navigation

.

Barre de menu flottante

Qui est en ligne