¿Cómo hago para qué al abrir cualquier documento éste tenga el menú a la izquierda?

anonymousname100 · #1 (**permalink**) 27/09/2012, 02:53

Hola, soy nuevo aquí, intentaré hacer lo posible por cumplir con las normas de éste foro.

Bueno, mi problema es éste: Hace unos días aprendí en un vídeo de "YouTube" a cómo hacer un menú. Creo que salió perfecto, o al menos me salió exactamente igual a cómo estaba en el vídeo.
Bueno, luego de aprender a hacer el menú, y a cómo enlazar cada botón de éste con una página html usando "Adobe Dreamweaver". Me pregunté cómo podía hacer para que el menú se mantuviera a la izquierda del téxto, ya que si bien aprendí a cómo crear un menú vertical, y a cómo hacer para que al clickear en un botón del menú me abriera la "página de Inicio"; no sabía cómo hacer para que en cada página se mantuviera el menú.

O sea, el menú tiene cinco botones, cada uno de ellos tiene un enlace a un documento html que yo hice, pero al abrir un documento el menú desaparece y solo se ve el "téxto y la imágen" del documento que abrí. ¿Cómo hago para qué al abrir cualquier documento éste tenga el menú a la izquierda?

Espero que hayan entendido lo que quise explicar; y me harían un gran favor ayudandome con esto, desde ya, gracias.

Por cierto, este es el menú que hice:

__________________________________________________ _______________

Código HTML:

Ver original<!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>Inicio</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>
 
<body bgcolor="#1a6eff">
 
 
<div id="menu-vertical">
 
<ul>
<li><a href="primera-pagina.html">Inicio</a></li>
<li><a href="segunda-pagina.html">Contactenos</a></li>
 
</ul>
 
</div>
 
 
 
</body>
</html>

__________________________________________________ _______________

Y la hoja de estílo es ésta:

__________________________________________________ _______________

Código CSS:

Ver original@charset "utf-8";
/* CSS Document */
 
#segundo-menu {
    width: 150px;
    background: #039;
}
 
#segundo-menu ul {
    list-style: none;
    padding-left: 0;
}
#segundo-menu ul li a,
#segundo-menu ul li a:link,
#segundo-menu ul li a:visited,
#segundo-menu ul li a:active {
    padding: 4px 10 px;
    background: #03C url(Imagenes/bottom1.PNG) repeat-x;
    color: #fff;
    display: block;
    margin-bottom: 2px;
    text-decoration: none;
}
#segundo-menu ul li a:hover {
background: #03C url(Imagenes/bottom2.PNG) repeat-x;
}

__________________________________________________ _______________

pitufoweb · #2 (**permalink**) 27/09/2012, 06:15

Tienes que poner el menu dentro de cada pagina.

Saludos

anonymousname100 · #3 (**permalink**) 27/09/2012, 14:15

Cita:

Iniciado por pitufoweb

Tienes que poner el menu dentro de cada pagina.

Saludos

Ya lo intenté, pero cúando copio el menú en cada página, éste no se encuentra a la izquierda del téxto, sino o bien debajo o arriba del téxto, pero no se cómo hacer para que esté a la izquierda.

pitufoweb · #4 (**permalink**) 27/09/2012, 14:42

Cita:

Iniciado por anonymousname100

Ya lo intenté, pero cúando copio el menú en cada página, éste no se encuentra a la izquierda del téxto, sino o bien debajo o arriba del téxto, pero no se cómo hacer para que esté a la izquierda.

Para posicionarlo donde quieras se usa CSS. Creo que lo mas fácil para ti seria usar "position".

ejemplo:

#menu-vertical {
position:absolute;
left:100px;
top:100px;
}

Saludos

flashmax · #5 (**permalink**) 27/09/2012, 18:51

Hola puedes usar algo así para todas tus paginas..saludos!

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">
*{
    margin:0;
    padding:0;
}
#contenedor{
margin:0 auto;
border:3px solid #000;
background-color: #FFF;
text-align:center;
max-width:900px;
min-width:700px;
}
.footer {
	padding: 10px 0;
	background-color: #6F7D94;
	position: relative;
	clear: both;
}
.header {
	background-color: #6F7D94;
}

#contenido{
width:80%;
height:500px;
background-color: #FFF;
text-align:center;
float:left;
}
#left{
width:20%;
height:500px;
background-color: #039;
text-align:center;
float:left;
}
#segundo-menu {
    width: 100%;
    background: #039;
}
 
#segundo-menu ul {
    list-style: none;
    padding-left: 0;
}
#segundo-menu ul li a,
#segundo-menu ul li a:link,
#segundo-menu ul li a:visited,
#segundo-menu ul li a:active {
    padding: 4px 10 px;
    background: #03C url(Imagenes/bottom1.PNG) repeat-x;
    color: #fff;
    display: block;
    margin-bottom: 2px;
    text-decoration: none;
}
#segundo-menu ul li a:hover {
background: #03C url(Imagenes/bottom2.PNG) repeat-x;
}

</style>
<!--[if lte IE 7]>
<style>
.contenido { margin-right: -1px; }
</style>
<![endif]-->
</head>

<body bgcolor="#1a6eff">

<div id="contenedor">
  <div class="header">header</div>
<div id="left">
 
 
<div id="segundo-menu">
 
<ul>
<li><a href="primera-pagina.html">Inicio</a></li>
<li><a href="segunda-pagina.html">Contactenos</a></li>
 
</ul>
 
</div></div>
<div id="contenido">aqui colocas el contenido ,texto eimages lo que quieras!</div>
  <div class="footer">
    <p>footer</p>
  </div>
</div>

</body>
</html>