Menu fijo siempre visible, centrado. template. dreamweaver. css

Caquet · #1 (**permalink**) 07/07/2009, 15:56

Hola buenas!

Estoy haciendo una pagina web y tengo un problemilla a ver si alguien me puede ayudar. Os cuento los pasos.
He hecho un menú horizontal con fireworks y lo he exportado como html. He creado un template en dreamweaver, en el primer <div> he insertado dicho menú y lo he alineado al centro. El siguiente <div> lo he hecho región editable (que es el lugar que contendrá la información de mi pagina) y tambien lo he alineado al centro. Quiero que dicho menu se vea siempre centrado en la parte superior de la pantalla, aunque hagamos scroll down que siempre esté ahí arriba, para ello he creado y aplicado un css style para dicho menú con las siguientes propiedades:

position: fixed;
margin-left: auto;
margin-right: auto;
display: block;

el caso es que lo de que esté ahí arriba siempre lo he conseguido, pero lo que no consigo es que esté en el centro, siempre me sale en el navegador a la izquierda (opera, firefox, safari), mientras el contenido de las paginas de la región editable, si que está en el centro. ¿que puedo hacer para colocarlo en el centro? ¿alguna otra manera de colocar un menú, que siempre este visible en la parte superior de la página centrado? ¿he hecho algo mal (que es muy posible

)?

Un ejemplo ht tp://w ww.spanish-translator-services.com/espanol/t/007/menus.html (pues eso es lo que quiero, un menu que se desplaza con nosotros, pero no en un lado, como en el caso del ejemplo, si no centrado)

¿alguien me puede ayudar por favor?

kseso? · #2 (**permalink**) 07/07/2009, 16:08

déjame que piense

Creo que esta duda me suena de algo.
Sigue la dirección del dedo

Caquet · #3 (**permalink**) 08/07/2009, 04:05

Gracias por la info, pero no me funciona, si osea, centrarlo así sí, he copiado tu codigo y veo que se queda en el centro, pero cuando lo quieres hacer fijo (osea que se quede siempre en pantalla aun haciendo scroll down y en el centro) se va siempre a la izquierda, tu codigo tambien

Osea cuando al contenedor que aparece, ese que tienes en el centro del codigo que sale en el enlace que has puesto, lo haces fijo para que siempre se vea con, position: fixed; y display: block; se va a la izquierda y no hay manera de centrarlo. ¿Alguna otra idea please?

kseso? · #4 (**permalink**) 08/07/2009, 05:44

Hola Caquet
Bueno, viendo que lo has intentado, aquí tienes una base.
Partiendo de la idea de Mikmoro, compatible con ie6 (edito y aclaro: la idea base, no el siguiente código)

Código html:

Ver original<!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" lang="es-es">
<head>
<title>Kseso? jugando con css </title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0; border:0; position: relative;}
body, html {
height:100%;
overflow:hidden;
width:100%;}
#fijo {
background: #444;
left:50%;
top:0;
margin-left:-300px;
position:absolute;
width:600px;
height: 2em;
color:#cdcdcd;
}
#ventana {background: #fff;
overflow:auto;
height:100%;
width:100%;}
</style>
</head>
<body>
    <div id="ventana">
    <br/><br/><br/><br/><br/>
    <p>Lorem ipsum dolor sit amet consectetuer vitae eros est Pellentesque cursus. Tristique Curabitur ac felis ac semper ac Lorem interdum et sodales. Condimentum at Nam augue tempus sit ligula parturient quis libero pretium. Lacinia sodales orci parturient est ornare tortor consequat at pretium nisl. Purus lacus dis amet turpis venenatis neque augue velit tellus vitae. Id tristique Vivamus wisi nec consectetuer orci justo elit ante.</p>
    <br/><br/><br/><br/><br/>
<p>Enim metus Sed tellus ut Aenean sodales dui semper pulvinar sed. Curabitur turpis vitae pretium elit orci suscipit ipsum Nunc ut cursus. Ut orci natoque massa congue hendrerit ipsum ac justo metus mi. Orci ullamcorper adipiscing justo sit libero tincidunt dolor urna vitae leo. In Proin rhoncus interdum id at ipsum ut vel pellentesque enim. Eleifend consectetuer et id nec non vel sed In tristique eget. Pellentesque Nulla.</p>
<br/><br/><br/><br/><br/>
<p>Felis est lacus id Curabitur sagittis laoreet quis egestas Nunc pretium. Nunc eget non ultrices justo porttitor nibh ridiculus Aenean tempor at. Phasellus et quis Curabitur ut neque iaculis convallis elit Phasellus vel. Elit gravida habitant nibh nec risus Lorem Nunc augue feugiat semper. Arcu sagittis Curabitur urna ullamcorper Integer quis pretium Nulla ipsum at. Nec pede convallis eros Nunc nibh.</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p>Nibh sem tortor sed Maecenas dolor mauris elit purus augue urna. Eu Quisque massa mauris vel</p>
  </div>
<div id="fijo"></div>
</body>
</html>

Mira a ver si te es de utilidad.
Un saludo

Caquet · #5 (**permalink**) 09/07/2009, 04:09

Eso si que me funciona! Muchisimas gracias kseso!

kseso? · #6 (**permalink**) 09/07/2009, 05:30

No hay de qué.
Y perdona por la primera respuesta, sólo era para ver si sólo venías a por un trozo de código "por la cara" o si realmente te lo estabas trabajando. ¡qué malo soy!

Hasta la próxima

rirs · #7 (**permalink**) 14/10/2010, 11:07

Gente, buenos días aún.

Tengo un problema, estaba leyendo su conversación puesto que también deseo un menú fijo. Estoy creando una página, está dividad en dos frames, uno izquierdo y uno derecho.

El izquierdo contiene un menú fijo.

Mientras el derecho contiene el texto y permite que se active el scroll para desplazar la información de ser necesario sin mover en nada el otro menú.

Pero ahora viene mi problema. Me solicitan un segundo menú fijo dentro del frame derecho, es decir, que aunque la información se desplace hacia abajo, siga viéndose el menú.

Pensé en divir nuevamente otro frame, pero no me es factible porque cuando el primero frame manda a llamar al segundo, la información del tercero prevalece y no deseo que prevalesca en todas las páginas.

Así que leyendo me puse a revisar con ustedes (es lo más cercano que he dado, pero ni así.

El primero ejemplo que mostraban me prevalece el menú (no importa que tanto le indique que se mueva a la izquierda, se va a la derecha, y aunque intenté con lo segundo que mostraban, el menú que ahora se mueve a la izquierda, no me respeta ser fijo, sino que se mueve con el scroll.

Así que investigué más y dí con algo parecedio, división en Iframes, pero, antes de caer en éste resultado y tener que volver a hacer toda la página completa, he tenido problemas para agregarle otro, porque aunque aparece visible en el dream, al chequearlo en la página no me aparece nada. Además, no estoy segura si ésto funcionaría con un light box.

No sé si alguno pudiera sugerirme algo, se los agradecería mucho.

rirs · #8 (**permalink**) 14/10/2010, 11:13

Díganme ignorante, pero está resultado que lo soy.

No me deja poner muchos caracteres en el mensaje e intento pegar el código pero no puedo. Así que agregaré parte del código, ésto es sólo en un frame, que es el del lado derecho.

Código HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
	<title>Temasis</title>
   <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<style type="text/css">
		
		td a {
			font:11px Tahoma;
			color:#000000;
			text-decoration:none;
		}
		.class1 a:link {text-decoration: none}
		.class1 a:visited {text-decoration: none}
		.class1 a:active {text-decoration: none}
		.class1 a:hover {text-decoration: none; color: #0087e2;}

		.class2 a:link {text-decoration: none}
		.class2 a:visited {text-decoration: none}
		.class2 a:active {text-decoration: none}
		.class2 a:hover {text-decoration: none; color: #00f1ee;}
		
		.class3 a:link {text-decoration: none}
		.class3 a:visited {text-decoration: none}
		.class3 a:active {text-decoration: none}
		.class3 a:hover {text-decoration: none; color: #0caf00;}

		.class4 a:link {text-decoration: none}
		.class4 a:visited {text-decoration: none}
		.class4 a:active {text-decoration: none}
		.class4 a:hover {text-decoration: none; color: #d7cf00;}
		
		.class5 a:link {text-decoration: none}
		.class5 a:visited {text-decoration: none}
		.class5 a:active {text-decoration: none}
		.class5 a:hover {text-decoration: none; color: #b6a700;}

		.class6 a:link {text-decoration: none}
		.class6 a:visited {text-decoration: none}
		.class6 a:active {text-decoration: none}
		.class6 a:hover {text-decoration: none; color: #ff9900;}
		
		.class7 a:link {text-decoration: none}
		.class7 a:visited {text-decoration: none}
		.class7 a:active {text-decoration: none}
		.class7 a:hover {text-decoration: none; color: #c10000;}

		.class8 a:link {text-decoration: none}
		.class8 a:visited {text-decoration: none}
		.class8 a:active {text-decoration: none}
		.class8 a:hover {text-decoration: none; color: #dc008c;}
		
		.class9 a:link {text-decoration: none}
		.class9 a:visited {text-decoration: none}
		.class9 a:active {text-decoration: none}
		.class9 a:hover {text-decoration: none; color: #8000c0;}
		body p {
	text-align: left;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
		}
		#distinto {
			text-align: center;
			font-family: Tahoma, Geneva, sans-serif;
			font-size: 9px;
		}
		 div#menu {
                   position: fixed;
                   height:400px;
                   left:0px;
                   top: 0px;
                   width: 250px;
                   background-color: #cccccc;
                   height: 100%;
                   z-index: 1000;
               }
div#menu1 {
                   position: fixed;
                   height:400px;
                   left:0px;
                   top: 0px;
                   width: 250px;
                   background-color: #cccccc;
                   height: 100%;
                   z-index: 1000;
               }
    </style>
	<style>	
		
		body {
	background-color: #FFF;
	text-align: left;
		}
	.boton {	color: #7900B2;
	font-style: italic;
	font-size: 12px;
	font-family: Tahoma, Geneva, sans-serif;
	background-color: #FFF;
}
    .texto {
	font-style: normal;
}
    texto {
	font-family: Tahoma, Geneva, sans-serif;
}

    .control table tr td table tr td {
}
    </style>
</head>
<body class="control">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="130">&nbsp;</td>
  </tr>
  <tr>
    <td height="100" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th width="125" valign="top" scope="col"><div id="menu"> 
            <ul id="mainmenu">
                <li><a href="sistemas2.html" target="_self">Menu1</a></li>
                <li>Menu2</li>
                <li>Menu3</li>
                <li>Menu4</li>
                <li>Menu5</li>
                <li>Menu6</li>
            </ul>
        </div>
</th>
        <th width="125" valign="top" scope="col"><div id="menu1">
          <ul id="mainmenu1">
            <li><a href="sistemas2.html">Menu1</a></li>
            <li>Menu2</li>
            <li>Menu3</li>
            <li>Menu4</li>
            <li>Menu5</li>
            <li>Menu6</li>
          </ul>
        </div></th>

rirs · #9 (**permalink**) 14/10/2010, 12:22

Oh oh, ya me respondí solita.

Debo decir que no es lo mismo que ustedes pero que es una buena solución: menú sígueme.

Les dejo el código por si les sirve, aunque cabe decir que no lo hice yo, sino que lo encontré en otro lugar y lo adapté:

Código HTML:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
	<title>Temasis</title>
  
<script language="javascript" type="text/javascript">

// numero de pixels de separacion con la parte superior de la ventana
var theTop = 250

var menu, scrollIt

// posicion actual
var old = theTop
// a true, la posición del menu se mantiene a "theTop" pixels, aunque se desplace la pagina verticalmente
// a false, el menu es fijo
var scrollIt = true

// INICIALIZACION
function init() {
	// obtiene referencia al objeto con el menu
	menu = new getObj('menu')


	// inicia el proceso que mantiene la posicion a "theTop" pixels
	movemenu()
}

//MOVIMIENTO
function movemenu() {
	if (scrollIt) {
		if (window.innerHeight) {
			  pos = window.pageYOffset
		} else if (document.documentElement && document.documentElement.scrollTop) {
			pos = document.documentElement.scrollTop
		} else if (document.body) {
			  pos = document.body.scrollTop
		}
		
		if (pos < theTop)
			pos = theTop
		else
			pos += 250
		if (pos == old)
			menu.style.top = pos + 'px'

		old = pos
	}
	
	moveID = setTimeout('movemenu()',200)
}

//OBTENCION DE REFERENCIA AL OBJETO
function getObj(name) {
  // si soporta DOM Lelvel 2
  if (document.getElementById) {
  	this.obj = document.getElementById(name)
	this.style = document.getElementById(name).style
  // si soporta el DOM del IE4.x
  } else if (document.all) {
	this.obj = document.all[name]
	this.style = document.all[name].style
  // si soporta el DOM del N4.x
  } else if (document.layers) {
   	this.obj = document.layers[name]
   	this.style = document.layers[name]
  }
}

window.onload = init
if (document.captureEvents) {		//N4 requiere invocar la funcion captureEvents
	document.captureEvents(Event.LOAD)
}



</script>

<style TYPE="text/css">

#menu {
	position: absolute;
	top: 300px;
	left: 1%;
	font: 
	color: #0000cc;
	background: ;
	padding: 10px;
	border: none;
	z-index: 5;
	font-weight: bold;
}

/* :visited es necesario porque el menu contiene enlaces internos (#) y el IE los ve como ya visitados */
div#menu a, div#menu a:visited {
	color: #0000cc;
}



</style>



	<style>	
		
		body {
	background-color: ;
	text-align: left;
		}
	.boton {	color: #7900B2;
	font-style: italic;
	font-size: 12px;
	font-family: Tahoma, Geneva, sans-serif;
	background-color: #FFF;
}
    .texto {
	font-style: normal;
}
    texto {
	font-family: Tahoma, Geneva, sans-serif;
}

    .control table tr td table tr td {
}
    </style>
</head>
<body class="control">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="130">&nbsp;</td>
  </tr>
  <tr>
    <td height="100" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th width="250" valign="top" scope="col"><p>
          <!-- Definicion del menu -->
</p>
          <div id="menu">
 <a href="Carpetas_Escritorio/Rosy Rmz/Temasis/Sitio/Temasis/sitio/sistemas2.html" style="color:#00f1ee;"> </a><a style="color:#00f1ee;" href="Carpetas_Escritorio/Rosy Rmz/Temasis/Sitio/Temasis/sitio/sistemas1.html"> </a><a style="color:#000; font-weight: normal;" href="Carpetas_Escritorio/Rosy Rmz/Temasis/Sitio/Temasis/sitio/sistemas1.html">
              <h8><font face="Symbol">&gt;</font></h8>
              <h7>Sub1</h7>
              </a><br>
              <a style="color:#00f1ee; font-weight: normal;" href="Carpetas_Escritorio/Rosy Rmz/Temasis/Sitio/Temasis/sitio/sistemas2.html">
              <h8><font face="Symbol">&gt;</font></h8>
              <h7>Sub1</h7>
              </a><a href="http://www.elcodigo.com/herramientas/herramientas.html"></a><br>
              <a style="color:#000; font-weight: normal;" href="Carpetas_Escritorio/Rosy Rmz/Temasis/Sitio/Temasis/sitio/sistemas3.html">
              <h8><font face="Symbol">&gt;</font></h8>
              <h7>Sub1</h7>
              </a><br>
              <a style="color:#000; font-weight: normal;" href="Carpetas_Escritorio/Rosy Rmz/Temasis/Sitio/Temasis/sitio/sistemas4.html">
              <h8><font face="Symbol">&gt;</font></h8>
              <h7>Sub1</h7>
              </a> <br>
              
</div>


</th>
        <td width="500"><p>Dale enters para ver cómo se desplaza.</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>´p´+´</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p></td>
        <td width="187">&nbsp;</td>
      </tr>
      <tr>
        <th valign="top" scope="col">&nbsp;</th>
        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <th width="520" scope="col"><span style="font-size: 9px; font-family: Tahoma, Geneva, sans-serif; font-style: italic; color: #333; font-weight: normal;">opóip´po´po</span></th>
            <th scope="col">&nbsp;</th>
          </tr>
        </table></td>
        <td>&nbsp;</td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>