• User

    Pulsanti con tecnica sliding door

    Ciao a tutti,
    come detto nell' oggetto, stò cercando di creare dei pulsanti da utilizzare per evidenziare eventuali vocaboli linkati nel testo, per renderli più evidenti ma.... funzionerebbe tutto, se non fosse per il fatto che la parola evidenziata viene spostata sempre a sinistra e tolta dalla sequenza del discorso....questo è il codice:

    .clear{
    overflow:hidden;
    width:100%;
    }
    a.button{
    background: transparent url('../images/bNEW_d.png') no-repeat scroll top right;
    color: #990000;
    display: block;
    float: left; 
    font: bold 14px;
    font-family:"Trebuchet MS";
    height:18px;
    margin-right:2px;
    padding:0 10px 0px 5px; /* sliding doors padding */
    text-decoration: none;
    }
    a.button span {
    background: transparent url('../images/bNEW.png') no-repeat;
    display: block;
    line-height: 18px;
    padding: 0px 0 0px 5px;
    } 
    

    C'è qualcuno che mi può dare una mano?

    Grazie
    mrzpro


  • Super User

    @mrzpro said:

    funzionerebbe tutto, se non fosse per il fatto che la parola evidenziata viene spostata sempre a **sinistra **e tolta dalla sequenza del discorso....

    Ciao 🙂
    è colpa di quel float:left;


  • User

    Ciao Claudio, ho provato e non è assolutamente il float: left; perchè serve a far ricongiungere i due pezzi di immagine....

    grazie comunque....


  • Super User

    Ciao Mrzpro 🙂
    deduco così a occhio che potrebbe essere colpa di quel "display:block; sul tag span.
    Altrimenti prova a darci una risorsa online per controllare direttamente il problema, ciao!


  • User

    Purtroppo non è neppure il display:block. I link per verificare il problema sono nel sito :

    xxxxferentino estensione .org
    subdir: test
    nome file: storia_personaggi_filetico estensione php
    percorso:
    xxxxferentino estensione .org
    subdir: test
    nome file: storia_personaggi_celestino estensione php

    il css interessato è al link :

    xxxxferentino estensione .org
    subdir: test/css
    nome file: main estensione css

    Nella pagina di celestino la cosa sembrerebbe funzionare in quanto il pulsante è correttamente posizionato nel punto in cui andrebbe scritto. Nella pagina di Filetico "Battista" andrebbe dopo "alla morte di" e "Palazzo Martino Filetico" dopo "nell' omonimo"

    non riesco proprio a venirne fuori!!!!!

    grazie
    mrzpro
    PS. non potendo inviare link ho sostituito le 3W+il punto con 4X


  • Super User

    Allora vediamo di risolvere l'arcano 🙂

    Il problema infatti non dipende da un solo parametro ma da più messi insieme e a più oggetti.

    Innanzitutto elimina l'attributo "float:left;" da a.button (riga 188). Ciò esclude l'elemento dal normale flusso di lavoro ed è quindi causa dell'errore "sintattico" che trovi a video.

    Elimina anche la proprietà **"display:block" **allo span interno (riga 199). Attraverso questa proprietà è vero che puoi trattare l'altezza e la larghezza di questo elemento però a sua volta impedisci allo stesso di avere degli elementi accanto a se (in casi particolari si può risolvere attraverso l'aggiunta di un "float" cosa che però non può avvenire nel tuo caso.).

    Adesso hai già l'elemento posto nella sua esatta ubicazione. Il prossimo passo è cercare una via di mezzo per permettere ai due sfondi ( sfondo e bordi) di adagiarsi perfettamente tra loro.

    L'unico modo che ho trovato attraverso gli elementi che hai utilizzato è il seguente:

      • Elimina innanzitutto i valori di "line-height" sul tag a e span. Non ne hai bisogno attualmente.
      • Aggiungi allo span interno un padding-left di 10px al fine di mantenere una sdistanza simmetrica tra i due bordi ed il testo.

    Infine ti consiglio innanzitutto di avvolgere il testo all'interno di un tag più adatto quale il paragrafo (<p></p>) anziche l'header h2 che deve essere utilizzato per i titoli di secondo grado e non per blocchi di testo così pieni.

    Altro appunto è quello di non usare un font-size diverso per questi elementi evidenziati poichè disallineerebbero l'intero testo. Usa un bold magari anche se secondo me già lo sfondo rende bene l'idea. Mantenere l'unità "em" sarebbe ancor più l'ideale 🙂 .

    Ciao facci sapere!


  • User

    Ottimo funziona alla grande.....grazie a tutti!!!