Simulare Frame con CSS

**Willbloom** · 04-03-2011, 18:00

Salve a tutti,
prima di aprire questo nuovo post ho cercato soluzioni ed esempi per il mio problema ma non sono riuscita a venirne a capo.
Ho iniziato da poco a studiare i CSS e adesso vorrei fare un layout a tre colonne con soltanto quella centrale scrollabile.

Sono arrivata a questo punto

pagina

ma adesso dovrei centrare il tutto e, se possibile, non fare vedere nei monitor grandi la parte che avanza sotto.

(non so se sono riuscita a spiegare... dare una specie di limite di altezza mantenendo lo scroll...)

**Prill** · 05-03-2011, 09:40

dare una specie di limite di altezza mantenendo lo scroll

Ciao Willbloom, puoi assegnare al tuo div centrale l'altezza voluta e un overflow:auto

**Willbloom** · 07-03-2011, 11:20

Innanzitutto ti ringrazio per l'attenzione, Prill

Con il metodo che suggerisci però non si ha più la ripetizione in verticale dello sfondo (la pergamena) che è quello che vorrei mantenere :\

Concettualmente (penso) il procedimento sarebbe di racchiudere il tutto dentro un div contenitore (con impostate larghezza e altezza e centrato) ma non so adattare il codice
(in particolare per explorer

)

**Prill** · 07-03-2011, 22:50

Prova così

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>titolo</title>

<style type="text/css">
body {
	margin: 0;
	padding: 0;
	background-color: #fff;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
}
#contenitore {
	width: 930px;
        margin:0 auto;
}
#sinistro {
        width: 217px; 
        height: 700px;
	float: left;
        background: url(img/Cherry_blossom.jpg) no-repeat; 
}
#centrale {
        margin-left:217px;
	width: 466px;
        height: 540px;
        padding-top: 80px;
        padding-bottom:80px;
        background: url(img/pagina.jpg) no-repeat;
}
#centraleInterno {
        width: 350px;
        height: 100%;
        margin: 0 auto;
        overflow:auto;
}
#destro {
        width: 247px; 
        height: 700px;
	float: right;
	background: url(img/Ronin.jpg) no-repeat;
}
</style>
<!--[if IE 6]>
<style type="text/css">
#contenitore {
	width: 936px;
}
</style>
<![endif]-->

</head>
<body>
<div id="contenitore">
  <div id="sinistro">Colonna sinistra</div>
  <div id="destro">Colonna destra</div>

  <div id="centrale">
    <div id="centraleInterno">
	<h1>CONTENUTO SCORREVOLE</h1>
	

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
	

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
       eccetera
	</div>

</div>
</div>


</body>
</html>

**Willbloom** · 08-03-2011, 12:40

grande, anzi mitico!

Grazie 1000

L'ho ritoccata un pochetto e come soluzione mi sembra buona, ora la passo per la valutazione del boss (il mio Sensei..)

**Willbloom** · 08-03-2011, 17:06

Fatto!!
Trovato un piccolo tips per la ripetizione verticale dello sfondo.
Se può essere di aiuto per altri, posto il link

pagina

Grazie ancora Prill!!

**Prill** · 08-03-2011, 18:57

Non visualizzo correttamente la tua pagina (visto su Firefox ed Explorer6).
Nel mio codice lo scrolling era interno alla pergamena che non era ripetuta, se lo vuoi esterno, su tutta la colonna centrale e non vuoi che l'immagine sia tagliata lateralmente puoi reimpostare le dimensioni così:

codice:

#contenitore {
	width: 950px;
        margin:0 auto;
        background-color: #ffffcc;
}
#sinistro {
        width: 217px; 
        height: 700px;
	float: left;
        background: url(img/Cherry_blossom.jpg) no-repeat; 
}
#centrale {
        margin-left:217px;
        width: 486px;
        height: 700px; 
}
#centraleInterno {
        height: 100%;
        margin: 0 auto;
        overflow:auto;
}

nel css per ie6 reimposta la larghezza del contenitore a 956px.
Elimina poi nel div bg che hai aggiunto quella larghezza del 95%.

Personalmente eviterei uno sfondo ripetuto, per non aver poi problemi ogni volta con l'inserimento dei contenuti che devono incastrarsi con l'immagine di sfondo e userei invece più div, cui è assegnata una stessa classe e l'immagine di sfondo, calcolando i padding dall'alto, dal basso e lateralmente

**Willbloom** · 09-03-2011, 11:24

Sì, tnx, volevo farlo esterno ^.^
Ho visto che le misure tagliavano ma stavo troppo cotta per continuare ieri^^

A questa seconda possibilità non avevo pensato, per facilitare l'impaginazione e l'inserimento dei contenuti avevo pensato di ritagliare la pergamena, fare una copia "speculare-verticale" e attaccarla, come se fosse una pagina lunghissima ahahahah

Discussione: Simulare Frame con CSS

Strumenti discussione

Ricerca discussione

Visualizza

Simulare Frame con CSS

Permessi di invio