Foros del Web » Creando para Internet » HTML »

Duda sobre el Header

Estas en el tema de Duda sobre el Header en el foro de HTML en Foros del Web. buenas, como veran, tengo otra duda... La cual es: Como hago para que el contenido de mi web aparezca en el medio de los menues ...
  #1 (permalink)  
Antiguo 06/04/2011, 22:03
 
Fecha de Ingreso: diciembre-2010
Mensajes: 180
Antigüedad: 7 años
Puntos: 5
Duda sobre el Header

buenas, como veran, tengo otra duda... La cual es:

Como hago para que el contenido de mi web aparezca en el medio de los menues de los dos lados de mi header.php? Aca les muestro una imagen asi me expreso mejor:



Donde dice "Contenido Aca." Seria donde quiero que aparezca mi web, Todo lo demas seria header...

Hasta ahora, todo lo que probe hace que el contenido se muestre por debajo del header, haciendo que quede un espacio en el medio y no puedo arreglarlo... Espero que alguien me pueda ayudar :)
Saludos
  #2 (permalink)  
Antiguo 06/04/2011, 22:29
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 9 años, 4 meses
Puntos: 1530
Respuesta: Duda sobre el Header

esto no depende solo de PHP, sino de la estructura HTML/CSS que tengas.

por lo general tendrías que independizar el header, de las barras de menú y el contenido, ¿tienes alguna estructura HTML/CSS creada, sabes algo de marquetación CSS?
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #3 (permalink)  
Antiguo 06/04/2011, 22:31
 
Fecha de Ingreso: diciembre-2010
Mensajes: 180
Antigüedad: 7 años
Puntos: 5
Respuesta: Duda sobre el Header

Cita:
Iniciado por maycolalvarez Ver Mensaje
esto no depende solo de PHP, sino de la estructura HTML/CSS que tengas.

por lo general tendrías que independizar el header, de las barras de menú y el contenido, ¿tienes alguna estructura HTML/CSS creada, sabes algo de marquetación CSS?
no :S Se nada sobre CSS :/ Que puedo hacer para independizar el header de las barras de menu y el contenido?

PD: Gracias por contestar :D
  #4 (permalink)  
Antiguo 06/04/2011, 22:54
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 11 años, 6 meses
Puntos: 2122
Tema movido desde PHP a HTML
  #5 (permalink)  
Antiguo 06/04/2011, 22:56
marcofbb
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Duda sobre el Header

Podes hacer separar todo Ej:

Texto por arriba de la pagina ( header.php )

Aca pones todo lo que es por encima desde el contenido para arriba

Texto por debajo de la pagina ( abajo.php ) desde el contenido para abajo e

entonses te queda asi

include('header.php');

Todo el contenido que quieras de tu web

include('abajo.php');

nose si me expreso bien, es que ando con sueño :P me fui a dormir
  #6 (permalink)  
Antiguo 06/04/2011, 23:03
 
Fecha de Ingreso: diciembre-2010
Mensajes: 180
Antigüedad: 7 años
Puntos: 5
Respuesta: Duda sobre el Header

Cita:
Iniciado por marcofbb Ver Mensaje
Podes hacer separar todo Ej:

Texto por arriba de la pagina ( header.php )

Aca pones todo lo que es por encima desde el contenido para arriba

Texto por debajo de la pagina ( abajo.php ) desde el contenido para abajo e

entonses te queda asi

include('header.php');

Todo el contenido que quieras de tu web

include('abajo.php');

nose si me expreso bien, es que ando con sueño :P me fui a dormir
Osea como un footer.php? Pero no quedaria todo en el medio y seria un problema similar? Osea, quedaria

Header
Web

Menu1
Menu2
Footer/abajo


O no?
Disculpame si no te entendi, Igual muchas gracias por responder
  #7 (permalink)  
Antiguo 07/04/2011, 10:25
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 9 años, 4 meses
Puntos: 1530
Respuesta: Duda sobre el Header

es más u menos así como te lo indica @marcofbb, solo que también tendrías que separar los menús en otros archivos si es que los mismos son globales.

pero nada de eso te resultara si no aplicas una estructura tipo layout con HTML+CSS, lo que se conoce como marquetación CSS con Div's o capas flotantes (CSS float), de lo contrario todo te quedara amontonado uno encima de otro y es eso lo que no quieres.

te recomiendo leer sobre marquetación o layout CSS: http://librosweb.es/css/, especialmente éste capítulo: http://librosweb.es/css/capitulo12/e..._o_layout.html
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #8 (permalink)  
Antiguo 07/04/2011, 17:45
 
Fecha de Ingreso: diciembre-2010
Mensajes: 180
Antigüedad: 7 años
Puntos: 5
Respuesta: Duda sobre el Header

Cita:
Iniciado por maycolalvarez Ver Mensaje
es más u menos así como te lo indica @marcofbb, solo que también tendrías que separar los menús en otros archivos si es que los mismos son globales.

pero nada de eso te resultara si no aplicas una estructura tipo layout con HTML+CSS, lo que se conoce como marquetación CSS con Div's o capas flotantes (CSS float), de lo contrario todo te quedara amontonado uno encima de otro y es eso lo que no quieres.

te recomiendo leer sobre marquetación o layout CSS: http://librosweb.es/css/, especialmente éste capítulo: http://librosweb.es/css/capitulo12/e..._o_layout.html
Muchisimas gracias por responder :D Ahora mismo leo eso que me dejaste, Gracias:)
  #9 (permalink)  
Antiguo 07/04/2011, 22:25
 
Fecha de Ingreso: diciembre-2010
Mensajes: 180
Antigüedad: 7 años
Puntos: 5
Respuesta: Duda sobre el Header

Cita:
Iniciado por maycolalvarez Ver Mensaje
es más u menos así como te lo indica @marcofbb, solo que también tendrías que separar los menús en otros archivos si es que los mismos son globales.

pero nada de eso te resultara si no aplicas una estructura tipo layout con HTML+CSS, lo que se conoce como marquetación CSS con Div's o capas flotantes (CSS float), de lo contrario todo te quedara amontonado uno encima de otro y es eso lo que no quieres.

te recomiendo leer sobre marquetación o layout CSS: http://librosweb.es/css/, especialmente éste capítulo: http://librosweb.es/css/capitulo12/e..._o_layout.html
Ahora que me doy cuenta, no se si es esto lo que quiero Porque yo quiero que los menues laterales y el header queden en un archivo "header.php" Y que cuando en alguna de mis paginas php ponga un "include ("header.php")" Salga el contenido entre los menues laterales y debajo de la cabecera de la web, me entienden? Y lo que veo con los estilos CSS (Porlomenos con esa guia de la estructura layout) es que estan los Menues laterales, la Cabecera y el Cuerpo de mi web en un solo archivo... Entonces tendria que crear un archivo con las tres cosas cada vez que quiera agregar una pagina, y como explique antes, quiero tener los menues laterales y la cabecera por un lado, y por el otro lado quiero tener el contenido de mi web, y con un include fusionar todo... Tal vez no entendi bien la funcion del CSS, si es asi, espero que alguien me aclare bien todo :S Desde ya gracias, y ademas no me vino nada mal aprender un poco de CSS ya que ahora que me doy cuenta es demasiado util :D

Saludos
  #10 (permalink)  
Antiguo 08/04/2011, 05:17
 
Fecha de Ingreso: abril-2011
Mensajes: 12
Antigüedad: 6 años, 8 meses
Puntos: 1
Respuesta: Duda sobre el Header

El hecho de que se encuentre en un único archivo también puede ser factible. Tienes que pensar en modo CSS, aunque todo depende de tus necesidades:

Si quieres crear un web donde el menú irá variando a nivel de contenido, entonces te irá mejor como tu dices, pero si tu intención no es variar el contenido del menú puedes aplicar-lo en el mismo documento. En el momento en que quieras modificar tu menú a nivel estético: las fuentes o las imágenes, tan solo tendrás que modificar el archivo styles.css que, obviamente, se indexarà en todos i cada uno de los archivos.

Piensa que sólo modificando un documento (el styles.css) ya puedes controlar con bastante facilidad toda la web (incluso posición i orientación de todos los elementos). De hecho esa es la gracia del CSS.
  #11 (permalink)  
Antiguo 08/04/2011, 11:29
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 9 años, 4 meses
Puntos: 1530
Respuesta: Duda sobre el Header

recuerda que el manual que te pase solo contempla la parte HTML+CSS, y en efecto una pagina web es un archivo, pero ¿te olvidas de que php se puede embeber?; es decir:

tienes tu layout.php que es una página HTML+CSS que contiene lo referente a su estructura html y css, para separar el header de los menús y el contenido debes simplemente segmentar ese layout en diferentes partes que luego con include en php puedas armar

en el header:
Código HTML:
Ver original
  1.   <head>
  2.     <!--contenido del head-->
  3.   </head>
  4.   <body>
  5.   <div id="header">
  6.     <!--contenido del head-->
  7.   </div>
  8.   <div id="frame_css_set1">
  9.     <!--contenido del marco principal con estilos CSS según estructura del layout y no lo cierro sino en el footer-->

en el footer:
Código HTML:
Ver original
  1. <!--contenido del marco principal con estilos CSS según estructura del layout ABIERTO EN EL header-->
  2.     </div>
  3.   </body>
  4. </html>

y tu página quedaría más u menos así:

Código PHP:
Ver original
  1. <?php
  2. //incluyo el header:
  3. include("header.php");
  4. ?>
  5. <div class="columna0">
  6.   <?php incude("mi-menu.php"); ?>
  7. </div>
  8. <div class="columna1">
  9.   <!--demás contenido HTML o php-->
  10. </div>
  11. <?php
  12. //incluyo el footer:
  13. include("footer.php");
  14. ?>

resultado: una página con layout segmentado
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...

Última edición por maycolalvarez; 08/04/2011 a las 11:40
  #12 (permalink)  
Antiguo 08/04/2011, 15:57
 
Fecha de Ingreso: marzo-2011
Mensajes: 184
Antigüedad: 6 años, 8 meses
Puntos: 11
Respuesta: Duda sobre el Header

Exacto, es lo que iba a sugerir. Símplemente debes maquetar la web en CSS (es mucho más fácil de lo que suena). Sólo es cosas de crear div's y hacer pruebas para que queden como tu quieres, serían 4 más el footer, 2 de menus, uno de header y el contenido. Luego lo fusionas como tu quieres en php o puedes cargar el contenido php directamente en el div de contenido.

Saludos!

__________________
“Un estómago vacío, es un mal consejero.” Albert Einstein

Reflexiones, humor gráfico, chistes, Deporte, Consejos y tips
  #13 (permalink)  
Antiguo 08/04/2011, 19:09
 
Fecha de Ingreso: diciembre-2010
Mensajes: 180
Antigüedad: 7 años
Puntos: 5
Respuesta: Duda sobre el Header

Cita:
Iniciado por maycolalvarez Ver Mensaje
recuerda que el manual que te pase solo contempla la parte HTML+CSS, y en efecto una pagina web es un archivo, pero ¿te olvidas de que php se puede embeber?; es decir:

tienes tu layout.php que es una página HTML+CSS que contiene lo referente a su estructura html y css, para separar el header de los menús y el contenido debes simplemente segmentar ese layout en diferentes partes que luego con include en php puedas armar

en el header:
Código HTML:
Ver original
  1.   <head>
  2.     <!--contenido del head-->
  3.   </head>
  4.   <body>
  5.   <div id="header">
  6.     <!--contenido del head-->
  7.   </div>
  8.   <div id="frame_css_set1">
  9.     <!--contenido del marco principal con estilos CSS según estructura del layout y no lo cierro sino en el footer-->

en el footer:
Código HTML:
Ver original
  1. <!--contenido del marco principal con estilos CSS según estructura del layout ABIERTO EN EL header-->
  2.     </div>
  3.   </body>
  4. </html>

y tu página quedaría más u menos así:

Código PHP:
Ver original
  1. <?php
  2. //incluyo el header:
  3. include("header.php");
  4. ?>
  5. <div class="columna0">
  6.   <?php incude("mi-menu.php"); ?>
  7. </div>
  8. <div class="columna1">
  9.   <!--demás contenido HTML o php-->
  10. </div>
  11. <?php
  12. //incluyo el footer:
  13. include("footer.php");
  14. ?>

resultado: una página con layout segmentado
Ahhhh, ya voy entendiendooo (algo), El codigo CSS Donde iria? en el head del header? O lo adjunto al header con un include o un link? Tampoco me quedo muy claro lo de la linea 9 del header, lo tendria que modificar segun mi css? Muchisimas gracias por ayudarme :D

PD: Gracias tambien a znarer y a GatoGordo por responder, todos los comentarios me sirven mucho :)
  #14 (permalink)  
Antiguo 08/04/2011, 21:38
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 9 años, 4 meses
Puntos: 1530
Respuesta: Duda sobre el Header

el código CSS se recomienda colocarlo en un archivo *.css y vincularlo al HTML con el tag

<link rel="stylesheet" type="text/css" href="miarchivo.css" />

dentro del <head> (busca como vincular o añadir archivos css en html), o también puedes añadirlo directamente dentro de el tag

<style type="text/css">(código css)</style>

dentro del <head>
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #15 (permalink)  
Antiguo 09/04/2011, 03:11
 
Fecha de Ingreso: diciembre-2010
Mensajes: 180
Antigüedad: 7 años
Puntos: 5
Respuesta: Duda sobre el Header

Cita:
Iniciado por maycolalvarez Ver Mensaje
el código CSS se recomienda colocarlo en un archivo *.css y vincularlo al HTML con el tag

<link rel="stylesheet" type="text/css" href="miarchivo.css" />

dentro del <head> (busca como vincular o añadir archivos css en html), o también puedes añadirlo directamente dentro de el tag

<style type="text/css">(código css)</style>

dentro del <head>
mmm, estoy tratando aver que pasa, pero no funciona, cual sera mi error?

estilo.css
Código CSS:
Ver original
  1. <style type:text/css>
  2. #contenedor {
  3.   width: 700px;
  4. }
  5. #cabecera {
  6. }
  7. #menu {
  8.   float: left;
  9.   width: 150px;
  10. }
  11. #contenido {
  12.   float: left;
  13.   width: 550px;
  14. }
  15. #pie {
  16.   clear: both;
  17. }
  18.  
  19. h1 {
  20. color:red;
  21. font-size:36px;
  22. }
  23.  
  24. </style>

headerprueba.php
Código PHP:
Ver original
  1. <html>
  2. <head>
  3. <link rel="stylesheet" type="text/css" href="estilo.css" media="screen" />
  4. </head>
  5. <body>
  6. <div id="cabecera">
  7. <table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
  8.   <tr>
  9.     <td height="170" colspan="4" align="center" valign="top"><div align="left"><img src="Imagenes/header.png" width="750" height="170" /></div></td>
  10.   </tr>
  11.   <tr valign="top">
  12.     <td width="33%" height="32" align="center" valign="bottom"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','Imagenes/inicio2.png',1)"><img src="Imagenes/inicio.png" name="Image6" width="211" height="32" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Categorias','','Imagenes/categoria2.png',1)"></a></td>
  13.     <td width="33%" align="center" valign="bottom"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Categorias','','Imagenes/categorias2.png',1)"><img src="Imagenes/categorias.png" name="Categorias" width="211" height="32" border="0" id="Categorias" /></a><a href="formulario.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contacto','','Imagenes/contacto2.png',1)"></a></td>
  14.     <td width="33%" height="32" align="center" valign="bottom"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Buscar','','Imagenes/buscar2.png',1)"><img src="Imagenes/buscar.png" name="Buscar" width="211" height="32" border="0"></a>   </td>
  15.   </tr>
  16.   <tr valign="top">
  17.     <td height="32" colspan="4" align="right" valign="middle" background="Imagenes/barra.png"><label></label></td>
  18.   </tr>
  19.  
  20.   <tr valign="top">
  21.     <td height="19" colspan="4" align="center" valign="middle"><label></label></td>
  22.   </tr>
  23. </table>
  24. </div>
  25. <div id="contenedor">
  26. <!--contenido del marco principal con estilos CSS seg&#250;n estructura del layout y no lo cierro sino en el footer-->

menuprueba.php
Código PHP:
Ver original
  1. <h1>asdsdasd</h1>
  2. <p>Menu de prueba</p>
  3. <p>Prueba1</p>
  4. <p>Prueba2</p>
  5. <p>Prueba3</p>

mainprueba.php
Código PHP:
Ver original
  1. <?php
  2. include("headerprueba.php");
  3. ?>
  4. <div id="menu">
  5. <?php incude("menuprueba.php"); ?>
  6. </div>
  7. <div id="contenido">
  8.   <h1>asddsaasddsa</h1>
  9.   <p>aver, ojala que ande loco, ojalaaaaaaaaa</p>
  10.   <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  11.   <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  12.   <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa  </p>
  13. </div>
  14. <?php
  15. include("footer.php");
  16. ?>

footer.php
Código PHP:
Ver original
  1. <!--contenido del marco principal con estilos CSS seg&#250;n estructura del layout ABIERTO EN EL header-->
  2. </div>
  3. <div id="pie">
  4. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaawe  </div>
  5. </body>
  6. </html>

Esos son mis archivos, si me equivoco en algo por favor haganmelo saber :S Y Muchisimas gracias por todo el apollo :)

EDITO: Recien puse todo en un solo archivo y funciono :o Pero porque no funciona en archivos separados? :S
PD: Muchisimas gracias!!!
Edito2: Ahora voy a rearmar el codigo separado, porque ahora que me doy cuenta en el mainprueba.php tengo un <?php incude ("menurprueba.php"); ?>
Que error pavo :S Voy a probar ya les cuento!

Edito3: LISTOOOOOOOO, Lo hize! Muchisimas gracias por toda la ayuda may! De verdad muchas gracias :D

Última edición por SonrisaCs; 09/04/2011 a las 13:40
  #16 (permalink)  
Antiguo 10/04/2011, 10:43
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 9 años, 4 meses
Puntos: 1530
Respuesta: Duda sobre el Header

me parece fantástico que lograras resolverlo por tu cuenta, y para aclararte: uno de los errores que tenias al incluir el tag style es que colocaste el atributo HTML type como si fuese CSS !!!!

error: <style type:text/css>

como debe ser: <style type="text/css">

recuerda que CSS es un lenguaje y HTML otro, mucha suerte
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...

Etiquetas: header, php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 10:26.