Ver Mensaje Individual
  #3 (permalink)  
Antiguo 28/07/2008, 02:07
Avatar de Raulmmmm
Raulmmmm
 
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 17 años
Puntos: 36
Respuesta: Menu estatico + contenido con movimiento por el scroll

Con un poquito de CSS:
Código HTML:
<!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" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dos columnas, una fija</title>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#barraz { width: 15%; float: left; height: 100%;}
#texto { height: 100%; width: 85%; overflow: auto; }
</style>
</head>
<body>
<div id="barraz">
<h1>Menú</h1>
<ul>
<li><a href="#">Enlace</a></li>
<li><a href="#">Enlace</a></li>
<li><a href="#">Enlace</a></li>
<li><a href="#">Enlace</a></li>
<li><a href="#">Enlace</a></li>
<li><a href="#">Enlace</a></li>
<li><a href="#">Enlace</a></li>
<li><a href="#">Enlace</a></li>
<li><a href="#">Enlace</a></li>
<li><a href="#">Enlace</a></li>
<li><a href="#">Enlace</a></li>
</ul>
</div>
<div id="texto">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum felis. Nullam dui est, placerat et, rhoncus non, condimentum id, erat. Mauris ultricies sapien et ligula. Aliquam erat volutpat. Fusce hendrerit dolor. Vivamus luctus, risus nec bibendum rutrum, libero metus lobortis mi, nec tempor lectus nulla sit amet justo. Vivamus euismod hendrerit quam. Curabitur at libero in arcu porta tempus. Donec venenatis. Nunc accumsan felis ut elit. Curabitur elit. Quisque ac elit. Donec semper lectus in elit.</p>
<p>Donec nec eros at lacus imperdiet eleifend. Maecenas at est at est auctor luctus. Integer nisi. Proin risus ligula, sollicitudin eget, ornare at, semper vitae, augue. Fusce pulvinar dignissim lorem. Donec dignissim pulvinar nibh. Praesent ac sapien ac quam consectetuer lobortis. Suspendisse velit. Donec pellentesque, diam id consequat adipiscing, leo erat ornare libero, non bibendum leo odio in massa. Sed placerat nisi ut nulla. Maecenas tempus gravida dui. Nulla ut elit sed arcu tempus accumsan. Vestibulum dapibus sem et lectus. Vivamus sem. Ut in urna. Pellentesque turpis. Proin commodo vulputate quam. Aenean nulla risus, accumsan a, laoreet eu, vestibulum a, augue. Morbi lobortis mollis nibh. Donec urna.</p>
<p>Vestibulum lorem lorem, volutpat vitae, commodo in, laoreet quis, nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent pretium diam ac nibh. Vivamus sit amet orci. Phasellus sollicitudin venenatis nisl. Praesent turpis. Fusce leo. Mauris scelerisque. Nam ultrices. Duis ac mauris. Morbi luctus tristique arcu. Sed quam. Nunc urna odio, dignissim in, scelerisque mattis, porttitor id, eros.</p>
<p>Morbi lobortis tellus sed elit. Duis eu arcu sit amet nulla sodales laoreet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc in elit vel augue aliquam congue. In odio nunc, adipiscing sodales, elementum id, tristique eu, dui. Vivamus velit quam, hendrerit eu, placerat quis, tincidunt quis, justo. Pellentesque quam. Etiam lacinia feugiat ante. Ut ante quam, viverra in, pharetra vel, condimentum et, nisl. Maecenas pretium ultricies massa. Nunc dictum orci id turpis. Praesent elementum libero molestie erat. Sed vitae nisl. Proin non enim ac mi fermentum dignissim. Donec venenatis, nisl ac rhoncus porttitor, nisi pede tincidunt ipsum, eget auctor justo massa a enim. Sed molestie congue risus. Aliquam purus. Nulla facilisi. Proin ipsum. Curabitur nec arcu et massa feugiat scelerisque.</p>
<p>Aliquam venenatis nulla sit amet mi. Integer eleifend magna sit amet erat. Etiam pellentesque, massa ut iaculis interdum, augue odio sagittis lacus, et vestibulum lacus magna in leo. Fusce sem. Nulla facilisi. Morbi imperdiet, est nec mattis elementum, urna est scelerisque nibh, eleifend cursus sem pede pretium turpis. Nunc sollicitudin placerat dolor. Aenean iaculis varius diam. Suspendisse vitae tellus ut ligula mollis accumsan. Cras nisl mi, ultrices et, tempor non, suscipit at, lectus. Sed sit amet est. Ut vel felis at mi interdum fermentum. Mauris metus. Vestibulum viverra risus eget ligula. Nam iaculis, sem vel malesuada tempus, nunc neque dignissim eros, quis ullamcorper turpis elit in dolor. Fusce non lacus a arcu rutrum mollis. Quisque vitae nibh et pede placerat auctor.</p>
<p>Curabitur porta. Nam elit. Donec at leo. Vestibulum dui turpis, consequat nec, consectetuer sit amet, vehicula sit amet, elit. Pellentesque et urna non est malesuada consectetuer. Integer dui massa, euismod nec, cursus in, vehicula a, libero. Quisque purus neque, tincidunt a, blandit eget, egestas aliquet, augue. Integer consectetuer vehicula velit. Pellentesque orci dui, tempor nec, gravida et, blandit a, sapien. Aenean tincidunt lorem eu neque. Donec dolor ipsum, dapibus in, dictum quis, imperdiet a, libero. Nam cursus scelerisque urna. Nullam tempor, arcu et cursus mollis, est tortor tincidunt augue, non tincidunt pede nunc in mauris. Proin tellus sem, congue non, molestie at, volutpat at, lorem. Suspendisse urna. Aliquam erat volutpat. In placerat.</p>
<p>Praesent dictum tincidunt diam. Phasellus ut diam. Phasellus laoreet. Phasellus lorem. Aenean turpis mauris, placerat eget, facilisis nec, condimentum id, mauris. Donec pellentesque tristique magna. Sed malesuada massa quis velit. Nulla eget ipsum a ipsum condimentum egestas. Integer placerat blandit tellus. In ac nisl. Vivamus volutpat eleifend lorem.</p>
<p>Phasellus venenatis sagittis augue. Donec sagittis nisi vitae massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla eu lectus. Pellentesque ultrices elementum nunc. Donec et justo. Nunc gravida lorem quis quam. Nunc commodo tortor eu lorem. Nulla bibendum est ut risus. Pellentesque ac risus.</p>
<p>Pellentesque molestie. Praesent ac massa vitae mauris rhoncus pretium. Proin bibendum odio eget sapien. Praesent sem pede, auctor at, gravida sed, tincidunt a, ipsum. Aliquam erat volutpat. Etiam eu pede. Donec elementum. Etiam diam. Proin eleifend aliquam dolor. Aliquam congue bibendum metus. Fusce suscipit nisl a leo. Fusce at lectus id urna pretium aliquet. Sed eu erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Nulla blandit. Nulla ante elit, fermentum ac, dignissim et, sodales at, massa. Vestibulum risus augue, eleifend nec, dignissim sed, convallis consectetuer, lacus. Etiam lorem urna, porttitor sagittis, mattis vitae, pellentesque ut, est. Cras id risus vel magna varius viverra. Suspendisse tincidunt est et mauris. In nec massa sit amet massa vestibulum eleifend. Donec imperdiet mi. Integer ultricies ultrices turpis. Vivamus faucibus. Curabitur suscipit neque nec risus. Nam nec mauris. Nunc in magna et velit vestibulum facilisis. Ut porttitor pellentesque eros. Donec posuere ullamcorper mi. Aliquam pulvinar consequat lacus. Aliquam et est.</p>
<p>Aenean sit amet mauris sed nunc pulvinar fermentum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque dictum, massa in volutpat cursus, enim felis egestas quam, non vehicula pede tellus quis nunc. Fusce id dui. Praesent eu justo. Sed vitae nisl ut diam porttitor facilisis. Proin imperdiet euismod libero. Integer non metus. Donec vel leo. Nam metus lorem, tempor quis, vulputate a, dignissim at, nisl. Suspendisse sodales pretium mi. Proin iaculis imperdiet tellus. Vivamus sollicitudin. Etiam vitae enim. Duis lacus enim, posuere a, rhoncus a, vestibulum quis, risus. Vestibulum vulputate, lacus nec ultrices lacinia, nisi ipsum laoreet sapien, in interdum diam dolor consequat justo.</p>
<p>Pellentesque lacinia convallis pede. Nam vulputate mauris. In vitae elit et eros rutrum varius. Fusce mollis libero non est. Cras condimentum, ipsum sed luctus facilisis, velit nulla tincidunt nisl, ut sagittis lorem turpis at ipsum. Aenean dapibus sem sed dui. Curabitur nisl dui, iaculis et, congue ut, dictum sed, nisl. Etiam dolor. Aliquam erat volutpat. Maecenas dapibus dictum lectus. Nulla sed purus tempor augue pretium tincidunt. Maecenas laoreet felis eu odio. Vestibulum est eros, eleifend quis, scelerisque vitae, rutrum id, lacus. Fusce vitae nisi at purus sollicitudin bibendum. Fusce vel lectus. Suspendisse vel augue vitae mauris adipiscing faucibus. Nulla risus felis, blandit et, vestibulum eget, scelerisque ultricies, tellus. Praesent sagittis consectetuer orci. Nulla sollicitudin pulvinar sem. Quisque consectetuer massa vel neque.</p>
<p>Aenean mi. Nam id purus quis felis mattis consequat. Proin neque eros, aliquet vel, malesuada ac, adipiscing eu, nibh. Aliquam rhoncus semper ante. Nulla ligula. Cras felis. Aenean purus magna, ultricies eu, interdum quis, hendrerit in, lorem. Nulla pretium, orci ac vulputate tempus, mi dui adipiscing ligula, at interdum urna lorem nec quam. Maecenas aliquet lacus. Vestibulum aliquam, nisl at accumsan malesuada, lectus dui posuere erat, at fermentum mauris nunc a ante.</p>
<p>Aenean massa magna, porttitor at, adipiscing at, posuere et, enim. Nulla luctus porta tellus. Maecenas mattis. Nunc ut erat vel diam faucibus volutpat. Sed diam elit, adipiscing quis, elementum nec, aliquet a, libero. Phasellus eget nulla eu diam cursus accumsan. Sed ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam dictum, nibh eu egestas gravida, ligula massa vehicula arcu, eget commodo dolor nisi et odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc id urna euismod felis ultricies dapibus. Donec cursus. Integer tincidunt lectus id pede. Ut facilisis purus euismod nisl. Proin lobortis interdum enim. Ut a sapien. Suspendisse in ipsum et quam rutrum lacinia. In hac habitasse platea dictumst. Cras augue velit, ultrices nec, adipiscing ac, tincidunt a, elit. Integer faucibus.</p>
</div>
</body>
</html> 
Esto es útil para una sola página.