Maquetando con DIV’s (ejemplo IV)

18 04 2007

Esta vez, fui vencido por mi propia creatividad, al tratar de realizar esta estructura con ocho divs. En este caso, me vi obligado a colocar otro DIV más para los bloques marcados con un color más fuerte. De todos modos, estoy contento de que, junto con ustedes, pude realizar esta estructura, aun más dinámica. Les prometo que para la siguiente vez, verán un diseño más dificil de maquetar y con solamente los DIV’s necesarios.

Aqui les dejo el codigo de este ejemplo para que lo estudien. El punto de esta maquetación es saber que los bloques que se colocan en flotante, si no tienen un alto igual, causaran que los siguientes caigan a la altura del más alto. Esto puede ser una ventaja o desventaja.

<div style = "display: table; width: 500px;">
    <div style = "float: left; width: 104px;">
        <div style = "float: left; height: 100px; width: 102px;"></div>
        <div style = "float: left; height: 143px; width: 102px;"></div>
    </div>
    <div style = "float: left; height: 250px; width: 100px;"></div>
    <div style = "float: left; height: 150px; width: 100px;"></div>
    <div style = "float: right; height: 50px; width: 175px;"></div>
    <div style = "float: right; height: 194px; width: 80px;"></div>
    <div style = "float: right; height: 194px; width: 87px;"></div>
    <div style = "float: right; height: 93px; width: 100px;"></div>
</div>

Solo como nota adicional, respecto a lo conveniente de maquetar con DIV’s, es que todos los ejemplos que les mostré en este tutorial fueron probados en: Mozilla Firefox 2.0, Opera Browser 9.0 e Internet Explorer 6 y todos resultaron en la misma estructura.

Articulos Relacionados:


Acciones

Information

14 responses

26 04 2007
luciano

hola creo k el div de mas para los blokes marcados con gris fuerte se puede, quitar poniendo en el estilo del div superior o contenedor “display:block;” en lugar de “display: table”, no lo he chekado con este ejemplo pero hace ratillo me tope con una similar y esi lo resolvi🙂

25 06 2007
iemz

El atributo display:table no funciona en Internet Explorer, supongo que en el caso de colocarlo continua tratandolo como un display:block

Puedes encontrar más información en Quirksmode: The display declaration

Por lo que léi utilizas display:table para evitar que los divs se salgan del contenedor, yo soluciono esto colocándole al div “padre” también el atributo float:left o float:right.

Otra observación, en Internet Explorer sino estoy mal no se puede centrar usando el valor auto en los margenes, para centrar se utiliza text-align:center en el elemento padre.

25 06 2007
Xema

la verdad es que yo me estoy volviendo loco con los div´s no es que sea nuevo en esto, se maquetar divs perfectamente. pero tengo un proyecto entre manos que tengo que hacer una “plantilla” con un formulario -> hoja de resultados -> ficha de cada resultado. Pero la plantilla debe ser ajustable entre 550px y 750px es decir hay que trabajar con % y las alturas no se pueden definir, ya que según el ancho los divs tendrán más altura o menos. es un verdadero quebradero de cabeza ya que no solo es ese el problema, las tipografias, colores etc son variables (debe quedar bien con casi todo) y cada hoja no tiene 4, 6 u 8 divs puede tener decenas…., estos ejemplos están muy bien, pero poneros con algo así y al final veréis divs por todos lados como yo, que me estoy volviendo loco. jejejeje

1 09 2007
Jose Alberto

Soy mas bien un principiante en esto, pero no me encuentro capaz aun de poder maquetar despues de una salida ofrecida por php un resultado de 10 paginas y poder imprimirlo. En resumen, leo la base de datos obtengo una serie de registros y me gustaria maquetar ese resultado para poder imprimirlo en una solucion profesional. Si me podeis ayudar con los div mejor.
1- he probado destro de style=”page-break-before: always;” etc, pero los resultados son ambiguos y no funciona muy bien ni en ie6 o sup ni tampoco en mosilla 2.0.
2- Tambien me gustaria información de como con css poder maquetar los registros que obtengo porque cuando caben de ancho en tabla va todo bien, pero cuando alguno o mas de uno de los registros en algun campo dobla y tiene 3 lineas dentro de la celda de la tabla ya se me descuadra todo.
Es lo mas complicado a lo que me enfrente nunca, al menos de como hacer que no se descoloque todo. ¿como maqueto para imprimir? socorroooo😉

18 06 2008
Jonee

Que tal, hace rato que tengo en mis favoritos estos ejemplos, son muy buenos, el problema es colocar dentro de estos DIVs otros DIVs, porque me es imposible centrarlos. Si pueden darme un tip para hacerlo, desde ya muchas gracias

18 06 2008
Juan Manuel Lemus

@Jonee: puedes centrarlos utilizando la propiedad margin: 0px auto 0px auto; y un ancho menor al ancho total del contenedor.

@Jose Alberto: no creo que page-break-before sea una propiedad estándard. Creo que la solución puede ser válida si usas elementos Lista (LI) o incluso tablas (por lo que entendido, aquí y solo aqui en la tabulación de datos, puedes utilizar tablas).

18 07 2008
Maximiliano

bueno yo soy 100% nuevo en esto aprendi a hacer tables y php basico,
en lo que soy buenos es en vb 6, estoy creando la paguina de mi enpresa…
pero me aburri… y me recomendaron usar los divs asique encontre estos ejemplos y me estan siendo de buena utilidad… Saludos para todos. y me voy a quemar un rato los cesos, con este nuevo desafio.. je

6 11 2008
Bravo

Esta de lujo eso jaja, muchas propiedades o funciones de las paginas se pierden con el tiempo y uno no se acuerda y como se hace dependiente del intelicence de las aplicaciones pues cuesta mucho trabajo ajustar las paginas a patatita… gracias por la ayuda esta de lujo..

7 07 2010
Marcelo

Hola!! me pareció muy interesante los ejemplos, mas teniendo en cuenta que estoy iniciándome en todo esto.
Alguien podría su sugerirme algún sitio donde encontrar más ejemplos un poco mas avanzados que estos de maquetear sitios ya con imágenes y texto??
Gracias y Saludos.

13 11 2010
Alexis

Hola aqui les paso un div autoajustable y bastante completo, tambien permite poner un div dentro de otro copiandolo y escribiendo el codigo dentro del anterior. jajaja Es fácil ala a divertirse.

2 02 2011
dg.gaby

Hola, me tomo el atrevimiento de consultarles algo, porque ya estoy como desesperada buscandole una solución y no me sale nada…aclaro que necesito una respuesta como si fuera “programación para tontos”

El dilema es el siguiente:
tengo una pag. armada en CSS (boceto que adjunto) y una botonera en flash. Lo que quiero lograr es que cuando hago clic en los botones me cargue el contenido en uno de los divs que destiné para eso, y no en una pagina nueva, ni que tenga que recargar toda la pag. me expliqué bien? Hace días que busco la respuesta a esto y pruebo con distintas cosas que veo en la web… y no lo puedo lograr. Es re importante para mi ya que es un proyecto que me pidieron en el trabajo, y como soy nueva no les quiero fallar, a pesar de que ya avisé que la programación no es lo mío. Espero puedan ayudarme y desde ya MUUUUUUUUCHAS GRACIAS!
Sds!

2 02 2011
Juan Manuel Lemus

Prueba con la instrucción getURL (no sé si esta es): getURL(“javascript: %codigo%; void(0);”); Prueba esto: getURL(“javascript: alert(23); void(0);”); Te tiene que mostar un cuadrito de ALERT con el mensaje “23”. Si te funciona, ahora solo busca como cambiar el contenido de un DIV con JavasScript. Espero esto te haya servido. Feliz tarde.

3 02 2011
Dg.gaby

Muchas gracias Juan :anuel… lo hice y más o menos salió lo unico que no logro es que en lugar de visualizar otro texto, visualice otro html en mi div. pero vá mejorando. te paso los códigos a ver si te das cuenta:

“PAD” es el nombre del div donde quiero que se cambien los contenidos.

Código en el html:

function cambiarContenido(texto){
document.getElementById(“pad”).innerHTML = texto;

}

Código del botón de flash:

on(release){
getURL (“javascript:cambiarContenido(‘Marcas.html’)”)
}

3 02 2011
Juan Manuel Lemus

Si, parece el correcto. El valor de la variable lo pones como etiquetas HTML y debería funcionarte. Otra opción es que la función esté en HTML y que el Flash solametne la llame.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s




A %d blogueros les gusta esto: