Notizie: è uscita la versione 68 di Thunderbird! Scopri tutte le novità!

Autore Topic: span & mozilla  (Letto 3319 volte)

0 Utenti e 1 Visitatore stanno visualizzando questo topic.

Offline luca

  • Post: 21
span & mozilla
« il: 30 Gennaio 2004 16:42:56 »
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

Offline flod

  • Amministratore
  • Post: 15033
    • http://www.flod.org
span & mozilla
« Risposta #1 il: 30 Gennaio 2004 20:32:13 »
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.

Offline luca

  • Post: 21
span & mozilla
« Risposta #2 il: 30 Gennaio 2004 22:51:34 »
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

Offline flod

  • Amministratore
  • Post: 15033
    • http://www.flod.org
span & mozilla
« Risposta #3 il: 31 Gennaio 2004 08:09:13 »
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.

Offline arso

  • Post: 136
    • El Rocker's
span & mozilla
« Risposta #4 il: 31 Gennaio 2004 18:12:58 »
Citazione da: 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


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

Offline gian

  • Post: 129
    • http://www.cettolini.it
span & mozilla
« Risposta #5 il: 31 Gennaio 2004 19:21:37 »
Citazione da: arso
Citazione da: 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


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

Offline flod

  • Amministratore
  • Post: 15033
    • http://www.flod.org
span & mozilla
« Risposta #6 il: 31 Gennaio 2004 19:42:40 »
@arso: grazie mille per il link; mi sto facendo una cultura  :shock:
Ogni giorno si scopre qualcosa  :wink:

Ciao,
Francesco.

Offline luca

  • Post: 21
span & mozilla
« Risposta #7 il: 01 Febbraio 2004 19:29:12 »
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  :D

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

Offline gian

  • Post: 129
    • http://www.cettolini.it
span & mozilla
« Risposta #8 il: 01 Febbraio 2004 20:20:33 »
Citazione da: 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  :D

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

Offline luca

  • Post: 21
span & mozilla
« Risposta #9 il: 01 Febbraio 2004 21:42:51 »
no, non funziona  :cry:

Offline gian

  • Post: 129
    • http://www.cettolini.it
span & mozilla
« Risposta #10 il: 02 Febbraio 2004 11:44:51 »
Citazione da: luca
no, non funziona  :cry:


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

Offline flod

  • Amministratore
  • Post: 15033
    • http://www.flod.org
span & mozilla
« Risposta #11 il: 02 Febbraio 2004 12:02:49 »
Citazione da: luca

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!

Offline luca

  • Post: 21
span & mozilla
« Risposta #12 il: 02 Febbraio 2004 17:43:15 »
a voi come funziona?

Offline flod

  • Amministratore
  • Post: 15033
    • http://www.flod.org
span & mozilla
« Risposta #13 il: 02 Febbraio 2004 18:08:45 »
In IE vedo senza spazio sopra, in firebird con spazio sopra e sotto.

Offline gian

  • Post: 129
    • http://www.cettolini.it
span & mozilla
« Risposta #14 il: 02 Febbraio 2004 18:59:49 »
Citazione da: luca
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...

0 Utenti e 1 Visitatore stanno visualizzando questo topic.