Ver Mensaje Individual
  #1 (permalink)  
Antiguo 17/08/2011, 19:46
Avatar de mj1984
mj1984
 
Fecha de Ingreso: septiembre-2008
Mensajes: 129
Antigüedad: 15 años, 6 meses
Puntos: 0
pagina web en html

Hola, necesito crear una página web con el siguiente esquema:
- 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&uacute;</h1>
			<ul>
				<li><a href="quienessomos.html" title="Quienes Somos" accesskey="1">&iquest;Qui&eacute;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&iacute;a</a></li>
				<li><a href="localizacion.html" title="Localización" accesskey="8">Localizaci&oacute;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 CSS:
Código:
/*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;
}
La dirección temporal que estoy usando es: http://yeguadalaplata.hl154.dinaserver.com/

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.