+ Rispondi alla Discussione
Risultati da 1 a 7 di 7

Pulsanti con tecnica sliding door

Ultimo Messaggio di mrzpro il:
  1. #1
    User
    Data Registrazione
    Sep 2008
    Messaggi
    40

    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:


    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
    Ultima modifica di JACK1971; 03-06-09 alle 12:04 Motivo: Maiscole - Racchiuso codice nei tag

  2. #2
    Esperto L'avatar di claudioweb
    Data Registrazione
    Jul 2005
    Località
    Salento
    Messaggi
    3,754
    Citazione Originariamente Scritto da mrzpro Visualizza Messaggio
    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;
    Si avvicina la Festa della Mamma.

  3. #3
    User
    Data Registrazione
    Sep 2008
    Messaggi
    40
    Ciao Claudio, ho provato e non è assolutamente il float: left; perchè serve a far ricongiungere i due pezzi di immagine....

    grazie comunque....

  4. #4
    User Attivo L'avatar di karedas
    Data Registrazione
    May 2007
    Località
    Impruneta (Firenze)
    Messaggi
    1,102
    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!
    Easysystem- Software and hardware solutions

  5. #5
    User
    Data Registrazione
    Sep 2008
    Messaggi
    40
    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

  6. #6
    User Attivo L'avatar di karedas
    Data Registrazione
    May 2007
    Località
    Impruneta (Firenze)
    Messaggi
    1,102
    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!
    Ultima modifica di karedas; 06-06-09 alle 01:18
    Easysystem- Software and hardware solutions

  7. #7
    User
    Data Registrazione
    Sep 2008
    Messaggi
    40
    Ottimo funziona alla grande.....grazie a tutti!!!

+ Rispondi alla Discussione

Tag per Questa Discussione

^ Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
  • Il codice BB è Attivato
  • Le faccine sono Attivato
  • Il codice [IMG] è Attivato
  • Il codice [VIDEO] è Attivato
  • Il codice HTML è Disattivato
  • Trackbacks Attivato
  • Pingback Attivato
  • Refback Attivato

SEO by vBSEO 3.6.0 PL2 ©2011, Crawlability, Inc.