Foros del Web » Creando para Internet » HTML »

organizar con div

Estas en el tema de organizar con div en el foro de HTML en Foros del Web. Hola, estoy haciendo una página web y quiero que la organización sea la siguiente: - arriba haya un banner - debajo del banner y a ...
  #1 (permalink)  
Antiguo 10/10/2011, 03:13
Avatar de mj1984  
Fecha de Ingreso: septiembre-2008
Mensajes: 129
Antigüedad: 16 años, 2 meses
Puntos: 0
Pregunta organizar con div

Hola, estoy haciendo una página web y quiero que la organización sea la siguiente:

- arriba haya un banner
- debajo del banner y a la izquierda, aparezca el menú y debajo del menu el contador
- debajo del banner y a la derecha, aparezca el contenido de la página (irá cambiando según la opción que elija en el menú.
- al final de la página, debajo del menu y el contador y del contenido, aparecerá el pie de página.

¿Alguien podría ponerme cómo sería la distribución con div? Es que lo he intentado pero no me queda en ese orden.

Muchas gracias!
  #2 (permalink)  
Antiguo 10/10/2011, 10:00
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 4 meses
Puntos: 1567
Respuesta: organizar con div

mostranos que hiciste y como te queda para poder orientarte

__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 10/10/2011, 10:02
Avatar de mj1984  
Fecha de Ingreso: septiembre-2008
Mensajes: 129
Antigüedad: 16 años, 2 meses
Puntos: 0
Respuesta: organizar con div

No sé como poneros cómo queda! es que ya he borrado el archivo que tenía los divs, y lo tengo hecho con tablas, pero lo quiero poner con divs. Si quieres ver cómo tiene que quedar puedes ver directamente la página: www.yeguadalaplata.com
  #4 (permalink)  
Antiguo 10/10/2011, 11:07
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 4 meses
Puntos: 1567
Respuesta: organizar con div

Bueno, tu página tiene varios ingredientes, yo sólo te puedo dar una estructura básica desde dónde arrancar, pero a partir de ahi acomodar todos esos elementos va a ser una tarea dificil, ajustate a esto

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-ar">
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>XHtml5</title>
  6.         <style type="text/css">
  7.             /*<![CDATA[*/
  8. html body {
  9. height: 100%;
  10. }
  11. html, body, div, ul {
  12. padding: 0;
  13. margin: 0;
  14. }
  15. #centrar {
  16. width: 950px;
  17. margin: 0 auto;
  18. overflow: hidden;
  19. }
  20. #header{
  21. width: 100%;
  22. height: 150px;
  23. background-color: red;
  24. }
  25. #izq {
  26. width: 250px;
  27. float: left;
  28. background-color: green;
  29. padding-bottom: 2000px;
  30. margin-bottom: -2000px;
  31. }
  32. #der {
  33. width: 700px;
  34. float: left;
  35. background-color: orange;
  36. padding-bottom: 2000px;
  37. margin-bottom: -2000px;
  38. }
  39. #pie {
  40. padding-top: 20px;
  41. background-color: blue;
  42. text-align: center;
  43. clear: both;
  44. position: relative;
  45. width: 100%;
  46. height: 80px;
  47. }
  48. /*]]>*/
  49.         </style>
  50.     </head>
  51.     <body>
  52.         <div id="centrar">
  53.             <div id="header">
  54.                 header
  55.             </div>
  56.             <div id="izq">
  57.                 menu
  58.             </div>
  59.             <div id="der">
  60.                 contenido<br />
  61.                 contenido<br />
  62.                 contenido<br />
  63.                 contenido<br />
  64.                 contenido<br />
  65.                 contenido<br />
  66.                 contenido<br />
  67.                 contenido<br />
  68.                 contenido<br />
  69.                 contenido<br />
  70.                 contenido<br />
  71.                 contenido<br />
  72.                 contenido<br />
  73.                 contenido<br />
  74.                 contenido<br />
  75.                 contenido<br />
  76.                 contenido<br />
  77.                 contenido<br />
  78.                 contenido<br />
  79.             </div>
  80.             <div id="pie">
  81.                 pie<br />
  82.                 pie<br />
  83.                 pie<br />
  84.             </div>
  85.         </div>
  86.     </body>
  87. </html>
  88. <!-- plantilla xhtml5 2010©emprear.com -->

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 10/10/2011, 11:14
Avatar de mj1984  
Fecha de Ingreso: septiembre-2008
Mensajes: 129
Antigüedad: 16 años, 2 meses
Puntos: 0
Respuesta: organizar con div

Había conseguido algo similar a lo que me propones, te pego el código:

Código:
#contenedor {
       width: 900px;
       height: 400px;
       margin: 0px auto;
}

#cabecera {
	margin: 0px 1px 4px 1px;
	background-image:url(imagenes/banner.jpg);
	background-repeat: no-repeat; 
	height: 130px;
	width: 898px;
}

#menu {
            background-color: orange;
            float: left;
            width:160px;
            height:100%;
        }

#contenido {
            background-color: gray;
            float:left;
            width:740px;
            height:100%;
        }
        
#pie {
            background-color: blue;
            clear: both;
        }
Código HTML:
Ver original
  1.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  2.     <link href="estilos_divs.css" rel="stylesheet" type="text/css">
  3. </head>
  4.     <div id="contenedor">
  5.             <div id="cabecera">Esta es la cabecera</div>
  6.             <div id="menu">Esta es la barra lateral
  7.             <li><a href="index.html" title="Inicio" accesskey="1">Inicio</a></li>
  8.                         <li><a href="quienessomos.html" title="Quienes Somos" accesskey="1">&iquest;Qui&eacute;nes somos?</a></li>
  9.                         <li><a href="instalaciones.html" title="Instalaciones"accesskey="2">Instalaciones</a></li>
  10.                         <li><a href="sementales.html" title="Sementales" accesskey="3">Sementales</a></li>
  11.                         <li><a href="yeguas.html" title="Yeguas" accesskey="4">Yeguas</a></li>
  12.                         <li><a href="potros.html" title="Venta de potros" accesskey="5">Venta de potros</a></li>
  13.                         <li><a href="potras.html" title="Venta de potras" accesskey="6">Venta de potras</a></li>
  14.                         <li><a href="galeria.html" title="Galería" accesskey="7">Galer&iacute;a</a></li>
  15.                         <li><a href="videos.html" title="Vídeos" accesskey="8">V&iacute;deos</a></li>
  16.                         <li><a href="localizacion.html" title="Localización" accesskey="9">Localizaci&oacute;n</a></li>
  17.                         <li><a href="contacto.html" title="Contacto" accesskey="10">Contacto</a></li>
  18.                         <li><a href="webamigas.html" title="Web amigas" accesskey="11">Web amigas</a></li>
  19.             </div>
  20.             <div id="contenido">Este es el contenido principal</div>
  21.             <div id="pie">Este es el pie de pagina</div>
  22.     </div>
  23. </body>
  24. </html>

Mi problema ahora es que no se centra todo en la página, sino que se queda pegado a la izquierda. He probado poner en el css lo que tienen tu en #centrar, pero no me funciona.

Ayuda porfa! Gracias.
  #6 (permalink)  
Antiguo 10/10/2011, 11:23
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 4 meses
Puntos: 1567
Respuesta: organizar con div

Te dije que no va a ser fácil...

Probaste mi ejemplo en forma individual?
Se centra verdad?
Bueno, ahora tenes que ajustar tu diseño a ese esquema y no al revés, por supuesto podés modificar los anchos (siempre y cuando que no se excedan del contenedor principal) y remover esos colores de fondo, que solo está como referencia.
ovbiamente va a requeriri que rehagas el sitio completo, no se soluciona con un par de parches.
Y por favor ponele un Doctye válido a tus páginas, si no van a haber más problemas. Yo estoyusando html5 pero podes hacerlo con xhtml transitional

__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #7 (permalink)  
Antiguo 11/10/2011, 07:22
Avatar de mj1984  
Fecha de Ingreso: septiembre-2008
Mensajes: 129
Antigüedad: 16 años, 2 meses
Puntos: 0
Respuesta: organizar con div

Ya me funciona perfectamente, gracias emprear!

Aunque lo del DOCTYPE no se muy bien para qué sirve y qué tengo que poner.
  #8 (permalink)  
Antiguo 11/10/2011, 08:52
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 4 meses
Puntos: 1567
Respuesta: organizar con div

El Doctype es una instrucción que se incluye al inicio de la página y le dice al navegador como interpretar correctamenete ciertos elementos, hay diferentes tipos, en tu caso viendo lo que hiciste el siguiente me parec sería el mas adecuado
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xml:lang="es" xmlns="http://www.w3.org/1999/xhtml" lang="es">

eso iría en todas tus páginas, el comentario
<!--************** YEGUADA LA PLATA *************-->
te conviene desplazarlo abajo.

te muestro un ejemplo de como quedaria tu inicio con el doctype y el html limpiado de ciertos errores que tiene



Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xml:lang="es" xmlns="http://www.w3.org/1999/xhtml" lang="es">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="description" content="Yeguada La Plata" />
  6. <meta name="keywords" content=
  7. "compra, venta, caballos, horse, horses, pura, raza, española, cordoba, plata, posadas, hornachuelos" />
  8. <meta name="author" content="Yeguada La Plata" />
  9. <title>Yeguada La Plata</title>
  10. <link rel="stylesheet" type="text/css" href="estilo.css" />
  11. <link rel="shortcut icon" href="imagenes/icono_favoritos.ico" />
  12. </head>
  13. <!--************** YEGUADA LA PLATA *************-->
  14. <div id="fondo">
  15. <div id="global">
  16. <div id="cabecera"></div>
  17.  
  18. <!--fin cabecera-->
  19. <!--Inicio Menu y Contenido-->
  20. <table width="100%" border="0">
  21. <tr><!--Inicio Menu-->
  22. <td width="160" valign="top" id="menu">
  23. <h4>Menú</h4>
  24. <ul class="listamenu">
  25. <li><a href="index.html" title="Inicio" accesskey="1">Inicio</a></li>
  26. <li><a href="quienessomos.html" title="Quienes Somos" accesskey="1">¿Quiénes somos?</a></li>
  27. <li><a href="instalaciones.html" title="Instalaciones" accesskey="2">Instalaciones</a></li>
  28. <li><a href="sementales.html" title="Sementales" accesskey="3">Sementales</a></li>
  29. <li><a href="yeguas.html" title="Yeguas" accesskey="4">Yeguas</a></li>
  30.  
  31. <li><a href="potros.html" title="Venta de potros" accesskey="5">Venta de potros</a></li>
  32. <li><a href="potras.html" title="Venta de potras" accesskey="6">Venta de potras</a></li>
  33. <li><a href="galeria.html" title="Galería" accesskey="7">Galería</a></li>
  34. <li><a href="videos.html" title="Vídeos" accesskey="8">Vídeos</a></li>
  35. <li><a href="localizacion.html" title="Localización" accesskey="9">Localización</a></li>
  36. <li><a href="contacto.html" title="Contacto" accesskey="10">Contacto</a></li>
  37. <li><a href="webamigas.html" title="Web amigas" accesskey="11">Web amigas</a></li>
  38. </ul>
  39. </td>
  40. <!--Fin Menu-->
  41.  
  42. <!--Inicio Contenido-->
  43. <td valign="top" id="contenido">
  44. <h1>¿Quiénes somos?</h1>
  45. <p>La yeguada La Plata nace de la afición por el caballo que transmitió D. Eduardo Prieto Ramos a
  46. su hijo, Eduardo Prieto de Castro. La yeguada ha heredado el hierro del bisabuelo de D. Eduardo
  47. P.R., D. Enrique Prieto.</p>
  48. <p>Las primeras yeguas, Hispano-Árabes, se han ido haciendo en la finca La Plata a partir de una
  49. yegua llamada Deseada. De dicha yegua han nacido Peregrina EP, Duque EP, Cora EP y otros potros de
  50. capa castaña y torda, todos ellos con una enorme belleza y docilidad, haciéndoles unos magníficos
  51. caballos para la doma ecuestre.</p>
  52. <p>En el año 2008 se adquieren 6 yeguas PRE de diversas ganaderías: Pallarés, Guardiola, Martínez
  53. Boloix, Yeguada Militar de Jerez, Los Alburejos y Marqués de Quintanar. Los primeros potros y
  54. potras que nacen proceden de un semental de la ganadería de Mª Ángeles Govantes.</p>
  55. <p>Posteriormente se ha cubierto con un semental de la Yeguada Alcaide, de nombre Abenuz II, del
  56. que se han obtenido dos magníficos potros.</p>
  57. <p>En el año 2011 se ha cubierto con un semental de la ganadería de Emilio Reina llamado
  58. Nadamás.</p>
  59. <p>En la actualidad cubrimos con sementales que han demostrado cualidades morfológicas y que
  60. proceden de las mejores ganaderías cordobesas.</p>
  61. </td>
  62.  
  63. <!--Fin Contenido--></tr>
  64. <!--Inicio Contador-->
  65. <tr>
  66. <td align="middle"><img src=
  67. 'https://gestiondecuenta.com/Count.cgi?ft=3&amp;frgb=2E3B0B&amp;dd=B|df=yeguadalaplata.com' alt=
  68. "#########" /></td>
  69. </tr>
  70. <!--Fin Contador--></table>
  71. <!--Fin Menu y Contenido-->
  72. <div class="hr">
  73. <hr /></div>
  74. <!--Inicio Pie-->
  75. <div id="copyright">Yeguada La Plata Copyright© 2011 - Todos los derechos reservados</div>
  76. <!--fin Pie--></div>
  77. <!--fin global--></div>
  78. <!--fin fondo-->
  79. </body>
  80. </html>

y fijate que en alguna parte pusiste align="middle", eso está mal , es align = center left ó right, el middle es para "valign" que es la alineación vertical.

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #9 (permalink)  
Antiguo 11/10/2011, 16:52
Avatar de mj1984  
Fecha de Ingreso: septiembre-2008
Mensajes: 129
Antigüedad: 16 años, 2 meses
Puntos: 0
Respuesta: organizar con div

Vale, ya lo tengo puesto.

Lo que no veo que me funcione ahora es el iconito que me sale en la pestaña, al lado del nombre de la página, y junto con el que se almacena en favoritos...
  #10 (permalink)  
Antiguo 11/10/2011, 17:42
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 4 meses
Puntos: 1567
Respuesta: organizar con div

aunque puede estar en otra carpeta te aconsejo que lo pongas asi
en el head

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
que tu imagenes/icono_favoritos.ico lo renombres como favicon.ico y lo guardes en la carpeta raíz.
Aunque ahora que observo, veo que en la web no hiciste ningun cambio todavia, por lo que asumo que estás trabajando directamenet desde el windows, si es asi, te voy avisando que el internet explorer no muestra el favicon a menos que estes trabajando en internet, asi que a lo mejor debe ser eso, si es asi, dejalo como esta que al subir a internet la página se va a ver.
Y un tip extra, si aparte, despues de declarar el favicon el el head, pones
<link rel="shortcut icon" href="/favicon.gif" type="image/gif" />
y haces un gif animado te lo va a reproducir el Firefox

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #11 (permalink)  
Antiguo 11/10/2011, 17:46
Avatar de mj1984  
Fecha de Ingreso: septiembre-2008
Mensajes: 129
Antigüedad: 16 años, 2 meses
Puntos: 0
Respuesta: organizar con div

Así es, aun no lo he subido porque aun no he modificado todos los htmls. Estoy haciendo las pruebas en Windows. Cuando lo suba si no funciona probaré eso que me has dicho

¿sabrías cómo hacer una galería de fotos? Si ves, en el apartado de instalaciones tengo una, pero no me convence del todo. Tampoco la que tengo en la parte de galería. ¿Alguna sugerencia?

Saludos.
  #12 (permalink)  
Antiguo 11/10/2011, 17:59
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 4 meses
Puntos: 1567
Respuesta: organizar con div

te estaba por decir que uses lightbox o alguno de sus clones, pero veo que en el código fuente cargas algo de eso (habia visto el menu Galería justamente.
Algo mas o menos sencillo y facil de implementar es este
http://fancybox.net/
(ojo que debe de haber como 20 más, algunos con mas efectos, te paso ese para que no te comliques tanto)
lo podes usar tanto para instalaciones como para galeria, bajate el zip que ya sale funcionando, para ver como se utiliza

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: organizar
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




La zona horaria es GMT -6. Ahora son las 17:32.