Div da riposizionare su layout responsive

[Gas75]

Salve, ho una situazione classica di <header> contenente un logo con sotto un <nav> contenente un menù, entrambi posizionati in un container... Ho impostato che <header> e <nav> siano fissi in cima alla pagina con un position: absolute.
Ridimensionando la pagina, il logo nell'header si scala se non c'è spazio a sufficienza... Vorrei che il <nav> restasse subito sotto all'<header> ma non riesco a passargli un parametro "relativo"...

CSS default, perfettamente funzionante:

header { 
	position: absolute;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	height: 92px; 
	font-size: 13px; 
	background-color: inherit; 
}


nav { 
	position: absolute;
	top: 92px;
	left: 0px;
	padding: 2px 0px 2px 0px; 
	width: 100%; 
	height: 16px;
	font-size: 12px; 
	text-align: center; 
	text-transform: uppercase; 
	background-color: inherit; 
}

CSS da correggere...

@media only screen and (max-width: 720px) {

	header {
		width: 100%;
		height: auto;
	}
	
	#logo {
		width: 100%;
		height: auto;
	}

	nav { 
		position: absolute;
		top: 92px;
		left: 0px;
		padding: 2px 0px 2px 0px; 
		width: 100%; 
		height: 32px;
		font-size: 16px; 
		text-align: center; 
		text-transform: uppercase; 
		background-color: inherit; 
	}

E lo stralcio di HTML...

<header><img id="logo" src="banner_grande_new.gif" alt="Descrizione..."></header>
<nav>
	<div id="menu">
		Menu...
	</div>
</nav>

[KillerWorm]

Ciao, potrei sbagliarmi ma per come l'hai pensata la vedo difficile da risolvere. Il posizionamento assoluto ovviamente slega i due elementi (che sono fratelli) da qualsiasi relazione tra loro, per cui non è possibile determinare l'ingombro del primo per posizionare il secondo, a meno che non si vada di JavaScript, ma mi pare poco pratico.

Vedo due possibili strade:

1 - Lasci i due elementi con un posizionamento non assoluto, in modo che siano liberi di riposizionarsi in base ai loro ingombri. Non conoscendo il contesto, non mi è chiaro il motivo per cui tu debba utilizzare un posizionamento assoluto; bisognerebbe capire se puoi comunque disporre i due elementi in cima alla pagina con un differente metodo.

2 -Generalmente l'elemento <nav> potrebbe stare dentro <header>; potresti infatti metterlo subito dopo l'elemento <img> (logo). A quel punto puoi anche impostare <header> con posizionamento assoluto, mentre per <nav> puoi lasciarlo non assoluto in modo che si posizioni normalmente subito sotto il logo. Potrebbe poi essere necessario fare qualche accorgimento per dimensionare i vari elementi in modo opportuno.

Ripeto, non conoscendo il contesto è difficile comunque consigliarti delle soluzioni in modo mirato. Eventualmente, se puoi, posta il link della pagina in questione e fornisci maggiori dettagli per chiarire meglio lo scenario.

[Gas75]

Grazie della risposta.
Il posizionamento assoluto mi serve perché voglio che logo e menù (cioè i contenuti di header e nav) siano fissi in cima alla pagina.
Ho provato a sistemare nav dentro header, ma nel momento in cui header si adatta all'altezza del logo, nav è come se avesse ancora position: absolute, anzi per dirla meglio header è come se non includesse più nav (stando all'ispezione con Chrome): l'altezza di un box impostata su auto non dovrebbe adattarsi a tutto ciò che contiene e non soltanto all'elemento che varia in altezza?

Allo stato attuale, il link alla pagina è questo http://dampyr.altervista.org/index-bozza.html mentre il CSS è qui http://dampyr.altervista.org/home-bozza.css

[KillerWorm]

Il posizionamento assoluto mi serve perché voglio che logo e menù (cioè i contenuti di header e nav) siano fissi in cima alla pagina.

Bene, questo lo avevo capito, però non mi era chiaro come avevi impostato la cosa per cui quel position:absolute mi suonava strano e mi suona strano tuttora.

In breve, normalmente per rendere fissa la posizione di un elemento, a prescindere dallo scorrimento di tutto il resto della pagina (quindi del body), si utilizza un più appropriato position:fixed piuttosto che absolute, perché quest'ultimo resta comunque "relativo" al genitore più prossimo che ha un position non static (oppure al body, in mancanza di tale condizione); questo fa sì che se il body dovesse scorrere, anche quegli elementi con position:absolute si muoveranno assieme a tutto il contenuto, mentre non è così per gli elementi con position:fixed che restano comunque sempre fissi rispetto alla finestra del browser.

Vedendo la tua pagina, noto che hai impostato un'area centrale scorrevole che dovrebbe evitare lo scroll del body, e a tutti gli elementi principali hai dato un posizionamento assoluto che ti obbliga però a stabilire una posizione specifica per ciascuno di questi elementi. In teoria non servierebbe nemmeno usare il posizionamento assoluto, quantomeno non influisce su quei due elementi che comunque per il normale flusso dei contenuti si dovrebbero disporre da soli in quelle stesse posizioni che tu invece stai "forzando".

Personalmente rivedrei l'intera impaginazione usando eventualmente il position:fixed, per fissare eventualmente header e footer (che è più specifico per una impostazione del genere), e lascerei scorrere l'intero body (piuttosto che creare un'area centrale scorrevole).
Chiaramente questo è come farei io ma, per come hai impostato tu il layout, andrebbero aggiustate diverse cose, per cui al momento potresti lasciare così questo aspetto.

Per il resto...

Ho provato a sistemare nav dentro header

In questo caso credo che questa sia la strada giusta da prendere se a te interessa mantenere una "relazione" tra i due elementi.

ma nel momento in cui header si adatta all'altezza del logo, nav è come se avesse ancora position: absolute, anzi per dirla meglio header è come se non includesse più nav

Chiaro, come ho anticipato "Potrebbe poi essere necessario fare qualche accorgimento per dimensionare i vari elementi in modo opportuno".
Attualmente noto che nav ha ancora position:absolute, prova a toglierlo assieme a le proprietà top, left, ecc.; dovrebbe posizionarsi da solo subito sotto l'immagine. Ovviamente dovrai assicurarti che l'ingombro in altezza dei due elementi rientri dentro l'altezza totale di header. verificando anche la disposizione responsive per i vari breakpoint.

[Gas75]

Ok, comincio a sostituire i position: absolute con i position: fixed.

Il layout del sito lo sto rivedendo per renderlo responsive: in prima battuta sono riuscito a ottenere con poche difficoltà una nuova disposizione degli oggetti per schermi desktop, i problemi stanno insorgendo introducendo le media query.

Comunque, se ho ben capito, parlando di far scorrere l'intero body, tu toglieresti il container?

[KillerWorm]

Il layout del sito lo sto rivedendo per renderlo responsive: in prima battuta sono riuscito a ottenere con poche difficoltà una nuova disposizione degli oggetti per schermi desktop, i problemi stanno insorgendo introducendo le media query.

Capisco, non è semplice se non si parte da una struttura che sia stata studiata per il responsive, ma con un po' di olio di gomito e qualche gugleata si possono comunque raggiungere risultati apprezzabili.

Comunque, se ho ben capito, parlando di far scorrere l'intero body, tu toglieresti il container?

Non necessariamente. Un container principale potrebbe benissimo esserci per ragioni di organizzazione e formattazione del layout, ma lascerei che si estenda in altezza in base ai contenuti, assieme al contenitore centrale (che nella tua pagina chiami main) e al body stesso, in modo che quando i contenuti sbordano dall'area visibile (la finestra del browser), appaia la scrollbar relativa al body. Mantenendo fissi header e footer, ciò che scorrerà sarà il resto dei contenuti nel corpo della pagina (main). In questo caso potrebbe essere utile dare un min-height:100%; al body in modo che non si riduca meno dell'altezza della finestra e la scrollbar resti sempre estesa per l'intera altezza.

Diversi famosi siti utilizzano attualmente un'impostazione più o meno simile dove lo scorrimento è applicato sostanzialmente al body, mentre elementi come header hanno position:fixed.

Giusto per citarne qualcuno:

https://stackoverflow.com/
https://www.w3schools.com/css/default.asp
https://www.youtube.com/

Nota che generalmente ciò che scorre è l'intero contenuto dentro il body (che ha la relativa scrollbar visibile sulla destra della finestra), fuorché gli elementi che hanno position:fixed.

Ad ogni modo è buono prendere spunto dai più "affermati", perché presumibilmente si ha una maggiore garanzia del funzionamento, ma questa non vuole essere comunque una regola fissa; si è liberi di impostare il proprio layout come meglio si crede, in base alla proprie esigenze ma anche ai gusti personali. Nessuno ti vieta di impostare lo scorrimento solo per il contenitore centrale.

[Gas75]

A pensarci la soluzione che proponi è ottimale, quanto meno perché la barra di scorrimento generalmente non è semplice da personalizzare e rischia di stonare di brutto messa dentro il layout invece che sbattuta sul lato destro del browser!
Tuttavia, nelle pagine interne del sito (cui puoi accedere dai link messi qualche ora fa) c'è una struttura dove sfrutto pesantemente lo scrolling su overflow dei div e quindi fare scorrere il body in quel caso la vedo dura se voglio tenere fisso un menù con tutti i link interni alla pagina: non apprezzo particolarmente i layout dei blog in cui l'articolo scorre assieme alla colonna con i vari widget... La mia home page ha sempre avuto un foglio di stile per conto proprio, almeno da quando ho iniziato a farne uso (il sito nasce nel 2001 come sezione di un sito personale) e con questa idea di rendere il sito responsive vorrei uniformare il css...

Grazie ancora per gli spunti interessanti! Spero di pubblicare presto una pagina aggiornata con i vari problemi risolti. Al momento ho messo position: fixed all'header e funziona alla grande, devo adesso studiare come far salire il nav assieme (dato che sta nell'header), senza chiaramente lasciare giù tutto il main che peraltro deve scorrere!

[KillerWorm]

Tuttavia, nelle pagine interne del sito (cui puoi accedere dai link messi qualche ora fa) c'è una struttura dove sfrutto pesantemente lo scrolling su overflow dei div e quindi fare scorrere il body in quel caso la vedo dura se voglio tenere fisso un menù con tutti i link interni alla pagina: non apprezzo particolarmente i layout dei blog in cui l'articolo scorre assieme alla colonna con i vari widget...

Chiaro, in questo caso però si potrebbe pensare all'uso di qualche soluzione con un po' di JavaScript per creare una via di mezzo. Prendo come esempio un altro consolidato sito, facebook, dove le colonne laterali, pur scorrendo assieme al resto dei contenuti (cioè rispondono all'azione di scrolling del body), si "bloccano" quando il loro limite inferiore raggiunge il bordo della finestra e scorrono comunque in modo slegato dal contenuto, cioè risondono istantaneamente alla direzione di scorrimento. In questo modo, pur scorrendo assieme al contenuto, restano comunque sempre facilmente accessibili. E' sicuramente una soluzione funzionale ed evita la presenza di barre di scorrimento "ridondanti" che, come tu stesso affermi, finiscono per fare a pugni col layout.

E' giusto un idea.

Al momento ho messo position: fixed all'header e funziona alla grande

Bene

devo adesso studiare come far salire il nav assieme (dato che sta nell'header), senza chiaramente lasciare giù tutto il main che peraltro deve scorrere!

Se il nav sta subito dopo il logo, senza applicare ulteriori regole di posizionamento gli resterà comunque "appiccicato", cioè salirà quando il logo va a ridursi in altezza.

Però, riguardo al main,se questo è absolute e/o se header è fixed, il discorso è sempre lo stesso, resteranno "slegati" tra loro (perché vengono tolti dal normale flusso dei contenuti) rendendo impossibile (quantomeno col solo CSS) il calcolo della posizione in base agli ingombri degli stessi elementi in gioco.

Una soluzione è quella di mantenere comunque un'altezza "prestabilita" per l'intero header; al massimo potrebbe essere ridefinita nei vari breakpoint, in base a come supponi che vengano disposti gli elementi al suo interno. Non vedo troppe alternative a meno che non vuoi andare di JavaScript, ma mi pare una cosa inutilmente macchinosa in questo caso perché l'apporto estetico/funzionale sarebbe relativamente minimo.

Grazie ancora per gli spunti interessanti!

Figurati
Buon proseguimento

[Gas75]

La soluzione di Facebook proprio non mi piace: una colonna o scorre indipendente o resta fissa, almeno nei siti che faccio io preferisco così.
Mi sta piacendo la soluzione Youtube, potrei integrare una sorta di "toolbar" in un header fisso in alto, dinamico in base alla pagina, in modo da fare scorrere il body avendo sempre un riferimento con cui navigare nel sito.
Devo ancora imparare Bootstrap, probabilmente molti problemi attuali hanno già una soluzione pronta, tipo l'iconcina a tre punti che apre un menù su device mobili.

[KillerWorm]

Bene, sì, Bootstrap è un framework completo in cui sono disponibili svariate funzionalità. Certo, se decidi di prendere questa strada dovrai farti un'idea più precisa di come puoi procedere. Se può esserti utile, ti consiglio giusto di dare uno sguardo al capitolo 7 dei link utili CSS dove puoi trovare vari riferimenti a guide, tutorial, e altre risorse sull'argomento.

Buono studio