header che occupa tutta la pagina [era: header]

**icobi** · 15-01-2013, 17:39

ciao a tutti!

vorrei che il mio header abbia un background che si estenda "all'infinito"
(es. http://creattica.com/ )

ho pensato di realizzarlo così (semplificando):

codice:

<body>
<figure class="header_background"><div></div></figure>
<div class="gridContainer clearfix pos_top">
  <div id="header">
    

This is the content for Layout Div Tag "header"</p>
    

gsrgrs</p>
  </div>
</div>
</body>

/* CSS */

.header_background { 
   position: relative;
   height: 50px;
   background-color: #000;
   z-index: -1;
}

.pos_top {
   clear: both;
   float: none;
   position: relative;
   top: -50px;
}

è corretto? conviene o è solo una gran confusione? che metodo mi consigliate?

**ResianTaxidrive** · 15-01-2013, 19:53

Ho cambiato il titolo che mi sembrava veramente troppo generico.

Mah forse c'è un po' troppa roba, perchè non segui piuttosto l'esempio da te postato?
Io direi cha basta un'area
<header> .... </header> (ho visto che usi il tag figure di html5, mi sembra tra l'altro un utilizzo improprio, invece credo sia molto piu' indicato il tag header)
a cui assegni il colore o l'immagine di background e l'altezza.

Il pos_top cosa dovrebbe rappresentare?

**icobi** · 16-01-2013, 10:22

mmm... ho usato l'elemento figure prendendo spunto da qui:

GoldenGridSystem

perché dici che è un uso improprio?

non ho usato header perché pensavo di usarlo così:

codice:

<body>

<figure class="header_inf_background"><div></div></figure>

<header class="gridContainer clearfix pos_top">
  <div class="header_logo">
    

Use Insert Panel for additional Fluid Grid Layout Div tags. Note: All Layout Div tags must be inserted directly inside the "gridContainer" div tag. Nested Layout Div tags are not currently supported. </p>
    

odhfqeofh</p>
  </div>
  <div class="header_title">
    <h1>Cascina MezzaTappa</h1>

    

la cascina del tartufo monferrino</p>
  </div>
</header>

<article class="gridContainer clearfix">
</article>

<footer class="gridContainer clearfix">
</footer>

</body>

pos_top lo volevo usare per spostare il primo div sopra l'elemento figure...

avrei preferito dare solo lo sfondo all'elemento header, ma così facendo non si estende "all'infinito" essendo contenuto dal gridContainer della griglia fluida

**icobi** · 16-01-2013, 10:33

forse potrei contenere il codice mettendo l'elemento <figure> (insomma quello che contiene lo sfondo) sotto all'elemento <header> e spostando in modo relativo figure in su dandogli un z-index inferiore...

**icobi** · 16-01-2013, 12:18

avrei preferito dare solo lo sfondo all'elemento header, ma così facendo non si estende "all'infinito" essendo contenuto dal gridContainer della griglia fluida

se esistesse un modo sarebbe la cosa migliore, perché se no quando l'header varia al ridimensionamento della finestra lo sfondo non si adatta ovviamente!

è che non ho idea di come fare!

**ResianTaxidrive** · 16-01-2013, 13:03

Non credo sia particolarmente corretto usare il tag <figure> per immagini di sfondo.

Ma poi in questo header che deve occupare tutta la pagina, ci sarà una immagine o colore?

Direi che potresti fare un div largo tutta la pagina e con posizionamento assoluto, il resto della pagina andrà naturalmente sopra di esso.
Cmq credo che avrei bisogno di sapere in maniera più esatta quello che vuoi fare, non hai una immagine precisa di come sarà la tua pagina?

**icobi** · 16-01-2013, 13:30

Non credo sia particolarmente corretto usare il tag <figure> per immagini di sfondo.

Ok

Ma poi in questo header che deve occupare tutta la pagina, ci sarà una immagine o colore?

Certamente si!

Direi che potresti fare un div largo tutta la pagina e con posizionamento assoluto, il resto della pagina andrà naturalmente sopra di esso.

Si, ma il mio problema è che non capisco come "legare" la hight del div-sfondo con quella del div-header.

Cioè: essendo una griglia fluida, al ridimensionamento della pagina, ad esempio, il menu orizzontale che voglio creare per la versione desktop e tablet diventa verticale per la versione smartphone ( es: Creattica ) occupando un'altezza diversa (oltre ai ridimensionamenti vari ecc...) e vorrei che lo sfondo si "espandesse" seguendo il menu.

E' un po difficile spiegarlo per iscritto!

Cmq credo che avrei bisogno di sapere in maniera più esatta quello che vuoi fare, non hai una immagine precisa di come sarà la tua pagina?

Adesso non ho con me gli schizzi che ho fatto... Comunque diciamo che voglio farlo come l'esempio che ho postato sopra (prova a ridimensionare la finestra).

Grazie mille per l'aiuto!

**icobi** · 16-01-2013, 13:44

Si, ma il mio problema è che non capisco come "legare" la hight del div-sfondo con quella del div-header.

perchè se stessero nello stesso div anche il div-sfondo, come il div-header, sarebbe soggetto alle classi .gridContainer e .clearfix del boilerpate.css che dreamweaver mi imposta

ti metto uno screenshot:
scrennshot

.

**ResianTaxidrive** · 16-01-2013, 14:11

allora non usare nessuna griglia, nel sito che tu hai indicato a esempio non ci sono contenitori che limitano in qualche modo tutto il contenuto del sito.
Usa tutti contenitori fluidi e seii a posto.

**icobi** · 16-01-2013, 16:31

proverò. grazie!

Discussione: header che occupa tutta la pagina [era: header]

Strumenti discussione

Ricerca discussione

Visualizza

header

Permessi di invio