- una cabecera
- dos columnas: una a la izquierda mas estrecha para el menú, y otra a la derecha más ancha para que se vaya mostrando el contenido de cada menú.
Os pongo el código que llevo hecho hasta ahora. El problema es que no consigo que se visualice de igual modo en todos los navegadores. ¿Alguien podría ayudarme? O si puede enfocar los 'div' de otra forma, o con otras estructuras, también os lo agradecería, si creéis que queda mejor.
Código HTML:
Código HTML:
<html xml:lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8""> <link rel="stylesheet" type="text/css" href="estilo.css" /> </head> <body> <div id="cabecera"> <center><img src="imagenes/banner_nuevo.jpg" width="1000px" height="160px"></center> </div> <!--//final #cabecera//--> <!--<div id="imagen2"><center><img src="esquema.jpg"></center></div>--> <div id="columna_izq"> <h1 class="fondo_menus">Menú</h1> <ul> <li><a href="quienessomos.html" title="Quienes Somos" accesskey="1">¿Quiénes somos?</a></li> <li><a href="instalaciones.html" title="Instalaciones"accesskey="2">Instalaciones</a></li> <li><a href="sementales.html" title="Sementales" accesskey="3">Sementales</a></li> <li><a href="yeguas.html" title="Yeguas" accesskey="4">Yeguas</a></li> <li><a href="potros.html" title="Venta de potros" accesskey="5">Venta de potros</a></li> <li><a href="potras.html" title="Venta de potras" accesskey="6">Venta de potras</a></li> <li><a href="galeria.html" title="Galería" accesskey="7">Galería</a></li> <li><a href="localizacion.html" title="Localización" accesskey="8">Localización</a></li> <li><a href="contacto.html" title="Contacto" accesskey="9">Contacto</a></li> </ul> </div> <!--//final #columna_izq//--> <div id="contenido"> <p>Quienes somos: Este seria el contenido de una sección, por ejemplo. bla bla bla...</p> </div> <!--//final #contenido//--> <div id="pie"></div> </div> <!--//final #pie//--> </body> </html>
Código:
La dirección temporal que estoy usando es: http://yeguadalaplata.hl154.dinaserver.com//*CUERPO*/
body {
background: #2E3B0B;
}
/*COLUMNA IZQUIERDA*/
#columna_izq {
position: absolute;
left: 200px;
top: 200px;
width: 180px;
height:300px;
margin: 0px;
background: #E1F5A9;
}
#columna_izq h1 {
color: #FFFFFF;
font-family: Georgia;
font-size:25px;
font-weight: bold;
letter-spacing: 0;
line-height: 30px;
margin: 0;
padding: 10px 0px 10px 54px;
}
#columna_izq ul {
margin: 0 0 0 -5;
list-style-type:disc;
color: #38610B;
}
#columna_izq li a {
color: #777;
font-size: 17px;
line-height: 160%;
text-decoration: none;
}
#columna_izq li a:hover {
color: #38610B;
font-weight: bold;
}
.fondo_menus {
background: url('imagenes/cabeceras.gif') no-repeat left;
margin: 0 0 0 -5;
}
/*CONTENIDO*/
#contenido{
position: absolute;
left: 400px;
top: 200px;
min-height:300px;
width: 780px;
margin: 0px;
background: #E1F5A9;
}
/*PIE*/
#pie{
position: absolute;
left: 200px;
top: 540px;
height:60px;
width: 1000px;
margin: 0px;
background: #E1F5A9;
}
Probad en distintos navegadores y veréis lo que ocurre.
Tras solventar este problema también me gustaría saber cómo hacer que la columna del contenido vaya cambiando según pulso distintas opciones del menú.
Muchas gracias por adelantado.
Un saludo.
