Hola ... primero que nada aclarar que comenzé un curso de programación web la semana pasada osea soy noob, y esta pregunta es bien tonta :P
El tema es que estoy haciendo mediante netbeans una aplicación bien sencilla donde tengo 5 paginas jsp.
1- Un titulo, banner o como quieran llamarle donde muestro un texto estatico
2- Un menu vertical al costado donde tengo 3 links (inicio/calculadora/datos)
3/4/5- Las paginas jsp inicio/calculadora/datos. Cada una de estas paginas incluyen las 2 primeras con la siguiente directva
<%@ include file="banner.jsp" %>
<%@ include file="menu.jsp" %>
Todo me funciona ok, pero lo que no logro hacer es que, por ejemplo al cargar la pagina index.jsp que tiene simplemente unos parrafos estaticos y texto enriquecido, se muestre a la derecha del menu vertical, siempre se muestra debajo del menu.
A quien pueda ayudar a este noob aprendiz, desde ya muchas gracias.
P.D.: Dudé si poner el post aqui o en programacion java, cualquier cosa que un admin lo mueva
Eso tiene que ver mas con CSS que con JSP. Podrías poner el código CSS y la estructura HTML que usas ? Si no, difícil ayudarte.
Saludos
banner.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<STYLE type="text/css">
.cuadroBanner{
border-radius: 15px 15px 15px 15px;
background: #8AC007;
padding: 20px;
width: 800px;
height: 50px;
}
</STYLE>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1 class="cuadroBanner">
Mi primer ejercicio 12-09-2015</h1>
</body>
</html>
menu.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<style>
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;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<nav>
<ul>
<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>
</ul>
</nav>
</body>
</html>
index.jsp (esta es la que me interesa se vea debajo de banner, pero a la derecha del menu)
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ include file="banner.jsp" %>
<%@ include file="menu.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1>Primer pagina jsp con datos para probar lo aprendido<br>
esperemos se vea bien en el navegador</h1>
</body>
</html>
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>
<ul>
<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>
</ul>
</nav>
y en el index.jsp deja esto:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="mi-pagina.css">
<title>JSP Page</title>
</head>
<body>
<%@ 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>
</body>
</html>
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>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="mi-pagina.css">
<title>JSP Page</title>
</head>
<body>
<%@ include file="banner.jsp" %>
<div id='menu'> <%@ include file="menu.jsp" %> </div>
<div id='contenido'>
<h1>Primer pagina jsp con datos para probar lo aprendido<br> esperemos se vea bien en el navegador</h1>
</div>
<div class='clear'></div>
</body>
</html>
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
Bueno, la verdad mejor y mas claro que mi profesor, mil gracias me es super util!!!!!!