box scorrevoli vs box fissi, e conflitti di codici elementari (molto complicato)

[stardom]

buonasera a tutti, sto avendo delle difficoltà a pensare! Sto cercando di riprodurre il layout dell'immagine allegata (un cartello aeroportuale) e fin'ora ho implementato il menu e lo scroll (www.agendadelvolo.info). Vorrei ora provare a farvi capire che cosa deve succedere e vi chiedo di aiutarmi a capire come devo intervenire.

Se confrontiamo l'immagine con il sito, si intuisce come nella sezione superiore ci sia quello che sarebbe il menu navigazione, con a destra lo spazio per il box.
Immediatamente sotto c'è una fascia e poi una seconda fascia. Sto considerando queste due fascie come footer. Se però quella in fondo (dove c'è scritto "toilets") è fissa, quella superiore ("zoneH") è scorrevole. Infatti la scritta "zoneH" sarebbe un testo che si trova a fondo del box scorrevole: cioè quando un box viene chiamato dal menu navigazione, arriva da destra per fermarsi prima del menu, e fa vedere il testo. In altre parole potremmo dire che la fascia superiore è solo una riga sempre visibile mentre il box gli scorre sotto.

I primi problemi che ho sono questi: non riesco a mettere il testo a fondo box (non legge nessuno dei codici più elementari che ho provato), non riesco a mettere una riga hr (quello che vedete è solo il bordo del footer) e non riesco nemmeno a rendere opacity sulla fascia alta.

Insomma, non riesco a capire quale strada devo prendere...

(Ma il più grosso dei problemi è il solito screen resolution. Al momento sto pure lavorando con un maledetto schermo 16:9 e non mi permette nemmeno di capire che sto facendo)

[Nobody33]

buonasera a tutti, sto avendo delle difficoltà a pensare

Allora conviene fare una pausa e rilassarsi un po .

Una possibile soluzione al tuo problema:

1) al menu laterale attuale dai un po meno padding (300px di padding..perché )
2) il footer lo fai più alto
3) dentro il footer infili gli altri due contenitori.
4) il contenitore superiore del footer lo fai scorrere con javascript quando occorre

l'hr a cosa dovrebbe servire? Credo che il .css può sostituire benissimo <hr>;

(Ma il più grosso dei problemi è il solito screen resolution. Al momento sto pure lavorando con un maledetto schermo 16:9 e non mi permette nemmeno di capire che sto facendo)

Soluzione QUI

[stardom]

grazie per la risposta e per il link al sito per le screen resolution. Dando un'occhiata veloce mi sembra che sia uno strumento per costruire il sito, ma non uno script per adattare automaticamente lo schermo dell'utente alla risoluzione per la quale è stato costruito il sito. Comunque approfondrò.

Per il problema del layout, avevo dato padding 300 perchè non riesco a far andare il box del menu fino in fondo. Con un padding minore si vedono le box che quando scrollano gli passano sotto. In altre parole, il box del menu deve essere alto 100%, ma non riesco a farlo.

Sul restante, ci sto lavorando.....

[Nobody33]

Per il link: non ho controllato, potrebbe essere; ho preso il primo della lista. Comunque ce ne sono altri siti simili.

Per il menu: basta inserire sopra il menu un box vuoto o simile.

[stardom]

ho creato due belle righe nel footer, ed ho provato a rendere opaca quella superiore credendo di poter vedere la scritta del box muoversi... ma mi rendo conto che è meglio rendere la righa indipendente, in modo che un testo scorra all'interno di essa in corrispondenza della box chiamata...

per il menu che poggia sul footer, ho provato ad aggiungere <div style="clear:both;"></div> ma non funziona

[stardom]

4) il contenitore superiore del footer lo fai scorrere con javascript quando occorre

come faccio a fare uno scroll nel footer che si attiva in corrispondenza di quando scrolla il menu?
In altre parole, come se avessi due box che scrollano allo stesso comando.

Questo è il codice del menu:

$(document).ready(function () {
$.localScroll.defaults.axis = 'x';
$('#menu').localScroll({
target:'body',
offset: -225
});
});

[Nobody33]

Dovresti leggerti la documentazione dello script (non mi ricordo il link dello script);

Credo che sostanzialmente basta copiare il codice che usi per i box;
Se il div dove ci sono dentro i box è una classe, ancora meglio....allora basta che assegni la stessa classe anche al div sottostante;
poi aggiungi una seconda classe (sempre dentro lo stesso div) per lo stile;
nota: forse è meglio che per l'altezza dello stile aggiungi !important alla fine, altrimenti si prende l'altezza del div dove ci sono i contenitori

Tieni conto però, che poi la voce scrolla a sinistra, quindi forse sarebbe meglio fare uno scroll indipendente;

trovi tutto QUI oppure QUI

[stardom]

avevo pensato alla stessa soluzione, ma ci deve essere qualche lacuna/errore:
i css sono i seguenti (con qualche omissione)

#menu {
position: fixed;
bottom: 50px;
left: 0px;
height: 100%;
clear: both;
float: left;
margin: 0;
padding: 30px 15px 0 25px;
z-index: 500;
}

#footer_top {
position: fixed;
bottom:60px;
width:100%;
height:60px!important;
clear: both;
float: left;
margin: 0;
padding: 0 0 0 25px;
z-index: 500;
}

e lo javascript è ora questo:

$(document).ready(function () {
$.localScroll.defaults.axis = 'x';
$('#menu').localScroll({
target:'body',
offset: -225
});
});


$(document).ready(function () {
$.localScroll.defaults.axis = 'x';
$('#menu').localScroll({
target:'footer_top',
offset: -25
});
});

[Nobody33]

Prova a vedere QUI

leggiti tutto il posto, specialmente l'ultimo.

[stardom]

....l'ultimo post del tuo link suggerisce di separare gli script (ovvero ognuno incluso nel suo tag <script>), ma i miei lo sono, li avevo solo omessi nel mio post.
Ho anche provato ad adattare il codice che quell'utente ha utilizzato, ma niente.
Credo che il problema sia nel fatto che il contenuto scrollante del footer non è propriamente scritto, ma se nel menu ho utilizzato <ul>[*] con un allineamento verticale, non saprei come allineare del testo orizzontalmente, con uno spazio fra titolo e titolo.

Non so se mi sono spiegato. Il fatto è che questo codice non l'ho scritto io (non so scrivere in java). Ho solo adattato un tutorial alle mie esigenze.