Div metà fisso e metà scroll

[nicolato]

Ciao a tutti! Sto realizzando una pagina dove la metà sinistra ha uno slider con delle immagini mentre la destra deve contenere un testo. Ho due problemi da risolvere di cui uno più importante, l'altro più banale.

1) Il testo a destra è molto lungo quindi voglio che abbia uno scroll che permetta di leggerlo tutto ma mantenendo ferma la pagina, senza che scenda.

2) Le immagini dello slider vorrei riempissero sempre tutta la pagina anche in altezza

In pratica ora è così



Mentre io lo vorrei così, con l'immagine a tutto schermo in altezza e il testo di destra che scorre con il mouse ma rimanendo fisso.



Spero di essermi spiegato bene!!Comunque..

Questo è il codice html

<div class="flexslider">
           <ul class="slides">
	   <li><img class="split" src="immagini/foto1.jpg"> </li>
	   <li><img class="split" src="immagini/foto2.jpg"> </li>
	   <li><img class="split" src="immagini/foto3.jpg"> </li>
	   </ul>
         </div>

</div>
</div>
<div id="testo">

<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis egestas quam, suscipit rhoncus felis condimentum ut. Nullam auctor nunc in diam luctus, id aliquet tellus adipiscing. Nam eget lectus a elit semper consectetur vitae in metus. Suspendisse et nibh quis massa mattis porttitor. Sed faucibus tempor commodo. Donec dignissim nunc sed quam accumsan, sit amet hendrerit metus vulputate. Sed nec mauris accumsan orci elementum porttitor id et lectus. Integer at malesuada metus. Etiam pellentesque egestas augue. Proin congue vehicula tempus. Aenean nulla enim, elementum vel posuere eget, aliquam at lacus. Integer volutpat eu velit ut auctor. Vestibulum a mi nisl. Morbi a sollicitudin lectus. Praesent id elementum ipsum, eu rutrum orci. Donec a iaculis odio, ut suscipit elit.

Donec congue vehicula enim. Aliquam pharetra ligula quis iaculis gravida. Sed lacinia ut lectus ut tincidunt. Integer quis hendrerit tellus. Mauris scelerisque commodo dolor non eleifend. Integer imperdiet pellentesque leo, a bibendum mi placerat non. Integer tempor, ante ac aliquam imperdiet, urna massa tincidunt dolor, nec tincidunt purus sapien non ante. Donec quis erat a nunc semper sagittis sodales non massa. Ut quis metus felis. Vivamus adipiscing lectus ut tortor interdum egestas. Ut bibendum commodo luctus.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut dui eros, porttitor eu orci id, pellentesque dapibus ligula. Proin vitae volutpat mauris, sed volutpat lectus. Curabitur lectus est, pharetra et mauris ut, laoreet pulvinar arcu. Sed ornare, erat vel euismod euismod, libero urna sagittis ante, non condimentum tortor ligula quis neque. Etiam commodo augue eu dignissim ullamcorper. Sed malesuada molestie quam, eget pellentesque augue posuere non. Vivamus aliquet mollis malesuada. Ut convallis molestie dui, eget faucibus ipsum consequat ac. Ut urna magna, aliquet quis feugiat quis, ultrices a nisi. Nunc vestibulum nibh ac lectus consectetur, a tempus orci consectetur. Aliquam ut risus malesuada, pharetra massa non, posuere metus.

Sed condimentum tellus nec sapien porta, non porttitor justo accumsan. Phasellus ut tempus lacus. Proin quis est pharetra, lobortis nunc id, fermentum lectus. Phasellus in gravida dolor. Suspendisse et sapien sed risus pellentesque tempus non posuere augue. Aenean tincidunt consectetur tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue elit ac ante ultricies iaculis. Aenean mauris diam, porttitor quis tincidunt non, euismod eu nulla. Nam et leo eget sapien adipiscing sagittis id a eros. Nulla non condimentum nisl, id convallis quam. Nunc hendrerit aliquet metus. Donec vitae aliquam eros.

Quisque in sapien vitae metus venenatis ultrices. Nulla porttitor, nibh ac aliquet rutrum, urna nunc accumsan urna, sit amet scelerisque magna lectus eu lacus. Suspendisse accumsan auctor quam at viverra. Nulla lobortis lacinia orci ac blandit. Nullam molestie ante nunc, quis vulputate tellus sollicitudin eu. Sed a magna varius, molestie diam eget, lobortis quam. Aenean dictum vel tellus sit amet commodo. Mauris adipiscing pharetra orci, vitae volutpat sem sagittis ac. Etiam accumsan, purus nec tincidunt posuere, ante mi condimentum risus, in scelerisque urna sapien vel ligula. Morbi dignissim purus odio, nec congue velit adipiscing quis. Phasellus leo sem, tristique vitae hendrerit nec, fermentum nec enim. Donec eget pellentesque massa. Suspendisse non dapibus magna, ultrices tempus ante. Vestibulum quis magna eget massa ultrices luctus.

Maecenas ac imperdiet lectus. Nullam eget erat sed quam volutpat vulputate. Donec accumsan nunc ac nisi dictum porttitor. Maecenas nec vestibulum eros. Aenean vitae tellus nec lectus pellentesque porta a vitae lorem. Mauris ac arcu ac mauris fermentum venenatis. Morbi justo nibh, accumsan sit amet diam eu, fringilla facilisis justo. Mauris ut purus posuere, consequat odio non, auctor enim. Vivamus scelerisque enim ac vulputate commodo. Cras semper nulla sit amet ultrices mattis. Integer elementum tortor ac sodales viverra. Vestibulum vehicula tincidunt ante, in bibendum turpis elementum mattis. Suspendisse potenti.

Mauris at arcu volutpat urna adipiscing blandit. Duis id posuere lacus. Nullam at turpis id lacus congue pharetra quis et diam. Sed mi mauris, dictum ut bibendum ut, rutrum vitae sapien. In congue felis vel purus fermentum, nec convallis ipsum egestas. Ut pulvinar nisi non mi pellentesque congue. Donec id vestibulum diam. Ut vulputate facilisis ante eu ornare. Quisque eu lacinia quam. Nunc tincidunt sapien justo, sed cursus dolor fermentum quis. Duis vitae mi fermentum, mattis elit ac, sagittis risus.

Sed pellentesque sollicitudin mi, a dapibus nisl bibendum sed. Nunc neque ipsum, ullamcorper eu risus eu, egestas molestie augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam convallis porttitor nulla. Suspendisse bibendum tincidunt odio ac dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean vehicula, nisl in venenatis pharetra, diam tortor semper eros, at posuere diam felis et metus. Suspendisse potenti.

Phasellus porta lobortis nisl quis fermentum. Nulla convallis quam eget dapibus vulputate. Cras venenatis est nec ipsum euismod congue. Ut blandit turpis ullamcorper sem dapibus aliquet. Aliquam placerat mollis mi, eget facilisis tellus tincidunt vel. Phasellus commodo metus tellus, ac commodo elit aliquam non. Vestibulum sed libero quis magna blandit rhoncus. Nulla feugiat dui ut arcu viverra, et semper nisl posuere. Vivamus nec adipiscing lectus, non porttitor lectus. Cras sed euismod augue, id rutrum odio. Quisque aliquet, urna eu lacinia pretium, sem nunc adipiscing ipsum, vitae malesuada arcu lectus ut leo. Sed aliquet massa sed lacus lacinia, ut dignissim justo pharetra. Sed dapibus diam blandit sodales posuere. Donec ut sapien fermentum est egestas lobortis.

Vestibulum nec nibh lacus. Aliquam id nulla eu nisi rhoncus convallis. Etiam at mauris et velit placerat aliquet ut vel dui. Maecenas vitae eleifend arcu. Donec eleifend risus blandit imperdiet fermentum. Donec mi urna, rhoncus a malesuada et, rhoncus non magna. Aliquam fringilla mi eget pellentesque faucibus. Nunc posuere sodales tristique. Vivamus fringilla in dui at iaculis. Ut quam quam, consectetur et pellentesque sed, egestas et mi.

Sed pulvinar ac magna a rutrum. Sed at aliquam augue. Nulla mauris leo, rutrum a nulla in, lacinia pellentesque libero. Cras in porttitor nisl. Vivamus et velit enim. Sed elementum dui id lacus bibendum tincidunt interdum ut purus. Nulla urna felis, molestie ut pulvinar pulvinar, suscipit ut ligula. Duis non volutpat quam. Vestibulum et lacinia libero. Proin a tincidunt ante, pharetra eleifend eros. Nunc pretium nisl id odio scelerisque dictum. Sed vestibulum nunc non orci aliquet, at commodo tellus tincidunt. Ut interdum eget est at pulvinar. Nullam fringilla libero at vestibulum facilisis.

Nam venenatis dictum dolor. Mauris at volutpat diam. Nullam sodales vestibulum mi at auctor. Vivamus vel nisl rutrum, viverra lorem id, congue velit. Suspendisse elementum nibh non odio tempus eleifend. Etiam sit amet faucibus erat. Sed eu sapien tellus. Mauris aliquam dignissim ipsum, quis commodo augue dignissim eget. Nulla et aliquam eros, ut elementum metus. Pellentesque dignissim ultricies ornare. Cras volutpat sit amet velit quis fringilla. Suspendisse porta pretium suscipit. Nunc eget volutpat nunc, ac elementum orci. 
</p>
</div>
</div>

mentre questo è il css

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd,fieldset, 
form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, 
details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, 
section, summary,time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	max-width:100%!important;

}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
	background-color:#fff;
	overflow-y:hidden!important;
	overflow-x:hidden!important;
}

a:link {text-decoration:none; color: #333;}
a:link  hover{text-decoration:none; color: #333;}
a:link  visited{text-decoration:none; color: #333;}


div#wrapper{
		float:left;
		width:100%;
		margin-left:-49%
}


div#content{
		margin-left:49%
}


div#testo{
		background:#FFF; 
		float:right;
		width:49%;
}


div#testo p {
		text-align:center;
		padding: 2% 12% 2% 12%;
		color: #333;
		font-family: 'Georgia',serif;
		font-size: 15px;
		font-style: italic;
		line-height:23px;
		
}
		
#container img {
		border:none;
		width:100%;
		z-index:999;
		}
				
#container {
		text-align:center;
		width:100%;
		z-index:1;		
}


#container ul li{
		display:inline;
}

Qualcuno riesce ad aiutarmi? Grazie

 

[J. Owlsteam]

La proprietà css che regola il comportamento delle scrollbar dovrebbe essere 'overflow', hai provato a settarla su 'auto' per la classe div#testo? Prova ad aggiungere overlow:auto il comportamento dovrebbe essere quello da te desiderato!

Per il problema delle immagini non so se posso esserti d'aiuto, ad ogni modo vorresti che avessero una dimensione fissa, una dimensione fissa solo orizzontalmente o verticalmente, oppure disponi di immagini che non variano di dimensioni l'una dall'altra?

 

[nicolato]

Ciao!grazie per la risposta..ho sistemato il div con il testo impostandolo in fixed. La parte delle immagini però non è ancora apposto, mi spiego meglio.. su molte immagini rimane uno spazio bianco sooto mentre vorrei che riempissero completamente lo schermo in altezza, cosa che riesco a fare solo impostando una altezza in pixel..vorrei invece impostare l'altezza in percentuale in modo che le immagini si adattino in base allo schermo..

 

[J. Owlsteam]

Ho capito... Allora potresti provare con gli attributi max-width, max-height e min-width, min-height da applicare all'immagine: una volta raggiunto il limite di una delle due dimensioni l'altra si modifica di conseguenza per mantenere le proporzioni. Ma se avessi sia immagini estese orizzontalmente sia verticalmente credo potresti avere dei problemi!

 

[maestroweb]

Puoi usare questo qui http://www.jqueryrain.com/?AUWwBkyO
demo e qui
Un altro jquery
Invece di usare un scroller che ci sono se cerci sul google sara meglio un slider con jquery o tabs.
Leggi anche questo http://grahamwideman.wikispaces.com/Wikispaces+--+Fixing+paragraph+spacing se conosci un po inglese