Foros del Web » Creando para Internet » HTML »

Crear barra Flotante en mi web

Estas en el tema de Crear barra Flotante en mi web en el foro de HTML en Foros del Web. Quisiera saber como crear una barra como la de esta web http://www.xataka.com/ la que se encuenta en el top que cuando navegue en la pag ...
  #1 (permalink)  
Antiguo 15/09/2012, 15:38
 
Fecha de Ingreso: septiembre-2012
Mensajes: 38
Antigüedad: 11 años, 6 meses
Puntos: 0
Pregunta Crear barra Flotante en mi web

Quisiera saber como crear una barra como la de esta web http://www.xataka.com/
la que se encuenta en el top

que cuando navegue en la pag siempre este alli? claro perzonalizandola a mi gusto eso es solo un ejemplo
  #2 (permalink)  
Antiguo 15/09/2012, 17:00
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: Crear barra Flotante en mi web

propiedad CSS -> position:fixed
  #3 (permalink)  
Antiguo 15/09/2012, 20:04
Avatar de flashmax  
Fecha de Ingreso: julio-2012
Ubicación: Bs.As. Argentina
Mensajes: 507
Antigüedad: 11 años, 8 meses
Puntos: 86
Respuesta: Crear barra Flotante en mi web

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
#top {
	top:0px;
	width:100%;
	position:fixed;
	background-color:#666;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
</style>
</head>

<body>
<div id="top">Colocar aquí el contenido para  id "top"</div>
</body>
</html> 
__________________
Saludos!
----------------------------------------------------------
  #4 (permalink)  
Antiguo 26/09/2012, 13:02
 
Fecha de Ingreso: septiembre-2012
Mensajes: 2
Antigüedad: 11 años, 6 meses
Puntos: 0
Respuesta: Crear barra Flotante en mi web

Funciono genial....pero
un pequeño problema, si yo a #top le coloco un height:100px;
me empieza a tapar el contenido.
Como se puede solucionar???


Cita:
Iniciado por flashmax Ver Mensaje
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
#top {
	top:0px;
	width:100%;
	position:fixed;
	background-color:#666;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
</style>
</head>

<body>
<div id="top">Colocar aquí el contenido para  id "top"</div>
</body>
</html> 
  #5 (permalink)  
Antiguo 26/09/2012, 13:03
 
Fecha de Ingreso: septiembre-2012
Mensajes: 2
Antigüedad: 11 años, 6 meses
Puntos: 0
Respuesta: Crear barra Flotante en mi web

AAAhh Bueno, en body a margin-top le puse 100
:)
  #6 (permalink)  
Antiguo 26/09/2012, 19:43
Avatar de flashmax  
Fecha de Ingreso: julio-2012
Ubicación: Bs.As. Argentina
Mensajes: 507
Antigüedad: 11 años, 8 meses
Puntos: 86
Respuesta: Crear barra Flotante en mi web

Cita:
Iniciado por cramirezoliveros Ver Mensaje
Funciono genial....pero
un pequeño problema, si yo a #top le coloco un height:100px;
me empieza a tapar el contenido.
Como se puede solucionar???
prieba con:
#top
z-index:-1;
__________________
Saludos!
----------------------------------------------------------

Etiquetas: barra, flotante, frame
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:21.