elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Estamos en la red social de Mastodon


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Resuelto] Jsp incluir paginas de cabezal menu y ver contenido centrado
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Resuelto] Jsp incluir paginas de cabezal menu y ver contenido centrado  (Leído 6,750 veces)
alfrosende

Desconectado Desconectado

Mensajes: 15


Ver Perfil
[Resuelto] Jsp incluir paginas de cabezal menu y ver contenido centrado
« en: 12 Septiembre 2015, 16:37 pm »

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



« Última modificación: 14 Septiembre 2015, 12:14 pm por #!drvy » En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: Jsp incluir paginas de cabezal menu y ver contenido centrado
« Respuesta #1 en: 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


En línea

alfrosende

Desconectado Desconectado

Mensajes: 15


Ver Perfil
Re: Jsp incluir paginas de cabezal menu y ver contenido centrado
« Respuesta #2 en: 12 Septiembre 2015, 20:10 pm »

banner.jsp

Código:
<%@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:
<%@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:
<%@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>
En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: Jsp incluir paginas de cabezal menu y ver contenido centrado
« Respuesta #3 en: 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
  1. /* Banner */
  2.  
  3. .cuadroBanner{
  4.    border-radius: 15px 15px 15px 15px;
  5.    background: #8AC007;
  6.    padding: 20px;
  7.    width: 800px;
  8.    height: 50px;
  9. }
  10.  
  11. /* Menu */
  12.  
  13. nav{
  14.    border-radius: 15px 15px 15px 15px;
  15.    background: #8AC007;
  16.    padding: 20px;
  17.    width: 130px;
  18.    height: 100px;
  19. }
  20. nav ul{
  21.    list-style:none;
  22.    margin:0 10px 0 10px;
  23.    padding:0;
  24. }
  25. nav ul li{
  26.    font-family:Arial, Helvetica, sans-serif;
  27.    font-size:16px;
  28.    color:black;
  29. }
  30. nav ul li:hover{
  31.    font-weight: bold;
  32. }
  33. nav ul li a{
  34.    color:black;
  35.    text-decoration:none;
  36. }


En al archivo banner.jsp deja solo el codigo que tienes dentro del <body>

Código
  1. <h1 class="cuadroBanner">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  2.            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
  1. <nav>
  2.    <ul>
  3.        <li><a href="index.jsp">Inicio</a></li>
  4.        <li><a href="presentacion.jsp">Mis datos</a></li>
  5.        <li><a href="calculadora.jsp">Calculadora</a></li>
  6.        <li><a href="oneParam.jsp">Un parametro</a></li>
  7.        <li><a href="multiParams.jsp">Multiparametros</a></li>
  8.    </ul>
  9. </nav>

y en el index.jsp deja esto:
Código
  1. <%@page contentType="text/html" pageEncoding="UTF-8"%>
  2. <!DOCTYPE html>
  3.    <head>
  4.        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.        <link rel="stylesheet" type="text/css" href="mi-pagina.css">
  6.        <title>JSP Page</title>
  7.    </head>
  8.    <body>
  9.        <%@ include file="banner.jsp" %>
  10.        <%@ include file="menu.jsp" %>
  11.  
  12.        <h1>Primer pagina jsp con datos para probar lo aprendido<br> esperemos se vea bien en el navegador</h1>
  13.    </body>
  14. </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
  1. /* Ambos van a flotar a la izquierda */
  2. #menu, #contenido { float: left; margin: 0px; }
  3.  
  4. /* El contenido estara separado por 10px de menu */
  5. #contenido { margin-left: 10px; }
  6.  
  7. /* Limpiaremos las piezas flotantes */
  8. .clear { clear:both; }


y el index.jsp quedara tal que así:

Código
  1. <%@page contentType="text/html" pageEncoding="UTF-8"%>
  2. <!DOCTYPE html>
  3.    <head>
  4.        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.        <link rel="stylesheet" type="text/css" href="mi-pagina.css">
  6.        <title>JSP Page</title>
  7.    </head>
  8.    <body>
  9.        <%@ include file="banner.jsp" %>
  10.  
  11.        <div id='menu'> <%@ include file="menu.jsp" %> </div>
  12.  
  13.        <div id='contenido'>
  14.            <h1>Primer pagina jsp con datos para probar lo aprendido<br> esperemos se vea bien en el navegador</h1>
  15.        </div>
  16.  
  17.        <div class='clear'></div>
  18.    </body>
  19. </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
En línea

alfrosende

Desconectado Desconectado

Mensajes: 15


Ver Perfil
Re: Jsp incluir paginas de cabezal menu y ver contenido centrado
« Respuesta #4 en: 13 Septiembre 2015, 16:50 pm »

Bueno, la verdad mejor y mas claro que mi profesor, mil gracias me es super util!!!!!!
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
puedo incluir contenido de mi bd en un IF
PHP
ba-botas 3 1,856 Último mensaje 31 Julio 2007, 00:06 am
por Mance
[Source]Robot actualizador de contenido para paginas web
Programación Visual Basic
soru13 2 2,755 Último mensaje 17 Julio 2009, 21:05 pm
por LeandroA
Incluir un php en todas las páginas?
PHP
WHK 3 2,305 Último mensaje 16 Septiembre 2008, 00:43 am
por WHK
(Solucionado) Crear un archivo desde el menú contextual con contenido escrito?
Windows
Eleкtro 7 6,114 Último mensaje 24 Diciembre 2012, 16:53 pm
por Eleкtro
[Resuelto] Manera correcta de salvar el contenido de una variable
PHP
t4r0x 5 3,048 Último mensaje 8 Septiembre 2015, 08:44 am
por t4r0x
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines