Pulsanti con tecnica sliding door

mrzpro

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

claudioweb

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

mrzpro

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

grazie comunque....

karedas

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!

mrzpro

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

karedas

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!

mrzpro

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