Navbar fissato nella parte superiore della pagina HTML, CSS / HTML)

Sto cercando di imparare di CSS3 e HTML5, ma io sono un po ‘ confuso con qualcosa. Per ora, voglio creare una pagina con un fisso barra di navigazione nella parte superiore della pagina, che scorre con la pagina.

In realtà la navbar è fissato nella parte superiore e scorre con la pagina, ma il contenuto di iniziare nella parte superiore della pagina, in altre parole, il contenuto inizia DIETRO la navbar, non voglio questo.

Vedere wanted design a soffietto:
Navbar fissato nella parte superiore della pagina HTML, CSS /HTML)

Design attuale:
Navbar fissato nella parte superiore della pagina HTML, CSS /HTML)

Seguente è il mio CSS:

body{
    left: 0;
    top: 0;
    margin: 0px;
    padding: 0px;
}

header.topbar{
    background-color: #f8f6f6;
    position: fixed;
    width: 100%;
    height: 100px;
    opacity: 0.7;
    z-index: 1;
    top: 0;
    left: 0;
}

#content{
    z-index: 0;
    position: absolute;
}

E il mio HTML:

<!DOCTYPE HTML>
<html>
<head>
    <title> Test </title>
    <meta name="description" content="página de teste.">
    <link rel="stylesheet" type="text/css" href="stylesheet/style.css"/>
</head>
<body>

        <header class="topbar">
            test
        </header>

        <p>another test</p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/>
        <p>again</p>

</body>

Così, cosa posso fare per risolvere il mio problema? Per favore, cercate di rispondere con i CSS, io davvero non voglio imparare il JavaScript/jQuery, al momento.

Grazie!

vedi questo link fuelyourcreativity.com/…
questo è abbastanza buono? – jsfiddle.net/GjMbx

OriginaleL’autore Paladini | 2013-08-27

5 risposte

  1. 6

    Aggiungere margin-top per i tuoi contenuti. L’intestazione è fisso, quindi non è incluso nel flusso del documento.

    Anche la comunicazione di opacità definito sull’intestazione, il che causa un lieve vedere il contenuto durante lo scorrimento.

    Se questo non è quello che volevo, quindi rimuoverlo. (come)

    VIOLINO

    #content{
        margin-top: 100px;
        z-index: 0;
        position: absolute;
    }
    Grazie, sei il primo che ha risposto alla mia domanda e stata la miglior risposta, grazie! Per gli altri, grazie, ho il pollice in su a tutti buone risposte.

    OriginaleL’autore Danield

  2. 1

    Di che cosa avete bisogno è position: fixed;

    /* Tell body leave a 40px gap at the top for the navigation when the page is scrolled to the top */
    body { position: relative; padding-top: 40px; }
    /* Tell the nav to stick to the top left */
    nav { position: fixed; top: 0; left: 0; }

    http://jsfiddle.net/ninty9notout/8J7UM/

    OriginaleL’autore ninty9notout

  3. 1

    avvolgere il contenuto con un div e dare imbottitura superiore a 100 pixel(altezza dell’intestazione)

    come per la mia struttura

    .bodyPan{
        padding-top:100px;
    }

    lavoro jsFiddle file

    OriginaleL’autore Roy Sonasish

  4. 1

    Elementi “fissi” o “assoluti” posizione non occupano spazio nella pagina, in modo che una possibile soluzione per voi è quello di aggiungere un margine o imbottitura per il suo contenuto:

    <article id='content'>
        <p>another test</p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/>        <br/><br/><br/><br/><br/><br/><br/>
        <p>again</p>
    <article>
    
    
    #content{
        margin-top: 100px;
    }

    http://jsfiddle.net/KUpnA/

    OriginaleL’autore Eduardo Wada

  5. 1

    Dare margine per i tuoi contenuti. Il valore del margine dovrebbe essere l’altezza di voi header (intestazione sticky) + 20px.

    OriginaleL’autore Vikas Singhal

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *