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

    Posizione del testo nel div

    E' la prima volta che mi metto a lavorare con i CSS, quindi la soluzione potrebbe essere abbastanza stupida ed intuitiva ^^''

    Ho neccessità di creare un div, largo l'80% del totale e posto, orizzontalmente, al centro della pagina. Per far ciò ho fatto:

    codice:
     div.Testo {
    position: absolute;
    width: 80%; 
    height:100%; 
    top: 0;
    left: 10%;
    right: 10%;
    }
    codice:
    <div class="Testo" id="Testo">
    </div>
    E funziona.
    A questo punto avevo la neccessità di mettere un'immagine al bordo destro e sinistro del div...non venendomi altre idee ho creato altri due div:

    codice:
    <div style="position: absolute; left:10%; background: url(margine_sinistro.gif); width:4px; height:100%" id="margine_sinistro">
    </div>
    <div style="position: absolute; right:10%; background: url(margine_destro.gif); width:4px; height:100%" id="margine_destro">
    </div>
    Ovviamente ora quando vado a scrivere nel div "Testo", la scritta inizia e finisce sotto i due margini laterali, nascondendola in parte.
    Pensavo di rimediare usando padding-left e padding-right, ma mi spostano l'intero div e non solo il testo.
    Come posso fare?

  2. #2
    Utente di HTML.it
    Registrato dal
    Oct 2005
    Messaggi
    79
    Ciao,

    non so se hai risolto cmq se ho capito tu vorresti fare la seguente cosa:

    - mettere un' immagine a destra una a sinistra e del testo in mezzo

    inoltre se vuoi che il testo sia al centro usa text-align:center, oppure dai un margin-left
    Spero di averti aiutato.

    Ciao

    prova così:

    css:


    codice:
             div.Testo {
    position: absolute;
    width: 80%; 
    height:100%; 
    top: 0;
    left: 10%;
    right: 10%;
    }
    
    
    .floatDx{float:right;}
    .floatSx{float:left;}

    html

    codice:
    <div class="Testo" id="Testo">
    [img]PERCORSO_IMMAGINE[/img]
    <p class="floatSx">Ciao</p>
    [img]PERCORSO_IMMAGINE[/img]
    </div>

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.