Barra menu fissa in alto, sparisce cliccando su un link interno

**longline** · 26-10-2013, 22:58

Ho fatto una pagina con un div menu in alto che vorrei che rimanesse sempre visibile anche scrollando la pagina. La cosa funziona tranne quando vado a cliccare su una delle voci del menu: in questo caso infatti il div sparisce. Dove sbaglio?

Tra l'altro ho anche usato un artificio per spostare in basso la parte della pagina che è libera di scrollare, ma ho idea che si possa fare meglio, e forse anche che questo aspetto possa essere collegato al problema principale di questa discussione.

Potete darmi qualche dritta?

Grazie!

Questo è il CSS:

codice:

body
    {
        background-color: black;
        font-family: sans-serif;
        margin: 0 0 0 0px;
        color: white;
    }

#header
    {
        position: fixed;
        background-color: white;
        z-index: 20;
        width: 100%;
        margin-bottom: 50px;
        overflow: hidden;
    }

#header a
    {
        margin-left: 50px;
        text-decoration: none;
        font-weight: bold;
    }

#header a:link, a:visited
    {
        color: #666666;
    }

#header a:hover
    {
        color: #000;
    }

#contenitore
    {
        width: 750px;
        background-color: red;
    }
    
#parte1
    {
        background-image: url('SysImg/2.jpg');
        padding: 20px;
    }

#parte2
    {
        background-image: url('SysImg/1.jpg');
        padding: 20px;
    }

#parte3
    {
        background-image: url('SysImg/2.jpg');
        padding: 20px;
    }

#parte4
    {
        background-image: url('SysImg/1.jpg');
        padding: 20px;
    }

.testi
    {
        width:50%;
        background-color: rgba(0,0,0,0.8);
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 10px;
        padding-bottom: 7px;
    }
    
h1
    {
        padding: 0px;
        margin: 0px;
        text-align: right;
    }

p
    {
        text-align: left;
    }

Questo è l'html

codice:

<!doctype html>
<html>
    <head>
     <title>titolo</title>
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />        
    </head>
    <body>
        <div id="header">
         <img src="SysImg/Logo-Header.png" />
            <a href="#home">home</a>
            <a href="#chisiamo">chi siamo</a>
            <a href="#settori">settori</a>
            <a href="#contatti">contatti</a>
      </div>

        <div id="contenitore">

         <img src="SysImg/Logo-Header.png" />

            <div id="parte1">
                <div class="testi">
                    <a id="home"></a>
                    <h1>
                     Consulting
                        <br/>
                        Servizio Acquisti
                    </h1>
                    <p>
                     Lorem ipsum..............</p>
                    <p>
                     Lorem ipsum..............</p>
                </div>
            </div>

            <div id="parte2">
                <div class="testi">
                    <a id="chisiamo"></a>
                    <h1>
                        Chi siamo
                    </h1>
                    <p>
                     Lorem ipsum..........</p>
                    <p>
                     Lorem ipsum.......</p>
</div>
            </div>

            <div id="parte3">
                <div class="testi">
                    <h1>
                        Settori merceologici principali
                    </h1>
 <p>
                  Attrezzature <br/>
                  </p>

              </div>
            </div>

            <div id="parte4">
                <div class="testi">
                    <h1>
                        Contatti
                    </h1>

                    <p>
p.iva 1234567890 <br/>
                        Via Vai 9, Bologna <br/>
                        Italy <br/>
                    </p>
                </div>
            </div>

        </div>

    </body>
</html>

**Nobody33** · 26-10-2013, 23:34

Ho copiato il tuo codice cosi come si trova e a me funziona perfettamente. Non mi sparisce nessun div.

**longline** · 27-10-2013, 10:23

Originariamente inviata da Nobody33

...

Difatti ho notato che il problema si presenta solo su Opera, e non su IE, Firefox e Chrome.

**longline** · 27-10-2013, 10:44

Rimane un altro problema: quando clicco su un link interno, l'anchor si posiziona all'inizio della pagina, quindi sotto al div della barra menu, e non al di sotto di essa.

**longline** · 27-10-2013, 10:58

Allego il link alla pagina completa, per vedere nella pratica il problema: link

**Nobody33** · 28-10-2013, 01:00

Originariamente inviata da longline

Rimane un altro problema: quando clicco su un link interno, l'anchor si posiziona all'inizio della pagina, quindi sotto al div della barra menu, e non al di sotto di essa.

E' normale che sia cosi. Dovresti inserire un elemento fantasma ( div vuoto, oppure con il padding, margin, ecc..) prima di ogni contenitore o qualcosa del genere.

Per l'altro problema non so esserti d'aiuto, non ho opera.

Discussione: Barra menu fissa in alto, sparisce cliccando su un link interno

Strumenti discussione

Ricerca discussione

Visualizza

Barra menu fissa in alto, sparisce cliccando su un link interno

Permessi di invio