Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it
    Registrato dal
    Nov 2010
    Messaggi
    36

    Aiuto allineamento elementi

    In questa pagina (http://dimensioneacqua.altervista.org/flora.html) ho messo una linea di divisione(con il tag <hr/>) tra la parola "Prova" e la parola "Prova2". Vorrei che questi tre elementi fossero uno difianco all'altro e non in fila verticale ! Come posso risolvere il problema ?

    Grazie in anticipo

  2. #2
    Utente di HTML.it
    Registrato dal
    Jan 2011
    Messaggi
    5
    Ciao,

    Purtroppo non puoi. Il comando HR è usato per dividere i contenuti di una pagina html e quindi è impossibile avere ai lati del testo.

    Hai un'unica alternativa, sempre lavorando don i DIV, è quella di definirli in Css con delle posizioni assolute, ecco un sempio:

    <html>
    <head>
    <style type="text/css">
    <!--
    #Prova1 {
    position:absolute;
    left:10px;
    top:16px;
    width:76px;
    height:72px;
    z-index:1;
    }
    #Prova2 {
    position:absolute;
    left:100px;
    top:16px;
    width:76px;
    height:72px;
    z-index:2;
    }
    -->
    </style>
    </head>

    <body>
    <div id="Prova1">PROVA 1</div>
    <div id="Prova2">PROVA 2</div>
    <hr style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BACKGROUND-COLOR: #786e77; WIDTH: 2px; HEIGHT: 1000px; MARGIN-LEFT: 8%; BORDER-TOP: medium none; BORDER-RIGHT: medium none">
    </body>
    </html>

  3. #3
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    Non vedo nella pagina il blocco col filetto, e forse non mi è chiaro il problema. Però potresti anche sostituire il filetto con un'immagine e spaziare i contenuti con margini e padding o attraverso word-spacing, o anche l'immagine potrebbe essere impostata come sfondo. Crea un'immagine che ti faccia da filetto, e prova a giochicchiare coi css, qui un po' di esempi (l'immagine usata che fa da filetto nel mio caso si chiama gif.gif)

    codice:
    <style type="text/css">
    
    p.uno {word-spacing:3em; }
    
    p.due {word-spacing:1em; }
    p.due span {word-spacing:0;}
    
    p.tre {  }
    p.tre span {margin-left:100px;}
    
    p.quattro {  }
    p.quattro img {margin-left:100px; margin-right:100px}
    
    p.cinque { }
    p.cinque span {padding-right:100px;background-image:url(gif.gif);background-repeat:  
    no-repeat; background-position: center right;}
    
    </style>
    codice:
    <p class="uno">prova1 [img]gif.gif[/img] prova2</p>
    
    <p class="due"><span>spaziatura normale in span</span> <span>[img]gif.gif[/img]</span> spaziatura diversa in p</p>
    
    <p class="tre"><span>prova1</span> <span>[img]gif.gif[/img]</span> <span>prova2</span></p>
    
    <p class="quattro">prova1 [img]gif.gif[/img] prova2</p>
    
    <p class="cinque"><span>prova1</span> <span>prova2</span> prova3</p>

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.