[HTML] Codice box testo con scrollbar sopra immagine

ivyen91

Nuovo Utente
8 Feb 2017
1
0
1
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
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.298
332
83
Una cosa così?
Codice:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style type="text/css">
#box1 {
    background-image: url(Jl15Wr9.jpg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    margin: 0px;
    padding: 0px;
    height: 370px;
    width: 600px;
}
#box2 {
    padding: 10px;
    height: 344px;
    width: 274px;
    margin-left: 300px;
    border: 3px solid #0005FF;
    overflow-y: scroll;
}
</style>
</head>

<body>
<div id="box1">
  <div id="box2">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  </div>   
</div>
</body>

</html>