[HTML5] Tag header

21-02-2014, 17.00.47

Ho provato a usare i nuovi tag di html5 header, nav e aside.

E fin qui tutto ok:
li metto nel body e li riempo di contenuti, come se fossero dei div.

Poi vado a controllare la pagina con il Chrome Developer Tools

Body

Header

Vedete? Il body non inizia al top, ma sotto l'header.

Questa è la struttura della mia pagina:

Codice HTML:

<html>
  <head>
    ...
  </head>
  <body>
    <header>
      ...
    </header>
    <aside>
      ...
    </aside>
    <div id="contenitore">
      ...
    </div>
  </body>
</html>

"Magari c'è qualche posizionamento", ho pensato.
E allora ecco lo stile del body e dell'header

Codice:

body {
  margin: 0;
  padding: 0;
  height: 100%;
}

header {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 150px;
  box-shadow: 0 0 20px gray;
  -webkit-box-shadow: 0 0 20px gray;
  -moz-box-shadow: 0 0 20px gray;
  -o-box-shadow: 0 0 20px gray;
  behavior: url(/layout/pie/PIE.php);
}

header {
z-index: 1000;
width: 100%;
overflow: hidden;
background-color: white;
}

E' normale che sia così?
E allora mi viene una domanda: l'header va posizionato fuori dal body?

**karl94** · 21-02-2014, 19.14.47

Hai provato a creare una pagina con solo il codice che hai scritto qua? Probabilmente no, perché con quello non ottieni il risultato in immagine. Scommetto però che nella pagina che presenta il problema hai specificato un margine superiore per almeno uno degli elementi aside o div#contenitore.

22-02-2014, 20.36.34

Hai ragione, ho messo un margin-top di 150px al #contenitore...

Ma il margin non dovrebbe separare l'elemento da tutto il resto, anche dalla fine padding interno del suo contenitore?

**karl94** · 22-02-2014, 20.43.10

Originalmente inviato da tampertools

Ma il margin non dovrebbe separare l'elemento da tutto il resto, anche dalla fine padding interno del suo contenitore?

Non ho capito.

Quello che hai sperimentato è il collassamento dei margini: in questo caso il margine superiore del body e dell'elemento #contenitore sono collassati, è una cosa un po' complicata che è soggetta a diverse regole. Però non mi sembra che nel tuo caso crei problemi, giusto?

23-02-2014, 10.54.57

No, anzi, mi facilita le cose.

Ma collassano nello stesso modo su tutti i browser o è meglio se risolvo il problema?

**karl94** · 23-02-2014, 17.56.50

Originalmente inviato da tampertools

Ma collassano nello stesso modo su tutti i browser o è meglio se risolvo il problema?

Sono regole alla base del box model, difficilmente le varie implementazioni avranno qualche bug.

Discussione: [HTML5] Tag header

LinkBack

Strumenti discussione

Display

[HTML5] Tag header

Tags for this Thread

Regole di scrittura