rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
 Inviato: 08 Ott 2005 20:44 Oggetto: * simulare un i-frame |
 |
|
con i div ed i css e' possibile simulare un i-frame, vediamo come
prendiamo come base il template costruito in questo thread, in particolare la colonna di destra e la modifichiamo annidandoci un altro div che chiameremo #scroll:
| Codice: |
<div id="destra">
<div id="scroll">
<h3>News</h3>
<p>Morbi sit amet ipsum sit amet metus porta viverra. Praesent sed
dolor. Aenean a metus. Aliquam pede.</p>
<p>Cras orci. Duis gravida, augue sed gravida hendrerit, lorem
tortor sagittis nisi, at posuere mi augue quis pede.</p>
<p>Aliquam mollis, arcu quis tristique interdum, augue tortor
convallis leo, a condimentum turpis sem id orci. Etiam tincidunt
justo non augue.</p>
<h3>Siti amici</h3>
<ul>
<li><a href="#">Amico di penna</a></li>
<li><a href="#">Compagna di classe</a></li>
<li><a href="#">Vicino di casa</a></li>
<li><a href="#">Fornitore simpatico</a></li>
</ul>
</div>
</div>
|
diamo ora larghezza ed altezza al div ed impostiamo overflow: auto; in questo modo se il contenuto e' superiore alla grandezza del div, comparira' la barra verticale che permettera' di leggere tutto il contenuto del div
| Codice: |
#scroll {
width: 95%;
height: 200px;
text-align: left;
overflow: auto;
margin: 0px auto auto auto;
padding: 10px;
}
|
anche in questo caso, per ottenere un miglior risultato ed evitare che con alcuni browser si creino problemi e compaia ad esempio la scomoda barra orizzontale, e' opportuno fare qualche prova e lasciare abbastanza spazio agli elementi per interagire correttamente
naturalmente questo sistema e' solo un trucco grafico: a differenza degli i-frames che importano una pagina esterna, infatti, con i div che li simulano tutto il contenuto deve essere gia' nella pagina (o comunque importato in altro modo server-side)
ed ecco qui di seguito il risultato ottenuto:
***
nota su overflow
esiste anche l'opzione overflow: scroll, ma vi fara' comparire sia la barra verticale che quella orrizontale
esistono anche le opzioni overflow-y: scroll ed overflow-x: scroll, ma... sono opzioni proprietarie microsoft, implementate quindi solo in ie e che non saranno interpretate dagli altri browsers con spiacevoli effetti di layout sfasciato |
|
FAQ
Cerca
Lista utenti
Gruppi
Registrati
Profilo
Messaggi privati
Log in
