Foros del Web » Creando para Internet » CSS »

Marcos fijos

Estas en el tema de Marcos fijos en el foro de CSS en Foros del Web. Hola a todos, quisiera saber el codigo para dejar como marcos fijos "arriba y derecha", solo dejando en modo scroll el "centro". salu2....
  #1 (permalink)  
Antiguo 07/10/2008, 02:04
 
Fecha de Ingreso: febrero-2008
Mensajes: 178
Antigüedad: 9 años, 9 meses
Puntos: 1
Marcos fijos

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

salu2.
  #2 (permalink)  
Antiguo 07/10/2008, 07:54
Avatar de Daniel Ulczyk
Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.175
Antigüedad: 12 años, 9 meses
Puntos: 2072
Respuesta: Marcos fijos

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.
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
  #3 (permalink)  
Antiguo 08/10/2008, 11:33
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 13 años, 2 meses
Puntos: 10
Respuesta: Marcos fijos

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
  #4 (permalink)  
Antiguo 08/10/2008, 17:14
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Marcos fijos

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%;
}
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 08/10/2008, 17:32
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 13 años, 2 meses
Puntos: 10
Respuesta: Marcos fijos

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
  #6 (permalink)  
Antiguo 08/10/2008, 17:33
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Marcos fijos

Ya me parecía

De todos modos, muy bien resuelto.

Saludos.
__________________
Visita mi nueva web idplus.org
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:04.