Marcos fijos

ib3xn0 · #1 (**permalink**) 07/10/2008, 01:04

Hola a todos, quisiera saber el codigo para dejar como marcos fijos "arriba y derecha", solo dejando en modo scroll el "centro".

salu2.

Daniel Ulczyk · #2 (**permalink**) 07/10/2008, 06:54

El ejemplo que voy a darte no es el 100% sobre lo que necesitás, pero te puede dar una idea a las claras sobre qué basar tu trabajo.

CSS Frames v2 de 456 Berea Street

Espero te sea útil.
Saludos.

ssclamp · #3 (**permalink**) 08/10/2008, 10:33

Si te entendido bien, al decir marcos quieres decir capas o divisores. Si estoy en lo cierto el siguiente código permite una cabecera y un sidebar (derecho) fijos y siempre visibles, y un cuerpo central (a la izquierda del sidebar) para el contenido principal de la página:

- cabecera: fija y siempre visible (sin scrollbar)
- sidebar (lado derecho): fijo y siempre visible (sin scrollbar)
- cuerpo de contenidos: con su propio scrollbar

Funciona correctamente en ie6, ie7, firefox, opera... y no le afecta la resolución de pantalla

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Cabecera y derecha fijos</title>
<style type="text/css">
html body {
	margin: 0;
	padding: 0;
	overflow: hidden;
}
#contenedor {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}	
#cabecera {
	width: 100%;
	height: 10%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:18px;
	background-color:#CCCCCC;
	margin: 0px;
	text-align: center;
	overflow: hidden;
}	
#cuerpo {
	width: 82%;
	height: 90%;
	float: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	background-color:#ffffff;
	padding: 0px;
	text-align: center;
	overflow: auto;
}	
#sidebar { 
	float: right;
	right: 0px;
	bottom: 0px;
	width: 18%;
	height: 90%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	background-color:#CC0000;
	color:#FFFFFF;
	padding: 0px;
	text-align: center;
	overflow: hidden;
}	
</style>

</head>

<body>
<div id="contenedor">
	<div id="cabecera">La cabecera se mantiene siempre visible</div>
	<div id="cuerpo">
		<div style="height: 1000px;">Esta composición funciona en cualquier resolución y esta capa tiene su propio
		scroll por si el contenido es mayor que la pantalla,<br /> y nunca empuja al sidebar a salirse de la pantalla.<br /><br />
		Este conjunto funciona en ie6, ie7, firefox, opera...
		</div>
	</div>
	<div id="sidebar">El sidebar se mantiene siempre visible y fijo</div>
</div>
</body>

</html>

Si necesitas meter iframe en la capa 'cuerpo' lo puedes hacer porque el doctype lo permite.

El iframe te permitirá cargar otras páginas en la capa 'cuerpo', lanzándolas desde enlaces que tengas en el 'sidebar' o en la 'cabecera'.

Saludos

Mikmoro · #4 (**permalink**) 08/10/2008, 16:14

Muy buen aporte

Una duda: ¿qué utilidad tiene que el contenedor tenga posición absoluta?

Cita:

#contenedor {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}

ssclamp · #5 (**permalink**) 08/10/2008, 16:32

Hola Mikel, en realidad ninguna... es puro vicio de escritura (!?).

Un contenedor líquido al 100% ya tiene un valor de posición en sí mismo. Quitando los valores que has resaltado funciona igual de bien.

Saludos

Mikmoro · #6 (**permalink**) 08/10/2008, 16:33

Ya me parecía

De todos modos, muy bien resuelto.

Saludos.