Comunidad de diseño web y desarrollo en internet online

Objeto estatico con CSS

Citar            
MensajeEscrito el 04 Sep 2006 05:49 pm
Hola

Veran, navegando por la red encontré un website en el que el menú principal no se movia al desplazar la barra de scroll. Hasta aquí nada extraño prodría perfectamente estar hecho con marcos, pero me fijé en el fondo cuando cambiaba el tamaño de la página y me di cuanta de que no usaba marcos.

Así que copié el código fuente de la página y extrage la parte que permitía tal efecto,
que adapte para poder hacer pruebas:

Código :

<!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=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
#navcontainer {
   margin: 0;
   padding: 0;
   height: 319px;
   width: 190px;
   position:absolute;
   display:inline;
   top: 150px;
   margin-right:20px;
   left:0;
   float:left;
}
#navcontainer ul li {
   list-style-type: none;
   padding: 0;
   margin: 0;
   display: block;
}
#navcontainer #navlist {
   padding: 0;
   margin: 0;
   float:left;
}
@media screen {
   div#navcontainer {position: fixed;}
   * html {overflow-y: hidden;}
   * html body {overflow-y: auto;height: 100%;padding: 0;}
   * html div#navcontainer {position: absolute;}
}
#contenedor {
   margin: 0;
   padding: 0;
   display:block;
   height: auto;
   width: 810px;
}
#contenido {
   float:right;
   width: 600px;
   height:auto;
   margin:0;
   padding:0;
}
-->
</style>
</head>
<body>
<div id="contenedor">
<div id="navcontainer">
<ul id="navlist">
  <li><a href=" " target="_self">Opci&oacute;n</a></li>
  <li><a href=" " target="_self">Opci&oacute;n</a></li>
  <li><a href=" " target="_self">Opci&oacute;n</a></li>
  <li><a href=" " target="_self">Opci&oacute;n</a></li>
  <li><a href=" " target="_self">Opci&oacute;n</a></li>
  <li><a href=" " target="_self">Opci&oacute;n------------------</a></li>
  <li><a href=" " target="_self">Opci&oacute;n</a></li>
  <li><a href=" " target="_self">Opci&oacute;n</a></li>
  <li><a href=" " target="_self">Opci&oacute;n</a></li>
  <li><a href=" " target="_self">Opci&oacute;n</a></li>
</ul>
</div>
<div id="contenido">
<table width="100" height="1479" border="3" cellpadding="0" cellspacing="0" bordercolor="#FF0000">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
</div>
</div>

</body>
</html>



El problema es que no entiendo como hace el CSS que el menú se quede quieto, no tengo tanto conociemeinto de CSS y me gustaría que alguien me lo pudiera explicar.http://www.freewebs.com/ryuz/Fijo.htm

Por ryuz

350 de clabLevel

2 tutoriales

 

firefox
Citar            
MensajeEscrito el 04 Sep 2006 08:38 pm
Es esto

Código :

div#navcontainer {position: fixed;}

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

firefox
Citar            
MensajeEscrito el 05 Sep 2006 11:23 am
Gracias Ramm.

Y una última cosa, alguien sabría cómo hacer que ese div estático pudiera estar en la parte superio centrada de la página.
Me sería muy útil.

Por ryuz

350 de clabLevel

2 tutoriales

 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.