WebSite X5Help Center

 
Luigi Dell'aquila
Luigi Dell'aquila
User

Testo dell'ancora coperto dall'oggetto Sticky Bar  it

Auteur : Luigi Dell'aquila
Visité 1921, Followers 3, Partagé 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

http://luigidellaquila.altervista.org/prove_ws/7.html

Posté le
30 RéPONSES - 12 UTILE - 1 CORRECT
Giancarlo B.
Giancarlo B.
User

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.

Lire plus
Posté le de Giancarlo B.
Luigi Dell'aquila
Luigi Dell'aquila
User
Auteur

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.

Lire plus
Posté le de Luigi Dell'aquila
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT
Luigi Dell'aquila
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 http://luigidellaquila.altervista.org/prove_ws/7.html

... devi usare semplicemente una mia vecchia idea espressa nel vecchio forum, ed anche >> qui, ...cioè la coordinata top negativa...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

... 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...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Giancarlo B.
Giancarlo B.
User
Luigi Dell'aquila
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.

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.  

Lire plus
Posté le de Giancarlo B.
Luigi Dell'aquila
Luigi Dell'aquila
User
Auteur
Giancarlo B.
Luigi Dell'aquila 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. 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.  

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

 ‪ KolAsim ‪ ‪
... 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...

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>

Lire plus
Posté le de Luigi Dell'aquila
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

...!... vedo che non hai usato esattamente il mio codice...undecided... riprova con il copia/incolla...wink ... valido da almeno 10 anni...

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Giancarlo B.
Giancarlo B.
User
Luigi Dell'aquila
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 ...

surprised 

... ok capito ... wink

Lire plus
Posté le de Giancarlo B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

... 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>
.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Luigi Dell'aquila
Luigi Dell'aquila
User
Auteur
 ‪ KolAsim ‪ ‪
...!... vedo che non hai usato esattamente il mio codice...... riprova con il copia/incolla... ... valido da almeno 10 anni...

Scusa, ma non riesco a capire dove sbaglioembarassed. 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>

Lire plus
Posté le de Luigi Dell'aquila
Luigi Dell'aquila
Luigi Dell'aquila
User
Auteur

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?

Lire plus
Posté le de Luigi Dell'aquila
Skeggia 12
Skeggia 12
Moderator

forse devi togliere il cancelletto... la classe si definisce

.ancor {.......}

e toglilo anche nel codice... <div class="ancor">............

Lire plus
Posté le de Skeggia 12
Luigi Dell'aquila
Luigi Dell'aquila
User
Auteur

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>

Lire plus
Posté le de Luigi Dell'aquila
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT
Luigi Dell'aquila
Niente da fare. Ho inserito il tuo codice, ma non funziona. Vi ringrazio comunque per la pazienza. ... ... 

... ...non so come di possano complicare le cose semplici...laughing

.... 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>

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
 lemonsong  
 lemonsong  
User

@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.

Lire plus
Posté le de  lemonsong  
Luigi Dell'aquila
Luigi Dell'aquila
User
Auteur

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 embarassed, non riesco a fare come dite,  è possibile non far visualizzare la sticky bar solo in quella pagina?

Grazie e scusate la mia  imbranataggine 

Lire plus
Posté le de Luigi Dell'aquila
Luigi Dell'aquila
Luigi Dell'aquila
User
Auteur

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>

Lire plus
Posté le de Luigi Dell'aquila
Mirko Boschetti
Mirko Boschetti
Moderator

a me la tua prova funzia con Chrome e FF, ma non con IE...frown

Lire plus
Posté le de Mirko Boschetti
Luigi Dell'aquila
Luigi Dell'aquila
User
Auteur

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.

Lire plus
Posté le de Luigi Dell'aquila
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

Mirko Boschetti
a me la tua prova funzia con Chrome e FF, ma non con IE...

ciao, ...forse! te lo ricordi smile, >> questo ... è il mio vecchio esempio recuperato che avevo ideato nel vecchio Forum che fu! ...che per me funziona anche su IE.6...wink...

... visto che eri il mio braccio destro, da sempre innocent, ... 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...wink

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

... ... ... Mirko ... grandissimissimo...!!!...  ... grazieeeeee!!!! ...wink...

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

... no! ... non ci arrabbiamo...laughing... 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...wink

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Luigi Dell'aquila
Luigi Dell'aquila
User
Auteur

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 complicatissimaembarassed... forse è l'età che avanza?laughing

Lire plus
Posté le de Luigi Dell'aquila
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

... visto ... ottimo... ... funziona... wink ...

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
 lemonsong  
 lemonsong  
User

@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 smile

@staff & moderatori

Dovrebbe far parte dei vostri "compiti" gestire queste situazioni avvertendo l'utente di riaprire il post, grazie smile

Lire plus
Posté le de  lemonsong  
Luigi Dell'aquila
Luigi Dell'aquila
User
Auteur
 lemonsong  
@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

E' vero, hai ragione però non ci ho pensato a riaprire il postembarassed. La prossima volta, se dovesse capitare, sarà la prima cosa che farò?wink

Lire plus
Posté le de Luigi Dell'aquila
Mirko Boschetti
Mirko Boschetti
Moderator
 lemonsong  
@staff & moderatori Dovrebbe far parte dei vostri "compiti" gestire queste situazioni avvertendo l'utente di riaprire il post, grazie

Hai ragione...non ho pensato che bastava avvertirlo, visto che noi non possiamo riaprire un Post chiuso...

La prossima volta sarà fatto...wink

Lire plus
Posté le de Mirko Boschetti