Duda sobre el Header

SonrisaCs · #1 (**permalink**) 06/04/2011, 21:03

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

maycolalvarez · #2 (**permalink**) 06/04/2011, 21:29

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?

SonrisaCs · #3 (**permalink**) 06/04/2011, 21:31

Cita:

Iniciado por maycolalvarez

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

GatorV · #4 (**permalink**) 06/04/2011, 21:54

Tema movido desde PHP a HTML

#5 (**permalink**) 06/04/2011, 21:56

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

SonrisaCs · #6 (**permalink**) 06/04/2011, 22:03

Cita:

Iniciado por marcofbb

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

maycolalvarez · #7 (**permalink**) 07/04/2011, 09:25

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

SonrisaCs · #8 (**permalink**) 07/04/2011, 16:45

Cita:

Iniciado por maycolalvarez

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:)

SonrisaCs · #9 (**permalink**) 07/04/2011, 21:25

Cita:

Iniciado por maycolalvarez

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

znarer · #10 (**permalink**) 08/04/2011, 04:17

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.

maycolalvarez · #11 (**permalink**) 08/04/2011, 10:29

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<html>
  <head>
    <!--contenido del head-->
  </head>
  <body>
  <div id="header">
    <!--contenido del head-->
  </div>
  <div id="frame_css_set1">
    <!--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<!--contenido del marco principal con estilos CSS según estructura del layout ABIERTO EN EL header-->
    </div>
  </body>
</html>

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

Código PHP:

Ver original<?php
//incluyo el header:
include("header.php");
?>
<div class="columna0">
  <?php incude("mi-menu.php"); ?>
</div>
<div class="columna1">
  <!--demás contenido HTML o php-->
</div>
<?php
//incluyo el footer:
include("footer.php");
?>

resultado: una página con layout segmentado

GatoGordo · #12 (**permalink**) 08/04/2011, 14:57

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!

SonrisaCs · #13 (**permalink**) 08/04/2011, 18:09

Cita:

Iniciado por maycolalvarez

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<html>
  <head>
    <!--contenido del head-->
  </head>
  <body>
  <div id="header">
    <!--contenido del head-->
  </div>
  <div id="frame_css_set1">
    <!--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<!--contenido del marco principal con estilos CSS según estructura del layout ABIERTO EN EL header-->
    </div>
  </body>
</html>

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

Código PHP:

Ver original<?php
//incluyo el header:
include("header.php");
?>
<div class="columna0">
  <?php incude("mi-menu.php"); ?>
</div>
<div class="columna1">
  <!--demás contenido HTML o php-->
</div>
<?php
//incluyo el footer:
include("footer.php");
?>

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 :)

maycolalvarez · #14 (**permalink**) 08/04/2011, 20:38

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>

SonrisaCs · #15 (**permalink**) 09/04/2011, 02:11

Cita:

Iniciado por maycolalvarez

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<style type:text/css>
#contenedor {
  width: 700px;
}
#cabecera {
}
#menu {
  float: left;
  width: 150px;
}
#contenido {
  float: left;
  width: 550px;
}
#pie {
  clear: both;
}
 
h1 {
color:red;
font-size:36px;
}
 
</style>

headerprueba.php

Código PHP:

Ver original<html>
<head>
<link rel="stylesheet" type="text/css" href="estilo.css" media="screen" /> 
</head>
<body>
<div id="cabecera">
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="170" colspan="4" align="center" valign="top"><div align="left"><img src="Imagenes/header.png" width="750" height="170" /></div></td>
  </tr>
  <tr valign="top">
    <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>
    <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>
    <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>
  </tr>
  <tr valign="top">
    <td height="32" colspan="4" align="right" valign="middle" background="Imagenes/barra.png"><label></label></td>
  </tr>
  
  <tr valign="top">
    <td height="19" colspan="4" align="center" valign="middle"><label></label></td>
  </tr>
</table>
</div>
<div id="contenedor">
<!--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<h1>asdsdasd</h1>
<p>Menu de prueba</p>
<p>Prueba1</p>
<p>Prueba2</p>
<p>Prueba3</p>

mainprueba.php

Código PHP:

Ver original<?php
include("headerprueba.php");
?>
<div id="menu">
<?php incude("menuprueba.php"); ?>
</div>
<div id="contenido">
  <h1>asddsaasddsa</h1>
  <p>aver, ojala que ande loco, ojalaaaaaaaaa</p>
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa  </p>
</div>
<?php
include("footer.php");
?>

footer.php

Código PHP:

Ver original<!--contenido del marco principal con estilos CSS seg&#250;n estructura del layout ABIERTO EN EL header-->
</div>
<div id="pie">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaawe  </div>
</body>
</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

maycolalvarez · #16 (**permalink**) 10/04/2011, 09:43

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