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

    Sfida sui CSS: 2 span sulla stessa riga con puntini separatori

    Magari è facilissimo, magari proprio non si può fare.

    Vorrei ottenere nella pagina dei contatti che sto costruendo per un sito l'effetto "sommario" tipico dei libri

    es:

    Ordini..............ordini@pippo.it
    Informazioni.......info@pippo.it

    ecc ecc

    quindi i puntini devono andare a riempire lo spazio tra i due campi permettendo l'allineamento del primo a sinistra e del secondo a destra del div container

    La sistemazione degli elementi alternati è semplice, ho fatto due stili di span, per il primo campo float: left per il secondo float: right.

    Problema puntini: una soluzione "alla buona" è usare per ogni riga un div che contiene i due span che ha come sfondo una serie di puntini. Ai div mettere un colore di sfondo coprente. Il risultato non è il massimo, a volte vi sono puntini a metà poco prima o poco dopo le parole.

    Qualcuno conosce un trucco dal risultato migliore, magari che non passi dall'uso di un'immagine di sfondo (nel caso voglia cambiare in corsa font e colori)?

    Grazie

  2. #2
    rettifica.

    Si ottiene qualcosa di meglio usando il solo bordo bottom puntinato per il div di riga, mettendo bianco lo sfondo degli span.
    Ma è comunque facile avere ancora punti segati a metà.

  3. #3
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    codice:
    span:after {
      content: "......."
    }
    è accettabile?
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  4. #4
    purtroppo no tanto, after e before non mi sembrano supportati da IE.

    Grazie comunque, per ora mi accontento del div col bordo inferiore puntinato

  5. #5
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    Originariamente inviato da Pepepilota
    purtroppo no tanto, after e before non mi sembrano supportati da IE.
    dai un occhio all'articolo in firma...
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  6. #6
    Utente di HTML.it L'avatar di Razorblade
    Registrato dal
    Feb 2002
    Messaggi
    1,308
    Così può andare?
    Testato con IE6, Firefox 3, Opera 9.5, Safari 3 tutto sotto winXp

    Codice PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="it-IT">
      <
    head profile="http://gmpg.org/xfn/11">
        <
    meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <
    link rel="stylesheet" href="style.css" type="text/css" media="screen" />
      </
    head>
      <
    body>
      
      <
    div class="rows">
        <
    div><span class="left">Ordini</span><span class="right">ordini@pippo.it</span></div>
        <
    div><span class="left">Informazioni</span><span class="right">info@pippo.it</span></div>
      </
    div>
      
      </
    body>
    </
    html

    Codice PHP:
      /* v1.0 | 20080212 */

      
    htmlbodydivspanappletobjectiframe,
      
    h1h2h3h4h5h6pblockquotepre,
      
    aabbracronymaddressbigcitecode,
      
    deldfnemfontimginskbdqssamp,
      
    smallstrikestrongsubsuptt, var,
      
    buicenter,
      
    dldtddolulli,
      
    fieldsetformlabellegend,
      
    tablecaptiontbodytfoottheadtrthtd {
        
    margin0;
        
    padding0;
        
    border0;
        
    outline0;
        
    font-size100%;
        
    vertical-alignbaseline;
        
    backgroundtransparent;
      }
      
    body {
        
    line-height1;
      }
      
    olul {
        list-
    stylenone;
      }
      
    blockquote{
        
    quotesnone;
      }
      
    blockquote:beforeblockquote:after,
      
    q:beforeq:after {
        
    content'';
        
    contentnone;
      }

      
    /* remember to define focus styles! */
      
    :focus {
        
    outline0;
      }

      
    /* remember to highlight inserts somehow! */
      
    ins {
        
    text-decorationnone;
      }
      
    del {
        
    text-decorationline-through;
      }

      
    /* tables still need 'cellspacing="0"' in the markup */
      
    table {
        
    border-collapsecollapse;
        
    border-spacing0;
      }
        
        .
    rows div {
            
    width300px;
            
    border-bottom1px dotted #000000;
            
    clearboth;
            
    margin22px 0px 0px 0px;
        }
        
        * 
    html .rows div {
            
    margin0px 0px 0px 0px;
            
    floatleft;
        }
        
        .
    left {
            
    floatleft;
            
    border-bottom1px solid #ffffff;
            
    line-height20px;
            
    margin: -20px 0px 0px 0px;
        }
        
        * 
    html .left {
            
    margin0px 0px -2px 0px;
            
    positionrelative;
            
    background#ffffff;
        
    }
        
        .
    right {
            
    floatright;
            
    border-bottom1px solid #ffffff;
            
    line-height20px;
            
    margin: -20px 0px 0px 0px;
        }
        
        * 
    html .right {
            
    margin0px 0px -2px 0px;
            
    positionrelative;
            
    background#ffffff;
        


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 © 2026 vBulletin Solutions, Inc. All rights reserved.