Para empezar tienes un problema bastante gordo con la estructuración de tu código. La etiqueta
<html> NO se puede declarar ni 2 ni 3 veces en el mismo archivo (que es lo que estas haciendo al incluir el banner y el menú dentro del index). El código CSS deberías tenerlo a parte en un archivo
.css e incluirlo mediante su respectiva sintaxis en HTML.
Crea un archivo
mi-pagina.css. Dentro pon:
/* Banner */
.cuadroBanner{
border-radius: 15px 15px 15px 15px;
background: #8AC007;
padding: 20px;
width: 800px;
height: 50px;
}
/* Menu */
nav{
border-radius: 15px 15px 15px 15px;
background: #8AC007;
padding: 20px;
width: 130px;
height: 100px;
}
nav ul{
list-style:none;
margin:0 10px 0 10px;
padding:0;
}
nav ul li{
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:black;
}
nav ul li:hover{
font-weight: bold;
}
nav ul li a{
color:black;
text-decoration:none;
}
En al archivo
banner.jsp deja solo el codigo que tienes dentro del
<body><h1 class="cuadroBanner"> Mi primer ejercicio 12-09-2015
</h1>
En el archivo
menu.jsp lo mismo, deja solo el codigo que tienes dentro del
<body>.
<nav>
<li><a href="index.jsp">Inicio
</a></li> <li><a href="presentacion.jsp">Mis datos
</a></li> <li><a href="calculadora.jsp">Calculadora
</a></li> <li><a href="oneParam.jsp">Un parametro
</a></li> <li><a href="multiParams.jsp">Multiparametros
</a></li> </nav>
y en el
index.jsp deja esto:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="mi-pagina.css"> <%@ include file="banner.jsp" %>
<%@ include file="menu.jsp" %>
<h1>Primer pagina jsp con datos para probar lo aprendido
<br> esperemos se vea bien en el navegador
</h1>
Hasta aquí, solo has estructurado bien la pagina. Recuerda que TODO CONTENIDO debe ir dentro del
<body> y solo puede haber UN
<body> por pagina.
Ahora vamos a colocar el menú a la izquierda y el contenido a la derecha.
Primero vamos a añadir estas 3 reglas a
mi-pagina.css.
/* Ambos van a flotar a la izquierda */
#menu, #contenido { float: left; margin: 0px; }
/* El contenido estara separado por 10px de menu */
#contenido { margin-left: 10px; }
/* Limpiaremos las piezas flotantes */
.clear { clear:both; }
y el index.jsp quedara tal que así:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="mi-pagina.css"> <%@ include file="banner.jsp" %>
<div id='menu'> <%@ include file="menu.jsp" %> </div>
<h1>Primer pagina jsp con datos para probar lo aprendido
<br> esperemos se vea bien en el navegador
</h1>
Ahí tienes una pagina alienada y mas o menos bien estructurada. De todos modos has cometido errores muy graves de HTML, te recomendaría aprenderlo a fondo antes de seguir porque si sigues así vas a terminar haciendo autenticas chapuzas (sin ofender).
Aquí te dejo dos paginas donde puedes aprender HTML y CSS.
http://www.htmlya.com.ar/http://www.cssya.com.ar/Saludos
Autor
En línea
