Hola.
Estoy trabajando en un proyecto de un sitio en HTML con DIVs y una hoja de estilos (style.css).
El proyecto tiene un menú en un DIV "menu", al hacer click en alguna opción, debería abrir el contenido en el DIV "cont". Son sólo 5 páginas, y, por tanto, 5 opciones en el menú y no he conseguido que se abra el contenido.
He intentado con algunos códigos que encontré (incluso en este sitio) de AJAX, JavaScript y Jquery.
El código de la página index.html es el siguiente: Código HTML:
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="cs">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="description" content="...">
<meta name="keywords" content="...">
<meta name="robots" content="index,follow,all">
<meta name="author" content="i21Mx">
<meta name="copyright" content="i21Mx">
<title>i21Mx.com</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection">
</head>
<body>
<div id="head">
<h1>
i21Mx<span><a href="index.html"></a></span>
</h1>
<menu>
<li><a href="#">Inicio</a></li> <!-- muestra la página principal -->
<li><a href="#">Nosotros</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Productos</a></li>
<li><a href="#">Contacto</a></li>
</menu>
<div id="border">
<div id="contenido">
</div>
</div>
<div id="down">
<p id="menu_bajo">
<a href="index.html">Inicio</a> <a href="URL">Store</a> <a href="mailto:[email protected]">Contacto</a>
</p>
<div style="text-align: left; font-size: 0.75em;">(C) 2010, Empresa<br>
</p>
</div>
</div>
</body>
</html>
El código de la CSS es el siguiente:
Código:
*
{
margin: 0;
padding: 0;
border: 0;
}
* body {
font-family: Arial, Verdana, sans-serif;
font-size: 13px;
color: #9E9E9E;
background: #D8D8D8;
}
#head {
width: 761px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
}
a {
color: #9E9E9E;
}
a:hover {
color: #2D86A0;
}
#cont {
color: #393939;
width: 720px;
padding: 30px 20px 20px 20px;;
}
#cont h2 {
font-style: italic;
color: #6C6C6C;
margin-left: 20px;
padding-top:15px;
}
#cont p
{
margin-top: 10px;
margin-left: 20px;
}
#cont ul li {
list-style: none;
padding-left:20px;
}
#down {
background: url(obr/paticka.png) no-repeat #E4E4E4;
padding: 15px 20px 20px 20px;
width: 721px;
height: 30px;
font-weight: bold;
}
#down a {
color: #458715;
}
#levo
{
color: #363636;
Espero realmente que alguien me pueda ayudar, pues ya he intentado varios métodos y ninguno ha funcionado, y el proyecto necesita terminarse esta semana.
De antemano, gracias y saludos.