Re: [Ovillo] por cual optarias, Tabla o DL
Bueno, en realdiad no son accesibles cuando se usan mal (orden erróneo, excesiva anidación...), pero si el orden de lectura es el correcto y no hay una anidación excesiva, en la práctica no dan ningún problema. Susana Villanueva (Nuimar) escribió: Además un dato importante es que no son accesibles, y es importante que nuestra web esté dirigida a todo el mundo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Rollover complicao pa mi
Gracias 2tonewarrior. Esas técnicas ya las conocíamos pero no resuelven el problema del rollover 'montante'. Utilizaremos la opción 'B' prevista de separación de los menús (aunque la estética pierde un poco) a falta de solución 'A' sin javascript. Saludos y gracias x tu ayuda. -Mensaje original- De: ovillo-boun...@lists.ovillo.org [mailto:ovillo-boun...@lists.ovillo.org] En nombre de 2tonewarrior Enviado el: jueves, 05 de marzo de 2009 17:58 Para: Ovillo, la lista de CSS en castellano Asunto: Re: [Ovillo] Rollover complicao pa mi Aqui te dejo algunos links de como lo puedes hacer solo con una imagen, que es lo interesante. http://www.htmldog.com/articles/rollovers/ http://alexsancho.name/archives/2006/06/rollover-de-imagenes-con-css/ http://www.baluart.net/articulo/menu-rollover-con-css-y-una-sola-imagen El 5 de marzo de 2009 17:31, Joseba jos...@visionasolutions.es escribió: No se si t h entendido muy bien pero creo q eso no funciona. Gracias. -Mensaje original- De: ovillo-boun...@lists.ovillo.org [mailto: ovillo-boun...@lists.ovillo.org] En nombre de Ignacio Ricci Enviado el: jueves, 05 de marzo de 2009 17:25 Para: Ovillo, la lista de CSS en castellano Asunto: Re: [Ovillo] Rollover complicao pa mi Es muy simple, no tengo ganas de ponerme a hacer el codigo. Pero básicamente es darle a los A dentro de tu menu la propiedad de display:block, y darles un alto y un ancho. Después cargar la imagen de fondo con su respectiva posición. Y esos A, en estado hover (ej: #menu ul li a:hover) cambiarle el background-position para dejarlo con el violeta oscuro y la flechita. 2009/3/5 Joseba jos...@visionasolutions.es Si con el piquito inferior dcha. -Mensaje original- De: ovillo-boun...@lists.ovillo.org [mailto: ovillo-boun...@lists.ovillo.org] En nombre de Ignacio Ricci Enviado el: jueves, 05 de marzo de 2009 17:10 Para: Ovillo, la lista de CSS en castellano Asunto: Re: [Ovillo] Rollover complicao pa mi No entendi bien. En hover queda en violeta oscuro? 2009/3/5 Joseba jos...@visionasolutions.es Hola! Tengo un menú lateral un poco peculiar y no consigo sacar una navegación limpia sólo con CSS. La imagen del menú esta en esta URL: http://www.visionasolutions.es/menus.gif Necesito hacer el rollover con la peculiaridad de que los menús se montan al estar inclinados. Alguna sugerencia o url donde buscar info? Gracias. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo -- ↓ Ignacio Ricci www.ignacioricci.com ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo -- ↓ Ignacio Ricci www.ignacioricci.com ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] Problema con imagen de fondo
Hola a todos/as, estoy con esta web y no hay manera de que la imagen que quiero poner de fondo div id=fondo aparezca detrás quiero y sin márgenes, deja un espacio vacío antes y después. la web: http://eayohues.educa.aragon.es/jesus_play/ el CSS: http://eayohues.educa.aragon.es/jesus_play/estilos/estilos.css Gracias. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problema con imagen de fondo
antes de nada, pasa un validador y corrige los errores que tienes http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Feayohues.educa.aragon.es%2Fjesus_play%2F puede ser que tengamos aqui un documento mal formado. en especial te falta cerrar los link / 2009/3/6 Jesus Torralba je...@riglos.com: Hola a todos/as, estoy con esta web y no hay manera de que la imagen que quiero poner de fondo div id=fondo aparezca detrás quiero y sin márgenes, deja un espacio vacío antes y después. la web: http://eayohues.educa.aragon.es/jesus_play/ -- -- ℱin del ℳensaje. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] sustituto para el br style=clear: both;
He estado investigando un poco y resulta que el problema del margen en elementos con overflow hidden tiene su explicación. También tiene una solución sencilla. DESCRIPCIÓN Tenemos un elemento que se debe de expandir para contener a los floats que tiene en su interior. Pero, a su vez, este elemento está junto a otros flotantes. Para que se produzca esta expansión, establecemos la propiedad overflow en hidden (también vale auto). El problema surje cuando este elemento está junto a flotantes (no confundir con los flotantes internos) y, además, le añadimos un margen para crear un efecto de columna. Entonces, unos navegadores (ej. IE7 o Firefox3 bajo Windows) calculan este margen desde el borde de la caja que contiene a este elemento (y a los floats adyacentes), mientras que otros (ej. Opera, Safari, Firefox en Linux) lo calculan desde el límite de los floats laterales. - Al parecer, la mayoría de los navegadores modernos calculan los márgenes del elemento con overflow:hidden desde los bordes de las caja flotantes que pudieran tener a su lado. ¿QUÉ DICEN LAS ESPECIFICACIONES? Establecer la propiedad overflow a hidden (o cualquier valor distinto de visible) hace que que se genere un nuevo contexto de formato de bloque [1]. CSS2.1 impide que el elemento con este nuevo contexto se solape con los flotantes. Para ello da la opción de que la caja se haga más estrecha o bien limpie los flotantes pasando a estar debajo de ellos [2]. En CSS3 sucede lo mismo. En CSS2 no he visto nada. Por lo tanto, según esto, ni Internet Explorer 6 y 7 ni Firefox bajo Windows siguen la especificación CSS2.1 en adelante, ya que contraen el contenido inline del elemento, pero no la caja, que se solapa con los flotantes laterales y, como consecuencia, calculan mal los márgenes. SOLUCIÓN Para que el comportamiento sea congruente con los diferentes navegadores, la solución no podía ser más sencilla: * Envolver el elemento con overflow:hidden dentro de otro y establecer los márgenes sólo al elemento padre. Aunque se puede alegar que esto añade marcado no semántico (una etiqueta nueva sólo para añadir márgenes), hay que tener en cuenta que no se aplica a todos los elementos con overflow:hidden, tan sólo a los que estén posicionados junto a floats y queramos que tengan un margen para crear el efecto de columna. Además, según el caso, puede que este elemento padre ya estuviese creado, con lo que sólo añadiríamos el margen en las css. Saludos Referencias [1] http://www.w3.org/TR/CSS21/visuren.html#block-formatting [2] http://www.w3.org/TR/CSS21/visuren.html#bfc-next-to-float El 4 de marzo de 2009 20:22, Martin Etxauri t...@eragin.com escribió: Aupa No se si la mayoría por aquí conoceréis esto que mando pero ahí va. No convencido del famoso br limpiador con el clear:both para cerrar bien las capas que contienen elementos flotados y que no sobresalgan por encima de estas, he encontrado un artículo [1] donde explican varios métodos y señalan uno como definitivo (o al menos el mejor en su opinión), y es tan simple como ponerle a dicha capa (la contenedora de los elementos flotados) overflow: auto; Yo personalmente he alucinado con el tema y me parece que funciona muy bien. En el mismo artículo advierte que con algunas combinaciones de margin y padding pueden salir algún scroll pero es cuestión de tener cuidado. Espero que sea de utilidad saludos [1] http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problema con imagen de fondo
Hola Jesus,
Lo unico que tienes que hacer para solucionar el problema es incluir en tu css
a la capa fondo el overflow:auto, te quedaria asi:
#fondo {
padding:0px;
margin: auto;
width:840px;
height:100%;
background-image: url(../imagenes/cuerpo.jpg);
background-repeat: repeat-y;
overflow:auto;
}
Pruebalo y nos comentas
Un saludo
Maite Capalleja Bilbao
-Mensaje original-
De: ovillo-boun...@lists.ovillo.org [mailto:ovillo-boun...@lists.ovillo.org] En
nombre de Jesus Torralba
Enviado el: viernes, 06 de marzo de 2009 11:24
Para: ovillo@lists.ovillo.org
Asunto: [Ovillo] Problema con imagen de fondo
Hola a todos/as,
estoy con esta web y no hay manera de que la imagen que quiero poner de fondo
div id=fondo aparezca detrás quiero y sin márgenes, deja un espacio vacío
antes y después.
la web: http://eayohues.educa.aragon.es/jesus_play/
el CSS: http://eayohues.educa.aragon.es/jesus_play/estilos/estilos.css
Gracias.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes
modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problema con imagen de fondo
Hola Jesús, Te aconsejo que le pases el tidyHtml antes de nada, sobre todo por lo de los link sin cerrar, pero también porque solo puede haber un h1 por documento html y en mi opinión lo debes poner en la cabecera así: h1Jesús Play/h1 porque es sin duda el encabezado del sitio; los demás encabezados deben ser h2 según la organización jerárquica de tu página. La verdad, debo decirte que no entiendo por qué metes el menú dentro de un div, el ul ya es un bloque de por sí pero bueno, creo que deberías aprovechar que lo haces para poner el fondo en el #menu y conseguir que tenga el mismo alto que #contenidos. Debes evitar los nombres de clase o id tipo #fondo, porque los div son bloques para agrupar elementos del contenido, no para añadir aspecto [1]. No entiendo por que has metido dentro del contenedor la cabecera el menú el fondo y los contenidos, pero no el pié. Creo que está hecho así por motivos estéticos, que no es correcto. Puedes agrupar como has hecho el menú y los contenidos en un div, pero no lo llames fondo dale un nombre según sus contenidos, tipo navmenu-contenido o algo así. La solución a lo que te pasa es el típico del contenedor de elementos flotados, se soluciona poniendole al div que has llamado #fondo overflow: auto; [1] http://meyerweb.com/eric/thoughts/2005/02/23/keep-your-classes-clean/ Saludos Rafa Jesus Torralba escribió: Hola a todos/as, estoy con esta web y no hay manera de que la imagen que quiero poner de fondo div id=fondo aparezca detrás quiero y sin márgenes, deja un espacio vacío antes y después. la web: http://eayohues.educa.aragon.es/jesus_play/ el CSS: http://eayohues.educa.aragon.es/jesus_play/estilos/estilos.css Gracias. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problema con imagen de fondo
2009/3/6 Jesus Torralba je...@riglos.com: Hola a todos/as, estoy con esta web y no hay manera de que la imagen que quiero poner de fondo div id=fondo aparezca detrás quiero y sin márgenes, deja un espacio vacío antes y después. no lo he mirado mas que por encima, pero me he fijado que pones background-color a algunos div, ese color plano tapara el background del div padre. No se si esto te puede suponer un problema. -- -- ℱin del ℳensaje. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Trabajar con EMs
Ramón Corominas escribió:
http://www.ramoncorominas.com/ovillo/2col/
Ay Ramón, Ramón... jajaja! No me has dicho concretamente lo que yo te
preguntaba, pero voy a aprovechar tus ejemplos para mostrarte una
solución definitiva a tus tres desafíos. :)
La solución es muy simple, a cualquiera de tus 3 diseños, ponle
solamente estas reglas de estilo:
#menu {
position:absolute;
width:4em;
left:0;
}
#contenido {
margin-left:4em;
}
Puedes aumentar el zoom de Firefox al MAXIMO que no se desarma, a
cualquier resolución.
El menú está posicionado de manera absolute, y el contenido de forma
static, aplicándole un margin-left en EM del mismo ancho que el del
menú, y santo remedio!!
Aclaro que no es un mérito mío, es como se hacen la mayoría de los
layouts hace años...
Me debes una... ;)
Saludos!
--
Hernán Beati
http://www.saberweb.com.ar
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] Problema con imagen de fondo
Hola de nuevo,
lo he probado y parece que funciona pero al final no se une al pie, al
final de la página no se llega a unir. El pie no tiene margen.
la web: http://eayohues.educa.aragon.es/jesus_play/
el CSS: http://eayohues.educa.aragon.es/jesus_play/estilos/estilos.css
Gracias de nuevo.
El 06/03/2009, a las 13:01, ovillo-requ...@lists.ovillo.org escribió:
Hola Jesus,
Lo unico que tienes que hacer para solucionar el problema es incluir
en tu css a la capa fondo el overflow:auto, te quedaria asi:
#fondo {
padding:0px;
margin: auto;
width:840px;
height:100%;
background-image: url(../imagenes/cuerpo.jpg);
background-repeat: repeat-y;
overflow:auto;
}
Pruebalo y nos comentas
Un saludo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problema con imagen de fondo
Dentro de pie tienes un párrafo vacío que creo que es el culpable.
Jesus Torralba escribió:
Hola de nuevo,
lo he probado y parece que funciona pero al final no se une al pie, al
final de la página no se llega a unir. El pie no tiene margen.
la web: http://eayohues.educa.aragon.es/jesus_play/
el CSS: http://eayohues.educa.aragon.es/jesus_play/estilos/estilos.css
Gracias de nuevo.
El 06/03/2009, a las 13:01, ovillo-requ...@lists.ovillo.org escribió:
Hola Jesus,
Lo unico que tienes que hacer para solucionar el problema es incluir
en tu css a la capa fondo el overflow:auto, te quedaria asi:
#fondo {
padding:0px;
margin: auto;
width:840px;
height:100%;
background-image: url(../imagenes/cuerpo.jpg);
background-repeat: repeat-y;
overflow:auto;
}
Pruebalo y nos comentas
Un saludo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Trabajar con EMs
Ay, Hernán, siempre te quedas en lo simple... Que yo haya puesto un ejemplo tan simplón no quiere decir que ese sea el layout normal que uno se va a encontrar o que puede desear. Si me sirviera el posicionamiento absoluto no haría falta tanta complicación, obviamente, pero no sirve. Me explico: Imagina que debajo del menú y de los contenidos quiero otro contenido que se expanda a las dos columnas (o a las 3, 4 o X que quiera poner, así de chulo soy). Imagina también que cualquiera de las columnas, pueden tener distintas alturas, unas más altas que otras, y que cualesquiera que sean esas alturas, el contenido inferior siempre debe quedar por debajo de la columna más alta, que empujará hacia abajo ese contenido. Ahora mira a ver cómo haces eso con posicionamiento absoluto. Try again... Saludín, Ramón. Hernán Beati - SaberWeb.com.ar escribió: Ay Ramón, Ramón... jajaja! No me has dicho concretamente lo que yo te preguntaba, pero voy a aprovechar tus ejemplos para mostrarte una solución definitiva a tus tres desafíos. :) ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problema con imagen de fondo
Hola. El margen superior del elemento p que está dentro del pie sobresale de
los bordes de #pie y es el causante de ese espacio. Para evitarlo, aplica
overflow:hidden a #pie. También puedes añadirle un padding-top: 1px. Una
tercera solución es eliminar el margen superior de ese elemento p.
Saludos.
2009/3/6 Jesus Torralba je...@riglos.com
Hola de nuevo,
lo he probado y parece que funciona pero al final no se une al pie, al
final de la página no se llega a unir. El pie no tiene margen.
la web: http://eayohues.educa.aragon.es/jesus_play/
el CSS: http://eayohues.educa.aragon.es/jesus_play/estilos/estilos.css
Gracias de nuevo.
El 06/03/2009, a las 13:01, ovillo-requ...@lists.ovillo.org escribió:
Hola Jesus,
Lo unico que tienes que hacer para solucionar el problema es incluir
en tu css a la capa fondo el overflow:auto, te quedaria asi:
#fondo {
padding:0px;
margin: auto;
width:840px;
height:100%;
background-image: url(../imagenes/cuerpo.jpg);
background-repeat: repeat-y;
overflow:auto;
}
Pruebalo y nos comentas
Un saludo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Trabajar con EMs
Ramón Corominas escribió: Ay, Hernán, siempre te quedas en lo simple... Ay, ay, ay, Ramón!... Y tú que complicas lo que de veras ES simple... jaja! La solución: http://www.saberweb.com.ar/prueba/divs4.htm Te sugiero estudiar a fondo el posicionamiento CSS. Existen 4 tipos de posicionamiento: static, absolute, relative y fixed. La noticia de ayer es que se pueden combinar entre sí, según la necesidad concreta que tengas. Que yo haya puesto un ejemplo tan simplón no quiere decir que ese sea el layout normal que uno se va a encontrar o que puede desear. Si me sirviera el posicionamiento absoluto no haría falta tanta complicación, obviamente, pero no sirve. Por supuesto que SI sirve, dentro de contenedores relative. Me explico: Imagina que debajo del menú y de los contenidos quiero otro contenido que se expanda a las dos columnas (o a las 3, 4 o X que quiera poner, así de chulo soy). Entonces, al menu y el contenido que tenías hasta ahora, los envuelves en un div contenedor (ya lo tienes en tu marcado, es ese div al que le has colocado el class=row). Tienes tu primera fila horizontal. Si debajo quieres otro contenido que se expanda las 2, 3 o 4 columnas, que así de chulo eres, jaja!... simplemente pones otro div class=row que haga de contenedor de esa segunda fila, y verás que se queda quietecito debajo de manú y contenido, a lo ancho de la pantalla. Si ese div es relative, dentro de esa segunda fila creada puedes poner nuevamente otros divs absolutos como el menu, tanto a izquierda como a derecha. Solo cambias left:0 por rigth:0 y se acomodarán a ambos lados. Imagina también que cualquiera de las columnas, pueden tener distintas alturas, unas más altas que otras, y que cualesquiera que sean esas alturas, el contenido inferior siempre debe quedar por debajo de la columna más alta, que empujará hacia abajo ese contenido. Ya está hecho, cada div class=row que agregues hará eso, bajará hasta debajo de la columna más alta de su div class=row (fila) anterior. Ahora mira a ver cómo haces eso con posicionamiento absoluto. Míralo tú, lo hice partiendo de tu propio código: 2 columnas, 3 columnas, y pie de una sola columna: http://www.saberweb.com.ar/prueba/divs4.htm -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Trabajar con EMs
Ay, ay, ay, ay, ay, Hernán... Y tú que sigues simplificando, y sin leer lo que escribo, o no queriendo entenderlo... La solución: http://www.saberweb.com.ar/prueba/divs4.htm Sobre esa misma página, simplemente añade 8 opciones más a #menu2 y #menu2b, y quita uno de los p del #contenido2. Ahora observa lo bonitos que quedan tus saludos al pie solapándose con el menú... Va a ser que no funciona del todo bien. Te sugiero estudiar a fondo el posicionamiento CSS. Te sugiero que no me des lecciones cuando no has entendido el problema. Es un poco cansino tener que explicarte 8 veces un mismo problema para que lo pilles y que luego trates a los demás con esa condescendencia. La noticia de ayer es que se pueden combinar entre sí, según la necesidad concreta que tengas. La noticia de hace siglos es que el posicionamiento absoluto se elimina del flujo del documento y no afecta a los demás contenedores (lo dice la especificación, no me lo he inventado yo), igual que tampoco hace crecer el contenedor en el cual se encuentra, por muy relative que éste sea. Por eso en tu diseño se solapa todo cuando las columnas laterales, posicionadas de forma absoluta, crecen más allá del contenido central. Por supuesto que SI sirve, dentro de contenedores relative. Sí, sí, ya lo veo, ya... Entonces, al menu y el contenido que tenías hasta ahora, los envuelves en un div contenedor (ya lo tienes en tu marcado, es ese div al que le has colocado el class=row). Tienes tu primera fila horizontal. Lo que demuestra que no has entendido el problema, porque si el menú posicionado absolutamente crece más que el contenido, como su tamaño no afecta a su propio contenedor, se sale de la fila, como un niño gamberro, y te chafa los saludos. Ahora vuelve a leer este párrafo, ligeramente modificado para ver si así lo pillas por fin: Imagina también que CUALQUIERA de las columnas, pueden tener distintas alturas, unas más altas que otras (YA SEA EL MENÚ, LOS CONTENIDOS O LAS DEMÁS COLUMNAS LATERALES), y que cualesquiera que sean esas alturas, el contenido inferior siempre debe quedar por debajo de LA COLUMNA MÁS ALTA, que empujará hacia abajo ese contenido. Pues eso. Try again... Saludín, Ramón. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Trabajar con EMs
Ramón Corominas escribió: Ay, ay, ay, ay, ay, Hernán... Y tú que sigues simplificando, y sin leer lo que escribo, o no queriendo entenderlo... La solución: http://www.saberweb.com.ar/prueba/divs4.htm Sobre esa misma página, simplemente añade 8 opciones más a #menu2 y #menu2b, y quita uno de los p del #contenido2. Ahora observa lo bonitos que quedan tus saludos al pie solapándose con el menú... Va a ser que no funciona del todo bien. Si sabes que existe esa LIMITACION dada por la cantidad de opciones del menú, pues entonces tendrás la precaución de usar este esquema solo en sitios donde el menú es lo suficientemente breve. Además, si el menú es más largo que los contenidos, sospecho que debe haber algún problema de arquitectura de la información al armar ese menú, yo veo en la mayoría de sitios menúes más cortos que el contenido... Para cada problema hay que buscar la solución apropiada, no hay una sola solución universal. Mira Ramón, lamento que te molestes, pero yo solo tomé tus propios ejemplos donde tú decidiste usar posicionamiento absoluto. Un par de mensajes atrás hablábamos de cajas static flotadas con anchos en porcentajes, y no me respondiste cuáles anchos de columnas preferías. Cambiaste de ejemplos de pronto, sin responder las preguntas concretas que te hacía. En el mensaje anterior tú mismo pusiste estos ejemplos absolutos, y por eso los tomé como base. Si cambias el escenario en cada mensaje, no hay forma de terminar un diálogo productivo. Yo te sugiero que uses flotados dentro de contenedores, y aplícale overflow:auto a esos contenedores. Anchos de cajas en porcentajes y textos en EM. No hay nada mejor. Puedes tener menúes cortos, largos, medianos, lo que quieras... Funciona. Ni siquiera el W3C exige que el diseño líquido o elástico se sostenga más allá de un 200% de zoom. Para eso existen los magnificadores de pantalla. Cada cosa con su solución apropiada. Saludos, -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Trabajar con EMs
Retomo el hilo, tratando de cerrar el tema original:
Ramón Corominas escribió:
http://www.ramoncorominas.com/ovillo/2col/
- DIVS1: Con porcentajes, al ampliar las fuentes más allá de un
determinado tamaño, los contenedores se me comen el contenido.
Te invito a seguir un proceso de diseño lógico, partiendo de las
LIMITACIONES REALES, y no de unas arbitrarias medidas deseadas.
Si el cliente te da un menú como ése, y tú ves que el texto Hamsters
(que es el más largo que te ha dado) se te sale afuera, ¿por
qué no lo tomas en cuenta? Deberías hacerlo...
No es el diseño CSS el que debe ser adaptable, ES UNO MISMO el que
debe adaptar sus técnicas a cada proyecto, y manejar soluciones
apropiadas para distintos casos, sin buscar una solución única y
uniforme, igual para todos los casos.
Por ejemplo, aplica el MAXIMO de zoom del Firefox (aunque sea muchísimo
más del 200% recomendado por el W3C) y mira qué tanto se asoma la
palabra Hamsters.
Para el tamaño de letra que has aplicado al menú (considerándolo otro
requisito definido, no me lo cambies ahora!) si aplicas esto se elimina
tu problema:
#menu { width: 18%; }
#contenido { width: 66%; }
Probado a 800x600, 1024x768 y 1280x800.
Eso sí, me adelanto: si lo reduces a un extremo sumamente exagerado
claro que tendrá sus problemas. Pero la enorme mayoría de usuarios que
precisa hacer 500% de zoom creo que usa pantallas con resoluciones de
más de 800 x 600, no más chicas que eso. Además, para resoluciones
menores existe media:handheld.
Desde ya, a un zoom normal, el menú se verá bastante holgado, pero la
perfección absoluta no es una característica humana ni del diseño web
líquido o elástico... no debes pretender que el contenido se vea
exactamente igual en todos los tamaños, es imposible eso, ya sea con CSS
o con tablas.
- DIVS2: Mezclando ems y porcentajes con divs flotados, en cuanto el
menú crece un poco el segundo div se cae (no se me ocurre ninguna manera
de hacer que se encoja).
No tiene sentido plantear un layout con esa combinación. Es mezclar agua
y aceite. No perdamos tiempo.
- DIVS3/TABLAS: Con divs simulando tablas mediante propiedades de CSS,
obtengo lo que quiero, quedando exactamente igual que si utilizo una
maquetación con tablas reales. Desgraciadamente, esas propiedades no
funcionan bien con IE, por lo que la única opción cross-browser sería
maquetar con tablas de verdad
NO, no sería la única solución maquetar con tablas.
Una solución cross-browser sería que uses la simulación de tablas para
todos los navegadores, y agregues comentarios condicionales solo para
Explorer, que agreguen el código necesario para que se vea el contenido
(no dije idénticamente, solo que se vea) y para ese navegador puedes
usar porcentajes como en tu ejemplo 1. ¿Más trabajo? Sí. Pero
funciona. Sin tablas.
Sí, soy consciente de que esas medidas pueden ser casos extremos
Sí que son extremos! Has llevado el zoom de Firefox a su máximo posible.
No hay sitio que aguante a ese nivel, y por eso el W3C fija en 200% el
zoom máximo sin que se desarmen las cajas.
pero
no veo la razón para no querer que algunos de los contenedores crezcan
acorde con la fuente y que a la vez otros se adapten al espacio que
quede. Para mí es algo realmente útil.
Por más que a ti te guste o te sea muy útil, que lo comprendo, no es un
objetivo excluyente para hacer un buen sitio web al que incluso tú
puedas acceder con comodidad. El objetivo de una web es que se acceda a
los contenidos, si eso se cumple, la solución empleada es válida.
Pero de todos modos, el requerimiento de que los contenedores crezcan se
satisface con porcentajes (caso 1). No creo que debas seguir perdiendo
el tiempo intentando mezclar ems y porcentajes para lograr que los
contenedores crezcan.
Nota: he visto algún diseño con CSS a dos (y tres) columnas que usa una
técnica a través de márgenes en ems para hacer algo parecido a esto,
pero no termina de funcionarme bien del todo, es una pena.
Por favor! Compártenos el código al punto en que lo tengas, que
trataremos de hacerlo funcionar entre todos... :-)
Tú mismo has dicho unos mensajes atrás que estamos en una lista para
aprender los unos de los otros, si te guardas el código tal vez nos
estás privando a todos de llegar a una solución algo mejor que las
limitadas soluciones conocidas hasta ahora.
Saludos,
--
Hernán Beati
http://www.saberweb.com.ar
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Trabajar con EMs
Hola de nuevo, Hernán. Si sabes que existe esa LIMITACION dada por la cantidad de opciones del menú, pues entonces tendrás la precaución de usar este esquema solo en sitios donde el menú es lo suficientemente breve. ¿Y tú cómo es que lo sabes? Quizá me expliqué mal, pero esto no se trata de menús vs. contenido, sino de COLUMNA A vs. COLUMNA B vs. COLUMNA N, unas al lado de otras, que miden alturas distintas, sin saber a priori cuál medirá más que la otra, e incluso pudiendo variar esas proporciones al aumentar la letra. Estoy hablando de soluciones genéricas, y tú me hablas de las particularidades de cada ejemplo que te propongo. Como te he explicado, EXISTE una posible solución GENÉRICA, que sirve en TODOS los casos, si se usa una maquetación con tablas/divs de tablas; el problema es que IE no pilla esto último, y la maquetación con tablas de verdad nos parece una guarrería semántica. Además, si el menú es más largo que los contenidos, sospecho que debe haber algún problema de arquitectura de la información al armar ese menú, yo veo en la mayoría de sitios menúes más cortos que el contenido... Y cuántos miles de sitios habrá donde existe una columna lateral con información complementaria que a veces se extiende más allá de los contenidos del artículo... Para cada problema hay que buscar la solución apropiada, no hay una sola solución universal. La solución que he aportado sí podría ser universal cuando todos los navegadores acepten display: table, etc. Las magníficas posibilidades de la maquetación con tablas, pero sin tablas. Mira Ramón, lamento que te molestes, pero yo solo tomé tus propios ejemplos donde tú decidiste usar posicionamiento absoluto. ¿Ah, sí? ¿Dónde he usado yo posicionamiento absoluto? Por más que miro no lo encuentro. Un par de mensajes atrás hablábamos de cajas static flotadas con anchos en porcentajes, y no me respondiste cuáles anchos de columnas preferías. Yo te había dicho claramente que quería ems para algunas de mis columnas porque los porcentajes no me servían al no ampliarse; sin embargo, tú decidiste prescindir de mis preferencias y preguntarme qué porcentajes de anchos quería. Cambiaste de ejemplos de pronto, sin responder las preguntas concretas que te hacía. Lo que hice fue no entrar en tu ejemplo, porque era claramente opuesto a lo que yo pedía. Si pregunto por peras y tú me das melones, pues no sé qué esperas que te responda, la verdad. En el mensaje anterior tú mismo pusiste estos ejemplos absolutos, y por eso los tomé como base. Por favor, vuelve a revisar mis ejemplos y dime dónde ves tú los absolutos, porque yo no me entero. Si cambias el escenario en cada mensaje, no hay forma de terminar un diálogo productivo. Venga, va, la última vez que explico el escenario: - Diseño líquido, que no haga sroll horizontal al aumentar el tamaño de letra (hasta un 200%). - N columnas, con contenidos desconocidos (no necesariamente menús, puede ser cualquier tipo de contenido) - La altura de cada columna es indeterminable a priori (por ejemplo, los contenidos se leen de una b.d.) - Algunas de las columnas deben poder tener anchos en ems para que crezcan al aumentar la fuente (el objetivo de esta restricción es evitar que sus contenidos se solapen con otros contenedores al aumentar, cosa que puede ocurrir con los porcentajes o los pixels). - El resto de las columnas deberán ajustar su ancho al restante tras haber crecido las columnas en ems (se entenderá que estas columnas variables son aún suficientemente anchas con un 200% de aumento como para no producirse solapamientos). - En caso de existir más contenidos bajo las columnas, estos deben desplazarse hacia abajo a medida que crece la altura de las columnas superiores (¡ojo!, puede darse el caso de que una columna que antes era menos alta pase a ser más alta al aumentar la fuente). Si ahora miras mis ejemplos DIVS3 y TABLAS, verás que cumplen TODAS las condiciones impuestas. Con DIVS flotados yo no he sabido hacerlo, aunque repito que he visto algunos esquemas más o menos complejos que funcionan relativamente bien, pero que añaden gran cantidad de divs extra y a veces fallan. Yo te sugiero que uses flotados dentro de contenedores, y aplícale overflow:auto a esos contenedores. Anchos de cajas en porcentajes y textos en EM. No hay nada mejor. Puedes tener menúes cortos, largos, medianos, lo que quieras... Funciona. Sí hay algo mejor, so pena de IE, pero venga, lo dejo aquí que ya aburre. Para eso existen los magnificadores de pantalla. Supongo que nunca has usado un magnificador de pantalla... Un magnificador es un apaño para cuando las cosas no pueden hacerse de otra manera, igual que un lector de pantalla es un apaño para cuando no puedes ver. En mi caso, mi campo visual es reducido, con un agujero central en el que veo relativamente bien; otras personas tienen la visión al revés, ven mejor por el lateral y mal en
Re: [Ovillo] Trabajar con EMs
Hola de nuevo.
Por ejemplo, aplica el MAXIMO de zoom del Firefox (aunque sea muchísimo
más del 200% recomendado por el W3C)
Tengo curiosidad... ¿Qué entiendes tú por 200%? Tal y como está ese
menú, para llegar a aumentar su tamaño de letra en un 200% necesitas
pulsar 6 veces la tecla Ctrl + (al menos eso necesito yo). El máximo
zoom de FF3 son 8 pulsaciones de esa tecla. Yo entiendo que 200% es que
la letra mida el doble de lo que medía originalmente, ¿tú qué es lo que
entiendes?
Para el tamaño de letra que has aplicado al menú (considerándolo otro
requisito definido, no me lo cambies ahora!) si aplicas esto se elimina
tu problema:
#menu { width: 18%; }
#contenido { width: 66%; }
Sí, se elimina mi problema y se eliminan las medidas del diseño
original... Ya le puedo decir al diseñador: oye, que dice Hernán que en
lugar de poner 7% ponemos 18%, que así ya no da problemas. Solucionado
el problema. Gracias.
Desde ya, a un zoom normal, el menú se verá bastante holgado
Y distinto al diseño original, claro está...
No tiene sentido plantear un layout con esa combinación. Es mezclar
agua y aceite. No perdamos tiempo.
Aquí sí que me has dejado acojonao. Resulta que ESA combinación, que es
la que funciona PERFECTA, y que es lo que se ve en los layouts con
tablas, a ti te parece que es perder el tiempo y mezclar agua y aceite.
No, si al final lo de que CSS3 exista la función calc() [1] es una
pérdida de tiempo, no sé ni a quién se le habrá ocurrido semejante
tontería... :P Y luego me dirá a mí que estudie CSS...
agregues comentarios condicionales solo para Explorer, que agreguen el código
necesario para que se vea el contenido (no dije idénticamente, solo que se
vea)
Ajá, ahora lo he entendido, vale, te referías a hacer este apaño, que es
lo que haría ahora al encontrarme con un caso de estos, pero no deja de
ser un cambio al diseño original.
Sí que son extremos! Has llevado el zoom de Firefox a su máximo posible.
En ocasiones me he encontrado webs donde incluso con el máximo zoom de
Firefox, las tipografías no aumentan ni siquiera al 150% de su tamaño
original; o más frecuentemente, que aunque aumentes todo lo que puedas,
siguen siendo fuentes bastante pequeñas. Ah, eso sí, Firefox tiene una
posibilidad para establecer un tamaño mínimo de tipografía, pero eso
puede provocar que los diseños con porcentajes empiecen a descuadrarse
incluso antes de pulsar la tecla Control + una sola vez.
No hay sitio que aguante a ese nivel, y por eso el W3C fija en 200%
el zoom máximo sin que se desarmen las cajas.
El diseño con tablas que he puesto como ejemplo se ve perfecto y sin
solapamientos al máximo zoom.
El objetivo de una web es que se acceda a los contenidos, si eso se cumple,
la solución empleada es válida.
Creía que el objetivo de esta lista era buscar soluciones que no sólo
permitan acceder a los contenidos, sino también hacerlo adaptándonos a
posibles diseños raros que los diseñadores se inventen... Si no,
bastaría con poner un chorro de texto y se acabó.
No creo que debas seguir perdiendo el tiempo intentando mezclar ems y
porcentajes
para lograr que los contenedores crezcan.
Ok, pero no te olvides de avisar también al W3C de que dejen de perder
el tiempo con calculitos tontos... guiño
Por favor! Compártenos el código al punto en que lo tengas, que
trataremos de hacerlo funcionar entre todos... :-)
Tienes razón en este punto, mis disculpas. Los diseños de ese tipo que
vi eran de Ruthsarian [2] y Douglas Livingstone [3]. Lo cierto es que no
recuerdo muy bien cuáles eran los problemas, pero sé que no funcionaban
a la perfección.
En cualquier caso, quiero aclarar que todo esto no es una necesidad del
día a día, normalmente no se necesita algo tan específico, sólo un tema
traído aquí siguiendo el hilo sobre dar tamaños a los contenedores en
ems y las posibles razones, que yo creo que haberlas haylas.
Saludos,
Ramón.
[1] CSS3 values and units: The 'calc' function
http://www.w3.org/TR/css3-values/#calc
[2] Skidoo Too, de Ruthsarian
http://webhost.bridgew.edu/etribou/layouts/skidoo_too/two_columns_left.html
[3] Mark #2, de Douglas Livingstone
http://www.redmelon.net/tstme/3cols2
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] Consulta
Hola, me llamo Javier Herrán Sainz y estoy aprendiendo a programar páginas web dinámicas en un curso de especialista de la UNED. Estoy intentando configurar la forma de la página usando estilos css. La verdad que estudiando HTML, XHTML y CSS no tengo problema. Más bien el problema es a la hora de, como diría yo, plasmar la visión de la página en código. Supongo que será cuestión de meter horas y adquirir experiencia para asimilar la teoría con la práctica. Pero la cierto es que cuesta ¿Quisiera preguntar si os pasaba lo mismo al principio? Porque supongo que Empezaríais como yo jaja Por otro lado decir que utilizo la herramienta Dreamweaver CS3 y, intento hacer las páginas escribiendo el código puro y duro, esto hace que sea más difícil pero también proporciona Un control mayor sobre el diseño. Quería preguntar, cuando diseñáis páginas como lo hacéis de forma visual o escribiendo el código, o sea, por decirlo de alguna manera a pelo. Yo diseño la pagina en un archivo HTML y después la intento dar forma usando una hoja de estilos css. Una cosa que me cuesta ver es cuando uso la propiedad float, pues los elementos se salen de su flujo normal ¿Sabéis dónde puedo encontrar ejemplos sobre esta característica para profundizar más sobre ella? A ver si me animáis y me dais un empujón en esto. Gracias. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Consulta
Hola Javier te paso lo que puedes hacer: 1- Para editar el código te recomiendo el programa APTANA es libre sirve para mac, pc y linux. 2- Primero antes de poenrte a picar el coidgo es muy importante hacer un boceto en papel. 3- Para el tema de floats ponle color a los bordes de las cajas para ver donde estan y utiliza un plugin de firefox llamado firedebug para poder ver bien que es lo que pasa con tu codigo. 4- Y por ultimo busca en google layouts css y veras muchisimos ejemplos.. Ojala te haya servido, saludos El 6 de marzo de 2009 19:12, Javier Herrán Sainz herr...@hotmail.esescribió: Hola, me llamo Javier Herrán Sainz y estoy aprendiendo a programar páginas web dinámicas en un curso de especialista de la UNED. Estoy intentando configurar la forma de la página usando estilos css. La verdad que estudiando HTML, XHTML y CSS no tengo problema. Más bien el problema es a la hora de, como diría yo, plasmar la ‘visión’ de la página en código. Supongo que será cuestión de meter horas y adquirir experiencia para asimilar la teoría con la práctica. Pero la cierto es que cuesta ¿Quisiera preguntar si os pasaba lo mismo al principio? Porque supongo que Empezaríais como yo…jaja… Por otro lado decir que utilizo la herramienta Dreamweaver CS3 y, intento hacer las páginas escribiendo el código puro y duro, esto hace que sea más difícil pero también proporciona Un control mayor sobre el diseño. Quería preguntar, cuando diseñáis páginas como lo hacéis de forma visual o escribiendo el código, o sea, por decirlo de alguna manera “a pelo”. Yo diseño la pagina en un archivo HTML y después la intento dar forma usando una hoja de estilos css. Una cosa que me cuesta “ver” es cuando uso la propiedad float, pues los elementos se salen de su flujo normal ¿Sabéis dónde puedo encontrar ejemplos sobre esta característica para profundizar más sobre ella? A ver si me animáis y me dais un empujón en esto. Gracias. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo -- saludos Andrés Karp blog_ http://blog.dinamiclab.com ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Consulta
2009/3/6 Javier Herrán Sainz herr...@hotmail.es: Hola, me llamo Javier Herrán Sainz y estoy aprendiendo a programar páginas web dinámicas en un curso de especialista de la UNED. Estoy intentando configurar la forma de la página usando estilos css. La verdad que estudiando HTML, XHTML y CSS no tengo problema. Más bien el problema es a la hora de, como diría yo, plasmar la ‘visión’ de la página en código. Supongo que será cuestión de meter horas y adquirir experiencia para asimilar la teoría con la práctica. Pero la cierto es que cuesta ¿Quisiera preguntar si os pasaba lo mismo al principio? Porque supongo que La teoria de CSS es facil (excepto crear layouts solo con CSS), pero la practica tiene mas excepciones que reglas, y eso es costoso. Nos cuesta a todos, y nos ha costado, el pelearnos con cosas que deberian funcionar, pero no funcionan porque los navegadores tienen bugs o no implementan lo que necesitamos de forma suficientemente extendida. Lo de los layouts de CSS con ser complejo, se puede resolver usando layouts ya hechos. Tu como principiante no tienes que crear de cero un layout de tres columnas perfecto (aunque podrias), ya hay hechos, de los que puedes partir. En resumen: Excepto layouts, esto es facil. Se hace dificil por chocar con la realidad de los navegadores. -- -- ℱin del ℳensaje. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Consulta
Hola Javier: Te cuento que en ralidad no hay una ley de como empezar en esto. En mis comienzo perdi HORAS buscando un metodo en el que me sintiera comodo. Ademas depende mucho de que si trabajas solo o en equipo y de que plataforma de software usaras. En mi caso, tengo una empresa de desarrollo web asociada con otras dos de Marketing y otra de Merchandising , entonces, en este entorno yo trabajo con Dreanweaver CS4 para los diseños y estructura del sitio (donde me entienden bien el publicista y la diseñadora grafica) y para la programacion (en mi caso PHP) uso Easy Eclipse, con el plugin de Aptana y Xammp (servidorApache, PHP y MySQL.) Ahora, a la hora de conseguir material, no dudes en conseguir y consultar todo tipo de fuentes (Comprar libros especializados es una gran herramienta), buscar por la web (hay miles de sitios y ejemplos). Tambien podes descargar libros a traves de programas como bittirrent, Emule, etc (esto es ilegal, pero siendo sincero, que tire la primer piedra quein no lo ha hecho). Y mas que todo, el ENDEMONIADO Y MALDITO INGLES. TODA LA MEJOR INFORMACION, LA ENCONTRARAS EN INGLES. Creo!!!, y espero no ser el unico que piens asi, que si queres meterte en este campo y ser alguien, necesitas saber este Idioma. Y no esta demas agregar saber un lenguaje de programacion del lado del servidor, otro del lado del cliente, CSS, XHTML, FLASH, ETC, ETC, ETC. CON TODO ESTO NO QUIERO DESANIMARTE, PERO ES PARA PLANTEAR EL TEMA QUE EL DESARROLLO WEB ES UN GRAN DESAFIO (Y HERMOSO) Y NO ES PARA CUALQUIERA. HAY QUE INVESTIGAR, ESTUDIAR (siempre estas estudiando), ACTUALIZARTE, en fin. Bueno Javier, yo te dejo con este empujon sentimental de bienvenida al rubro, ahora espero que otros te colaboren con Links e informacion (tengo alguna data para enviarte) Sin mas... Atte. Daniel Rodriguez Hola, me llamo Javier Herrán Sainz y estoy aprendiendo a programar páginas web dinámicas en un curso de especialista de la UNED. Estoy intentando configurar la forma de la página usando estilos css. La verdad que estudiando HTML, XHTML y CSS no tengo problema. Más bien el problema es a la hora de, como diría yo, plasmar la ‘visión’ de la página en código. Supongo que será cuestión de meter horas y adquirir experiencia para asimilar la teoría con la práctica. Pero la cierto es que cuesta ¿Quisiera preguntar si os pasaba lo mismo al principio? Porque supongo que Empezaríais como yo…jaja… Por otro lado decir que utilizo la herramienta Dreamweaver CS3 y, intento hacer las páginas escribiendo el código puro y duro, esto hace que sea más difícil pero también proporciona Un control mayor sobre el diseño. Quería preguntar, cuando diseñáis páginas como lo hacéis de forma visual o escribiendo el código, o sea, por decirlo de alguna manera “a pelo”. Yo diseño la pagina en un archivo HTML y después la intento dar forma usando una hoja de estilos css. Una cosa que me cuesta “ver” es cuando uso la propiedad float, pues los elementos se salen de su flujo normal ¿Sabéis dónde puedo encontrar ejemplos sobre esta característica para profundizar más sobre ella? A ver si me animáis y me dais un empujón en esto. Gracias. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Consulta
Llevo en esto del web apenas unos meses, y cualquier información es poca. No soy quién para dar consejos sobre como empezar, más que nada porque estoy empezando, pero creo que lo mejor que se puede hacer es mirarlo todo. Esta lista me está sirviendo de mucho, aunque no pregunte, porque con las dudas de los demás ya se aprende, y mucho. Ahora mismo me estoy dando de cabezazos con el PHP con Joomla! para poder tener cierto conocimiento de CMS, que nunca viene mal. En cuanto al estilo, decir que hay que intentar hacer las cosas lo más ordenado posible, siguiendo un orden (ya sea estilos para un div, o divs dentro de otro div...), o como uno esté más a gusto. Eso sí, haz caso a lo que digan los que saben, que los que empezamos en esto tenemos que ser auténticas esponjas con la gente que sabe. Suerte para tí, y otro poco para mi. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] Como poner 4 imagenes como bordes de una capa con css
Hola a todos. Quiero poner los 4 bordes a una capa con sendas imagenes. Se me ocurre que puedo poner una imagen de fondo que contenga los bordes laterales y una capa superior e inferior que contenga las imagenes de arriba y de abajo algo asi como: div id=caja div id=borde-arriba/div Aqui el contenido de la caja div id=borde-abajo/div /div Pero entiendo que esto no es correcto ya que estoy utilizando dos capas sin contenido lógico. ¿Cual es la solución correcta? Saludos y gracias. Daniel González Cerviño tel 653965048 ikar...@gmail.com ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Trabajar con EMs
Ramón Corominas escribió:
Tengo curiosidad... ¿Qué entiendes tú por 200%? Tal y como está ese
menú, para llegar a aumentar su tamaño de letra en un 200% necesitas
pulsar 6 veces la tecla Ctrl + (al menos eso necesito yo). El máximo
zoom de FF3 son 8 pulsaciones de esa tecla. Yo entiendo que 200% es que
la letra mida el doble de lo que medía originalmente, ¿tú qué es lo que
entiendes?
Entiendo eso mismo, es claro.
Pero los últimos 2 Control + ellos solos producen un aumento de 100%
extra (contado sobre el valor inicial).
Es decir, con los primeros 6 llegas al 200%, con los 8 posibles niveles
llegas aproximadamente al 300% del tamaño original (al menos eso medí a
ojo con la extensión MeasureIt de Firefox). Así que al menos con
Firefox, el máximo posible es un 300% (bastante por encima del 200%
mencionado por el W3C).
Para el tamaño de letra que has aplicado al menú (considerándolo otro
requisito definido, no me lo cambies ahora!) si aplicas esto se elimina
tu problema:
#menu { width: 18%; }
#contenido { width: 66%; }
Sí, se elimina mi problema y se eliminan las medidas del diseño
original... Ya le puedo decir al diseñador: oye, que dice Hernán que
en lugar de poner 7% ponemos 18%, que así ya no da problemas.
(te respondo abajo)
[3] Mark #2, de Douglas Livingstone
http://www.redmelon.net/tstme/3cols2
Fíjate cómo en este ejemplo al llegar a unos 5 control + en Firefox,
las palabras de la columna derecha se salen fuera de pantalla.
¿Qué debería hacer un diseñador ante este dato de la realidad?: yo creo
que ensanchar algo más esa columna...
Entonces, volvemos a la idea de que el proceso de diseño DEBE tener en
cuenta los CONTENIDOS, no puede consistir en una inspiración repentina
y rígida de un diseñador que no sabe las consecuencias posteriores al
pasar a XHTML y CSS sus diseños. Algo de eso hemos hablado ayer en otro
hilo...
No sirve un diseño descontextualizado de sus contenidos, y de las
limitaciones del HTML/CSS.
Si voy a crear el menú para una empresa de tuercas que colocará en su
menú vertical nombres como: Tuerca XZF-34678b opción JX34 tendré que
rechazar un diseño de un diseñador que se empeñe en sostener que ese
menú debe medir 50px de ancho... el diseño depende del contenido
muchas veces. Es un límite a tener en cuenta.
[2] Skidoo Too, de Ruthsarian
http://webhost.bridgew.edu/etribou/layouts/skidoo_too/two_columns_left.html
En el último nivel de zoom del Firefox, me produce scroll horizontal (en
1280 x 800px). Pero voy a estudiarlo con tiempo, parece muy interesante.
Gracias por compartir los enlaces.
Saludos!
--
Hernán Beati
http://www.saberweb.com.ar
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] Consulta acerca de la layout de mi blog
Hola, querría preguntarnos si la estructura que tengo puesta ahora mismo en mi blog, es correcta para su contenido (CSS), o sería mejor cambiarla por otra. Si sería mejor crear otra o cambiarla, especificar cúal. El blog es: http://www.cssblog.es Saludos. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Como poner 4 imagenes como bordes de una capa con css
Hola,
Depende, voy a presuponer que quieres una solución compatible con IE6 y sin
usar javascript (en caso contrario podrías evitarte marcado no semántico).
También entiendo que te basta con un ancho de caja fijo.
Puedes usar la técnica de las puertas correderas para usar sólo dos
imágenes, no tres. Además, es conveniente que uses algún elemento que sí sea
semántico, como un título hx, por ejemplo.
HTML
div id=caja
h2
Título de la caja
/h2
Algo más
/div
Prepara dos imágenes, una con los bordes superiores y otra con los
inferiores, pero esta última sobredimensionada, esto es, lo suficientemente
alta para ajustarse a las diferentes alturas de caja que pudieras tener.
A h2 le asignas la imagen con los bordes superiores y a #caja la imagen
sobredimensionada que contiene los bordes inferiores y cuya parte superior
quedará oculta por la de h2.
Sería algo así:
#caja {
width: 200px;
background: url(abajo.png) no-repeat left bottom;
}
h2 {
background: url(arrib.png) no-repeat left top;
}
Detrás del h2, pero dentro de #caja, tendrás otros elementos como párrafos.
También tendrás que hacer algunos ajustes como añadir padding para separar
el texto de los bordes.
Saludos
El 6 de marzo de 2009 20:31, Daniel González ikar...@gmail.com escribió:
Hola a todos.
Quiero poner los 4 bordes a una capa con sendas imagenes.
Se me ocurre que puedo poner una imagen de fondo que contenga los bordes
laterales y una capa superior e inferior que contenga las imagenes de
arriba
y de abajo
algo asi como:
div id=caja
div id=borde-arriba/div
Aqui el contenido de la caja
div id=borde-abajo/div
/div
Pero entiendo que esto no es correcto ya que estoy utilizando dos capas sin
contenido lógico. ¿Cual es la solución correcta?
Saludos y gracias.
Daniel González Cerviño
tel 653965048
ikar...@gmail.com
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
