Visualizzazione dei risultati da 1 a 2 su 2

Discussione: box testo con barra scorrevole su immagine

  1. #1
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    1

    box testo con barra scorrevole su immagine

    Buongiorno,
    sto creando una semplice pagina Web con il software Kompozer e ho necessità di inserire sopra un'immagine un box di testo con barra scorrevole.
    L'immagine è questa http://imgur.com/Jl15Wr9.jpg e vorrei che il box stesse sulla parte destra dell'immagine, ma non sono a conoscenza del codice giusto da usare.
    Un esempio, per farvi capire cosa cerco, è su quest'altra pagina web http://imgur.com/O6k2es5.png, dove se notate sulla parte dx dell'immagine è stato creato un box senza sfondo con scroll bar che permette di avere un testo all'interno della pergamena.

    Grazie in anticipo

  2. #2
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    18,643
    ciao,

    crea un contenitore, metti come sfondo l'immagine verificando che le misure dello sfondo siano le stesse del contenitore, all'interno del contenitore metti il box per il testo e lo posizioni relativamente, controlla l'overflow.

    qui un esempio pratico (il bordo rosso l'ho aggiunto solo per evidenziare il boxTesto, puoi toglierlo):

    codice:
    css
    #box {
    width:800px;
    height:600px;
    background-image:url(http://i.imgur.com/Jl15Wr9.jpg);
    background-size: 800px 600px;
    background-repeat: no-repeat;
    }
    
    #boxTesto {
    width:200px;
    height:150px;
    overflow-y:scroll;
    position:relative;
    top:100px;
    left:500px;
    border:1px red solid;
    }
    
    HTML
    <div id="box">
    <div id="boxTesto">
    testo...
    </div>
    </div>

Tag per questa discussione

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