Crear barra Flotante en mi web

flowmaximunblog · #1 (**permalink**) 15/09/2012, 15:38

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

ArturoGallegos · #2 (**permalink**) 15/09/2012, 17:00

propiedad CSS -> position:fixed

flashmax · #3 (**permalink**) 15/09/2012, 20:04

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>

cramirezoliveros · #4 (**permalink**) 26/09/2012, 13:02

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

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>

cramirezoliveros · #5 (**permalink**) 26/09/2012, 13:03

AAAhh Bueno, en body a margin-top le puse 100
:)

flashmax · #6 (**permalink**) 26/09/2012, 19:43

Cita:

Iniciado por cramirezoliveros

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;