come posizionare un elemento in alto al centro a tutte le risoluzioni usando la proprietà position:fixed;

**elektronoide** · 30-06-2015, 09:14

ho un problema con un contenitore vorrei che rimanesse fissato con position:fixed; in modo che non scorra con il movimento della scrollbar ma a egual tempo vorrei che assumesse una posizione assoluta in alto al centro a tutte le risoluzioni.
Esempio:

codice HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title> 

  <style>
    #header{
      margin:0 auto;
      padding: 0;
      height: 90px;
      width: 500px;
      background-color: #FF0000;
      text-align: center;
    }
   
  .menu{
  position:fixed;
  width:360px;
  height:40px;
  margin:0 auto;
  padding:0;
  }

  ul{
  margin:0 auto;
  padding:0;
  }
  li{
  text-align:center;
  width:90px;
  height:40px;
  background:red;
  float:left;
}
    #contenuto{
      margin-top:200px;
      border: 1px solid red;
      width:100%;
      height: 3000px;
    }
  </style>
 </head>
 <body>
  <div id="header"><h1>Header</h1></div>

<!--
Vorrei posizionare questo menu in alto al centro come l'header a tutte le risoluzioni
ma allo stesso tempo vorrei che abbia la proprietà position:fixed;
in modo che non scompaia allo scorrere della pagina
-->
<div class="menu">
 <ul>
   <li><a href="#">home</a>   
   </li>
   <li><a href="#">pag</a>   
   </li>
   <li><a href="#">pag</a>   
   </li>
   <li><a href="#">pag</a>
   </li>
  </ul>
</div>

  <div id="contenuto">
   <p>qui i contenuti della pagina</p>
   <p>qui i contenuti della pagina</p>
   <p>qui i contenuti della pagina</p>
   <p>qui i contenuti della pagina</p>
   <p>qui i contenuti della pagina</p>
   <p>qui i contenuti della pagina</p>
   <p>qui i contenuti della pagina</p>
   <p>qui i contenuti della pagina</p>
   <p>qui i contenuti della pagina</p>
   <p>qui i contenuti della pagina</p>
   <p>qui i contenuti della pagina</p>
   <p>qui i contenuti della pagina</p>
   <p>qui i contenuti della pagina</p>
   <p>qui i contenuti della pagina</p>
   <p>qui i contenuti della pagina</p>
   <p>qui i contenuti della pagina</p>
   <p>qui i contenuti della pagina</p>
   <p>qui i contenuti della pagina</p>
   <p>qui i contenuti della pagina</p>
   <p>qui i contenuti della pagina</p>
   <p>qui i contenuti della pagina</p>
   <p>qui i contenuti della pagina</p>
   <p>qui i contenuti della pagina</p>
   <p>qui i contenuti della pagina</p>
   <p>qui i contenuti della pagina</p>
  </div>
  
 </body>
</html>

**KillerWorm** · 30-06-2015, 14:56

Un metodo è quello di impostare left al 50% e margin-left con un valore negativo che corrisponda alla metà della larghezza dell'elemento.

codice:

.menu{
  position: fixed;
  left: 50%;
  margin-left: -180px;
  width: 360px;
  height: 40px;
}

**elektronoide** · 03-07-2015, 14:37

si funziona grazie mille scusa per la banalità

Discussione: come posizionare un elemento in alto al centro a tutte le risoluzioni usando la proprietà position:fixed;

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

come posizionare un elemento in alto al centro a tutte le risoluzioni usando la proprietà position:fixed;

Permessi di invio