Testo dell'ancora coperto dall'oggetto Sticky Bar 
Autore: Luigi Dell'aquila
Visite 1615,
Followers 3,
Condiviso 0
Ciao a tutti
Quando clicco su un link che punta a un'ancora, il titolo dell'ancora viene coperto dalla Sticky Bar. Come si può fare per far visualizzare il titolo dell'ancora sotto la Sticky Bar?
Qui un esempio così mi spiego meglio. Se clicco su "testo con l'ancora" mi linka nella parte del documento contenente "ANCORA1" quest'ultima però viene coperta dalla Sticky Bar.
Grazie
Postato il
si succede, basta inserire un oggetto HTML prima dell'oggetto testo e della stessa altezza della sticky ed all'oggetto HTML inserisci l'ancora così il testo conparira nella pozizione corretta (puoi anche provare con il nuovo oggetto separator al posto di quello HTML). Spero ti sia utile ciao Giancarlo.
Autore
Ciao Giancarlo e grazie.
Nell'esempio del link è un oggetto testo, ma a me serve per un oggetto HTML con testo lunghissimo e con molte ancore, e quindi il tuo consiglio nel mio caso non posso usarlo.
... devi usare semplicemente una mia vecchia idea espressa nel vecchio forum, ed anche >> qui, ...cioè la coordinata top negativa...
.
... vedendo il sorgente della tua pagina nel tuo specifico caso quindi così:
<style> #ancora1 {top:-75px !important} </style>
... se usi altre ancore basta aggiungerle con il loro nome/id nella srtinga di codice:
<style> #ancora1, #ancora2, #eccetera {top:-75px !important} </style>
... se i punti di ancoraggio li crei tu manualmente, basta aggiungere per esempio la classe "ancora" e controllare tutte le ancore in un colpo solo...
.
Scusa Luigi ma non so se ho capito, basta inserire l'oggetto per creare spazio sopra all'oggetto testo, uno ogni ancora, oppure suddiviti il tuo oggetto HTML lunghissimo in pezzi con relative ancore ed oggetti per creare spazio, oppure usi del codice per creare spazio come ha scritto kol le soluzioni ci sono devi decidere tu quale ti può andare bene.
Autore
Ciao Giancarlo, in alcuni casi ho utilizzato dopo l'ancora i <br> per dare gli spazi necessari prima del titolo dell'ancora e quindi andava bene. In questo caso non posso fare come dici perchè è un documento lunghissimo con tantissime ancore che supera di moltissimo il limite degli oggetti da inserire in una pagina e quindi l'unica soluzione è un unico oggetto html. La soluzione dei <br> dopo le ancore non va bene perchè devo inserire anche dei <div> con bordi colorati (tipo cornice) con accordion text ecc e quindi usando i <br> la cornice e accordion text verrebbero sfigurati. Non so se mi sono spiegato
Ciao Kolasim
Ho provato così, ma non funziona. Il titolo viene sempre coperto ho anche aumentato i px a -95, ma senza esito
Prima della chiusura del tag HEAD
<style>
ancor {
top:-95px !important;
}
</style>
Nome dell'ancora
<div class="ancor">
<a name="ancora1" id="ancora1"></a>
</div>
...!... vedo che non hai usato esattamente il mio codice...
... riprova con il copia/incolla...
... valido da almeno 10 anni...
... ok capito ...
... se invece vuoi usare punti di ancoraggio creati da te assegnando la classe "ancora" come detto prima, e posizionati dove serve, devi fare così:
<a id="ancora1" class="ancora"></a>
***contenuto***
<a id="ancora2" class="ancora"></a>
***contenuto***
<a id="ancora3" class="ancora"></a>
***contenuto***
... eccetera ... .. . .
... quindi in questo caso con ancore da te create per controllare tutte le Ancore in un colpo puoi usare in /HEAD:
<style> .ancora {top:-75px} </style>
.
Autore
Scusa, ma non riesco a capire dove sbaglio
. Mi sembra di aver copiato il tuo codice per inserirlo, come hai consigliato, in una classe perchè ho tantissime ancore e quindi è più pratico e veloce. Ho provato anche come segue, ma non funziona. Mi potresti cortesemente dire come creare la classe?
Grazie
<style>
#ancor
{top:-75px !important}
</style>
nome dell'ancora
<div class="#ancor"> <a name="ancora1" id="ancora1">ANCORA1</a> </div>
Autore
Niente da fare. Ho inserito il tuo codice, ma non funziona. Vi ringrazio comunque per la pazienza.
Una soluzione potrebbe essere di non visualizzare l'oggetto sticky bar in quella pagina. E' possibile?
forse devi togliere il cancelletto... la classe si definisce
.ancor {.......}
e toglilo anche nel codice... <div class="ancor">............
Autore
Ciao Skeggia
Nell'HEAD c'è
<style> .ancora {top:-75px} </style>
e nell'oggetto html ho provato così, ma non funziona viene sempre coperto
<div class="ancora">
<a id="ancora1" ></a>
</div>
... ...non so come di possano complicare le cose semplici...
.... il codice che ti avevo postato prima per il copia/incolla per quella pagina di prima, era in grassetto, ed è questo:
<style> #ancora1 {top:-75px !important} </style>
... che non hai usato ...
...!... adesso manca anche il LINK... ...e se vuoi usare la classe devi fare esattamente come avevo detto nell'ultimo mio post, di cui non c'è riscontro nel tuo codice...
... nel modo detto la classe andrebbe abbinata all'Ancora; ...!...questo te lo sei inventato tu (anche se potrebbe funzionare):
<div class="ancora">
<a id="ancora1" ></a>
</div>
.
@Luigi
La proprietà top non potrà mai funzionare se l'elemento non ha position absolute o relative (anche altre), ma in ogni caso NON deve avere position static (default) come nell'esempio che hai linkato.
https://www.w3schools.com/cssref/pr_pos_top.asp -> Definition and Usage
Se inserisci l'ancora da programma, il div ha già position absolute, altrimenti devi inserirlo tu nel CSS.
Pensiero ad alta voce: consiglierei a tutti di uscire un po' dall'orticello di Incomedia (per quanto riguarda gli extra) e di navigare di più per la Rete. Si scoprirebbero verità diverse e sorprendenti.
Autore
KolaSim prima era come avevi detto, ma non funzionava e quindi ho provato un'altra soluzione (quella che hai visto tu con il post precedente). Ora ho inserito nuovamente quello che dici, ma non funziona. Può darsi che non sia capace io
, non riesco a fare come dite, è possibile non far visualizzare la sticky bar solo in quella pagina?
Grazie e scusate la mia imbranataggine
Autore
Ho aggiunto "position: absolute;" e funziona. Grazie a tutti per la paziena e un grazie a Lemonsong
<style>
ancor {
position: absolute;
top:-30px !important;
}
</style>
a me la tua prova funzia con Chrome e FF, ma non con IE...
Autore
Mirko hai ragione, infatti non funziona. In un primo momento sembrava di sì invece non è l'ancora a posizionarsi nella misura indicata (top:-75px), ma è l'oggetto HTML che vi si posiziona. Può darsi che le ancore sono tag obsoleti e quindi gli aggiornamenti dei browser recenti le hanno lasciate da parte. Comunque ho trovato la soluzione (bruttissima esteticamente, ma funzionale) dopo l'ancora ho inserisco alcuni <br>. Così facendo la cornice mi viene distorta (molto spazio in alto - ogni testo dell'ancora è in una cornice colorata) però funziona.
ciao, ...forse! te lo ricordi
, >> questo ... è il mio vecchio esempio recuperato che avevo ideato nel vecchio Forum che fu! ...che per me funziona anche su IE.6...
...
... visto che eri il mio braccio destro, da sempre
, ... mi farebbe piacere avere una conferma da te o meno, sempre se ti è possibile farlo, provando il precedente mio codice su un'Ancora 
inserita da Programma, questo:
<style> #ancora1 {top:-75px !important} </style>
.
... grazie comunque, ed alla prossima occasione, ciao...
.
... per Luigi Dell'aquila, ...vedi qui: https://helpcenter.websitex5.com/it/post/207736
@KolAsim
Eccomi con la prova richiesta, direi che funzia....ciaoooo
http://www.mirboprova.altervista.org/@beta_16/pagina-16.php
... ... ... Mirko ... grandissimissimo...!!!...
... grazieeeeee!!!! ...
...
Autore
Non vi arrabbiate
io ho riprovato con il codice di kolasim, ma a me non funziona http://luigidellaquila.altervista.org/prove_ws/7.html
... no! ... non ci arrabbiamo...
... ma si è fatta confusione...
... il link del mio esempio era relativo al fatto che funzionasse su IE, e non c'entra col discorso precedente, in quanto il mio esempio si basa sul creare un distanziamento automatico delle posizioni relative in base ai pixel-font...
... questo altro vecchio > esempio invece funziona nei browser attuali, ma non so se anche sugli IE, però su IE.6 no!...
... di conseguenza, e passando quindi alla tua pagina di esempio, per far funzionare le mie Ancore manuali, non del programma, devi usare in /HEAD questo codice:
<style> #ancoraa , #ancorab , #ancorac {position:relative; top:-100px;} </style>
...!... se invece vuoi usare le Ancore
del programma, devi usare il suggerimento del primo post, quello usato da Mirko a conferma nell'ultimo suo post...
.
ciao
PS: ... se fai altre prove fallo sapere...
Autore
In style ho inserito a.ancora {position:relative; top:-75px;} è funziona, ma perchè prima non funzionava? Mi sa che mi ero proprio rinc.... con tutte ste ancore le ho sognate anche la notte. Nell'esempio ho inserito il nuovo <style> in head.
Grazie a tutti, una cosa semplice l'ho fatta diventare una questione complicatissima
... forse è l'età che avanza?
... visto ... ottimo...
... funziona... 
...
@Luigi
Visto che l'ho aperto, ti ho risposto nell'altro post.
La prossima volta che chiudi un post e per qualche motivo aggiungi una riposta dopo la chiusura, sarebbe carino per chi ha partecipato alla discussione se venisse riaperto, grazie
@staff & moderatori
Dovrebbe far parte dei vostri "compiti" gestire queste situazioni avvertendo l'utente di riaprire il post, grazie
Autore
E' vero, hai ragione però non ci ho pensato a riaprire il post
. La prossima volta, se dovesse capitare, sarà la prima cosa che farò?
Hai ragione...non ho pensato che bastava avvertirlo, visto che noi non possiamo riaprire un Post chiuso...
La prossima volta sarà fatto...