Ayuda con maquedato de sitio, consultas varias al respecto

elkevin · #1 (**permalink**) 01/04/2010, 16:05

Buenas tardes gente de esta hermosa comunidad!.

Les comento, que hace ya un buen rato que estoy pensando y pensando, navegando y navegando, y no logro dar con lo que quiero.

Quiero hacer un sitio que respete el siguiente esquema:

El problema es, que debo asegurarme que el mismo, sea visualizado correctamente en la mayor cantidad de resoluciones y relaciones de aspectos posibles.

He intentado con los atributos que me facilita CSS, como EM o %, tomando como referencia una relación de aspecto 4:3 en una pantalla de 800 x 600. El problema es, que cuando llego a mi resolución 1366 x 768, esto es un desastre.

Mi idea, es que no halla margenes entre el TOP y el BOTTOM, tal como muestro en la imagen.

Se me ocurrió emplear un Script para hacer dinámica la altura (ya que el ancho, no es mi problema), pero me pregunto, ¿que pasaría, si un usuario abre mi sitio con su navegador extremadamente ancho, y bajo?.

Enumeré en el gráfico que coloqué mas arriba, las partes principales del sitio. El sitio pretende operar con un dinamismo lo mas eficiente posible, cargando solo una vez 1)-2)-3) y mostrando el contenido que el usuario desee en 4).

Quiero que el único Scroll visible en la pantalla sea el de 4). De este modo voy a tener una pantalla limpia en todo momento brindando una navegación rápida e intuitiva con las funciones siempre "muy a mano".

He visto que en algunas ocaciones emplean Script para darle el alto al sitio, pero en mi caso, como todo trabaja con EMs, creo que lo mejor sería conocer las dimenciones de antemano.

Pensé, que en caso de tener pantallas muy anchas, como la que empleo para trabajar, simplemente se agreguen márgenes a los costados:

La verdad, es que estoy como un poco "embarullado", y no se para donde dispar!. Agradecería que alguien me tire "una posta", que me diga "encaralo por acá", después sigo yo solo :) .

Espero haber sido claro!, cualquier cosa, me dicen. Desde ya muchas gracias!.

brayan1989 · #2 (**permalink**) 01/04/2010, 17:43

Chamo aqui te va esta es una de las tantas plantillas de dremweaver lo que le falta es que le des los margenes como tu quieres y eso te lo dejo a ti.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css"> 
    <!-- 
    body  {
    	font: 100% Verdana, Arial, Helvetica, sans-serif;
    	background: #666666;
    	margin: 0; /* es recomendable ajustar a cero el margen y el relleno del elemento body para lograr la compatibilidad con la configuración predeterminada de los diversos navegadores */
    	padding: 0;
    	text-align: center; /* esto centra el contenedor en los navegadores IE 5*. El texto se ajusta posteriormente con el valor predeterminado de alineación a la izquierda en el selector #container */
    	color: #000000;
    }
    
    /* Sugerencias para diseños elásticos 
    1. Dado que el tamaño global de los diseños elásticos se basa en el tamaño de fuente predeterminado del usuario, resultan algo más impredecibles. Si se utilizan correctamente, también son más accesibles para aquellas personas que necesitan tamaños de fuentes más grandes, dado que la longitud de línea mantiene la proporcionalidad.
    2. La asignación de tamaño a los divs en este diseño se basa en el 100% del tamaño de fuente en el elemento body. Si reduce el tamaño global del texto empleando font-size: 80% en el elemento body o el #container, recuerde que todo el diseño reducirá su tamaño proporcionalmente. Es posible que le interese aumentar los anchos de los diversos divs para compensar este efecto.
    3. Si la asignación de tamaño de fuente se modifica de forma distinta en cada div en lugar de hacerse en el diseño global (es decir: a #sidebar1 se le asigna un 70% de tamaño de fuente y a #mainContent se le asigna un 85% de tamaño de fuente), ello hará que se modifique proporcionalmente el tamaño global de cada uno de los divs. Si lo desea, puede realizar el ajuste basándose en la asignación de tamaño de fuente final.
    */
    .twoColElsLtHdr #container { 
    	width: 46em;  /* este ancho creará un contenedor que cabrá en una ventana de navegador 800px si el texto se deja con los tamaños de fuente predeterminados del navegador */
    	background: #FFFFFF;
    	margin: 0 auto; /* los márgenes automáticos (conjuntamente con un ancho) centran la página */
    	border: 1px solid #000000;
    	text-align: left; /* esto anula text-align: center en el elemento body. */
    } 
    .twoColElsLtHdr #header { 
    	background: #DDDDDD; 
    	padding: 0 10px;  /* este relleno coincide con la alineación izquierda de los elementos de los divs que aparecen bajo él. Si se utiliza una imagen en el #header en lugar de texto, es posible que le interese quitar el relleno. */
    } 
    .twoColElsLtHdr #header h1 {
    	margin: 0; /* el ajuste en cero del margen del último elemento del div de #header evita la contracción del margen (un espacio inexplicable entre divs). Si el div tiene un borde alrededor, esto no es necesario, ya que también evita la contracción del margen */
    	padding: 10px 0; /* el uso de relleno en lugar de margen le permitirá mantener el elemento alejado de los bordes del div */
    }
    
    /* Sugerencias para sidebar1:
    1. Tenga en cuenta que, si establece un valor de tamaño de fuente en este div, el ancho global del div se ajustará en función de éste.
    2. Dado que está trabajando en ems, es conveniente no utilizar relleno en la barra lateral propiamente dicha. Se añadirá al ancho en el caso de navegadores que cumplen los estándares, creando un ancho real desconocido. 
    3. El espacio entre el lado del div y los elementos que contiene puede crearse colocando un margen izquierdo y derecho en dichos elementos, como se observa en la regla ".twoColElsLtHdr #sidebar1 p".
    */
    .twoColElsLtHdr #sidebar1 {
    	float: left; 
    	width: 12em; /* dado que este elemento es flotante, debe asignarse un ancho */
    	background: #EBEBEB; /* el color de fondo se mostrará a lo largo de todo el contenido de la columna, pero no más allá */
    	padding: 15px 0; /* el relleno superior e inferior crea un espacio visual dentro de este div */
    }
    .twoColElsLtHdr #sidebar1 h3, .twoColElsLtHdr #sidebar1 p {
    	margin-left: 10px; /* deben asignarse los márgenes izquierdo y derecho de cada elemento que vaya a colocarse en las columnas laterales */
    	margin-right: 10px;
    }
    
    /* Sugerencias para mainContent:
    1. Si asigna a este div #mainContent un valor de tamaño de fuente distinto del que tiene el div #sidebar1, los márgenes del div #mainContent se basarán en su tamaño de fuente y el ancho del div #sidebar1 se basará en su tamaño de fuente. Puede que le interese ajustar los valores de estos divs.
    2. El espacio entre el mainContent y sidebar1 se crea con el margen izquierdo del div mainContent.  Con independencia de la cantidad de contenido que incluya el div sidebar1, permanecerá el espacio de la columna. Puede quitar el margen izquierdo si desea que el texto del div #mainContent llene el espacio de #sidebar1 cuando termine el contenido de #sidebar1.
    3. Para evitar la caída de un elemento flotante, puede que tenga que realizar pruebas con el fin de determinar el tamaño máximo aproximado de la imagen/el elemento, ya que este diseño se basa en el tamaño de fuente del usuario combinado con los valores que usted establezca. Sin embargo, si el usuario tiene configurado un tamaño de fuente inferior al normal, habrá menos espacio disponible en el div #mainContent del que observará al realizar la prueba.
    4. En el siguiente comentario condicional de Internet Explorer, la propiedad zoom se utiliza para asignar a mainContent "hasLayout." Esto evita que se produzcan diversos problemas específicos de IE.
    */
    .twoColElsLtHdr #mainContent {
    	margin: 0 1.5em 0 13em; /* el margen derecho puede asignarse en ems o píxeles. Éste crea el espacio a lo largo de la parte derecha de la página. */
    } 
    .twoColElsLtHdr #footer { 
    	padding: 0 10px; /* este relleno coincide con la alineación izquierda de los elementos de los divs que aparecen por encima de él. */
    	background:#DDDDDD;
    } 
    .twoColElsLtHdr #footer p {
    	margin: 0; /* el ajuste en cero de los márgenes del primer elemento del pie evitará que puedan contraerse los márgenes (un espacio entre divs) */
    	padding: 10px 0; /* el relleno de este elemento creará espacio, de la misma forma que lo haría el margen, sin el problema de la contracción de márgenes */
    }
    
    /* Varias clases diversas para su reutilización */
    .fltrt { /* esta clase puede utilizarse para que un elemento flote en la parte derecha de la página. El elemento flotante debe preceder al elemento junto al que debe aparecer en la página. */
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { /* esta clase puede utilizarse para que un elemento flote en la parte izquierda de la página. */
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { /* esta clase debe colocarse en un elemento div o break y debe ser el último elemento antes del cierre de un contenedor que incluya completamente a un elemento flotante */
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
    --> 
    </style><!--[if IE]>
    <style type="text/css"> 
    /* coloque las reparaciones de css para todas las versiones de IE en este comentario condicional */
    .twoColElsLtHdr #sidebar1 { padding-top: 30px; }
    .twoColElsLtHdr #mainContent { zoom: 1; padding-top: 15px; }
    /* la propiedad zoom propia que se indica más arriba proporciona a IE el hasLayout que necesita para evitar diversos errores */
    </style>
    <![endif]--></head>

brayan1989 · #3 (**permalink**) 01/04/2010, 17:45

Código:

<body class="twoColElsLtHdr">

    <div id="container">
      <div id="header">
        <h1>Encabezado</h1>
      <!-- end #header --></div>
      <div id="sidebar1">
        <h3>Contenido de sidebar1</h3>
        <p>El color de fondo de este div sólo se mostrará a lo largo del contenido. Si desea utilizar una línea divisoria en su lugar, coloque un borde en el lado izquierdo del div #mainContent si el div #mainContent siempre va a incluir más contenido que el div #sidebar1. </p>
        <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. </p>
      <!-- end #sidebar1 --></div>
      <div id="mainContent">
        <h1> Contenido principal </h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. </p>
        <p>Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
        <h2>Encabezado de nivel H2 </h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
    	<!-- end #mainContent --></div>
    	<!-- Este elemento de eliminación siempre debe ir inmediatamente después del div #mainContent para forzar al div #container a que contenga todos los elementos flotantes hijos --><br class="clearfloat" />
       <div id="footer">
        <p>Pie
</p>
      <!-- end #footer --></div>
    <!-- end #container --></div>
    </body>
</html>

elkevin · #4 (**permalink**) 01/04/2010, 18:10

Bunas brayan1989!, muchas gracias por tu ayuda!.

Te comento que he logrado una visualización como la que propones es esa plantilla. La diferencia es que en vez de trabajar con PX, trabajo con EM. De este modo consigo ajustar las dimenciones del sitios, de modo automático para cada pantalla.

Mi problema es, que no logro que el pié quede pegado al BOTTOM del navegador.

Ya estoy viendo que no hay muchas posibilidades de lograr esto, creo que voy a decidirme por utilizar algún script Javascript, que me redimencione el largo del sitio una vez que este está cargado.

Si se te ocurre alguna otra idea, soy todo oidos! (mejor dicho, todo ojos!).

Mil gracias!.

jomaruro · #5 (**permalink**) 02/04/2010, 04:44

Hola:

A ver si te sirve este ejemplo de Mikmoro: http://www.araudi.net/ejemplos/conjunta.html

Saludos.

elkevin · #6 (**permalink**) 07/04/2010, 05:53

Pucha!, que complicado me lo veo!.

He recorrido muchos sitios, mirado mucho código, y metido mano, y no logro dar con lo que quiero.

Mi idea es que mi sitio ocupe todo el largo de la pantalla y no muestre scroll en lo posible, a menos que el espacio no sea suficiente.

El area de navegación en mi caso es 4), solo ahí quiero scroll, pero no en el body por así decirlo.

Tendré que replantearme el esquema?.

Saludos!.

elkevin · #7 (**permalink**) 28/04/2010, 17:03

¡Buenas gente!, de nuevo por acá :)

Le traigo el Layout a medias de lo que quiero. Lo único que me está faltando, es que se adapte verticalmente, siempre y cuando sobre espacio.

Es decir, tiene un tamaño mínimo, pero no máximo.

Layout aquí

¡Nuevamente muchas gracias!

fiu · #8 (**permalink**) 28/04/2010, 18:38

creo que el ejemplo que ha puesto jomaruro es perfecto, solo debes añadirle overflow:scroll a la capa de contenido.

elkevin · #9 (**permalink**) 28/04/2010, 18:43

Cita:

Iniciado por fiu

creo que el ejemplo que ha puesto jomaruro es perfecto, solo debes añadirle overflow:scroll a la capa de contenido.

¡Buenas colega!, antes que nada, ¿muchas gracias por participar!.

En mi última respuesta coloqué la última versión del Layou, el msimo funciona con overflow-y:auto.

Todo eso marcha perfecto. Pasa que quiero que cuando alguien ve el sitio con un monitor mas grande, el mismo ocupe todo el ancho vertical.

Tal vez te dió la impresión de que así funciona, por que yo le dí el ancho justo para 1024x768.

¿Alguna idea?.

fiu · #10 (**permalink**) 28/04/2010, 18:49

hola :)

me referia a este [URL="http://www.araudi.net/ejemplos/conjunta.html"]http://www.araudi.net/ejemplos/conjunta.html[/URL]

creo que es lo que pides, solo que en lugar de tener scroll en el body lo quieres en la capa 4) contenido, si le poner overflow:scroll a eso, hará lo que buscas, no?

elkevin · #11 (**permalink**) 28/04/2010, 19:38

Cita:

Iniciado por fiu

hola :)

me referia a este [URL="http://www.araudi.net/ejemplos/conjunta.html"]http://www.araudi.net/ejemplos/conjunta.html[/URL]

creo que es lo que pides, solo que en lugar de tener scroll en el body lo quieres en la capa 4) contenido, si le poner overflow:scroll a eso, hará lo que buscas, no?

¡Claro!, eso es "a la vista" lo que pido.

Lo que pasa, es que está muy bien ingeniado. El autor trabajó mucho con los colores de fondo, colores y anchos de márgenes, etc; pero no siempre con DIVs.

Yo necesito que estríctamente trabaje con DIVs, por el hecho que atualizo su contenido de modo dinámico, y sin un área de referencia no puedo hacer nada (o puedo muy trabajosamente).

Pero si, así es como quiero que se comporte mi Layout.

¿Alguna sugerencia colega?. ¡Te agradezco mucho el tiempo que te tomas en ayudarme!.