[Resuelto] Jsp incluir paginas de cabezal menu y ver contenido centrado

Iniciado por alfrosende, 12 Septiembre 2015, 16:37 PM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

alfrosende

12 Septiembre 2015, 16:37 PM Ultima modificación: 14 Septiembre 2015, 12:14 PM por #!drvy
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

#!drvy

#1
12 Septiembre 2015, 16:57 PM
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

alfrosende

#2
12 Septiembre 2015, 20:10 PM
banner.jsp

Código [Seleccionar]

<%@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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            Mi primer ejercicio 12-09-2015</h1>
    </body>
</html>


menu.jsp

Código [Seleccionar]

<%@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)

Código [Seleccionar]

<%@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>

#!drvy

#3
13 Septiembre 2015, 13:13 PM
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:

Código (css) [Seleccionar]
/* 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>

Código (html4strict) [Seleccionar]
<h1 class="cuadroBanner">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           Mi primer ejercicio 12-09-2015</h1>

En el archivo menu.jsp lo mismo, deja solo el codigo que tienes dentro del <body>.

Código (html4strict) [Seleccionar]
<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:
Código (html4strict,6,10,11) [Seleccionar]
<%@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.
Código (css) [Seleccionar]
/* 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í:

Código (html4strict,6,12,14,16,18) [Seleccionar]
<%@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

alfrosende

#4
13 Septiembre 2015, 16:50 PM
Bueno, la verdad mejor y mas claro que mi profesor, mil gracias me es super util!!!!!!
Imprimir
Ir Arriba Páginas1
Acciones del Usuario