Visualizzazione dei risultati da 1 a 7 su 7
  1. #1

    Indirizzo ............................... telefono

    Ciao a tutti,
    mi trovo davanti ad una situazione tanto semplice quanto insolubile con il classico xhtml+css:

    tante righe di questo tipo, che riempiano lo schermo al 100%:

    Indirizzo .................................................. ..... telefono
    Via Monte Santo, 14 - 00000 Genova ........... 054 4958488
    Viale Aldo Moro, 445 - 00000 Roma ............ 045 68767345

    Semplicemente il testo "indirizzo" e "telefono" variano in larghezza e non devono andare a capo. Cambiando dimensione alla finestra devono essere i puntini ad allungarsi/accorciarsi.

    Ho trovato diverse soluzioni "accroccate":
    1) immagine di un puntino ripetuta come sfondo di un div + 2 colonne a larghezza fissa
    2) border dotted nel div centrale e linea bianca a coprire i puntini nelle altre due colonne

    Ho provato soluzioni alternative:
    3) <pre> con carattere di tabulazione
    4)

    e text-indent

    RISULTATO: NIENTE DA FARE, il colore di sfondo della pagina può cambiare rivelando gli accrocchi delle soluzioni 1 e 2, con le 3 e 4 semplicemente non si ottiene quello che voglio!

    Un'altra via potrebbe essere utilizzare javascript per modificare dinamicamente la larghezza di un div "puntini" in base agli altri due div, ma sono tante righe e diventa piuttosto macchinoso.

    MA E' POSSIBILE CHE STO' CACCHIO DI LINGUAGGIO, RIVISTO E CORRETTO 20 VOLTE DAI MIGLIORI SPECIALISTI NON PERMETTA UNA COSA COSI' SEMPLICE ??? DA SCLERARE SEMPLICEMENTE!!

    Grazie mille a quanti vorranno scervellarsi in questa cosa, cordialmente. Gianni

  2. #2
    In uno dei pochi casi che c'è relazione tra righe e colonne non usi le tabelle?!??
    Fantasupermegafavolipermeramagicultra irresistibili
    4 10 30 100 1001 personaggi insuperabili fantaincredibili ultraimpossibili iperterribili irresistibili!!!

    "... a quell'età ... bastava un dito per fare la pace ..."
    fotine

  3. #3
    Ciao Ricman, anzitutto grazie per la risposta,
    ... non uso le tabelle anzitutto perchè come saprai il w3c le sconsiglia per il discorso usabilità, ma anche perchè un qualcosa tipo il codice sotto porterebbe a capo le righe indirizzo e telefono:

    <table style="width: 100%;">
    <tr>
    <td>via Sgaravatti, 215 - 09100 Cagliari (CA)</td>
    <td style="width: 100%; border-bottom: 1px dotted black;"></td>
    <td>tel. 050 58584848</td>
    </tr>
    </table>

    Se conosci un modo per non far andare a capo i testi e riempire la colonna centrale di puntini fammi pure sapere....
    Per il momento grazie ancora, ciao

  4. #4

    SOLUZIONE TROVATA

    Ho finalmente risolto, e dire che mi sono sbattuto per giorni ed era proprio una fesseria (overflow: hidden):
    propongo per i posteri 3 soluzioni testate su safari, con o senza tabella:

    // 1^ soluzione - puntini di riempimento utilizzando una tabella
    <table style="width: 100%;">
    <tr>
    <td><nobr>via Sgaravatti, 215 - 09100 Cagliari (CA)<nobr></td>
    <td style="width: 100%; overflow: hidden; border-bottom: 1px dotted black;"></td>
    <td><nobr>tel. 050 58584848<nobr></td>
    </tr>
    </table>


    // 2^ soluzione - puntini di riempimento table-less usando il punto
    <div style="float: right;">
    Tel. 408 48585844
    </div>
    <div style="float: left;">
    Via sgaravatti, 204 - 08349 Siracusa (VE)
    </div>
    <div style="overflow: hidden;">
    .................................................. .................................................. ......................
    </div>


    <div style="clear: both;"></div>

    // 3^ soluzione - idem ma più usabile (è anche possibile sollevare i punti all'altezza del testo)
    <div style="float: right;">
    Tel. 408 48585844
    </div>
    <div style="float: left;">
    Via sgaravatti, 204 - 08349 Siracusa (VE)
    </div>
    <div style="border-bottom: 1px dotted black; overflow: hidden;">

    </div>

    Grazie comunque a quanti si sono interessati, ciao e spero di aver evitato lo sbattimento a qualcun altro.

  5. #5
    Originariamente inviato da Giannixeddu
    ... non uso le tabelle anzitutto perchè come saprai il w3c le sconsiglia per il discorso usabilità
    Le sconsiglia quando vengono usate impropriamente

    Originariamente inviato da Giannixeddu
    Se conosci un modo per non far andare a capo i testi
    I css prevedono il "nowrap" ( white-space: nowrap; )

    Originariamente inviato da Giannixeddu
    e riempire la colonna centrale di puntini fammi pure sapere....
    border-bottom: 1px dotted silver;
    nella colonna centrale
    Fantasupermegafavolipermeramagicultra irresistibili
    4 10 30 100 1001 personaggi insuperabili fantaincredibili ultraimpossibili iperterribili irresistibili!!!

    "... a quell'età ... bastava un dito per fare la pace ..."
    fotine

  6. #6
    Ciao Ricman,

    secondo le linee guida la tabella và usata solo in caso di .... tabella! Cioè se devi esporre dei dati intabellati o quant'altro. E non posso dargli torto, non sò se hai mai ascoltato leggere una pagina web da un reader per non vedenti, quando trova dati intabellati senza logica non se ne capisce un' H.

    A parte il "nowrap" che non ricordavo (e sono ricorso al vecchio <nobr>), l'esempio che mi proponi è lo stesso a cui sono arrivato anche io nel mio precedente post (il numero 1), ma ovviamente grazie comunque .

    Ho però preferito usare il numero 3 che mi sembra più logico e pulito.

    Purtroppo però c'è un nuovo problema su cui se vuoi si può ragionare insieme :

    Nel caso in cui l'indirizzo è troppo lungo (o viene aumentata la dimensione del font) succede che la riga di indirizzo và a capo allungando il div contenitore di 2 righe, così succede che i puntini ed il telefono non seguono lo spostamento e rimangono sulla prima riga:

    _________________________________
    Viale Giorgio .............Tel. 06 58493834
    Napolitano, 122
    _________________________________

    il codice usato è:

    codice:
    <div style="width: 100%;">
       <div style="float: right;">
            Tel. 408 48585844
       </div>
       <div style="float: left;">
            Via sgaravatti, 204 - 08349 Siracusa (VE)
       </div>
       <div style="border-bottom: 1px dotted black; overflow: hidden;">
            
       </div>
    </div>
    Ammettendo che si possa fare, il primo che ci arriva posta il risultato, ciao e grazie.

  7. #7

    Riempimento spazio vuoto tra margine dx e paragrafo

    Semplificando il problema, vorrei ottenere qualcosa di simile:

    Su una sola riga:
    Riga di testo lunga indefinitamente ...............

    Su più righe:
    Riga di testo lunga indefinitamente e spesso
    su più righe
    ..................................................

    - non posso usare colori di sfondo o bordi bianchi per coprire i puntini (perchè lo sfondo potrebbe essere colorato e verrebbero visualizzati
    - non posso usare width perchè il testo deve adattarsi a diverse risoluzioni
    - non posso usare posizioni absolute perchè escono dal flusso del testo

    Che ci sia qualcosa di nuovo al riguardo con i CSS3 supportato da safari? Bohhhhhh

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.