Dilemma pagina con TOP assoluto

**lessicoitaliano** · 26-08-2010, 20:11

Buongiorno,
sono nuovo del forum e delle problematiche css. Ho deciso di riconvertire il mio sito www.lessicoitaliano.it (attualmente realizzato in frame) in tecnologia css.
La strada che ho scelto si sta rivelando, allo stato attuale delle mie conoscenze, impraticabile. Cerco di spiegarmi per avere, se non la soluzione, almeno qualche indicazione su come muovermi.
Il problema è questo: io vorrei avere, in testa al sito, un top ed un menù posizionati in modo assoluto (immobili) su una pagina scrollabile, divisa in sezioni indirizzabili mediante dei tag <href>:

(ved. lay-out allegato)

Ho realizzato la cosa in modo piuttosto complicato (riporto di seguito sia l’html che il css file di un esempio) e funziona, se non fosse per un fatto:
Il margin-top che utilizzo per visualizzare i contenuti di homemid SOTTO il logo VA PERDUTO QUANDO SI INDIRIZZA AD UNA SEZIONE mediante un tag <href>, perché questo comando posiziona per default la prima riga della <div> NON all’inizio del box contenitore (#homemid), ma della pagina html, e cioè sotto il logo (#hometop).
La domanda, pertanto, è: COME POSSO FARE PER POSIZIONARE LE DIV A 140 PIXEL DAL MARGINE SUPERIORE USANDO HREF?
Il file esempio (Funzionante_1.htm), i file css e le immagini, compreso un lay-out sono disponibili al link www.lessicoitaliano.it/Public/EsempioXforum.
Ringrazio in anticipo l’eventuale competente benefattore che voglia dedicare un po’ del suo tempo ad orientarmi in questo dilemma nel quale mi dibatto ormai da settimane.
lessicoitaliano

**Mich_** · 27-08-2010, 08:57

Il tuo link nonfunziona.

Comunque dovresti cambiare approccio.
Abbandonare completamente i posizionamenti, che sono fonte di complicazioni, ed impostare:

codice:

HTML:
<html>
  <head>
    ...
  </head>
  <body>
    <div id="testa"> 
      ...
    </div> 
    <div id="corpo">
      ... qui il tuo blocco che deve scrollare ...
    </div> 
  </body>
</head>

CSS:
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#testa {
  height: ...;
  width: 100%;
  ...
}
#corpo {
  width: 100%;
  overflow: auto;
  /* eventualmente qui puoi specificare overflow-x e overflow-y, per gestire separatamente le due scrollbar
      pero` non tutti i browser lo riconoscono, per cui lascia sopra anche overflow:auto */
  /* non specificare height; se serve puoi specificare min-height per avere un minimo di altezza */
}

**lessicoitaliano** · 27-08-2010, 19:16

Salve Mich_,
mi scuso per il mancato funzionamento del link. L’esatto url è:

http://www.lessicoitaliano.it/public...zionante_1.htm

Ringrazio il forum di assistenza per la rapidità dei riscontri, caratteristica questa di fondamentale importanza e, certamente, apprezzata da tutti gli utenti.

So bene (dal momento che ci sbatto la testa da 3 mesi) che i posizionamenti sono fonte di complicazioni. Se così non fosse (se avessi voluto ricorrere ad una semplice soluzione in cui SCROLLA TUTTO, anche l’intestazione), avrei già risolto da un pezzo utilizzando il modello da te proposto (immagino che il tag di chiusura <head> stesse per <html>).
Ma se per il passato mi fossi fermato davanti alle complicazioni, il 90 % di quello che ho fatto non sarebbe stato fatto. Questo progetto di una home a testata fissa è una cosa molto rognosa, me ne sto rendendo conto. Tuttavia, non sono lontanissimo dalla soluzione.

Ti prego di riprovare - appena avrai tempo – a indirizzare il nuovo link che ti ho indicato, e vedrai che il lay-out funziona, salvo che per il posizionamento dei <div>, che fa riferimento alla pagina html e non alla fine del blocco “testa”. Questo è il mio problema.
Se non ve la sentite di aiutarmi, o non potete, ti chiedo però di scrivermi che la risoluzione di questo problema esula dall’ambito di competenza di questo forum.
Ma non suggeritemi, per favore, di cambiare soluzione. Lo farò soltanto quando avrò esaurito tutti i tentativi che riesco ad escogitare, e quando sarà chiaro che, in rete, non esiste nessuno specialista che voglia o possa aiutarmi.
Le informazioni che mancano (ed alle quali io non riesco ad avere accesso) sono quelle relative alla gestione dei riferimenti di posizione da parte del tag <href> …

Cordiali saluti e grazie comunque per l’attenzione.

lessico

**Mich_** · 30-08-2010, 08:41

Quella pagina e` scritta in un linguaggio antiquato (nominalmente e` HTML 4.0 transitional, ma le tecniche di formattazione sono quelle di HTML 2)

Io non me la sento di metter mano ad una cosa di quel tipo.
A mio parere e` tempo buttato, dato che i prossimi browser potrebbero non riconoscere il linguaggio usato, e formattare secondo criteri standard.

Per poter fare una cosa fatta bene occorre:
1. separare contenuto da formattazione (in pratica seguire le regole di una DTD strict)
2. evitare assolutamente di usare formattazione HTML
3. non usare tabelle per formattare

Puo` darsi che qualcuno nel forum ti voglia/possa aiutare, ma in linea di massima per un progetto nuovo non si usano tecniche vecchie di 15-20 anni. Il Web (e l'informatica in genere) e` in continua evoluzione e non si possono usare oggi le tecniche dei primordi.

**ResianTaxidrive** · 30-08-2010, 15:23

mah, forse potresti mettere l'ancora fuori dai vari contenitori, qualche riga più sopra,in modo da ottenere la spaziatura che vuoi. NOn so se funzioni, è solo un'idea estemporanea.

Cmq, anche io ti consiglio di cambiare sistema anche perchè il layout e l'organizzazione della pagina in genere son veramente antiquati, anche dal punto di vista grafico; sembra un sito anni '90. Perchè dare un'immagine così vecchia della propria attività?

**lessicoitaliano** · 31-08-2010, 02:23

Calma ragazzi, calma.

Quella che vi ho indicato era solo una pagina di prova (ma validata W3C Transitional), nella quale ho infilato dei pezzi del mio vecchio sito per spiegarvi il mio problema nel posizionamento fisso/assoluto della testata.

Quando uno vuole riprogettare un sito in base alle nuove tecnologie, deve capire se la sua idea può funzionare, no? E la mia idea era avere una testata fissa in alto, che non scrollasse insieme al resto.
Vi infastidisce il codice HTML? Nessun problema. A questo link:

http://www.lessicoitaliano.it/public...zionante_3.htm

troverete una pagina SENZA tabelle, SENZA codice HTML, validabile W3C, che presenta il già segnalato problema:
I LINK NON POSIZIONANO LE SEZIONI DOPO IL LOGO, ma sotto di esso.

Bisognerebbe capire COME OPERA IL TAG <A HREF>, e quindi potrebbe essere un problema html; tuttavia, avendo a che fare con una testata posizionata mediante css, ho ritenuto più consona questa sezione del forum.

In quanto alla grafica stile anni ’90, avete proprio ragione: è quella l’epoca nella quale si era formata la mia conoscenza dell’HTML. Ora, però, mi sto riconvertendo e (se me ne lasciate il tempo) penso di dare una sistemata sia alla grafica che alla programmazione.
Volete darmi una mano?

Saluti,
Lessico

**Mich_** · 31-08-2010, 09:16

Problema ancore:
E` un problema HTML: in pratica ti mancano le ancore, che si realizzano in HTML con il tag
<a name="sezDue" id="sezDue">...</a>
(in questa fase conviene dare lo stesso valore a name e ad id, per farlo capire a tutti i browser)
Al posto dei puntini ci puoi mettere il titolo della sezione (ad esempio), oppure ti basta anche un semplice &nbsp; (che pero` ti occupa lo spazio orizzontale o verticale a seconda di come e` inserito)

E ritorno sul linguaggio:
Visto che fai una cosa nuova, ti consiglio la DTD XHTML 1.0 Strict , che ti risolve molti dei problemi con IE (e nel tuo layout minimalista, potrebbe eliminare la necessita` del CSS specifico per IE).
Una volta cambiata DTD usa i validatori per sistemare la sintassi, togliendo tutti i tag e attributi di formattazione (se ce ne sono ancora).
Per la sintassi XHTML con differenze rispetto a HTML: w3schools
Per un tutorial XHTML vedi la guida di HTML.it
Per altre info e riferimenti, vedi anche i "link utli" del forum

**lessicoitaliano** · 31-08-2010, 11:13

OK, Mich_,

grazie per le indicazioni. Una sola domanda: le hai provate sul mio script, tu, quelle ancore?

Saluti - Lessico

**Mich_** · 31-08-2010, 11:38

Non ho visto alcuno script (JS o altro) nella tua pagina.

Ho visto la tua pagina, ho notato che i link puntano a dei <div>.
Questo e` corretto dal punto di vista teorico, ma in alcuni browser piu` vecchi non funziona.
Inoltre il link punta a tutto il blocco, e questo non mostra quindi la testa del blocco, ma un punto nel suo centro.

**lessicoitaliano** · 31-08-2010, 13:01

Mich_, sei un asso!

Avevo provato la tua soluzione, e non funzionava, perchè non avevo capito di dover chiudere l'ancora PRIMA DELL'INIZIO DEL BLOCCO.

Però non volevo più annoiarti, perchè pensavo che nemmeno tu sapessi come fare.
Perciò mi sono limitato a chiederti se l'avevi provata. Quando mi hai risposto, ho seguito il tuo ragionamento sul centro del blocco, e ... MIRACOLO! Funziona a meraviglia.

Ci sono piccoli problemi, il validatore non accetta il NAME uguale all'ID, lo spazio introdotto dall'ancora, ma queste sono sciocchezze che posso benissimo risolvere da solo.

Sei stato favoloso! Grazie di tutto.

Lessico

Discussione: Dilemma pagina con TOP assoluto

Strumenti discussione

Ricerca discussione

Visualizza

Dilemma pagina con TOP assoluto

RISOLTO!

Permessi di invio