Topic: span & mozilla

[luca]

con questo css

Codice: [Seleziona]

.toplink {
    width: 149px;
    heigth: 18px;
    background: #FF0000;
    color: #FFFFFF;
    font-size: 12px;
    text-align: center;
    }
A.toplink:link, A.toplink:visited { text-decoration: none}
A.toplink:hover { text-decoration: underline}
mettendo DIV qui

Codice: [Seleziona]

<div class="toplink"><a href="index.asp" class="toplink">Home</a></div>
tutto ok mentre se sostituisco DIV con SPAN non ottengo più la stessa cosa

come mai mozilla non digerisce gli SPAN? errore mio? uso mozilla 1.5

[flod]

Secondo lo standard il tag SPAN non ha le proprietà width ed height (scoperto stasera anche io!); per cui il comportamento di mozilla è corretto.
L'unico modo per far funzionare il tag SPAN come il DIV è mettere nello stile anche questo

Codice: [Seleziona]

display: block;
Fatto questo vedrai che lo SPAN si comporta come DIV; rimane il fatto che se vuoi sfruttare gli attributi larghezza/altezza devi usare il DIV.

Esempio al contrario: se voglio far comportare il DIV come lo SPAN (ignorare altezza/larghezza) posso mettere nello stile

Codice: [Seleziona]

display: inline;
Così però non faccio altro che travestire il tag DIV.

Spero di essere stato chiaro.
Ciao,
Francesco.

[luca]

chiarissimo, ti ringrazio

quindi se devo realizzare una cosa del genere

cosa mi consigli?
pensavo di usare 5 span in modo da definire cinque box con all'interno il testo...se uso il div mi va a capo e preferirei non creare un'altra tabella poichè questa riga è già all'interno di altre tabelle

[flod]

Io userei una tabella; il tag div non puoi usarlo. L'unica soluzione che mi viene in mente con span è questa

Codice: [Seleziona]


.toplink {
    width: 149px;
    heigth: 18px;
    background: black;
    color: #FFFFFF;
    font-size: 12px;
    text-align: center;
    }
A.toplink:link, A.toplink:visited { text-decoration: none}
A.toplink:hover { text-decoration: underline}
.spazio {
     display: inline-block;
     background: black;
     color: black;
    }

<table bgcolor=black>
<tr><td>
<span class="spazio">_____</span>    
<span class="toplink"><a href="index.asp" class="toplink">Home</a></span>    
<span class="spazio">_____</span>    
<span class="toplink"><a href="index.asp" class="toplink">Chi siamo</a></span>    
<span class="spazio">____</span>    
<table>
</td></tr>


Ciao,
Francesco.

[arso]

chiarissimo, ti ringrazio

quindi se devo realizzare una cosa del genere

cosa mi consigli?
pensavo di usare 5 span in modo da definire cinque box con all'interno il testo...se uso il div mi va a capo e preferirei non creare un'altra tabella poichè questa riga è già all'interno di altre tabelle

Se vuoi fare una cosa + "corretta" dal punto di vista "semantico" (ovvero se vuoi separare il contenuto della pagina web dall'aspetto della stessa) ti consiglio di usare, per realizzare menu di navigazione, le care vecchie liste (

Codice: [Seleziona]

<ul> o <ol>).
E poi, tramite CSS fare apparie questa lista come un menu.

Questo e' cio' che iniziano a consigliare i webdesigner + navigati nei loro libri/siti e da sempre attenti alle nuove possibilita' offerte dagli standard CSS e XHTML che si vanno sempre + affermando da un po' di mesi a questa parte.

Per citarne uno tra tutti Jeff Zeldman: www.zeldman.com e www.alistapart.com.

La cosa è + facile a farsi che a dirsi.

Per realizzare una cosa del genere è utilissimo seguire passo-passo i tutorial che stanno su http://css.maxdesign.com.au/listamatic/: è una vera miniera di esempi su come si usano le liste ed i CSS per realizzare menu.
Anche annidati:  http://css.maxdesign.com.au/listamatic2/index.htm

Ciao

[gian]

chiarissimo, ti ringrazio

quindi se devo realizzare una cosa del genere

cosa mi consigli?
pensavo di usare 5 span in modo da definire cinque box con all'interno il testo...se uso il div mi va a capo e preferirei non creare un'altra tabella poichè questa riga è già all'interno di altre tabelle

Se vuoi fare una cosa + "corretta" dal punto di vista "semantico" (ovvero se vuoi separare il contenuto della pagina web dall'aspetto della stessa) ti consiglio di usare, per realizzare menu di navigazione, le care vecchie liste (

Codice: [Seleziona]

<ul> o <ol>).
E poi, tramite CSS fare apparie questa lista come un menu.

Questo e' cio' che iniziano a consigliare i webdesigner + navigati nei loro libri/siti e da sempre attenti alle nuove possibilita' offerte dagli standard CSS e XHTML che si vanno sempre + affermando da un po' di mesi a questa parte.

La cosa è + facile a farsi che a dirsi.
Ciao

concordo con quanto hai detto, separando completamente il layout dalla struttura si guadagna moltissimo in usabilità realizzando pagine che "ottimizzate" per tutti i browser, compresi quelli di vecchia data, senza penalizzare la grafica per i browser recenti (quelli che supportano CSS 2)

in questo momento sto uploadando le modifiche ad un sito, nelle sezioni rinnovate ho rimosso completamente le tabelle e applico gli stili solo con fogli esterni con la specifica @import
tutto con i div e gli span a posizionamento assoluto espresso in percentuale con pagine che si adattano da una larghezza minima di 6-700 pixel ad una larghezza massima indefinita

il risultato è che il sito è accessibile pure con browser testuali come ad esempio Lynx

[flod]

@arso: grazie mille per il link; mi sto facendo una cultura  
Ogni giorno si scopre qualcosa  

Ciao,
Francesco.

[luca]

spero non me ne abbiate se posto in questa sezione la richiesta che sto per fare ma mi sembra più consono replicare a questa discussione:

ho usato la lista come segnalata da voi e vi ringrazio molto, in effetti è molto meglio delle celle, però ho qualche problemino con l'altezza, se potreste daremi una mano ve ne sarei molto grato  

il link è questo http://etruria.int.webmatrixhosting.net/index2.htm mentre il link al css (visibile anche nel codice della pagina) è quest'altro http://etruria.int.webmatrixhosting.net/style.css

con mozilla mi aggiunge una decina di pixel sopra e sotto (versione 1.5) mentre con IE solo sotto

[gian]

spero non me ne abbiate se posto in questa sezione la richiesta che sto per fare ma mi sembra più consono replicare a questa discussione:

ho usato la lista come segnalata da voi e vi ringrazio molto, in effetti è molto meglio delle celle, però ho qualche problemino con l'altezza, se potreste daremi una mano ve ne sarei molto grato  

il link è questo http://etruria.int.webmatrixhosting.net/index2.htm mentre il link al css (visibile anche nel codice della pagina) è quest'altro http://etruria.int.webmatrixhosting.net/style.css

con mozilla mi aggiunge una decina di pixel sopra e sotto (versione 1.5) mentre con IE solo sotto

hai provato a mettere nel CSS questa impostazione?

padding-top: 5px; padding-bottom: 5px;

(naturalmente il 5 è preso a caso)

se devi invece impostare un padding per tutti i lati puoi mettere

padding: 5px 10px 5px 10px;

(nell'ordine: top right bottom left)

in questo modo dovresti svincolarti dalle impostazioni di default del browser

[luca]

no, non funziona  

[gian]

no, non funziona  

hai una copia on line da vedere (indicando eventualmente la parte incriminata)?

[flod]

il link è questo http://etruria.int.webmatrixhosting.net/index2.htm mentre il link al css (visibile anche nel codice della pagina) è quest'altro http://etruria.int.webmatrixhosting.net/style.css

Dovrebbe essere questa!

[luca]

a voi come funziona?

[flod]

In IE vedo senza spazio sopra, in firebird con spazio sopra e sotto.

[gian]

a voi come funziona?

con mozilla 1.5 tutto ok, perfettamente centrata, con exploder 5.5 è allineata in alto rispetto all'area rettangolare

non so se è dovuto ad un conflitto di explorer rispetto alla specifica display, a suo tempo avevo letto che display crea qualche problema perciò non lo uso mai e non so quanto va a cozzare con i vari browser. cmq sappiamo bene che il supporto di explorer al CSS 2 non è il massimo che ci si possa aspettare

dando un'occhiata ai codici vedo che metti diverse specifiche ridondanti mescolando attributi HTML e stili in linea. provo a buttarti qualche input:

a) hai provato ad optare solo per gli stili?

b) hai provato a vedere cosa succede impostando il padding per il tag <li>?

c) hai provato con    vertical-align: middle  ?

insomma, giocherellando un po' con il codice forse puoi risolvere il problema

******
post-modifica
avevo scritto <li> usando i tag, non mi ero accorto che in questo forum si può postare in HTML...