organizar con div

mj1984 · #1 (**permalink**) 10/10/2011, 03:13

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!

emprear · #2 (**permalink**) 10/10/2011, 10:00

mostranos que hiciste y como te queda para poder orientarte

mj1984 · #3 (**permalink**) 10/10/2011, 10:02

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

emprear · #4 (**permalink**) 10/10/2011, 11:07

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<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-ar">
    <head>
        <meta charset="utf-8" />
        <title>XHtml5</title>
        <style type="text/css">
            /*<![CDATA[*/
html body {
height: 100%;
}
html, body, div, ul {
padding: 0;
margin: 0;
}
#centrar {
width: 950px;
margin: 0 auto;
overflow: hidden;
}
#header{
width: 100%;
height: 150px;
background-color: red;
}
#izq {
width: 250px;
float: left;
background-color: green;
padding-bottom: 2000px;
margin-bottom: -2000px;
}
#der {
width: 700px;
float: left;
background-color: orange;
padding-bottom: 2000px;
margin-bottom: -2000px;
}
#pie {
padding-top: 20px;
background-color: blue;
text-align: center;
clear: both;
position: relative;
width: 100%;
height: 80px;
}
/*]]>*/
        </style>
    </head>
    <body>
        <div id="centrar">
            <div id="header">
                header
            </div>
            <div id="izq">
                menu
            </div>
            <div id="der">
                contenido<br />
                contenido<br />
                contenido<br />
                contenido<br />
                contenido<br />
                contenido<br />
                contenido<br />
                contenido<br />
                contenido<br />
                contenido<br />
                contenido<br />
                contenido<br />
                contenido<br />
                contenido<br />
                contenido<br />
                contenido<br />
                contenido<br />
                contenido<br />
                contenido<br />
            </div>
            <div id="pie">
                pie<br />
                pie<br />
                pie<br />
            </div>
        </div>
    </body>
</html>
<!-- plantilla xhtml5 2010©emprear.com -->

Saludos

mj1984 · #5 (**permalink**) 10/10/2011, 11:14

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<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="estilos_divs.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="contenedor">
            <div id="cabecera">Esta es la cabecera</div>
            <div id="menu">Esta es la barra lateral
            <li><a href="index.html" title="Inicio" accesskey="1">Inicio</a></li>
                        <li><a href="quienessomos.html" title="Quienes Somos" accesskey="1">&iquest;Qui&eacute;nes somos?</a></li>
                        <li><a href="instalaciones.html" title="Instalaciones"accesskey="2">Instalaciones</a></li>
                        <li><a href="sementales.html" title="Sementales" accesskey="3">Sementales</a></li>
                        <li><a href="yeguas.html" title="Yeguas" accesskey="4">Yeguas</a></li>
                        <li><a href="potros.html" title="Venta de potros" accesskey="5">Venta de potros</a></li>
                        <li><a href="potras.html" title="Venta de potras" accesskey="6">Venta de potras</a></li>
                        <li><a href="galeria.html" title="Galería" accesskey="7">Galer&iacute;a</a></li>
                        <li><a href="videos.html" title="Vídeos" accesskey="8">V&iacute;deos</a></li>
                        <li><a href="localizacion.html" title="Localización" accesskey="9">Localizaci&oacute;n</a></li>
                        <li><a href="contacto.html" title="Contacto" accesskey="10">Contacto</a></li>
                        <li><a href="webamigas.html" title="Web amigas" accesskey="11">Web amigas</a></li>
            </div>
            <div id="contenido">Este es el contenido principal</div>
            <div id="pie">Este es el pie de pagina</div>
    </div>
</body>
</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.

emprear · #6 (**permalink**) 10/10/2011, 11:23

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

mj1984 · #7 (**permalink**) 11/10/2011, 07:22

Ya me funciona perfectamente, gracias emprear!

Aunque lo del DOCTYPE no se muy bien para qué sirve y qué tengo que poner.

emprear · #8 (**permalink**) 11/10/2011, 08:52

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="es" xmlns="http://www.w3.org/1999/xhtml" lang="es">

eso iría en todas tus páginas, el comentario

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

mj1984 · #9 (**permalink**) 11/10/2011, 16:52

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...

emprear · #10 (**permalink**) 11/10/2011, 17:42

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

mj1984 · #11 (**permalink**) 11/10/2011, 17:46

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.

emprear · #12 (**permalink**) 11/10/2011, 17:59

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