Re: [Ovillo] [posible OT] utf-8 y basura en lugar de ? al usar confirm
Hola, comprueba si el archivo está guardado en utf8. El 25/07/09, Miguel Beltran R. yourpa...@gmail.com escribió: Perdon lista no estoy muy seguro si la pregunta es aqui, pero como tiene que ver con lo visual mas que con la programación creo que si lo es. Tengo en mi pagina !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd; html head meta http-equiv=Content-Type content=text/html; charset=utf-8 meta http-equiv=X-UA-Compatible content=IE=8 / ... y una parte en javascript que dice if(confirm(¿estas seguro?)) el problema es que el signo de interrogación apertura en FF 3.5.0 me muestra un rombo y en IE 8 me muestra un cuadro. Parece ser que ninguno entiende el ?. ¿Soy solo yo o alguien lo puede confirmar? y si sabe como hacer que se vea bien, me quite mi ignorancia por favor. -- Lo bueno de vivir un dia mas es saber que nos queda un dia menos de vida ___ 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 height de img en IE7
Hola. Yo lo veo bien en IE7. ¿Lo has corregido ya?. El 20 de julio de 2009 20:07, Mario Álvarezmag...@magrio.net escribió: Estimadísimos: Estoy haciendo una web [1], y bueno, de hecho ya estaba por entregarla cuando hice una última revisión en varios navegadores y me encuentro con que en IE7 está cambiando la altura a la primer imágen de las tres que conforman la animación en el inicio. La etiqueta img la está metiendo un plugin de jQuery, y Firebug me reporta la altura correcta, pero IE7 hace de las suyas... Pensé que sería el archivo de la imágen lo que podría estar mal, así que la volví a generar de cero (Nuevo documento place export), y lo mismo. Quizás estoy demasiado cansado, pero el punto es que no doy con la falla... así que acudo a su sabiduría. Saludos! NOTA: perdonen que ponga el enlace enmascarado por tinyurl, pero el cliente no quiere que su enlace salga en buscadores por todos lados. [1] *http://preview.tinyurl.com/nftxe8* -- Mario Álvarez twitter: @magrio ___ 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] Bordes Redondeados
Tanto Ignacio como Alejandro tienen razón. IE8 no admite -ms-border-radius, así que ni modo IE8 ni nada. Te pido disculpas, lo leí en http://www.clubdesarrolladores.com/articulos/mostrar/43-esquinas-redondeadas-round-corners-en-todos-los-navegadores Aquí tienes otra solución para IE, que hace uso de un archivo htc: http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser pero no es perfecta y cuando la he probado me ha fallado en IE8 (en modo IE8). Saludos. El 19 de julio de 2009 23:54, Daniel Navarrowebpe...@gmail.com escribió: Hola, Mauricio. Ahora mismo no estoy delante de un ordenador que tenga IE8, por lo que no he probado, pero creo que -ms-border-radius sólo funciona en IE8 cuando no está en modo de compatibilidad con IE7, sino en modo IE8. Prueba a añadir la siguiente metaetiqueta: meta http-equiv=X-UA-Compatible content=IE=8 / Por otro lado, como primera declaración dentro de la regla para el borde redondeado usas border-radius: 3px 3px 0 0; pero el método abreviado para esta propiedad admite sólo uno o dos valores, no cuatro como tú indicas. Tienes la sintaxis en http://www.w3.org/TR/2002/WD-css3-border-20021107/#border-radius Saludos. El 18 de julio de 2009 18:54, Mauricio Dulcemauricio.du...@gmail.com escribió: Hola, buscando en google encontré que internet explorer 8 soporta esta sintaxis, pero al verla en dicho navegador este no las toma, alguien que me pueda orientar un poco mas sobre el tema. Recurrí a esto, por que el sitio que estoy maquetando esta hecho en .net y ya saben lo engorroso que puede llegar a ser a la hora de tocar el código sin tener el source y que es generado por un controlador, no puedo usar javascript por que los ingenieros dicen que eso cargaría aun mas la aplicación, así que lo único que se me ocurrió fue intentar con css3 ya que internet explorer 6 y 7 no están contemplados en los requerimientos del proyecto ya que es una intranet de un partner de microsoft. CSS: border-radius: 3px 3px 0 0; -ms-border-radius-topleft: 3px; /*IE8*/ -ms-border-radius-topright: 3px;/*IE8*/ -moz-border-radius: 3px 3px 0 0; -khtml-border-radius-topleft:3px; -khtml-border-radius-topright:3px; -webkit-border-top-right-radius: 3px; -webkit-border-top-left-radius: 3px; gracias Mauricio Dulce UI/UX Designer-Developer HTML CSS Móvil: (57) 312 519 0288 Teléfono: (571) 2746831 Email: mauricio.du...@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
Re: [Ovillo] [OT] que paquete instalar
Hola, Jonathan. Sólo una aclaración: no es necesario compilar xampp, basta con descomprimirlo en /opt. Y para desinstalarlo basta con eliminar la carpeta que se crea. Saludos. El 14/07/09, Jonathan C. lockhe...@gmail.com escribió: buenas, disculpen el post fuera de tematica, pero como estoy seguro que mas de uno me podra responder, por eso me tome la libertad. ok, me acabo de instalar la ultima de ubuntu ya que quiero programar un sistema con php bajo linux, lo que quiero saber es que paquete o paquetes debo buscar o instalar desde el synaptic, que me instale todo lo que necesito, es decir, apache + php 5 + mysql 5. me gustaria hacerlo desde synaptic y dejar todo configuradito sin tocar demasiado, por eso quiero evitar bajar un paquete tipo xampp y después tener que compilarlo. saludos a la lista! -- Jonathan C. lockhe...@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
Re: [Ovillo] Bordes Redondeados
Hola, Mauricio. Ahora mismo no estoy delante de un ordenador que tenga IE8, por lo que no he probado, pero creo que -ms-border-radius sólo funciona en IE8 cuando no está en modo de compatibilidad con IE7, sino en modo IE8. Prueba a añadir la siguiente metaetiqueta: meta http-equiv=X-UA-Compatible content=IE=8 / Por otro lado, como primera declaración dentro de la regla para el borde redondeado usas border-radius: 3px 3px 0 0; pero el método abreviado para esta propiedad admite sólo uno o dos valores, no cuatro como tú indicas. Tienes la sintaxis en http://www.w3.org/TR/2002/WD-css3-border-20021107/#border-radius Saludos. El 18 de julio de 2009 18:54, Mauricio Dulcemauricio.du...@gmail.com escribió: Hola, buscando en google encontré que internet explorer 8 soporta esta sintaxis, pero al verla en dicho navegador este no las toma, alguien que me pueda orientar un poco mas sobre el tema. Recurrí a esto, por que el sitio que estoy maquetando esta hecho en .net y ya saben lo engorroso que puede llegar a ser a la hora de tocar el código sin tener el source y que es generado por un controlador, no puedo usar javascript por que los ingenieros dicen que eso cargaría aun mas la aplicación, así que lo único que se me ocurrió fue intentar con css3 ya que internet explorer 6 y 7 no están contemplados en los requerimientos del proyecto ya que es una intranet de un partner de microsoft. CSS: border-radius: 3px 3px 0 0; -ms-border-radius-topleft: 3px; /*IE8*/ -ms-border-radius-topright: 3px;/*IE8*/ -moz-border-radius: 3px 3px 0 0; -khtml-border-radius-topleft:3px; -khtml-border-radius-topright:3px; -webkit-border-top-right-radius: 3px; -webkit-border-top-left-radius: 3px; gracias Mauricio Dulce UI/UX Designer-Developer HTML CSS Móvil: (57) 312 519 0288 Teléfono: (571) 2746831 Email: mauricio.du...@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
Re: [Ovillo] Problemas con plantilla joomla 1.5
Hola, Diego.
Coincido con Ignacio en que sería mejor que subieras el ejemplo para
poderlo estudiar más cómodamente. De todas formas, se agradecen las
imágenes.
Entiendo que la línea vertical la consigues especificando un borde
izquierdo para div#right. Tal y como está declarado, este borde se
muestra en IE, pero no en otros navegadores. Mejor, cámbialo por:
border-left: 1px solid #000;
Para conseguir que esta línea llegue hasta el pie, tienes varios
métodos. Dejando a un lado javascript, dispones del método de las
columnas falsas (faux columns) que consiste en utilizar una imagen de
fondo en el contenedor, de forma que simule la columna (en este caso,
que contenga la línea vertical).
Otro truco que te propongo consiste en añadir a la columna que menos
altura tenga (el div#right) un relleno (padding) contrarrestado por un
margen negativo. Añade lo siguiente a tu css:
#right {
border-left: 1px solid #000;
padding-bottom: 300px; /* Valor arbitrario lo suficientemente alto */
margin-bottom: -300px;
}
Puesto que tu plantilla tiene pie de página, el borde se verá a través
de éste. Para evitarlo, declara explícitamente un background-color al
pie.
Una observación: para que #container se extienda para englobar los
flotantes que contiene, puedes añadirle overflow: hidden (auto también
vale). Para IE6, height: 1%.
Saludos.
El 16 de julio de 2009 20:50, DIEGO ACEVES
LÓPEZdiego69...@hotmail.com escribió:
Vive Cada Dia Como Si Fuera El Ultimo De Tu Vida... by Diego
hola a todos, buen dia,
tengo un problema con una plantilla joomla, al parecer esta bien el codigo
html pero un modulo quiero que me lo mueste hasta abajo, aqui les adjunto la
imagen y ojala me puedan hechar la mano, creo que el problema es el css les
adjunto el codigo.
codigo HTML
div id=container style=margin: 0 auto
div id=header
/div
div id=banner
/div
div id=right
/div
div id=content
/div
div id=forms
/div
div id=user
/div
div id=lineaH
/div
div id=footer1
/div
div id=footer
/div
/div
gracias
codigo CSS
#header{height: 50px;}
#container{width:763px; border-color:#000; border-left:solid;
border-right:solid; border-width:2px;}
#header ul{list-style:none; margin:0px; padding-right: 1em; padding: 0px 0px
0px 0px; text-align:center; display: block; padding-top: 0em;}
#header li{float:left;height:50px; width:109px; display: block;}
#header li:hover{background:green;}
#header a:link, a:visited{color:#000; text-decoration:none; font-family:
Arial, Helvetica, sans-serif; font-weight:bold; text-align:center;
font-size:13px;}
#header a.mainlevel{width:109px; height:37px; display: block; color:#5FB404;
padding-top: 1em;}
#header a:hover{color: #fff;}
#banner img{border:none;}
#content{float:left; width:500px; font-family: Arial Helvetica sans-serif;
font-size:12px; margin-left:8px;}
#content a:hover{text-decoration:underline;}
#forms{float:left; width:500px; font-family: Arial Helvetica sans-serif;
font-size:12px; margin-left:20px;}
#user{float:left; width:500px; font-family: Arial Helvetica sans-serif;
font-size:12px; margin-left:8px;}
#user a:hover{text-decoration: underline;}
#right {float:right; width:200px; height:100%; text-align:left;
border-color:#000; border-left:solid; background: #EEE; border:1px;
font-size:16px; font-family: Arial Helvetica sans-serif;}
#right a:hover{text-decoration:underline;}
#footer1{float:left; width:200px; text-align:left; font-family:Arial,
Helvetica, sans-serif; font-size:12px;}
#footer {float:right; width:550px; text-align:left; font-size:10px;}
#footer a:link, a:visited{text-decoration:none;}
#footer a:hover{color:#000; text-decoration: underline;}
_
Actualiza tu Perfil y gana!
http://www.actualizatuperfil.com.mx/
___
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 ul-li
[Tú escribiste]
Primero que usar un entity para crear un bullet es ridículo.
¿Ridículo?¿por qué?. Supongo que lo dices porque ya existe un boliche
predeterminado para las listas no ordenadas y, por lo tanto, no parece
tener sentido el anularlo para incluir este carácter en el html. Sin
embargo, el boliche predeterminado en las listas no ordenadas no se
visualiza de forma coherente en diferentes navegadores. Si lo anulas y
lo incluyes manualmente en el código consigues que se represente
siempre igual, independientemente del navegador (aunque depende del
tipo fuente elegida). Además, puedes usar otros caracteres, como el
representado por la entidad raquo; (comillas anguladas de cierre), y
que no se encuentran entre los list-style-type. Aún así sigue siendo
una mala opción de diseño debido a que rompe la separación
estructura-estilo, pero no considero que sea ridículo.
En http://webpelon.es/ovillo/2009-mes07-04-bullet_en_listas/ tienes un
ejemplo. Prueba a visualizarlo en diferentes navegadores.
[Tú escribiste]
Segundo. El span no es una etiqueta no semántica porque tiene contenido.
Que contenga contenido no significa que la etiqueta sea semántica.
Depende del uso que se haga de la etiqueta. En este caso, se utiliza
como artificio para que el color (estilo) de los elementos de lista
sea distinto del de los boliches.
Una buena forma de entenderlo es intentar describir el significado de
la etiqueta mediante palabras y sin incluir referencias a estilos. Por
ejemplo, en:
lispanIgnacio/span Ricci/li
lispanDaniel/span Navarro/li
se puede describir el significado del span como nombre de pila,
pero en
lispanElemento primero/span/li
no vale decir que es elemento de lista sin boliche porque incluye
una referencia a estilos, en este caso, al boliche. Y si lo definimos
como elemento de lista, entonces tiene el mismo significado que el
li y no aporta nada a la estructura.
[Tú escribiste]
Tercero. La técnica del span u otro tag lo usan muchos sitios.
Sí, es cierto. Pero si existe otro método igual de sencillo y que
evite el uso de esta etiqueta cuando no añade significado al código,
entonces es preferible usarlo.
[Tú escribiste]
Cuarto. De ultima utilizaría un list-style-image o un fondo para el li
en caso de necesitar más versatilidad.
Delirium Design pedía alguna forma de colorear el boliche sin usar
imágenes y yo he planteado dos formas.
Saludos.
El 4 de julio de 2009 00:55, Ignacio Ricciignacio.ri...@gmail.com escribió:
Primero que usar un entity para crear un bullet es ridículo
Segundo. El span no es una etiqueta no semántica porque tiene
contenido.
Tercero. La técnica del span u otro tag lo usan muchos sitios.
Cuarto. De ultima utilizaría un list-style-image o un fondo para el li
en caso de necesitar más versatilidad.
Ignacio Ricci.
www.ignacioricci.com
On Jul 3, 2009, at 19:27, Daniel Navarro webpe...@gmail.com wrote:
Tienes razón. Tú metes el texto entero en un span y le aplicas un
formato que lo diferencia del boliche. Éste está incluido en el li
pero no en el span. Aún así adolece de una etiqueta no semántica (
el
span). Es otra forma diferente de hacerlo que no tiene nada que ver
con la que yo he puesto (disculpas).
El indicar el carácter de boliche en el html tiene el defecto de
incluir más contenido no semántico, pero la ventaja de una
presentación más coherente entre navegadores, además de poder usar
más
tipos de boliches que los predefinidos para las listas no ordenadas.
Saludos.
El 3 de julio de 2009 13:55, Ignacio Ricciignacio.ri...@gmail.com
escribió:
No tiene sentido agregar el entity del bullet... Es contenido
innecesario.
Con anidar un span en el Li ya está...
2009/7/3 Daniel Navarro webpe...@gmail.com
Hola,
El 2 de julio de 2009 20:18, Delirium
Designdeliriumindes...@gmail.com escribió:
habria alguna forma de ponerlo color solo al boliche , asi no uso
una
imagen
, si no que le pongo el color que quiero al redondel.
Hasta ahora me cambia el redondel junto con el texto.
Si existe un carácter que te sirva como boliche, entonces puedes
aplicar estilo a éste sin tener que usar una imagen de fondo.
Una solución consiste en establecer el boliche directamente en el
archivo html y englobarlo en algún elemento (ej. span) para poder
aplicarle estilo (esto ya te lo ha indicado Ignacio Ricci):
[html]
ul
lispanbull;/spanUno/li
lispanbull;/spanDos/li
/ul
[css]
li {
list-style-type: none; /* elimina boliches */
}
li span {
color: green;
margin-right: 0.3em; /* separa el boliche del texto */
}
El inconveniente de esta solución es que no respeta una de las n
ormas
elementales del buen diseño web y que consiste en separar el dis
eño de
la estructura. Los boliches son diseño y deberían de especificar
se en
el css.
En navegadores compatibles con el pseudoelemento :before se puede
hacer lo siguiente:
[css
Re: [Ovillo] Consulta ul-li
Lo último que digo porque no vale la pena... Si argumentamos nuestros puntos de vista, el debate es constructivo y todos podemos sacar algo en claro. No pasa nada si ni tú ni yo variamos nuestras posiciones porque los argumentos quedan reflejados. Los entities son caracteres especiales. Un bullet de una lista no es un entity. Es parte de como se ve una lista 'gráficamente', no es parte del contenido. Estoy de acuerdo. Rompe la separación estructura-estilo. Pero no por ello deja de ser una solución posible con sus pros y sus contras. A propósito, una entidad de carácter es una codificación ascii de un carácter no incluido en la tabla ascii original (como ejemplo, una vocal acentuada o la eñe). Realmente no hacen falta si se tiene cuidado con la codificación de las páginas y yo no suelo usarlos. Perdóname si, como ahora, explico conceptos que ya sabes; cuando escribo pienso también en otras personas que nos pueden estar leyendo (uf... a lo mejor peco de pedante). No semántico realmente sería un span vacío. Obviamente que agregarlo adentro del LI para crear que se vea algo diferente no es lo mejor, pero no es realmente tan grave como un tag vacío. Un span vacío es obvio que carece de significado. Un span (u otra etiqueta) con contenido puede aportar algo a la estructura o no. Una etiqueta que no aporte significado, tenga contenido o no, es código extra que no debería de existir. Pero la separación estructura-estilo no siempre es posible o bien conlleva algunas complicaciones. Desde este punto de vista, no puedo decir que una sea más grave que la otra. De hecho, ninguna me parece grave si está justificado su uso. La gente de ovillo busca aprender CSS. Y la verdad que si las personas recomiendan usar entities como bullets convencidisimos y nadie les dice nada la verdad que me preocupa... Ya dije, cuando mostré el código, que esta solución no respeta una de las normas elementales del buen diseño web y que consiste en separar el diseño de la estructura. Por eso seguidamente presenté la solución basada en el pseudoelemento :before. Pero no dramaticemos, sinceramente creo que todas las soluciones planteadas tienen sus ventajas e inconvenientes (por supuesto la tuya también). En versatilidad, coincido contigo que gana el método de usar una imagen de fondo. Cambiando de asunto, tu blog http://thecssblog.com/ tiene buena pinta. Es paradójico (teniendo en cuenta el tema de este hilo) que los únicos fallos de validación estén en una lista no ordenada (en div.pageList, sobre todo en la segunda página). He agregado la página principal a mis marcadores (en serio). Además, me servirá para aprender inglés ;). Saludos. El 4 de julio de 2009 21:02, Delirium Designdeliriumindes...@gmail.com escribió: Utilice list-style-image, en lugar de span. Creo que hay algunas diferencias entre como ordenamos, y cuales son las opciones que elegimos cada uno de nosotros a la hora de usar estilos. Yo personalmente utilice list-style-image porque siento que ese debe ser su uso (imagen de estilo de lista) como la palabra lo dice. Podria haber usado span, es simplemente la desicion de cada uno a la hora de maquetar. Muchas gracias por la ayuda y buen fin de semana! El 4 de julio de 2009 13:09, Ignacio Ricci ignacio.ri...@gmail.comescribió: Lo último que digo porque no vale la pena... Los entities son caracteres especiales. Un bullet de una lista no es un entity. Es parte de como se ve una lista 'gráficamente', no es parte del contenido. No semántico realmente sería un span vacío. Obviamente que agregarlo adentro del LI para crear que se vea algo diferente no es lo mejor, pero no es realmente tan grave como un tag vacío. La gente de ovillo busca aprender CSS. Y la verdad que si las personas recomiendan usar entities como bullets convencidisimos y nadie les dice nada la verdad que me preocupa... 2009/7/4 Daniel Navarro webpe...@gmail.com [Tú escribiste] Primero que usar un entity para crear un bullet es ridículo. ¿Ridículo?¿por qué?. Supongo que lo dices porque ya existe un boliche predeterminado para las listas no ordenadas y, por lo tanto, no parece tener sentido el anularlo para incluir este carácter en el html. Sin embargo, el boliche predeterminado en las listas no ordenadas no se visualiza de forma coherente en diferentes navegadores. Si lo anulas y lo incluyes manualmente en el código consigues que se represente siempre igual, independientemente del navegador (aunque depende del tipo fuente elegida). Además, puedes usar otros caracteres, como el representado por la entidad raquo; (comillas anguladas de cierre), y que no se encuentran entre los list-style-type. Aún así sigue siendo una mala opción de diseño debido a que rompe la separación estructura-estilo, pero no considero que sea ridículo. En http://webpelon.es/ovillo/2009-mes07-04-bullet_en_listas/ tienes un ejemplo. Prueba a visualizarlo en diferentes navegadores
Re: [Ovillo] Consulta ul-li
Hola,
El 2 de julio de 2009 20:18, Delirium
Designdeliriumindes...@gmail.com escribió:
habria alguna forma de ponerlo color solo al boliche , asi no uso una imagen
, si no que le pongo el color que quiero al redondel.
Hasta ahora me cambia el redondel junto con el texto.
Si existe un carácter que te sirva como boliche, entonces puedes
aplicar estilo a éste sin tener que usar una imagen de fondo.
Una solución consiste en establecer el boliche directamente en el
archivo html y englobarlo en algún elemento (ej. span) para poder
aplicarle estilo (esto ya te lo ha indicado Ignacio Ricci):
[html]
ul
lispanbull;/spanUno/li
lispanbull;/spanDos/li
/ul
[css]
li {
list-style-type: none; /* elimina boliches */
}
li span {
color: green;
margin-right: 0.3em; /* separa el boliche del texto */
}
El inconveniente de esta solución es que no respeta una de las normas
elementales del buen diseño web y que consiste en separar el diseño de
la estructura. Los boliches son diseño y deberían de especificarse en
el css.
En navegadores compatibles con el pseudoelemento :before se puede
hacer lo siguiente:
[css]
li {
list-style-type: none; /* elimina boliches */
}
li:before {
content: \2022; /* codificación en hexadecimal del carácter bull;
*/
color: blue;
margin-right: 0.3em;
}
En la propiedad content se puede indicar directamente el carácter que
se quiera usar como boliche, pero si usas uno que no sea ASCII básico
tendrás que tener cuidado en guardar el archivo css con la
codificación apropiada (yo uso utf-8 sin BOM en mis archivos). Para
evitar los problemas de codificación al guardar, es mejor indicar el
equivalente hexadecimal, en este caso \2022. Tienes una tabla de
referencia en http://ascii.cl/es/codigos-html.htm
Lamentablemente hay navegadores como IE6 que no aceptan la anterior
regla, aunque puedes indicarle algún list-style sólo a este navegador
mediante el uso de los comentarios condicionales.
[html]
!--[if lte IE 6]
link rel=stylesheet type=text/css href=ie6.css /
![endif]--
[ie6.css]
li {
list-style: disc inside;
}
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] [CSS][Seguridad] a:visited permite romper la privacidad del navegador web
Hola, Obviamente, una forma de evitar que se conozca qué sitios has visitado consiste en desactivar el historial de páginas visitadas. En Firefox: Herramientas Opciones Privacidad y desmarcar Guardar mi historial... Demo en: http://www.making-the-web.com/misc/sites-you-visit/nojs/ Saludos. El 2 de julio de 2009 17:14, Teioscar.vi...@gmail.com escribió: Se esta haciendo popular el uso de a:visited para leer que paginas ha visitado el usuario. Esto es un problema de seguridad grave. La tecnica consiste en poner un estilo especial a a:visited de modo que llame a un script de estadistica (el script esta en la url de background). Como solo se llamara si el enlace ha sido realmente visitado, en otro caso no sera llamado el script. Esta tecnica no requiere Javascript, unicamente CSS, y ha sido publicar hace poco en Slashdot y otros medios. No he escuchado que los navegadores se esten planteando si eliminar esta caracteristica del navegador. Es una caracteristica de usabilidad que normalmente se pierde casi siempre, cuando la gente aplica otras reglas de CSS y elimina la diferencia visual entre enlaces visitados o no. Pocas veces es necesaria, solo en los buscadores y en los manuales. El problema es grave, si se explota a fondo no seria extraño que los navegadores le pongan coto eliminando esta caracteristica ( haciendo que a:visited no exista) aunque seria polemico. -- -- ℱ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 ___ 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 ul-li
Tienes razón. Tú metes el texto entero en un span y le aplicas un
formato que lo diferencia del boliche. Éste está incluido en el li
pero no en el span. Aún así adolece de una etiqueta no semántica (el
span). Es otra forma diferente de hacerlo que no tiene nada que ver
con la que yo he puesto (disculpas).
El indicar el carácter de boliche en el html tiene el defecto de
incluir más contenido no semántico, pero la ventaja de una
presentación más coherente entre navegadores, además de poder usar más
tipos de boliches que los predefinidos para las listas no ordenadas.
Saludos.
El 3 de julio de 2009 13:55, Ignacio Ricciignacio.ri...@gmail.com escribió:
No tiene sentido agregar el entity del bullet... Es contenido innecesario.
Con anidar un span en el Li ya está...
2009/7/3 Daniel Navarro webpe...@gmail.com
Hola,
El 2 de julio de 2009 20:18, Delirium
Designdeliriumindes...@gmail.com escribió:
habria alguna forma de ponerlo color solo al boliche , asi no uso una
imagen
, si no que le pongo el color que quiero al redondel.
Hasta ahora me cambia el redondel junto con el texto.
Si existe un carácter que te sirva como boliche, entonces puedes
aplicar estilo a éste sin tener que usar una imagen de fondo.
Una solución consiste en establecer el boliche directamente en el
archivo html y englobarlo en algún elemento (ej. span) para poder
aplicarle estilo (esto ya te lo ha indicado Ignacio Ricci):
[html]
ul
lispanbull;/spanUno/li
lispanbull;/spanDos/li
/ul
[css]
li {
list-style-type: none; /* elimina boliches */
}
li span {
color: green;
margin-right: 0.3em; /* separa el boliche del texto */
}
El inconveniente de esta solución es que no respeta una de las normas
elementales del buen diseño web y que consiste en separar el diseño de
la estructura. Los boliches son diseño y deberían de especificarse en
el css.
En navegadores compatibles con el pseudoelemento :before se puede
hacer lo siguiente:
[css]
li {
list-style-type: none; /* elimina boliches */
}
li:before {
content: \2022; /* codificación en hexadecimal del carácter
bull; */
color: blue;
margin-right: 0.3em;
}
En la propiedad content se puede indicar directamente el carácter que
se quiera usar como boliche, pero si usas uno que no sea ASCII básico
tendrás que tener cuidado en guardar el archivo css con la
codificación apropiada (yo uso utf-8 sin BOM en mis archivos). Para
evitar los problemas de codificación al guardar, es mejor indicar el
equivalente hexadecimal, en este caso \2022. Tienes una tabla de
referencia en http://ascii.cl/es/codigos-html.htm
Lamentablemente hay navegadores como IE6 que no aceptan la anterior
regla, aunque puedes indicarle algún list-style sólo a este navegador
mediante el uso de los comentarios condicionales.
[html]
!--[if lte IE 6]
link rel=stylesheet type=text/css href=ie6.css /
![endif]--
[ie6.css]
li {
list-style: disc inside;
}
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
--
↓ 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
Re: [Ovillo] problema con imagen y links
Hola, Devi. Has respondido al mensaje de resumen de ovillo, por lo que no se ha colocado en este hilo. Indicas tu página de prueba: http://www.leonelsilva.com/pruebacdf/ Si añades la declaración overflow: hidden; en #content conseguirás que se respete la altura que has especificado en #content Aunque esto te solvente el problema, deberías tener en cuenta algunas consideraciones para mejorar tu diseño, como establecer las imágenes como fondo de css y permitir que el tamaño de fuente se pueda aumentar sin desmoronarse la página. Tendrás que eliminar la altura de #content. Si estableces position:relative a #content (como te ha comentado Andrés Gutiérrez) podrás posicionar de forma absoluta los elementos contenidos dentro de él con respecto a su contenedor (esto es, #content). Saludos. El día 30 de mayo de 2009 0:22, Devi Silva silvade...@gmail.com escribió: buen dia señores. Se me presenta un problema aca, necesito colocar una imagen a un div en el codigo html pero a su vez necesito colocarle encima un h2 y una ul con sus respectivas imagenes. Lo que le estoy poniendo es una posicion relativa y colocandole un top negativo para poder hacerlo, pero en el explorer 6 me deja el espacio en el que estaria la ul y el h2 aunque lo suba 1000 px. Ayuda! he buscado por todos lados y visto codigos como loco a ver is consigo repsuestas y que va. Gracias de antemano. ___ 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] Por qué no valida el símbolo en x HTML?
Hola, Lena. Te lo han explicado muy bien. Tan sólo voy a ampliar un
par de cosillas.
La Recomendación XHTML 1.0 del W3C es un documento relativamente corto
que te puede aclarar algunas dudas sobre xhtml. En concreto, lo que tú
preguntas está en
http://www.sidar.org/recur/desdi/traduc/es/xhtml/xhtml11.htm#h-4.8
Este enlace es una traducción del original y, paradojicamente, es un
documento xhtml incorrecto, que no valida.
Por otro lado, quizás te preguntes qué puede ocurrir si no marcas el
script como CDATA. Pues bien, en la práctica no ocurrirá nada porque
el servidor está configurado para indicar a los navegadores que tus
páginas son html y no xhtml. Si realmente se interpretara como xhtml
entonces te aparecería un bonito mensaje de error (puedes probar a
cambiar la extensión de *htm a *xht y ver qué ocurre en un navegador
que no sea IE).
Saludos.
El 22 de mayo de 2009 12:18, Lena Ramírez elenasad...@gmail.com escribió:
Hola!
Tengo programación javascript en el head de una página XHTML que
contiene una función y un if, la cuestión es que el símbolo de menor
que de ese if hace que la página no valide...
Alguien sabría explicarme por qué??? Os dejo el código por si me
podéis aclarar esta duda
function anterior(){
if(i1){
var NumImagen = i
} else {
var NumImagen = i-=1;
}
document.imgSrc.src = misImagenes[NumImagen];
}
Gracias a t...@s!
PD. Si el símgolo es el de Mayor que no hay problema, solo en el caso
que comento arriba
___
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] correcto formato de formularios
Hola. En un DTD estricto se especifica que dentro de un form sólo puede haber elementos de bloque (que no sean otros form). Así que entre los diferentes controles y el form debe de mediar un elemento de bloque como div o fieldset, por ejemplo. Esto te falta en la solución A. Además, obligas a saltos de línea con br y esto limita la flexibilidad de CSS. La solución de Asela, en la que agloba todos los controles en un elemento de bloque común, es la más simple. La solución B o C en la que incluyes los diferentes controles en elementos de bloque como div o p proporciona mayor flexibilidad de diseño. En un uso simple, te evitará enfrentarte a los floats que tanto temes. También se pueden sustituir los div por otros elementos de bloque como se ha comentado en este hilo. También deberías tener en cuenta que el atributo name es necesario en algunos navegadores para que se envíe el nombre del campo. Saludos. El día 20 de mayo de 2009 19:23, Marc Palau m...@palaueb.com escribió: ¿Entonces finalmente nos hemos puesto de acuerdo con algo? Despues de leer me da que lo mejor es LABEL INPUT EXTRA y con CSS lo formateamos. El problema es que todo tendrá que flotar y nunca termino de aclararme con cómo aplicar el CSS para que no me haga cosas raras en IE6 por ejemplo. un saludote!! marc En/na Ramón Corominas ha escrit: ¿Y para qué los fieldset si no hay campos que tengan relación entre sí? Y sobre todo, poner un fieldset sin legend añade semántica (agrupación) sin etiquetado, lo cual puede ser peor. Asela Ortiz de Murua escribió: Quiero dedir que no hacen falta más contenedores; que con CSS y el esquema siguiente es correcto (estándar y accesible) y suficiente para hacer formularios bonitos. form fieldsetlabelinput-select-text ...//label ... /fieldset fieldsetlabelinput-select-text .../spantexto diferenciado/span/label ... /fieldset ... /form ___ 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
Re: [Ovillo] Listado con elementos de listado flotantes
Hola.
La solución de expandir floats interiores con overflow (Paul O'Brien)
es estupenda, pero hay que tener cuidado en ciertas situaciones. En
concreto, si aplicas un margen al elemento con overflow hidden (o
overflow auto) y tienes flotantes a su lado (ojo, no hablo de los
flotantes interiores), entonces el margen se calcula desde el borde
del float adyacente o no, dependiendo del navegador. En este caso, una
solución consiste en englobar el elemento con overflow dentro de otro
y aplicar el margen a este elemento padre.
Saludos.
El día 22 de mayo de 2009 18:17, Julio Loayza Herrero
loayza.lis...@stanque.com escribió:
¡Muchas gracias a los tres! :-)
Lo solución de overflow parece bastante más lógica que la de flotar el
elemento, que la verdad no me acaba de cuadrar. Pero bueno es conocer
las dos opciones :-)
¡Un saludo!
julio loayza herrero
stanque
El 22/05/2009, a las 15:57, Hernán Beati - SaberWeb.com.ar escribió:
Julio Loayza Herrero escribió:
Me planteo: Si tenemos un listado (ul por ejemplo) y con todos sus
elementos flotantes ¿Cómo hacer para que el listado (ul) no aparezca
vacío? Es decir, para que tome la altura de los elementos
contenidos.
Prueba con:
ul {
overflow:auto;
}
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
___
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 div absolute y z-index
Hola, para poder comparar los z-index en IE, los elementos tienen que compartir el mismo ancestro inmediato posicionado. Al posicionar de forma absoluta los div.tbdButtons, éstos crean un nuevo contexto de apilamiento en IE. Los elementos contenidos dentro de un div.tbdButtons en particular se apilarán conforme al z-index, pero no se compararán los elementos pertenecientes a div.tbdButtons diferentes. Saludos El 14 de mayo de 2009 16:31, Ana Moya abm...@gmail.com escribió: Perfecto!!! gracias, con las cosas que he probado y eso no se me había ocurrido :( Va bien en Firefox, Opera y Chrome, ahora el problema está en IE7 e IE6. El 14 de mayo de 2009 15:10, David Huertas dhm...@yahoo.es escribió: Ana Moya escribió: El problema es que al mostrar el div .floatShadow superior queda debajo del .tbdButtons inferior, cuando tiene que quedar por encima. Qtal, Si es solo eso creo que con eliminar la linea: z-index:40; del la clase .tbdButtons bastaria. Por lo menos con Firefox. 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 ___ 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] Urgentillo, tooltip o title en un option
Hola, select option title=texto del bocadilloOpción primera/option ... En IE6 no funciona. El 8 de mayo de 2009 9:19, Nesta Guerrero Pancorbo nguerr...@emergya.esescribió: Señores y Señoritas, estoy intentando ponerle un title o un tooltip a un option de un select y no encuentro nada, y no se como hacerlo, si alguien se le enciende la bombilla porfavor respondanme gracia ___ 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] correccion de errores
Hola. A primera vista, el sitio me ha causado buena impresión y eso es importante. Te comento alguna mejora que puedes hacer a nivel de código: En el html, borra la línea div style=clear:both; (La tienes dos veces: borra las dos) En su lugar, en el CSS, incluye overflow:hidden tanto en .lineag como en .menudesl Otra mejora que puedes hacer es incluir el texto de la imagen de la cabecera Roque Alonso ... en un elemento h1 que quede oculto por la imagen. Además, yo prefiero incluir la imagen del logo en el CSS. Saludos. El 6 de mayo de 2009 18:37, 2tonewarrior 2tonewarr...@gmail.com escribió: Buenas, por fin estoy haciendo mi primera pagina 100% con código mio y quisiera que le echarais un ojo a ver que os parece. La he validado y parece que no hay problemas por ahora pero a lo mejor esta mal estructurado... La pagina no está acabada. También me gustaría que me dierais vuestra opinion en cuanto a diseño visual. Os parece cutre o elegante? Ésta es la página http://roquealonso.org/prueba/index2.html P.D2: Si necesitáis los archivos pedidlos ;) 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] correccion de errores
también conviene que incluyas el idioma de la página en la etiqueta html con html xml:lang=es lang=es El 6 de mayo de 2009 18:37, 2tonewarrior 2tonewarr...@gmail.com escribió: Buenas, por fin estoy haciendo mi primera pagina 100% con código mio y quisiera que le echarais un ojo a ver que os parece. La he validado y parece que no hay problemas por ahora pero a lo mejor esta mal estructurado... La pagina no está acabada. También me gustaría que me dierais vuestra opinion en cuanto a diseño visual. Os parece cutre o elegante? Ésta es la página http://roquealonso.org/prueba/index2.html P.D2: Si necesitáis los archivos pedidlos ;) 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] OT: Jquery que no anda (viene de: abrir un html en un div en la misma pagina)
Hola.
El sitio sería más accesible si pudiera funcionar incluso con javascript
desactivado.
Por lo que cuentas, no tienes que gestionar páginas enteras, sino resultados
de torneos (me imagino que serán unas tablas de datos). Aunque yo te
recomendé un gestor de contenidos, en este caso parece más lógico que
incluyas los resultados en una base de datos y los recuperes con lenguaje
del lado del servidor (por ejemplo, con php).
Saludos.
El 4 de mayo de 2009 6:14, alejandra.j.go...@gmail.com escribió:
Hola chicos, volviendo al tema del asunto, busque por todos lados algo y
encontre una libreria que hace justo lo que quiero, clickear en un link y
que se abra en un div, dentro de la misma pagina, sin recargar cabeceras, y
demas.
El tema es que en el ejemplo que dan en la pagina de cristalab (
http://www.ryuz.es/jqe/experiment.html) funciona perfecto, pero a mi los
links me los toma como links comunes abriendo otra pagina distinta, no como
deberia ser, abrir en la misma pagina dentro de un div
Este es el codigo de la libreria:
script src=jquery-1.2.1.pack.js type=text/javascript/script
script type=text/javascript
$(document).ready(function(){
var emi = #nav a;//Emisor
var rec = #show;//Receptor
var iid = loading;//Id de la precarga
var pre = 'img src='+src+'id='+iid+'/';//Objeto precarga
var spe = slow;//Velocidad del efecto
$(emi).each(function(){
var href = $(this).attr(href);//Guardamos el vaolor de
href de cada enlace.
$(this).click(function(){//Cargamos en rec el
contenido de cada href y le damos efectos.
$(rec).hide().after(pre).load(href, function()
{$(#+iid).remove();$(this).fadeIn(spe)});
return false;//Para que no se
redireccione.
});
});
});
/script
Y aqui es donde lo puse y no funciona
HTML:
h2Torneos en el club:/h2
divul id=nav
li a href=torneos2009.htmlspanTorneos 2009/span/a/li
li a href=calen2008.htmlspanTorneos 2008 -
Anuario/span/a/li
li a href=mejorestorneos.htmlspanMejores
Torneos/span/a/li
/ul/div
div id=show Texto /div
Tengo bajada la libreria y en la misma carpeta que la pagina asi que no se
porque no funciona, preciso del conocimiento de todos ustedes, y de paso
tal
vez le sirva a alguien mas
Alejandra
___
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] Añadir Zona dinámica en web ya realiz ada
Hola. Al final, puede que el proyecto se complique demasiado por lo que puede ser una buena idea que estudies la migración del sitio a un gestor de contenidos. Si te atreves a construir tú mismo la funcionalidad que necesitas, te puede resultar muy útil el libro PHP y MySQL. Crear - modificar - reutilizar de Tim Boronczyk y Marin E. Psinas, editado por Anaya, ISBN 9788441525160. Trae código que puedes aplicar a tus proyectos. Saludos El 6 de mayo de 2009 8:50, Juan Carlos Castrillón jccastril...@telecable.es escribió: Buenos días a todos: La idea es que tengo un site desarrollado en php con algunas zonas dinámicas con contenido almacenado en una base de datos. El tema es qu el cliente quiere poder mantener esa información (no se le pudo ocurrir antes claro). Los cms como joomla, drupal etc.. te generan un site propio pero mi idea es poder acoplar algún script a partes de la web a modo de lectores de noticias. La cuestión es si sabeis de aplicaciones para instalar en el servidor que me permitan gestionar estas zonas dinámicas sin que me generen web propia. La información a generar y mantener sería texto, enlaces a pdfs (que tendrá que poder subir), fotos y poco más. Es muy posible que el número de modulos sean mas de 1 en varias páginas. Espero vuestra ayuda y consejo. 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] ayuda con un presupuesto por favor
Hola. Busca en Google España: http://google.es Por ejemplo, con las palabras: precio página web El 30 de abril de 2009 16:01, Sebastián Molinari hetsahk...@gmail.comescribió: Buenas tardes... Estoy por presupuestar mi primer trabajo, pura y exclusivamente de maquetación en españa... Y quisiera saber mas o menos una idea de los precios q se mueven por página maquetada... Les agradecería mucho si me ayudan con esto, porq desconsco como se mueve dicho mercado. Muchas 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 textarea en ie7
Hola, el hueco desaparece si en el html escribes los dos input seguidos, sin salto de línea ni espacio entre ellos. Saludos. El 29 de abril de 2009 15:18, Sebastián Molinari hetsahk...@gmail.comescribió: Hola que tal... Les quiero contar de mi problema, para ver si alguien me puede ayudar porq me estoy volviendo un poco loco... El problema es el siguiente: Tengo 3 input, uno abajo del otro, y abajo de estos 3 un textarea... Lo que pasa es que en ie7 el textarea arrastra al ultimo input... esto me di cuenta ya que al sacarlo los input queda uno abajo del otro correctamente... les paso el link para que lo miren en ff e ie7 asi ven las diferencia por ustedes mismos lo cual hace mas facil la comprensión. http://www.psdtohtml.com.ar/contacto.php Muchas 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] ¿UTF o ISO 8859?
Hola, en el archivo donde tengas la conexión a la base de datos, prueba a
escribir lo siguiente tras la selección de la base de datos:
mysql_query(SET NAMES UTF8);
Esto es, el archivo tendrá esta forma:
?php
$conexion = @mysql_connect ...
mysql_select_db(incidencias, $conexion) or exit ('Error al conectar
con la base de datos');
mysql_query(SET NAMES UTF8);// NUEVO
?
Seguramente te valga también con esto:
mysql_query(SET CHARACTER_SET_RESULTS = UTF8);
ya que el cliente y la conexión ya están configurados para utf-8.
Saludos.
2009/4/22 Tae Sandoval Murgan taeci...@gmail.com
2009/4/21 Tei oscar.vi...@gmail.com:
De todos modos quizas tu problema es que estas intentando guardar en
la bd datos en otra codificacion, y no utf-8. Y cuando los recuperas
naturalmente no estan en UTF-8, sino en la codificacion original.
(porque el origen de esos datos es un formulario en otra
codificacion, por ejemplo. )
Gracias por la respuesta Tei. Al parecer eso es lo que sucede, pues
cambié la configuración del .htaccess para que sirva los documentos
como ISO-8859-1 y resulta que ahora los datos de la BD se muestran
como deben, más no el texto escrito en los archivos .php o .html, que
están en UTF-8. Ahora bien, he probado insertar nuevas filas mediante
sentencias SQL en phpMyAdmin así como subir archivos .sql, y la cosa
sigue igual.
Ahora bien, al ingresar a phpMyAdmin dice en uno de sus cuadros de
resúmenes: MySQL charset: UTF-8 Unicode (utf8), pero la examinar
las variables me encontré con lo siguiente:
character set clientutf8
(Global value) latin1
character set connectionutf8
(Global value) latin1
character set database latin1
character set filesystembinary
character set results utf8
(Global value) latin1
character set serverlatin1
character set systemutf8
collation connectionutf8_spanish_ci
(Global value) latin1_general_ci
collation database latin1_general_ci
collation serverlatin1_general_ci
¿Tendrá esto algo que ver con mi problema? Porque por más que navegue
por las páginas de phpMyAdmin no encuentro otra opción de codificación
más que el cotejamiento de cada base y tabla, así que imagino que
estas variables sólo las puede modificar el administrador del sistema
editando algún archivo de configuración. Trabajando en local puedo
leer la documentación y hacerlo yo misma, pero una vez que todo esté
en línea...
Gracias nuevamente y perdón por las molestias!
___
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] ¿UTF o ISO 8859?
Hola, Tae. Ignoro la diferencia de rendimiento de mysql entre usar una codificación u otra. Dices que conoces UTF-8, así que lo que cuento a continuación lo dirijo a quien lo desconozca: Mi recomendación es que mires al futuro y uses el juego de caracteres UTF-8. En cuanto al almacenamiento, un texto con caracteres del ASCII original de 7bits ocupa lo mismo tanto en ISO 8859-1 (Latin-1) como en utf-8: un byte por carácter. Es más, si el archivo utf-8 no incluye la marca BOM, entonces son iguales. Cuando añades caracteres como la ñ, las vocales acentuadas y otros símbolos fuera del ASCII estándar, entonces el archivo codificado en uft-8 es mayor que el codificado en Latin-1. Para el cotejamiento de la base de datos, elige utf_spanish_ci. El cotejamiento no tiene nada que ver con la representación interna de los caracteres, sino con la ordenación. Al establecer el cotejamiento en español, estás diciendo a mysql que la 'ñ' está entre la 'n' y la 'o', y que la 'á' (con tilde) es equivalente a la 'a' (sin tilde) en vez de estar después de la 'z' (como sucedería con un cotejamiento diferente). Ten especial cuidado en editar en UTF-8 sin el BOM. El BOM o Byte Order Mark, en el caso de UTF-8 sólo sirve para indicar que el fichero está en unicode. Es una secuencia de tres bytes al principio del documento (EF BB BF) y es especialmente problemático con las aplicaciones que no entienden unicode. Por ejemplo, la función header() de php no funcionaría. Hay varias incidencias que te pueden frustrar cuando trabajes UTF-8. Por ejemplo, si el servidor web está configurado para enviar en la cabecera http la codificación entonces el navegador hará caso omiso a la meta etiqueta indicada en el código html (esto es, si tú escribes en tu código que la codificación es UTF-8 y el servidor web indica que es Latin-1, el navegador creerá al servidor). Otro fallo muy común es indicar utf-8 en mysql y en la metaetiqueta del código html, pero guardar el archivo con formato ANSI en vez de utf-8. Es como usar un traductor de inglés para traducir un texto escrito en francés. Lo mejor es que agarres el toro por lo cuernos y codifiques en utf-8. Así estarás preparado para cuando tengas que trabajar en unicode. Si tienes algún tropiezo siempre puedes usar esta lista. Saludos. 2009/4/18 Tae Sandoval Murgan taeci...@gmail.com Gracias a ambos por las respuestas :) Conozco bien las capacidades de UTF-8 ya que tambié es la codificación de mi SO (Arch Linux). La pregunta va más por el lado de si vale la pena usarlo para una web que usará cuando mucho 2 idiomas y no recibirá trackbacks o similares. Quizás sí, quizás la sobrecarga del servidor y el espacio en disco no sea mucho mayor que la utilizada por ISO-8859. O quizás en lugar de usar utf-unicode-ci sea más conveniente utf-spanish-ci o spanish2-ci. ___ 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] Ayuda con .5em de posicionamiento
Hola, ¿cuál es el fallo? no lo explicas en tu mensaje. Es mejor que incluyas
también un enlace a la página en pruebas para ver la diferencia entre
navegadores.
Veo que la anchura de #pageHeader más su margen (920px + 0.5em + 0.5em)
supera la anchura de #wrapper (920px), que es su contenedor. Quita el width
de #pageHeader. No sumes px con em.
Saludos.
El 19 de abril de 2009 4:21, Miguel Flores pixelp...@gmail.com escribió:
Buenas noches tengo un problema de visualización en IE 7 que ha quedado
resuelto en IE6; en IE8 funciona normal y por supuesto en Firefox funciona
de maravillas.
La imagen del problemita es la que sigue en el link: [
http://www.pixelperu.net/problemas/problema.jpg]
La estructura de DIVS es como sigue:
div id=wrapper/*este es el contenedor general*/
div id=pageHeader
div class=menu /*aca es donde se da el problema*/
ul id=navlist/*o quizas aca?*/
he estado revisando durante 3 dias, ya me estan saliendo las segundas
ojeras y ya no quiero mas pero no me rindo, sigo buscando acá y allá. Algún
alma que despierte de un sopapo con su acertado comentario?? La verdad es
que no pensaba que ese militro de diferencia me iba a costar tanto pero
tanto.
El código CSS utilizado es el sgte: (omitiendo alguno que otro codigo
innecesario):
html, body {
margin: 0;
padding:0;
font-family: normal Arial, Helvetica, sans-serif;
background: #b4b4b4 url(../images/vertical.jpg) repeat-x;
}
#wrapper{
width: 920px;
background:#fff;
height: auto;
margin: 0 auto;
padding: 0 ;
}
#pageHeader{
width: 920px;
height: 465px;
margin: 0 .5em;
padding: 0;
}
#banner{
width: 905px;
height: 465px;
background: url(../images/banner.jpg) no-repeat center bottom ;
,margin:0em 0 0 0;
}
#supportingText{
width: 905px;
padding:0 .5em;
margin:.5em auto;
height: 100%;
,margin:5.9em auto .5em auto;
}
.menu{
float: left;
width: 905px;
margin: 0;
padding: 0;
}
Y ahora el menu de navegacion:
#navlist {
margin: 0;
padding: 0;
}
#navlist li {
float: left;
width: 181px;
*width: 179px;/*para Ie6*/
list-style-type: none;
text-align: center;
}
Ya toy cansao!!
Miguel Flores Franco
Pixelperú - Arte y diseño web basado en estándares
http://www.pixelperu.net
Telf.: + 511 566 5116 . Cel. +511 99392 8921
MSN:mi...@pixelperu.net msn%3ami...@pixelperu.net
___
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] duda sobre el microformato hCard
Hola, no entiendo mucho de microformatos, pero si en el archivo vcf sustituyes TEL;TYPE=VOICE:+34 9 por TEL;TYPE=WORK:+34 9 entonces sí que se muestra en el apartado trabajo. Y si lo cambias por HOME, en el de domicilio. Supongo que tendrías que indicarlo en el código html en la forma span class=typework/span Saludos El 15 de abril de 2009 16:20, sebastian garcia-valenciano sebast...@garcia-valenciano.net escribió: Hola, para mostrar la información de unas empresas, estoy siguiendo el microformato hCard (implementación HMTL de vCard). El problema es que pese a estar haciéndolo clavado al estándard, cuando exporto una dirección, (usando Operator (un plugin de Firefox) me genera un archivo hCard.vcf en un principio correcto. mi HTML: http://pastebin.com/m433d0bb6 http://pastebin.com/m433d0bb6%20%20 el archivo hCard.vcf generado abierto con un editor de código: http://pastebin.com/m2a41295e El problema: al abrir el hCard.vcf con Windows, en la ficha, sólo aparecen ciertos datos. Faltan por ejemplo el teléfono. Investigando otras webs que usan hCard les sucede lo mismo, al bajar el archivo .VCF faltan datos que si están en el HTML. Alguna experiencia/idea feliz ? gracias a lot of! -- ___ Sebas[tián] García-Valenciano Secaduras sebast...@garcia-valenciano.net ___ 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] Fwd: OT: Sitio en prueba
Disculpa, pensé que era el sitio original. Creo que puedes mejorar el sitio original en diferentes aspectos. En lo que respecta al diseño gráfico, te recomendaría que ojearas el libro de Robin Williams The Non-Designer's Design Book, que en castellano está editado por Anaya bajo el título Diseño gráfico. Fundamentos. Contiene unas pautas sencillas que te serán muy útiles. Saludos. El 14 de abril de 2009 6:12, alejandra.j.go...@gmail.com escribió: Muchisimas gracias Daniel! realmente me ha quedado muy claro, de hecho lo estuve pasando a fijo hoy, por otro lado, el lugar donde esta subido no es el dominio del cliente, lo subi ahi por que es un lugar mio, el cliente tiene este sitio funcionando hace dos años, solo que estamos en la etapa de un cambio radical. Otra vez gracias! y seguire tus consejos al pie de la letra. Alejandra ___ 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] Plantillas con CSS
Hola, Atis.
Dependiendo de la complejidad que quieras, puede que te interese usar un
gestor de contenidos. Si está basado en un sistema con smarty tags de php,
te podrás centrar en el diseño de la plantilla aunque no tengas
conocimientos de php. Tan sólo tendrás que insertar unas etiquetas smarty
sencillas en algunos puntos clave.
Para que te hagas una idea, una plantilla podría tener la siguiente forma:
html
head
title{nombre_sitio} - {titulo_pag}/title
{hojas_estilo}
/head
body
{menu}
{contenido_pag}
{pie}
/body
/html
donde lo encerrado entre llaves son las variables smarty tags que el
gestor de contenidos pone a tu disposición y que serán sustituidas por el
valor correspondiente. Dispondrás de una zona de administración (a la que
accederás con contraseña) y donde podrás establecer, por ejemplo, el
contenido de {titulo_pag} para cada página o de {pie} para el sitio global.
Saludos.
El 12 de abril de 2009 6:03, Atis regist...@atis.es escribió:
Muy buenas,
Soy nueva en esta lista, pero he buscado entre los mensajes archivados, y
no
encuentro mensajes con la palabra plantillas.
Querría generar un archivo con la maquetación CSS y que sirviera de
plantilla, de forma que al modificarla, se actualicen los archivos basados
en ella.
He leído por Internet que se pueden usar plantillas usando php. Es este un
sistema bueno?
Por otro lado he trasteado con Dreamweaver 8, pero al modificar un archivo
basado en la plantilla, añadiéndole contenido individual, me aparece un
error indicando que los cambios no se guardarán, pues la zona está
bloqueada. Algo mal debo hacer al crear las zonas editables.
Saben por qué me sucede esto?
¿Cuál es la mejor forma de trabajar?
Muchísimas gracias por adelantado.
Un saludo.
Oiane
___
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] Fwd: OT: Sitio en prueba
Hola, Alejandra.
Para redimensionar las imágenes sin javascript, establece las dimensiones en
porcentajes. Ejemplo:
#fotoPhillidor {
width: 100%; /* relativo al contenedor */
height: auto;
}
Por supuesto, elimina la función javascript antes.
En cuanto a si usar diseño líquido o fijo, yo te recomiendo que no te
compliques. Haz un diseño de dimensiones fijas que se muestre bien en
1024x768px. Es preferible un diseño fijo que funcione frente a uno elástico
que no lo haga. Posteriormente estudia pasarlo a elástico.
Acostúmbrate a subir las pruebas a una zona separada del sitio final. Sólo
cuando estés segura de que funciona y el cliente te dé el visto bueno cambia
el sitio.
Mantén la relación de aspecto de las imágenes. Por ejemplo, #fotoPhillidor
tiene 300px (horizontal) x 241px (vertical) pero tú la has achatado
demasiado en el código fuente.
Sitúa la imagen de fondo fondochess1.jpg en la parte superior. Si la centras
verticalmente como la tienes ahora y aumentas el alto de la ventana,
enseguida se aprecia una línea horizontal de separación.
Tú has puesto:
background:url(fondochess1.jpg) center repeat-y;
lo que aplica el valor center a la posición horizontal y, como no has
establecido la posición vertical, se aplica el valor 50% o center para
ésta. Así que cámbialo para establecer la vertical en top:
background:url(fondochess1.jpg) center top repeat-y;
Saludos.
El 10 de abril de 2009 21:47, alejandra.j.go...@gmail.com escribió:
gracias chicos por sus aportes
hay alguna forma en que el diseño liquido pueda tener imagenes que se
redimensionen, sin js? y el texto, se puede redimensionar junto con la
estructura?
o tal vez me conviene hacer la misma estructura, pero fija?
otra cosa, por que yo pruebo el diseño en mi pc en distintos navegadores y
dimensiones y veo bien los menues y en otras pc´s, no?
Algo mas, la imagen de fondo es un .png, soy consciente de que es
pesadisima, hay alguna manera de disminuir su peso (es de un mega...ups!)?
Como lineamientos generales, y arreglando estos temas, como creen que voy
encaminada?
Disculpen si son muchas preguntas juntas.
Saludos y gracias
Alejandra
El 10 de abril de 2009 16:33, Reignerok reigne...@gmail.com escribió:
5. que problema me puede generar el tener una imagen .png de fondo?
ademas
representa el tema del sitio
Hola. Creo que el problema es el tiempo de carga. Acabo de entrar a la
página y el fondo tardó bastante en cargar.
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
___
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] Grillas (tablas) más anchas que lay out
Hola, Phaseolus.
La verdad es que no sé si entiendo el problema que planteas, por lo
que me es muy difícil aportar algo útil. Si lo colgaras en Internet
(te puedo dejar una cuenta de ftp) sería más sencillo analizarlo.
Dices que usas un sistema de rejilla para componer la página, que
queda envuelta en un div contenedor de anchura fija de 760px. En
grilla.css se refieren a este div como #contenedor (esto es, tiene
asignado un id) mientras que en el código que has puesto está asignado
a una clase (la clase .contenedor). Supongo que es una errata o bien
tú has modificado grilla.css.
Entiendo que colocas una tabla dentro del div contenedor y que esta
tabla a veces es más ancha que el tamaño fijo del contenedor, esto es,
760px. Cuando esto sucede, dices, la tabla se trunca o bien sobresale
del contenedor. En grilla.css #contenedor está establecido con
overflow:hidden, por lo que no entiendo que pueda sobresalir y sí que
se trunque.
Creo que pretendes que la tabla pueda aumentar de tamaño sin que se
vea afectada la rejilla dentro de la que se sitúa. Se me ocurre que
puedes posicionar la tabla en forma absoluta y jugar con los anchos
máximos y mínimos, pero entonces tendrías que conocer de antemano la
altura de la tabla para poder situar el pie a la distancia adecuada.
Pero, si coincide esto que he creído entender con lo que planteas,
entonces la pregunta es obvia: ¿por qué no colocas la tabla de
resultados fuera de la rejilla?. A fin de cuentas debajo de ella sólo
queda el pie.
Saludos.
El 13 de abril de 2009 21:08, Phaseolus phaseol...@yahoo.es escribió:
Hola, primero que todo, gracias a quienes me han dado ideas, pero estube un
tanto ocupado como para hacer un extracto de codigo para pegar, y al final
de cuentas, definimos con el cliente que las pantallas que tubieran grillas
más anchas, las dejaríamos una maqueta más acha y punto y fin, ya que no
disponemos de mucho tiempo para hacer las correcciones necesarias para que
sea más flexible.
Intenté las ideas propuestas pero no resultaron, además el sitio debo
hacerlo complatible con el asqueroso IE6.
En cuanto a la maqueta en sí, utilizo divs de ancho fijo de 760px para el
contenedor principal y divs al 100% para las distintas secciones (filas) y
otros divs de ancho fijo flotados a la izquierda de tamaños más pequeños
para crear columnas.
Los estilos son los siguientes, mas otros varios definidos por mi, pero que
no influyen en el problema.
@import url(reset-min.css); /* version reset de YUI */
@import url(fonts-min.css); /* version fonts de YUI */
@import url(grilla.css); /* clases escritas por un compatriota (
http://rgarcia.cl/simple/index.html) */
El layout se basa en grilla.css. Y las tablas (table) las tengo en
tablas.css:
/* estilos para las grillas de resultados */
table {
border-collapse: collapse;
border: 0; /* 1px solid #6588B5;*/
background: #fff;
margin:0;
width:100%;
}
caption {
text-align: center;
font: bold 18px arial, helvetica, sans-serif;
background: transparent;
padding:6px 4px 8px 0px;
color: #03476F;
text-transform: uppercase;
}
td, th {
border: 1px dotted #03476F;
padding: .4em;
color: #363636;
}
thead th, tfoot th {
font: bold 11px verdana, arial, helvetica, sans-serif;
border: 1px solid #5A7BAB;
border-bottom: 0;
text-align: center;
background: #5A7BAB;
color: #FF;
padding-top:3px;
line-height: 1.5em;
}
tbody th {
font: bold 11px verdana, arial, helvetica, sans-serif;
border: 1px solid #b9cae9;
text-align: left;
background: #b9cae9;
color: #333;
padding-top:3px;
}
tbody td a {
background: transparent;
text-decoration: none;
color: blue;
}
tbody td a:hover {
color: #666;
}
tbody th a {
font: normal 11px verdana, arial, helvetica, sans-serif;
background: transparent;
text-decoration: none;
font-weight:normal;
color: #363636;
}
tbody th, tbody td {
vertical-align: top;
text-align: left;
}
tfoot td {
border: 1px solid #03476F;
background: #4591AD;
padding-top:3px;
color: #FF;
}
.odd {
background: #d4e0ff;
}
En general el html es:
htmlhead ...imports de css /head
body
div class=contenedor
div class=caja id=header !-- header --/div
div class=caja id=tabsmenu !-- menu horizontal --/div
div class=caja id=formulario !-- formulario--/div div
class=caja id=botonera !-- botones formulario--/div
div class=caja id=mensajes !-- mensajes --/div
div class=caja id=tabsmenu
!-- grillas de resultados--
table cellspacing=0
thead
tr
th colspan=2Pago Solicitado/th
th colspan=3Pago Realizado/th
/tr
/thead
tbody
tr
thColumna A/th
thColumna B/th
thColumna D/th
thColumna E/th
/tr
/tbody
tbody
tr
tdDatos de la celda/td
tdDatos de la celda/td
tdDatos de la celda/td
tda href=#Modificar/anbsp;nbsp;a href=#Eliminar/a/td
/tr
tr class=odd
tdDatos de la celda/td
tdDatos de la celda/td
tdDatos de la celda/td
tda
Re: [Ovillo] Problema con css valoracion por estrellas en IE6
Hola, José Vicente.
El problema se debe a un conocido bug de Internet Explorer que ha hecho
desesperar a más de uno. Tiene que ver con el orden de apilamiento mediante
la propiedad z-index. IE sólo lo aplica correctamente cuando los elementos
comparten el mismo ancestro inmediato que está posicionado.
En tu caso, disminuyes el z-index de los a:hover con z-index:2. Ésto debería
situarlo por debajo de los enlaces anteriores ya que tienen z-index:20. El
problema está en la declaración position:absolute que has puesto en los li
que engloban a los enlaces. Esto hace que se genere un nuevo contexto de
apilamiento en cada opción del menú y que, por lo tanto, IE no compare entre
sí los z-index de los diferentes enlaces.
Una solución muy sencilla:
*Elimina la declaración position:absolute en la regla .star-rating li { }
*
De esta forma IE tomará como contexto de apilamiento la lista *
ul.star-rating* (que es común a todos los enlaces) y no cada elemento de
lista.
Saludos.
El 8 de abril de 2009 17:13, jose vicente ribera pellicer
joseran...@gmail.com escribió:
Hola, hemos realizado un sistema de valoracion de videos mediante
estrellas,
tal y como youtube y muchas otras webs implementan.
El resultado se puede observar en:
http://mimandote.com/videos/679-largo-viaje-humo-por-tus-pulmones
http://localhost:3000/videos/679-largo-viaje-humo-por-tus-pulmones
La cuestion es que el sistema de votaciones funciona perfectamente con
firefox y con safari, pero con explorer 6 y 7 tiene un fallo que
deseamos subsanar (en el 8 si funciona). Cuando pasamos por encima de
los remolinos cambian de color, pero al retroceder no pasan de color mas
oscuro a clarito (digamos que no desselecciona), no sabemos por que
puede ser (maldito explorer). Si a alguien se le ocurre alguna idea le
estaria muy agradecido.
Cuando el cursor pasa por encima de unno de los remolinos se realia una
llamada por AJAX:
ul class='star-rating'
.
.
.
%= link_to_remote( , :url = votar_video_ajax_path(video.id, i),
:method = :post, :html = { :class = star#{i}, :name = #{i} stars
out of 5 }) %
.
.
.
ul/
Este es el css que usamos:
.video-y-control {
margin-bottom:30px;
}
.bloque-video {
float:left;
}
.titulo-video-sin-imag, .titulo-video-sin-imag a {
color:#F92F1E;
}
.titulo-video-sin-imag {
font-size:16px;
padding-bottom:6px;
}
.opciones-video{
padding:30px 0 0 320px;
}
.opciones-video-show{
padding:30px 0 0 510px;
}
/* ESTILOS PARA LAS ESTRELLAS DE LOS VIDEOS */
.star-rating{
float:left;
list-style:none;
margin: 0;
padding:0;
width: 150px;
height: 30px;
position: relative;
background: url(/images/star_rating.gif) top left repeat-x; /*Aqui esta
toda la barra*/
}
.star-rating li {
padding:0;
margin:0;
float: left;
position: absolute;
height: 30px;
}
.star-rating li a {
display:block;
width:30px;
height: 30px;
text-decoration: none;
text-indent: -9000px;
z-index: 20;
position: absolute;
padding: 0px;
}
.star-rating li a:hover {
background: url(/images/star_rating.gif) left bottom;
z-index: 2;
left: 0px;
border:none;
}
.star-rating a.one-star, a.star1{
left: 0px;
}
.star-rating a.one-star:hover, a.star1:hover, .voto1 {
width:30px;
}
.star-rating a.two-stars, a.star2{
left:30px;
}
.star-rating a.two-stars:hover, a.star2:hover, .voto2 {
width: 60px;
}
.star-rating a.three-stars,a.star3{
left: 60px;
}
.star-rating a.three-stars:hover, a.star3:hover, .voto3 {
width: 90px;
}
.star-rating a.four-stars, a.star4{
left: 90px;
}
.star-rating a.four-stars:hover, a.star4:hover, .voto4 {
width: 120px;
}
.star-rating a.five-stars, a.star5{
left: 120px;
}
.star-rating a.five-stars:hover, a.star5:hover, .voto5 {
width: 150px;
}
.star-rating li.current-rating{
background: url(/images/star_rating.gif) left bottom;
position: absolute;
height: 30px;
display: block;
text-indent: -9000px;
z-index: 1;
}
.votos_rating {
margin: 0;
padding:0;
width: 150px;
height: 30px;
background: url(/images/star_rating.gif) top left repeat-x; /*Aqui
esta toda la barra*/
z-index: 3;
}
.voto1, .voto2, .voto3, .voto4, .voto5 {
background: url(/images/star_rating.gif) left bottom;
z-index: 2;
height: 30px;
left: 0px;
}
.info_rating {
/*float:left;*/
padding-top:11px;
margin-left:325px;
color:#C334BE;
font-size:16px;
}
___
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] Es malo importar muchas hojas de estilos CSS
Hola, Mauricio. Gracias por la prueba. Has usado Safari, que usa cuatro conexiones simultáneas. Deduzco que en los navegadores como IE7 que usan sólo dos (lo recomendado por la especificación HTTP1.1), la diferencia de tiempos será mayor. No sé si alguna vez aplicaré esta técnica, pero me parece interesante. Saludos. El 27 de marzo de 2009 5:44, Mauricio Dulce mauricio.du...@gmail.comescribió: Hola Daniel y Choan, aca muestro un ejemplo de tiempos de carga en una aplicación rails 1 ejemplo aplicando subdominios a carga de imagenes, hojas de estilos, javascript, 3 subdominios http://img49.imageshack.us/img49/5553/imagen3.png 2 ejemplo, mismo sitio con configuracion normal http://img520.imageshack.us/img520/3788/imagen3212931.png tanto el cache del browser como el de la aplicación fueron borrados y el vps reiniciado. El 26/03/2009, a las 21:27, Daniel Navarro escribió: Hola, Choan. Celebro que estemos de acuerdo en mantener las css separadas, al menos en la fase de desarrollo. Para acortar el tiempo de carga de las css, como ya habéis comentado, se puede adoptar la estrategia de unirlas en una sóla (una única petición al servidor) o usar el método de los alias que plantea Mauricio y cargarlas en paralelo. En principio, el segundo método debería de ser más rápido (lo siento, no es lo que dije en el anterior mensaje). Pero da igual... el tiempo que se gana por cualquiera de los dos métodos no es significativo. Lo que sí puede ser efectivo es aplicar el método de los dominios que cuenta Mauricio pero A TODOS LOS RECURSOS (en especial a las imágenes si hay muchas). En la dirección que te dejé en el mensaje anterior http://www.ajaxperformance.com/2006/12/18/circumventing-browser-connection-limits-for-fun-and-profit/ tienes un ejemplo en donde disminuye el tiempo de carga en un 40% cuando se realizan 6 accesos en paralelo al servidor en lugar de dos. Las temporizaciones las ha tomado la aplicación de rendimiento online que ofrece http://www.gomez.com/ Sin embargo, en las pruebas del equipo de yahoo que explican en http://yuiblog.com/blog/2007/04/11/performance-research-part-4/#what- if llegan a la conclusión de que subir el número de accesos simultáneos por este método puede ser perjudicial, pudiendo ser un número óptimo entre 2 y 4 conexiones en paralelo. Además, la resolución dns que se produce en la primera carga de una página del sitio también puede ser perjudicial, aunque quedarán cacheadas y apenas intervendrán en la temporización para las sucesivas páginas del sitio. Resumiendo: En mi opinión, mejor tener las css separadas. Ganaremos poco uniendo las css a menos que tengamos una cantidad realmente alta. Por otro lado, el método que plantea Mauricio de subdominios a la misma ip podría funcionar si se aplica sobre todo a las imágenes ya que son los recursos más usados. Sería interesante que Mauricio nos dijera el resultado de sus pruebas. Saludos P.D. Choan, no hace falta que vuelvas a repetir lo que has dicho en este hilo, sobre todo para los puntos en los que coincidimos. El 26 de marzo de 2009 18:12, Choan Gálvez choan.gal...@gmail.comescribió: Hola. On Mar 26, 2009, at 17:39 , Daniel Navarro wrote: Hola, preguntaste: Sí, hombre, si ya sabemos que funcionar funciona. Lo que yo me pregunto es si es más eficiente servir N ficheros de X tamaño desde N dominios que servir un fichero de N*X tamaño desde un dominio. Para distintos valores de N y X y eso. Evidentemente, un sólo fichero con todo aglutinado tardará menos, pero ¿concatenarás todos los recursos además de las css?. El límite de 2 conexiones se aplica también a las imágenes, por ejemplo. Cuando se amplía el número de conexiones paralelas, el tiempo de carga puede ser más que apreciable: http://www.ajaxperformance.com/2006/12/18/circumventing-browser-connection-limits-for-fun-and-profit/ No creo que merezca la pena unir las css en una sola por varios motivos: - Apenas se notará la diferencia de tiempo. - El navegador cachea las css por lo que las demás llamadas serán locales. - La separación de css permite gestionarlas de forma más efectiva. Por lo tanto, es preferible tener los ficheros de hojas de estilo separados frente a la pequeña ventaja de una inapreciable carga más rápida en la primera llamada al sitio. Sin embargo, la opción que plantea Mauricio sí que puede ser interesante. Particularmente, como en el proceso de diseño hay tantos parámetros a tener en cuenta (compatibilidad navegadores, optimización motores de búsqueda, etc.) prefiero reducirlos al mínimo, al menos al principio. Eso no quita para que se unan algunos archivos css en uno solo como, por ejemplo, los de jquery. Supongo que cada vez que escriba a la lista tendré que contar mi vida. Resumo mis mails anteriores en este
Re: [Ovillo] OT: Los invito a que visiten mi sitio D iseño Atsui.
Hola, puedes reducir el tiempo de carga de los marcadores sociales, aunque tengas sólo uno (facebook) si copias la imagen a tu servidor. Ahora tienes: a href=http://www.facebook.com/...; ...img src= http://b.static.ak.fbcdn.net/images/share/facebook_share_icon.gif?8:26981; alt= //a Cámbialo por: a href=http://www.facebook.com/...; ... img src=* ../imagenes/facebook.gif* alt=icono facebook //a Saludos El 29 de marzo de 2009 2:18, Diseño Atsui disenio.at...@gmail.comescribió: ¡Gracias por sus sugerencias Daniel Navarro y Fernando Gutierrez! Les comento que por el tema de los marcadores sociales cambié Bookmarkz por ShareThis, aunque a este último todavia no lo probe, pero por lo que estuve viendo este excelente, o al menos es muy llamativo por que despliega una pequeña ventana cuando uno hace click en el icono mostrando varios servicios como Reddit. Y por el tema de la ubicación del menú ya arregle ese asunto y no tuve que quitar el selector de estilo, pero no esta en el Index sino que tienen que ingresar a alguna de las páginas y recién ahí lo podrán ver. Y con respecto a hacer que el título del sitio LA WEB DE DISEÑO ATSUI sea un enlace al sitio creo que lo hare más adelante, por ahora me deja conforme. Pero no descarto la idea para nada. Y en la página de Acerca de deje el Lorem Ipsum porque no se me ocurría algo para poner, tengo ideas en mi cabeza pero tengo que pulir bien lo que pondré ahí así que prefiero por ahora dejarlo así. Se que queda algo desprolijo pero lo pienso arreglar. Y para finalizar te digo Fernando que ya cambié mi PC, por fin di un salto evolutivo. Ahora tengo un AMD Athlon 64 X2 Dual Core Processor 5000+ con 1 GB de ram y una placa de vídeo de 512 MB XFX. Bueno gente, eso es todo. Muchísimas gracias por sus consejos. Y si tienen más por ahí no duden en comentarmelo. Nos vemos. Saluda atentamente, Tadeo. ___ 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] Centrar contenedor de elementos absolutos y ancho dinámico
Hola, como te ha comentado StripTM, cuando no tengas B, asigna a body otra
clase, de forma que puedas diferenciar el diseño en las css.
Te he dejado un ejemplo en
http://webpelon.es/ovillo/2009-mes03-30-Conmuta_una_o_dos_columnas/index.html
Esencialmente, contiene el código siguiente:
HTML página CON B (DOS columnas)
div id=content
div id=A /div
div id=B /div
div id=C /div
/div !-- Fin #content --
HTML página SIN B (UNA columnas)
div id=content *class=una_columna*
div id=A /div
div id=B /div
div id=C /div
/div !-- Fin #content --
CSS
#content {
margin: 0 auto; /* centra el div contenedor (necesita width) */
width: 35em;
overflow: hidden; /* engloba a floats internos */
}
#A {
float: left;
width: 14em; /* mismo ancho que #C */
}
#B {
float: right;
width: 20em; /* ancho #A + ancho #B menor que ancho contenedor */
}
#C {
width: 14em; /* mismo ancho que #A */
}
/* Cuando #B no existe entonces #A y #C se ajustan al contenedor */
.una_columna #A, .una_columna #C {
width: auto;
}
Saludos
El 29 de marzo de 2009 20:19, Tae Sandoval Murgan taeci...@gmail.comescribió:
Saludos a todos:
He diseñado el wireframe de un sitio de la siguiente manera:
--
| ||
| A||
|---| B |
| ||
| C||
| ||
| ||
--
El contenido del elemento B tiene más importancia que el de C, por
ello y pensando en que las páginas podrían llegar a mostrarse sin los
archivos CSS, he escrito el HTML de la siguiente manera:
body
div id=content
div id=A/div
div id=B/div
div id=C/div
/div
/body
Ahora, la idea es que ese esquema permanezca centrado independiente de
la resolución de la pantalla, pero el asunto se complica debido a que
hay páginas en las que B no aparece, y además, en las que lo hace, no
siempre tiene el mismo ancho. Resolví el asunto de forma parcial
utilizando posicionamiento:
#content {
margin-left: auto;
margin-right: auto;
position: relative;
width: 35em; }
#A {
width: 35em; }
#B {
left: 35em;
margin: 0;
position: absolute;
top: 0; }
#C {
width: 35em;
position: relative;
top: 12em; }
Pero, al estar B posicionado de forma absoluta, se ubica con respecto
a content, ¡fuera de él!. Sí content tiene una propiedad min-width en
lugar de width, contiene a B, pero usa el ancho total del lienzo y
todo se va a la izquierda en lugar de ocupar el centro. Y he ahí la
cuestión.
He pensado en usar float, pero ello condicionaría la ubicación de los
elementos en el HTML, así que la opción que me queda es usar un CSS
extra especificando el ancho de content según el propio de B y si
existe o no y de sus dimensiones, pero si pudiera ahorrarmelo con un
par de instrucciones
en CSS, mejor que mejor :)
¿Alguna idea? Gracias de antemano.
___
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] Es malo importar muchas hojas de estilos CSS
Hola, preguntaste: Sí, hombre, si ya sabemos que funcionar funciona. Lo que yo me pregunto es si es más eficiente servir N ficheros de X tamaño desde N dominios que servir un fichero de N*X tamaño desde un dominio. Para distintos valores de N y X y eso. Evidentemente, un sólo fichero con todo aglutinado tardará menos, pero ¿concatenarás todos los recursos además de las css?. El límite de 2 conexiones se aplica también a las imágenes, por ejemplo. Cuando se amplía el número de conexiones paralelas, el tiempo de carga puede ser más que apreciable: http://www.ajaxperformance.com/2006/12/18/circumventing-browser-connection-limits-for-fun-and-profit/ No creo que merezca la pena unir las css en una sola por varios motivos: - Apenas se notará la diferencia de tiempo. - El navegador cachea las css por lo que las demás llamadas serán locales. - La separación de css permite gestionarlas de forma más efectiva. Por lo tanto, es preferible tener los ficheros de hojas de estilo separados frente a la pequeña ventaja de una inapreciable carga más rápida en la primera llamada al sitio. Sin embargo, la opción que plantea Mauricio sí que puede ser interesante. Particularmente, como en el proceso de diseño hay tantos parámetros a tener en cuenta (compatibilidad navegadores, optimización motores de búsqueda, etc.) prefiero reducirlos al mínimo, al menos al principio. Eso no quita para que se unan algunos archivos css en uno solo como, por ejemplo, los de jquery. Saludos. El 26 de marzo de 2009 16:23, Choan Gálvez choan.gal...@gmail.com escribió: On Mar 26, 2009, at 16:00 , Mauricio Dulce wrote: [...] El problema es que los navegadores modernos se auto-imponen la limitación de establecer sólo dos conexiones por dominio. Incluso si tus usuarios tienen conexiones a internet de banda ancha, tendrán que esperar hasta que todos los recursos web hayan sido descargados secuencialmente. [...] Utilizando el nombre de varios servidores de recursos engañamos al navegador para que abra varias conexiones a la vez incluso si los recursos se encuentran físicamente en el mismo servidor.El resultado es un envío más rápido de los recursos al navegador.. Después necesitas que tu servidor web acepte peticiones para los subdominios de los recursos web. [...] Pues si se a lo que te refieres pero a mi me a funcionado perfectamente en sitios que e hecho en rails con nginx, eso si en vps, no se como valla en los shared. Sí, hombre, si ya sabemos que funcionar funciona. Lo que yo me pregunto es si es más eficiente servir N ficheros de X tamaño desde N dominios que servir un fichero de N*X tamaño desde un dominio. Para distintos valores de N y X y eso. Si me dices que he de tener fe, como si no me dices nada. -- Choan Scriptia, JavaScript y buenas prácticas en español http://blog.scriptia.net/ ___ 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] Es malo importar muchas hojas de estilos CSS
Hola, Choan. Celebro que estemos de acuerdo en mantener las css separadas, al menos en la fase de desarrollo. Para acortar el tiempo de carga de las css, como ya habéis comentado, se puede adoptar la estrategia de unirlas en una sóla (una única petición al servidor) o usar el método de los alias que plantea Mauricio y cargarlas en paralelo. En principio, el segundo método debería de ser más rápido (lo siento, no es lo que dije en el anterior mensaje). Pero da igual... el tiempo que se gana por cualquiera de los dos métodos no es significativo. Lo que sí puede ser efectivo es aplicar el método de los dominios que cuenta Mauricio pero A TODOS LOS RECURSOS (en especial a las imágenes si hay muchas). En la dirección que te dejé en el mensaje anterior http://www.ajaxperformance.com/2006/12/18/circumventing-browser-connection-limits-for-fun-and-profit/ tienes un ejemplo en donde disminuye el tiempo de carga en un 40% cuando se realizan 6 accesos en paralelo al servidor en lugar de dos. Las temporizaciones las ha tomado la aplicación de rendimiento online que ofrece http://www.gomez.com/ Sin embargo, en las pruebas del equipo de yahoo que explican en http://yuiblog.com/blog/2007/04/11/performance-research-part-4/#what-if llegan a la conclusión de que subir el número de accesos simultáneos por este método puede ser perjudicial, pudiendo ser un número óptimo entre 2 y 4 conexiones en paralelo. Además, la resolución dns que se produce en la primera carga de una página del sitio también puede ser perjudicial, aunque quedarán cacheadas y apenas intervendrán en la temporización para las sucesivas páginas del sitio. Resumiendo: En mi opinión, mejor tener las css separadas. Ganaremos poco uniendo las css a menos que tengamos una cantidad realmente alta. Por otro lado, el método que plantea Mauricio de subdominios a la misma ip podría funcionar si se aplica sobre todo a las imágenes ya que son los recursos más usados. Sería interesante que Mauricio nos dijera el resultado de sus pruebas. Saludos P.D. Choan, no hace falta que vuelvas a repetir lo que has dicho en este hilo, sobre todo para los puntos en los que coincidimos. El 26 de marzo de 2009 18:12, Choan Gálvez choan.gal...@gmail.comescribió: Hola. On Mar 26, 2009, at 17:39 , Daniel Navarro wrote: Hola, preguntaste: Sí, hombre, si ya sabemos que funcionar funciona. Lo que yo me pregunto es si es más eficiente servir N ficheros de X tamaño desde N dominios que servir un fichero de N*X tamaño desde un dominio. Para distintos valores de N y X y eso. Evidentemente, un sólo fichero con todo aglutinado tardará menos, pero ¿concatenarás todos los recursos además de las css?. El límite de 2 conexiones se aplica también a las imágenes, por ejemplo. Cuando se amplía el número de conexiones paralelas, el tiempo de carga puede ser más que apreciable: http://www.ajaxperformance.com/2006/12/18/circumventing-browser-connection-limits-for-fun-and-profit/ No creo que merezca la pena unir las css en una sola por varios motivos: - Apenas se notará la diferencia de tiempo. - El navegador cachea las css por lo que las demás llamadas serán locales. - La separación de css permite gestionarlas de forma más efectiva. Por lo tanto, es preferible tener los ficheros de hojas de estilo separados frente a la pequeña ventaja de una inapreciable carga más rápida en la primera llamada al sitio. Sin embargo, la opción que plantea Mauricio sí que puede ser interesante. Particularmente, como en el proceso de diseño hay tantos parámetros a tener en cuenta (compatibilidad navegadores, optimización motores de búsqueda, etc.) prefiero reducirlos al mínimo, al menos al principio. Eso no quita para que se unan algunos archivos css en uno solo como, por ejemplo, los de jquery. Supongo que cada vez que escriba a la lista tendré que contar mi vida. Resumo mis mails anteriores en este mismo tema: Si el paquete de ficheros se usa siempre completo, concaténalos y sírvelos en una sola petición (pero sigue desarrollando por separado, que ahí sí que vas bien). Si no se usa todo el paquete, concatena lo que sea común y añade una referencia extra cuando corresponda. Ahora, cabe tener presente lo que comentaba antes... si tienes un fichero CSS para pintar un selector de fechas y el selector de fechas solo aparece en un par de páginas del sitio, es muy posible que no aporte nada incluirlo en el fichero concatenado. Utilizar un dominio distinto del de contenido para los recursos tiene sus ventajas por aquello de que los navegadores no (suelen) realizar más de dos peticiones en paralelo a un mismo dominio, pero dudo que servir cada fichero desde un dominio suponga una mejora (por aquello de ir resolviendo DNS + hacer la petición + la descarga para unos cuantos ficheros de tamaño chiquitín). Lo que yo me pregunto es si es más eficiente servir N ficheros de X tamaño desde N dominios que servir
Re: [Ovillo] fOT:? forma adecuada de organizar una web, de muchas paginas
Hola, Alejandra. Con un sistema gestor de contenidos vas a tener varias ventajas. Por un lado, te puedes beneficiar de módulos ya hechos que hacen el trabajo de programación por ti: gestión de news, formularios de contacto, etc. Por otro, gestionar muchas páginas se hace más sencillo ya que tú trabajas sobre plantillas que el sistema se encarga de trasladar de forma automática a cada página que se cree. Pero, sobre todo, te va a permitir independizarte de la inclusión de contenidos en el sitio, que quedará relegado a los editores. Tú harás el diseño web y, una vez acabado tu trabajo, éste consistirá en un mantenimiento técnico pero no en el esfuerzo rutinario de actualizar los contenidos. Saludos. El 22 de marzo de 2009 5:48, alejandra.j.go...@gmail.com escribió: Hola Ovilleros, estoy re diseñando el criticadisimo sitio (las criticas sirvieron, estamos en franco cambio :D ) www.clubajedrezphilidor.com.ar que recordaran fue muy visitado y criticado en su momento, y me surje una duda: ¿Cual es la mejor forma de organizar un sitio con muchas paginas? en este caso hay varias de torneos diversos, ademas de ranking, y debera haber tambien partidas que se puedan ver en movimiento, tambien un apartado de novedades, uno de auspiciantes, etc, etc, Que me aconsejan? ¿Hay algun documento que toque ese tema de forma actual? Quedo al aguardo de sus comentarios. Muchas Gracias Alejandra ___ 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] Intercambiar visualmente el orden de dos párrafos
Hola Ramón. Parece claro que el problema que planteas no se puede resolver sólo con css. Algo que podrías plantearte es el dejar el antetítulo antes del título (tanto visual como en el marcado) pero colocar un enlace al antetítulo justo después del título. De esta forma, aunque el lector salte de título en título, cuando decida leer una noticia en concreto siempre tendrá la posibilidad de acceder al antetítulo. Te he dejado un ejemplo en http://webpelon.es/ovillo/2009-mes03-18-Acceso_al_antetitulo/ Saludos El día 12 de marzo de 2009 0:47, Ramón Corominas lis...@ramoncorominas.com escribió: Me debo explicar fatal, porque enseguida se desvía el hilo hacia cosas que no son el meollo del problema técnico, pero en fin, para que quede claro... Martin Etxauri escribió: personalemente he intentado antes algo así y... creo que es imposible ;) Eso creo yo, pero me gustaría asegurarme guiño pero en este caso hay algo que no entiendo: ¿si el ante título es ante, porque no ponerlo antes del el título también en el código? La razón es la semántica. El antetítulo, por muy ante que sea, pertenece al contenido principal, a la noticia en sí; es una *aclaración* de lo que la noticia expresa, y sólo debe aparecer antes visualmente porque se empeñan los editores, pero sigue siendo parte de la noticia. Visualmente no hay demasiado problema en identificar este antetítulo como una parte integrante de la noticia en sí (está cerca del título, separada de la interfaz, dentro del mismo espacio visual, etc.); pero para un usuario de lector de pantalla, que puede navegar yendo directamente a los encabezados, podría quedar fuera de la noticia. El usuario de JAWS, por ejemplo, iría al encabezado de sección de nivel 1, y a continuación NO se leería este antetítulo, sino el contenido principal. El antetítulo quedaría oculto a este usuario, salvo que navegue toda la página de forma lineal, cosa que se considera un problema grave de usabilidad. Victor Hugo Arias Valencia escribió: Si es un ante-titulo puede ser un H3, y el titulo de la noticia un H2, y pues me parece lógico lo que dice martin, si va antes, pues ponerlo antes de una vez... El contenido de la página ES esa noticia, y lo correcto semánticamente es que su h1 sea el título de la noticia (que será único, sí). Además, los encabezados, por definición, DEBEN encabezar (describir) contenido, no se deben usar para crear efectos visuales o de otro tipo. No veo que tenga ningún sentido semántico colocar un h3 delante de un h2 sin ningún contenido intermedio. ¿Qué contenido describe el h3? Recuerdo la especificación de HTML donde se definen los encabezados [1]: A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically. Traducción: Un elemento de encabezado describe brevemente el tema de la sección a la que introduce. La información de los encabezados puede ser usada por los agentes de usuario, por ejemplo, para construir una tabla de contenidos del documento de forma automática. De todos modos, repito que lo de menos es que el orden de los encabezados deba ser uno u otro, el tema aquí es si se puede o no se puede alterar el orden visual de las dos filas que representan el h1 y el p. Hernán Beati - SaberWeb.com.ar escribió: El orden de los factores no altera el producto... los encabezados no son enumeraciones de una lista ordenada, son señales de lo que es más o menos importante dentro de un documento. Quizás el documento empiece con cosas no demasiado importantes. No contesto al tema de la otra estructura que propones porque ya he explicado que en este caso el h1 es el título principal del documento (no hay varias noticias en la misma página). Pero sí quiero reiterar que los encabezados no son sólo señales. Son elementos que introducen contenidos y que deben describir los contenidos que introducen. Colocar un h3 con un h2 detrás, sin contenido intermedio, es un uso inadecuado según la especificación. Y si suponemos que el h3 encabeza al h2, se está alterando el orden de la jerarquía, lo que va en contra de las WCAG 1.0 y, sencillamente, de la pura lógica. En todo caso, también me gustaría que os pusierais en la piel de un usuario de un lector de pantalla como JAWS. Inicialmente puede pulsar la tecla 1 para ir al primer encabezado de nivel 1 de la página. Leerá el título de la noticia, y a continuación podrá pulsar Insert + flecha abajo para continuar leyendo el resto del contenido. ¿Por qué iba a intentar acceder a encabezados previos de niveles inferiores, si ya ha encontrado lo que estaba buscando (el contenido principal)? ¿Debería este usuario pulsar 2 para ir al siguiente encabezado de nivel 2? ¿Con qué se encontraría? Desde luego no se encontraría con nada que estuviera *antes* del h1, salvo que no hubiera más h2 en toda la página y tuviera que volver al
Re: [Ovillo] Intercambiar visualmente el orden de dos párrafos
Hola, Ramón. Puedes usar position: absolute para situar el segundo elemento encima del primero y javascript para calcular la altura de éste y así poder desplazar el primer elemento más abajo en esa misma cantidad. Lo podrías implementar con lenguaje del lado del servidor, pero tendrías el problema del zoom de sólo texto o el redimensionado de la ventana (en el caso de que las dimensiones de los contenedores de las noticias varíen). En ese caso, habría que hacer una nueva llamada al servidor para que se mostrara bien el diseño. Con Javascript tienes el mismo problema, pero basta con refrescar la página con F5. Aquí tienes una solución javascript: http://webpelon.es/ovillo/2009-mes03-17-Intercambiar_visualmente_orden_elementos/ Este es un ejemplo con dos divs con ids, pero en tu caso, con varios titulares, habría que modificar el código, aunque se puede hacer igualmente. Si te sigue interesando, dímelo y te lo preparo para tu código. Saludos. El 12 de marzo de 2009 0:47, Ramón Corominas lis...@ramoncorominas.comescribió: Me debo explicar fatal, porque enseguida se desvía el hilo hacia cosas que no son el meollo del problema técnico, pero en fin, para que quede claro... Martin Etxauri escribió: personalemente he intentado antes algo así y... creo que es imposible ;) Eso creo yo, pero me gustaría asegurarme guiño pero en este caso hay algo que no entiendo: ¿si el ante título es ante, porque no ponerlo antes del el título también en el código? La razón es la semántica. El antetítulo, por muy ante que sea, pertenece al contenido principal, a la noticia en sí; es una *aclaración* de lo que la noticia expresa, y sólo debe aparecer antes visualmente porque se empeñan los editores, pero sigue siendo parte de la noticia. Visualmente no hay demasiado problema en identificar este antetítulo como una parte integrante de la noticia en sí (está cerca del título, separada de la interfaz, dentro del mismo espacio visual, etc.); pero para un usuario de lector de pantalla, que puede navegar yendo directamente a los encabezados, podría quedar fuera de la noticia. El usuario de JAWS, por ejemplo, iría al encabezado de sección de nivel 1, y a continuación NO se leería este antetítulo, sino el contenido principal. El antetítulo quedaría oculto a este usuario, salvo que navegue toda la página de forma lineal, cosa que se considera un problema grave de usabilidad. Victor Hugo Arias Valencia escribió: Si es un ante-titulo puede ser un H3, y el titulo de la noticia un H2, y pues me parece lógico lo que dice martin, si va antes, pues ponerlo antes de una vez... El contenido de la página ES esa noticia, y lo correcto semánticamente es que su h1 sea el título de la noticia (que será único, sí). Además, los encabezados, por definición, DEBEN encabezar (describir) contenido, no se deben usar para crear efectos visuales o de otro tipo. No veo que tenga ningún sentido semántico colocar un h3 delante de un h2 sin ningún contenido intermedio. ¿Qué contenido describe el h3? Recuerdo la especificación de HTML donde se definen los encabezados [1]: A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically. Traducción: Un elemento de encabezado describe brevemente el tema de la sección a la que introduce. La información de los encabezados puede ser usada por los agentes de usuario, por ejemplo, para construir una tabla de contenidos del documento de forma automática. De todos modos, repito que lo de menos es que el orden de los encabezados deba ser uno u otro, el tema aquí es si se puede o no se puede alterar el orden visual de las dos filas que representan el h1 y el p. Hernán Beati - SaberWeb.com.ar escribió: El orden de los factores no altera el producto... los encabezados no son enumeraciones de una lista ordenada, son señales de lo que es más o menos importante dentro de un documento. Quizás el documento empiece con cosas no demasiado importantes. No contesto al tema de la otra estructura que propones porque ya he explicado que en este caso el h1 es el título principal del documento (no hay varias noticias en la misma página). Pero sí quiero reiterar que los encabezados no son sólo señales. Son elementos que introducen contenidos y que deben describir los contenidos que introducen. Colocar un h3 con un h2 detrás, sin contenido intermedio, es un uso inadecuado según la especificación. Y si suponemos que el h3 encabeza al h2, se está alterando el orden de la jerarquía, lo que va en contra de las WCAG 1.0 y, sencillamente, de la pura lógica. En todo caso, también me gustaría que os pusierais en la piel de un usuario de un lector de pantalla como JAWS. Inicialmente puede pulsar la tecla 1 para ir al primer encabezado de nivel 1 de la página. Leerá el título de la noticia, y a continuación podrá pulsar Insert +
Re: [Ovillo] Intercambiar visualmente el orden de dos párrafos
Hola, Tei. Gracias por la información, pero ¿has probado a refrescar la página?. En mi sistema Windows Vista con Chrome e Iron portable se muestra correctamente. Saludos. El 17 de marzo de 2009 19:14, Tei oscar.vi...@gmail.com escribió: 2009/3/17 Daniel Navarro webpe...@gmail.com: ... Aquí tienes una solución javascript: http://webpelon.es/ovillo/2009-mes03-17-Intercambiar_visualmente_orden_elementos/ En chrome (motor WebKit) falla: el segundo parrafo esta media canada mas abajo. -- -- ℱ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 ___ 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] Listas vs tablas
Hola Asela, Hoy en día el uso de tablas se debe de relegar a la presentación de datos tabulares y no, como se hacía antes, para posicionar los diferentes elementos de la página. Tu carta, dejando de lado los diferentes apartados y categorías, en algún momento serán datos tabulares y, por lo tanto, será correcto representarlos mediante una tabla. Ejemplo: div id=vinos div id=tintos table .../table /div div id=rosados table .../table /div ... /div Eso no quita que también puedas representar esos datos sin tablas, pero me gustaría transmitirte que las tablas no son tabú, siempre que cumplan con su función, claro. Saludos. El día 17 de marzo de 2009 23:03, Asela Ortiz de Murua aomu...@gmail.com escribió: Hola Me ha surgido una duda semántica a la hora de elegir listas o tablas para el menú de un restaurante. Se trata de incluir listas de vinos con sus precios, así como los platos de la carta. Inicialmente pensaba hacerlo con listas desordenandas. Luego he pensado utilizar listas con definición para las distintas variedades (carta, carta de vinos, puros, etc). Lo que he visto por ahí son tablas. Al final, después de darle mil vueltas, me he atascado y no se cómo hacerlo bien. ¿Alguna sugerencia? Gracias Un saludo Asela Ortiz de Murua ___ 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] etiqueta b o strong, cual es la indicada
Hola, Me gustaría aclarar algunos conceptos. Los elementos desaprobados (deprecated), al contrario de los obsoletos (obsolete), deben de seguir teniendo soporte por motivos de compatibilidad. Sin embargo, la etiqueta b no está ni obsoleta ni desaprobada en la especificación html 4.01. Simplemente, se desaconseja su uso en favor de las hojas de estilo ya que la información no semántica de si algo está o no en negritas no debería de estar en el documento html, sino en las css. El uso de la etiqueta b en los ejemplos que has visto no se hace como sustituto de strong, sino. como te explica Carlos Zuniga, porque es más corto que span. De todas formas, incluir etiquetas sin contenido semántico no se considera buena práctica. Saludos. Definición de desaprobado y de obsoleto. Obligación de soporte a los desaprobados. http://html.conclase.net/w3c/html401-es/conform.html#deprecated Lista de elementos desaprobados y obsoletos. b no está entre ellos: http://html.conclase.net/w3c/html401-es/appendix/changes.html#h-A.3.1.2 Sobre el uso de b http://html.conclase.net/w3c/html401-es/present/graphics.html#h-15.2 2009/3/15 Jonathan C. lockhe...@gmail.com buenas, hace un rato estaba examinando un poco los ejemplos de una de las fuentes por excelencia para tecnicas css, cssplay, siempre he notado que a nichols le encanta usar la etiqueta b, practicamente la utiliza para todo, desde bordear esquinas con css, hasta lo que se le ocurra, pero ahora me viene una pregunta. cual es la diferencia principal entre b y strong? porque para mi son la misma cosa, ambas muestran el mismo efecto visual por lo que he notado. digamos, usa b porque es mas corto?, costumbre?, o solo le gusta para en teoria hacer mas liviano el codigo? no se, quizas tengo los conceptos un tanto errados, pero crei leer alguna vez que esta etiqueta b ya esta en la lista de las obsoletas y que se recomienda el uso de strong, aunque se que tienen algo que ver con la semantica del documento. que me dicen los demas colegas de la lista. saludos a todos! -- Jonathan C. lockhe...@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
Re: [Ovillo] etiqueta b o strong, cual es la indicada
Hola Carlos, Supongo que te refieres a la propiedad content aplicada con los pseudoelementos :before y :after. Que yo sepa, esto no modifica el árbol DOM. O sea, que añaden contenido a un elemento, pero no elementos hijos como te planteas. Una solución muy utilizada para insertar estas etiquetas es mediante javascript, de forma que el código original se mantenga limpio, aunque se ensucie el generado. El código generado lo puedes ver, por ejemplo, con el complemento Web Developer toolbar de Firefox (View Source View Generated Source). Mira el código fuente de esta página, tanto el original como el generado: http://www.html.it/articoli/niftycube/nifty1.html Saludos. El 15 de marzo de 2009 7:01, Carlos Zuniga carlos@gmail.com escribió: Si he visto que la suelen usar para redondear esquinas o similares. Básicamente la colocan para tener algo donde aplicar el css y utilizan b (por no escribir span). Que otra opción podría usarse que vaya más acorde a la coherencia?. Se me ocurre utilizar :before y :after pero muchas de esas técnicas necesitan varias etiquetas. Se puede aplicar varios :before en un elemento? algo como #cosa:before:before ? Que otras alternativas existen? Saludos 2009/3/14 Ignacio Ricci ignacio.ri...@gmail.com: La etiqueta B es 'deprecated' porque toma su nombre del término bold, o negrita. Esta definiendo el estilo del elemento en vez de destacar su función, que es de dar importancia como es el caso de strong. Y como bien se sabe, las hojas de estilo nacieron para separar el contenido del diseño. Por lo tanto tener etiquetas que estén nombradas por como se ven, no es muy coherente. Es el mismo caso de i (italica) y em, emphasis. On Sat, Mar 14, 2009 at 11:56 PM, Jonathan C. lockhe...@gmail.com wrote: buenas, hace un rato estaba examinando un poco los ejemplos de una de las fuentes por excelencia para tecnicas css, cssplay, siempre he notado que a nichols le encanta usar la etiqueta b, practicamente la utiliza para todo, desde bordear esquinas con css, hasta lo que se le ocurra, pero ahora me viene una pregunta. cual es la diferencia principal entre b y strong? porque para mi son la misma cosa, ambas muestran el mismo efecto visual por lo que he notado. digamos, usa b porque es mas corto?, costumbre?, o solo le gusta para en teoria hacer mas liviano el codigo? no se, quizas tengo los conceptos un tanto errados, pero crei leer alguna vez que esta etiqueta b ya esta en la lista de las obsoletas y que se recomienda el uso de strong, aunque se que tienen algo que ver con la semantica del documento. que me dicen los demas colegas de la lista. saludos a todos! -- Jonathan C. lockhe...@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 -- ↓ 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 -- Linux Registered User # 386081 A menudo unas pocas horas de Prueba y error podrán ahorrarte minutos de leer manuales. ___ 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] Urgente y desesperado
Hola,
En http://webpelon.net78.net/ovillo/2009-mes03-10-option_mayor_que_select/he
puesto una prueba sin javascript . El problema es que no muestra la
flecha que despliega las opciones (aunque éstas sí se despliegan al hacer
clic, tanto en IE5 como IE6). Tal y como está lo veo de poca utilidad pero
creo que se puede integrar en una solución javascript mucho más sencilla que
la que usas ahora, similar a la indicada en
http://www.htmlforums.com/archive/index.php/t-66108.html, pero que tiene el
problema de ensanchar el select cuando se muestran las opciones (que es lo
que pretendo evitar).
HTML
div
select
option .
...
/select
/div
CSS. Excepto para IE (estilos.css)
form select {
width: 130px; /* modificado en ie.css para que no recorte los option */
}
CSS. Sólo para Internet Explorer (ie.css):
/* Caja que envuelve al select para recortarlo */
form div {
width: 130px; /* parte visible del select */
overflow: hidden; /* recorta */
}
form select {
width: 400px; /* mayor anchura para los option */
}
Saludos.
2009/3/10 Nesta Guerrero Pancorbo nguerr...@emergya.es
Haber koleguis miren esto:
http://www.hedgerwow.com/360/dhtml/ui_select_with_fixed_width/bk/demo.php
quiero hacer lo mismo, utilizo el ja drop y los explorer no se comen el
fixed
del select, explico este bug del IE por si alguien no lo sabe, tu pones un
select a 100px pero las opciones son mas grandes, al desplegar en nuestro
firefox u otro navegador normal se te despliega a la mas grande
automaticamente, en los IE no, se despliega al tamaño del select cortando
el
ption, me podéis exar una manita?
thnx!
___
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] fuente pixelada en IE7
Hola, IE7 usa cleartype para mostrar las fuentes de forma más legible. Prueba a desactivarlo desmarcando la casilla correspondiente en Opciones de Internet (pestaña) Opciones Avanzadas (hay que cerrar y volver a abrir IE) Saludos. 2009/3/9, sebastian garcia-valenciano sebast...@garcia-valenciano.net: Hola, me esta sucediendo una cosa extraña en IE7: Ciertos textos en links los veo pixelados como podeis ver en esta imagen: http://www.imagenonline.com/imagenes/107/a107360.gif Es como si la fuente no existiese para IE7pero sin embargo en firefox, opera, chrome se ve bien... a alguien le ha sucedido al parecido? font-family: 'lucida grande',tahoma,verdana,arial,sans-serif; color:#2b2b2b; font-size:16px; (cada uno está en diferentes divs, no sé... parece como si IE no reconciera la fuente en el segundo enlace) saludos gracias sebas ___ 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] fuente pixelada en IE7
Puedes probar a añadir esa funcionalidad sólo con css, sin js (aunque
seguramente haga falta para ie6). Sería interesante que indicaras un enlace
a un ejemplo.
Saludos.
2009/3/9 sebastian garcia-valenciano sebast...@garcia-valenciano.net
Prueba a desactivarlo desmarcando la casilla correspondiente en
Opciones de Internet (pestaña) Opciones Avanzadas
Al final dí con el foco del problema, -aunque de momento no con la
solución.
Me di cuenta que los textos pixelados son exactamente aquellos que son
mostrados/ocultados con JavaScript mediante un link mostrar/ocultar. Si
quito el JS siguiente, el texto se ve perfecto... sigo investigando
script type=text/javascript
$(document).ready(function(){
//inicialmente escondo todas las respuestas
$(.responses).hide();
//collapse all messages
$(.ocultar).click(function(){
$(this).next(.responses).slideUp(500)
return false;
});
//collapse all messages
$(.mostrar).click(function(){
$(this).parent().children(.responses).show(500)
return false;
});
});
/script
saludos
gracias
sebas
___
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
Lo que hace que el servidor sirva las páginas *.htm o *.html como text/html es la configuración del servidor. No tiene nada que ver con la declaración xml al principio del documento. Te propongo una prueba. Abre una página que tengas en tu ordenador con Firefox. Ve a Herramientas Información de la página y mira lo que dice en Tipo; verás que indica text/html. Ahora cámbiale la extensión de *.htm a *.xht (o *.xhtml) y vuélvela a abrir con Firefox. Si tienes suerte y tu código es xhtml correcto, visualizarás la página. Vuelve a mirar en Información de la página. ¿Qué indica ahora en Tipo?. Por último, intenta abrir este mismo documento con Internet Explorer ¡tachán! ¡No lo puedes ver!. Por cierto, los navegadores no hacen caso al content-type indicado en la etiqueta meta (aunque sí a la codificación, pero sólo si ésta no ha sido indicada antes por el servidor web). Las especificaciones xhtml 1.0: http://www.w3.org/TR/xhtml1/ (en especial, el apéndice C.) http://www.sidar.org/recur/desdi/traduc/es/xhtml/xhtml11.htm (traducción al castellano) Tipo de contenido para xhtml: http://www.w3.org/TR/xhtml-media-types/ Saludos El 9 de marzo de 2009 17:32, Alberto García albe...@katiuskas.comescribió: Gracias por la respuesta, pero lo que no entiendo es por qué el servidor la sirve como text/html. Entiendo que se omite la declaración xml para evitar que ciertos navegadores renderizen en quirks, pero ¿es esto lo que hace que el servidor las sirva como text/html? Alberto García ** Tei escribió: 2009/3/9 Alberto García albe...@katiuskas.com: Daniel Navarro escribió: [...]Muchos ni siquiera saben nada sobre la cabecera http, de que su flamante código XHTML (con X) es interpretado como HTML (sin X) por los navegadores ya que así se lo marca el servidor web y que incluso puede que no funcione si se trata como xhtml.[...] Hola Daniel, yo soy uno de los que no saben, ¿Que significa que los navegadores interpretan como HTML en lugar de XHTML porque lo marca el servidor? Nunca había oído esto antes y no en encontrado referencias en mis manuales ni en la red. La idea es que el tipo mime de XHTML no se puede usar, porque no la acepta IE, entonces hay que servir XHTML como text/plain. Asi que el navegador estaria interpretando el fichero XHTML no como XHTML, sino como otro documento HTML mal formado ... pero mal formado de una manera particular. El truco en mantener la cordura, es el hablar un XHTML que es a la vez buen HTML. Y declarar que estamos usando XHTML en el doctype. Que es como fingir que aqui no ha pasado nada. Esta pagina, por ejemplo, me la sirve el servidor como text/html, sin embargo no es un HTML, sino XHTML. Mi navegador web, Firefox 3 Linux se entiende suficientemente bien para usar el modo de render Standar compliant mode, en lugar del temido Quirks Mode, que es el modo para la tag soup. Asi que algo han debido de hacer bien, estos señores de SIDAR. http://www.sidar.org/recur/desdi/traduc/es/xhtml/xhtml-basic.html ___ 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] fuente pixelada en IE7
Gracias por compartir tu información (aunque no sea css).
Saludos.
El 9 de marzo de 2009 15:15, sebastian garcia-valenciano
sebast...@garcia-valenciano.net escribió:
me autorespondo, para que queda registrada la solución en la lista:
En IE7 falla la renderización de texto cuando se muestra/oculta con jQuery
ciertos elementos, el texto aparece pixelado.
solución: Aplicar:this.style.removeAttribute('filter');
Ejemplo:
jQuery.fn.fadeIn = function(speed, callback) {
return this.animate({opacity: 'show'}, speed, function() {
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};
Más info en:
http://malsup.com/jquery/fadetest.html
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
___
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 acerca de la layout de mi blog
Hola, Pedro Corchero. Creo que algunos (o muchos) están entendiendo tus mensajes como un intento de posicionar mejor tu sitio en los buscadores. Te concedo el beneficio de la duda. Me gustaría darte mi opinión a lo que preguntas, pero no entiendo a qué te refieres cuando hablas de estructura ¿la estructura del documento html?. O puede te estés refiriendo a cómo organizas y presentas el contenido y si hacerlo o no en forma de blog ¿?. Tú dirás. Yo encuentro tu sitio interesante y, lo que más valoro es la clasificación por categorías. Conocer las últimas entradas está muy bien para los que acceden de forma habitual. Para los demás, es más importante poder encontrar alguna información de su interés entre todas las entradas. Por eso, quizás podrías resaltar más el apartado de secciones y situarlo antes que el de últimas entradas y comentarios recientes que, por otro lado, los tienes repetidos en el pie. Saludos. El 6 de marzo de 2009 22:56, dreagnout dreagn...@yahoo.es escribió: 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 ___ 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 Herrán. Es importante la planificación previa antes de diseñar un sitio. Para ello tendrás que obtener toda la información que puedas del cliente (objetivos, colores y logo, secciones, etc.). Antes de escribir código tienes que tener un prototipo de la página (imagen, no html), aunque sea un simple boceto en papel, como ha apuntado Andres Karp. Luego analiza este boceto para descubrir cuál es la estructura inherente que tendrás que plasmar en html (encabezado arriba, luego menú horizontal, luego breadcrums, etc.). Crea el documento html con esta estructura y, después, añades el estilo con css para que tu página se parezca lo más posible al boceto (por lo que cuentas, tú ya lo haces así: primero html, luego css). Pero, si te tengo que dar alguna recomendación es esta: apréndete bien la teoría. Te ahorrarás muchos quebraderos de cabeza y sabrás cuando un determinado comportamiento es particular de un navegador o es conforme a los estándares, aunque éste pueda parecer desconcertante. Me sorprende que conocimientos que deberían de ser básicos como la conmutación doctype o los detalles sobre la combinación de márgenes, por poner dos ejemplos, a veces los desconocen diseñadores con muchos años de profesión. Muchos ni siquiera saben nada sobre la cabecera http, de que su flamante código XHTML (con X) es interpretado como HTML (sin X) por los navegadores ya que así se lo marca el servidor web y que incluso puede que no funcione si se trata como xhtml. Profundiza en la teoría; darás un salto cualitativo y te evitarás muchas frustraciones. También es importante el inglés para encontrar información, como ha comentado Daniel Rodríguez. Respecto a la propiedad float, tienes el comportamiento básico en http://www.librosweb.es/css/capitulo5/posicionamiento_float.html http://www.librosweb.es/css_avanzado/capitulo1/limpiar_floats.html Luego tienes los numerosos bugs asociados con los float, sobre todo con IE (margen doble, texto que desaparece, hueco de 3px, etc.) y cómo solucionarlos. Nota. Aunque estas páginas no dicen nada al respecto, es importante que indiques un ancho a todo elemento que quieras flotar para evitar efectos no deseados. La propiedad float es un recurso muy utilizado para posicionar elementos. Te la encontrarás en cualquier sitios: columnas, menús, formularios, etc. A veces existe más de una solución para realizar algo pero generalmente la solución con floats es más elegante o incluye menos marcado semántico. Entiendo perfectamente tu duda sobre cuando usar y cuando no floats, porque seguramente estés pensando en el sentido original, que fue el permitir que el texto fluyera alrededor de una imagen. Pero con la llegada de CSS y la propiedad float, que se puede aplicar a cualquier elemento, se amplió su aplicación práctica y se empezó a usar, por ejemplo, para hacer columnas o para que los elementos de una lista se apilaran uno junto a otro en disposición horizontal. Despejarás tus dudas si estudias algún código que usa floats e intentas hacer algo parecido sin su uso. Recuerda que si no entiendes porqué se usa floats en un determinado código puedes mandar un mensaje a esta lista y así aprendemos analizándolo. Finalmente, recomendarte la especificación CSS2.1 original en el W3C o su traducción: http://www.w3.org/Style/css2-updates/translations.html Saludos y ánimo. 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
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. 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] 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
Re: [Ovillo] sustituto para el br style=clear: both;
¿Raro?. Es un diseño a tres columnas con las columnas laterales de ancho fijo, sacado de una plantilla. Si haces un diseño en porcentajes y no incluyes márgenes al elemento con overflow:hidden, entonces no se reproducirá este problema, pero será otro diseño con otras características, que podrá valer o no. Saludos El 5 de marzo de 2009 2:23, Ignacio Ricci ignacio.ri...@gmail.comescribió: Bueno pero ese es un armado raro. Para mi eso serían 3 floats con anchos en porcentajes. 2009/3/4 Daniel Navarro webpe...@gmail.com Perdona por no explicarme bien: hay un elemento con floats en su interior, al que se le aplica overflow:hidden para que se extienda y englobe a estos floats interiores. Pero, a su vez, al lado de este elemento también hay floats (las barras laterales en un diseño a tres columnas). Lo mejor es que lo veas en acción. He colgado el ejemplo en: http://webpelon.net78.net/ovillo/2009-mes03-04-overflow_hidden_opera/index.html Nota: no hagas caso al código javascript que incluye este proveedor al final de los documentos. Saludos El 4 de marzo de 2009 21:16, Ignacio Ricci ignacio.ri...@gmail.com escribió: No entiendo bien en caso.Tenes 2 elementos flotados adyacentes y uno con overflow hidden? En ese caso no lo necesitarias porque el elemento padre de los floats tambien esta flotado y no se produce el bug,. 2009/3/4 Daniel Navarro webpe...@gmail.com He tenido problemas en algunos navegadores con esta solución y no me ha servido. Cuando se establece overflow:hidden a un elemento con floats a su lado, Opera calcula mal los márgenes (también Firefox bajo Linux). Si no se le aplica overflow:hidden, Opera calcula los márgenes sin tener en cuenta los floats laterales, pero cuando se establece overflow:hidden los márgenes los calcula respecto de los floats, destrozando el diseño. Mira el mensaje que envié a esta misma lista de Ovillo: http://bidwell.textdrive.com/pipermail/ovillo/2009-February/014880.html Puedes copiar el código y comprobar lo que digo. Saludos. 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 -- ↓ 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
Re: [Ovillo] sustituto para el br style=clear: both;
He tenido problemas en algunos navegadores con esta solución y no me ha servido. Cuando se establece overflow:hidden a un elemento con floats a su lado, Opera calcula mal los márgenes (también Firefox bajo Linux). Si no se le aplica overflow:hidden, Opera calcula los márgenes sin tener en cuenta los floats laterales, pero cuando se establece overflow:hidden los márgenes los calcula respecto de los floats, destrozando el diseño. Mira el mensaje que envié a esta misma lista de Ovillo: http://bidwell.textdrive.com/pipermail/ovillo/2009-February/014880.html Puedes copiar el código y comprobar lo que digo. Saludos. 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] sustituto para el br style=clear: both;
Perdona por no explicarme bien: hay un elemento con floats en su interior, al que se le aplica overflow:hidden para que se extienda y englobe a estos floats interiores. Pero, a su vez, al lado de este elemento también hay floats (las barras laterales en un diseño a tres columnas). Lo mejor es que lo veas en acción. He colgado el ejemplo en: http://webpelon.net78.net/ovillo/2009-mes03-04-overflow_hidden_opera/index.html Nota: no hagas caso al código javascript que incluye este proveedor al final de los documentos. Saludos El 4 de marzo de 2009 21:16, Ignacio Ricci ignacio.ri...@gmail.comescribió: No entiendo bien en caso.Tenes 2 elementos flotados adyacentes y uno con overflow hidden? En ese caso no lo necesitarias porque el elemento padre de los floats tambien esta flotado y no se produce el bug,. 2009/3/4 Daniel Navarro webpe...@gmail.com He tenido problemas en algunos navegadores con esta solución y no me ha servido. Cuando se establece overflow:hidden a un elemento con floats a su lado, Opera calcula mal los márgenes (también Firefox bajo Linux). Si no se le aplica overflow:hidden, Opera calcula los márgenes sin tener en cuenta los floats laterales, pero cuando se establece overflow:hidden los márgenes los calcula respecto de los floats, destrozando el diseño. Mira el mensaje que envié a esta misma lista de Ovillo: http://bidwell.textdrive.com/pipermail/ovillo/2009-February/014880.html Puedes copiar el código y comprobar lo que digo. Saludos. 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 -- ↓ 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
Re: [Ovillo] CSS Avanzado. Partes.
ORGANIZAR CSS
Mientras esperas a que te conteste dreagnout, te doy mi opinión.
No conozco un método para ordenar las css que esté consensuado por todo el
mundo. Sí que puedes encontrar en Internet muchas opiniones (y truquillos
como indentar las reglas, usar declaraciones abreviadas, etc.), pero lo más
importante es que sigas un método y seas consistente con él. Piensa, por
ejemplo, en cómo organizar los libros clase. Puedes ordenarlos por materias
(todos los de matemáticas juntos, todos los de física, etc.) o por curso
(todos los de primer curso juntos, todos los de segundo, etc.). Cuando
quieras buscar el libro de inglés del tercer curso, si has seguido un método
lo encontrarás en seguida (en la estantería del tercer curso o en la de
libros de idiomas, según cómo los ordenaste). El problema surge cuando no
sigues ningún orden: ¡Jaime!, ¿me tiraste el libro de tercero de ingles? ¡No
lo encuentro!
Aparte de la clasificación obvia: screen.css, print.css, etc., puedes
organizar las css en la siguiente forma:
- CSS genérica: estilos.css con la estructura básica del sitio (número de
columnas, ubicación de las secciones, etc.) e información general sobre la
tipografía, los colores, los enlaces, etc.
- CSS página de inicio: inicio.css.
- CSS por secciones: menu.css, formulario.css, noticias.css, foro.css.
Respondiendo directamente a tu pregunta, excepto por los estilos genéricos,
ordeno por secciones del documento. Aunque te presento las hojas de estilo
en archivos independientes, en el caso de que estuvieran en un único
archivo, también estarían claramente separadas.
En general, el mantener la apariencia global en el archivo de estilos
generales estilos.css y confiar en la herencia, te puede bastar. Pero si el
sitio empieza a ser grande y es posible que cambies, por ejemplo, el color,
es mejor crear una hoja de estilos aparte llamada color.css. Te evitará
tener que estar navegando por los diferentes archivos css cada vez que
quieras hacer un cambio de color. Piensa, por ejemplo, en una plantilla que
reutilizas en más de un sitio. Seguramente quieras cambiar de forma rápida
la apariencia y tener el color centralizado te será de ayuda. Hay quien hace
esto mismo para las fuentes, pero dado el poco margen de juego que da la
tipografía en html, prefiero tenerlo en el archivo de estilos genéricos.
Si trabajas con un gestor de contenidos te será sencillo adjuntar las hojas
de estilo css a tu proyecto. El gestor se encarga de añadir esa hoja de
estilos a todas las páginas. Algo parecido puedes hacer si trabajas con
lenguaje del lado del servidor. Puedes escribir una única línea de código en
todos tus documentos que incluya un fichero con las hojas de estilos
enlazadas que desees, en la forma:
INCLUIR(FICHERO_DE_CSS);
Así, si quieres añadir o borrar una hoja de estilos, sólo tendrás que editar
FICHERO_DE_CSS y añadir (o borrar) una línea link rel=stylesheet Lo
harás una única vez.
Pero si trabajas con páginas html puras, cada vez que quieras añadir una
hoja de estilos, tendrás que hacerlo en todas y cada una de las páginas.
Para evitarlo, enlaza un único fichero, por ejemplo, estilos.css y, dentro
de él, importa las demás hojas de estilos con la directiva @import.
Dentro de cada fichero, también es importante seguir un orden (a nadie se le
ocurre indicar los estilos del pie antes que el de la cabecera). Es mejor
colocar las reglas con menos especificidad antes. También son importante los
comentarios:
/* */
/* - NOTICIAS - */
/* */
#noticias {
}
#noticias p {
}
#noticias p em {
}
/* -- Fin de noticias -- */
Dentro de las reglas, hay quien prefiere colocar las diferentes
declaraciones por orden alfabético de las propiedades. Yo prefiero
ordenarlas según su posición en el formato de caja, de más interior a más
exterior:
#viaja {
width: 100px;
font: ...
color: ...
background: ...
padding: ...
border: ...
margin: ...
}
NOTA. Para evitar llamadas al servidor, hay quien reune todas las hojas de
estilos en un archivo único. Particularmente me parece excesivo, sobre todo
teniendo en cuenta la ingente cantidad de llamadas que realiza cualquier
página con un mínimo de imágenes y otros recursos.
Saludos.
El 26 de febrero de 2009 17:59, Chr5 chr5ma...@gmail.com escribió:
¿ Qué modo de organizar un CSS es el más eficiente de cara al futuro
de una aplicación / desarrollo web ?
¿ Organizarías los estilos por areas en la interfaz ? Header,
Contenido, Footer
¿ Por módulos de la aplicación? Cajas, mensajes_sistema, parrafos
especiales
¿ Por tipos ? h1, p, ul, del, ins
¿ Por propiedades de elementos ? p, h1, ul, ol { margin-left: 1em; }
¿ O quizás una mezcla de todos ellos ?
¿ Separarías los estilos en varias hojas o en cambio los mantendrías
todo en la misma ?, ¿ sería reutilizable de este modo ?
Espero que te sirvan de algo mis incertidumbres,
ahul,
carlos
2009/2/26 dreagnout dreagn...@yahoo.es:
Hola, quisiera
Re: [Ovillo] CSS: Contenidos para usuarios avanzados.
Para mí, sin duda, lo más complicado es la compatibilidad de los diferentes navegadores con las especificaciones css. Saludos. 2009/2/25 dreagnout dreagn...@yahoo.es Hola, quisiera que los usuarios dieran su opinión sobre qué parte de CSS le parece más avanzada y complicada, para saberlo y poder ayudarles. 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] OT: Los invito a que visiten mi sitio D iseño Atsui.
Coloca una copia local de las imágenes de estos marcadores para que se carguen rápido. Si te fijas, en la página que tú mismo comentas están así: http://www.stripegenerator.com/ (los iconos están en la parte inferior). Saludos. El 28 de febrero de 2009 16:56, Diseño Atsui disenio.at...@gmail.comescribió: ¡Muchísimas gracias por sus comentarios, sugerencias y criticas gente Ovillera! Ahora paso a comentarles que mi página fue hecha con los siguientes recursos: Hardaware: Pentium III de 666 Mhz con 385.648 Kb de memoria RAM. Placa de vídeo: nVidia GeForce 4 MX 4000 Sonido: Sound Blaster Live! Value (EMU10k1) Y en este Hardware corre: Sistema Operativo: Mandriva Linux Spring 2008.1 Spring (sin escritorio 3D porque sino me resta rendimiento). Aplicación para desarrollo web: Bluefish 1.0.7 Edición de imágenes: GIMP 2.4.5 Creación y manipulación de gráficos vectoriales: Inkscape (anteriormente usaba Sodipodi). Como podrán ver estas son las herramientas que utilizo para el desarrollo web. Al menos con esto me basta y sobra y por el momento no me meteré con Eclipse o similares. Es que son muy grandes para los proyectos que yo tengo entre manos. Y el tema de poner un formulario se me paso por la cabeza pero me dí cuenta que el hosting que tengo (que figura más abajo) no soporta PHP y MySQL. Y, además, mi dominio sobre programación es algo escaso para hacer algo así. El hosting lo tengo en Free Web Town que es gratis y nunca me ha dado problemas. Quizás algún mantenimiento que se tomo su tiempo pero nada más. Les comento que el logo en un principio fue hecho en Sodipodi luego lo tuve que rehacer en Xara Xtreme (quedo archivo en un archivo .xar) y finalmente retome el original hecho en Sodipodi gracias a Inkscape y su soporte para archivos .svg. Siguiendo con el temas imágenes les digo que lo único que no hice yo desde mi máquina fueron los fondos que los obtuve de Stripe Generator (http://www.stripegenerator.com/) Para ir finalizando les comento que me parece que el tema de la carga de la página y su tardanza se debe a los marcadores sociales que le puse, voy a ver como reacciona si les saco algunos y si sigue con el problema le quito todos menos el de Facebook (que por lo que ví ese anda bien). Gente, muchísimas gracias nuevamente por las opiniones que tuvieron sobre mi sitio. Esto me fue de gran ayuda. Nos vemos la próxima. Saluda atentamente, Tadeo. P.D.1: Y no tengo banda ancha en mi casa, así que uso Dial Up. Por ahora con eso me arreglo ;-) P.D.2: Victor, ya estoy revisando el error de CSS que me advertiste. Seguro que fue algo que se me paso. ___ 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] IE Developer Toolbar
Hola, comprueba en las opciones de internet (Herramientas Opciones de Internet) lo siguiente: * (pestaña) Seguridad (icono) Intranet Local (botón) Nivel personalizado que se permite la ejecución de controles y complementos ActiveX * (pestaña) Programas (botón) Administrar complementos que está habilitado el complemento de IE Developer * (pestaña) Opciones Avanzadas que está marcada la casilla Habilitar extensiones de explorador de terceros (requiere reiniciar el navegador) Saludos. El 24 de febrero de 2009 10:43, Juan Luis Blanco txon...@gmail.comescribió: Hola, gracias al polémico hilo Bloquear IE he descubierto la herramienta Internet Explorer Collection. Yo antes usaba MultipleIE, y multiples fueron también las ocasiones en que intenté instalar la extensión Web Developer Toolbar sin lograrlo. Pero mira por dónde el instalador del Explorer Collection te permite instalar el Web Developer Toollbar a la vez que instalas las versiones de Explorer que te interesan. Asunto solucionado, pensé. Manos a la obra. El caso es que una vez realizada la instalación, la extensión no funciona. Aparece en la barra de herramientas, pero en tono gris (o sea inhabilitada). He tratado de activarlo de todas las maneras que he encontrado Googleando, pero no hay forma. ¿Hay alguien a quien le haya ocurrido esto mismo? ¿Cómo lo habéis solucionado? Gracias, Juan Luis ___ 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] A dentro de A en IE7...
Este error es un problema antiguo de IE. Lo tienes documentado en varios sitios, por ejemplo: http://www.positioniseverything.net/floatmodel.html (en inglés) En resumen, cuando tienes elementos estáticos (en tu caso el h1) junto a uno flotado (en tu caso, el enlace del idioma), si estableces una anchura al elemento estático (el h1), IE desplaza éste para que no coincida con el flotado. Si además no caben los dos juntos en el contenedor, lo desplaza debajo. Para solucionarlo, como dije en el mensaje anterior, posiciona de forma absoluta el enlace en vez de flotarlo. Saludos. 2009/2/25 Ardilla Roja ardillar...@gmail.com Saludos a todos los listeros, Aqui con una pregunta... tengo esta esctructura: div id=encabezado a class=liga-lenguaje href=eng/English Version raquo; /a h1a href=index.phpspanContreras Trucking - Inicio/span/a/h1 /div Pueden verlo aqui http://www.contrerastrucking.com en el encabezado, resulta que el a.liga-lenguaje empuja hacia abajo el h1, aunque el a este flotado... ya trate de darle inline al h1, flotandolo, etc, etc... pero no logro dar con la solucion... lo pueden ver en FF para que vean el comportamiento que debiera ser normal... Saludos y gracias, A:R -- Ardilla Roja La Trinchera // ardillaroja.com.mx ___ 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] A dentro de A en IE7...
Hola, miraré el error, pero lo puedes arreglar posicionando ese enlace de forma absoluta: position: absolute; top: 0px; right: 0px; Saludos 2009/2/25 Ardilla Roja ardillar...@gmail.com Saludos a todos los listeros, Aqui con una pregunta... tengo esta esctructura: div id=encabezado a class=liga-lenguaje href=eng/English Version raquo; /a h1a href=index.phpspanContreras Trucking - Inicio/span/a/h1 /div Pueden verlo aqui http://www.contrerastrucking.com en el encabezado, resulta que el a.liga-lenguaje empuja hacia abajo el h1, aunque el a este flotado... ya trate de darle inline al h1, flotandolo, etc, etc... pero no logro dar con la solucion... lo pueden ver en FF para que vean el comportamiento que debiera ser normal... Saludos y gracias, A:R -- Ardilla Roja La Trinchera // ardillaroja.com.mx ___ 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] Opinión y ayuda con la web
Andreas Viklund, como indica en su página de copyright [1], da libertad para quitar el enlace que hace mención a su nombre. Eso sí, si el sitio es comercial y se quita ese enlace, ruega encarecidamente que se haga una pequeña donación via paypal. Saludos. [1] http://andreasviklund.com/about/copyright/ ___ 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] Bloquear IE
Algunas incompatibilidades las puedes solucionar con IE7.js o IE8.js. Dices: *si a un div le ponemos un ancho y a eso un relleno y un margen ie lo toma como un todo, cosa que en muchas ocasiones me genera problemas con la diagramacion del sitio.* ¿Problemas con el modelo de cajas?. Para que IE se comporte en el modo de estándares tienes que aprovechar la conmutación doctype [2]. Basta con que coloques un doctype adecuado como primera línea del archivo html. No coloques nada antes, ni siquiera la declaración xml que, por otro lado, no es obligatoria en los documentos xhtml si la codificación es utf-8 [3]. Saludos. [1] http://code.google.com/p/ie7-js/ [2] http://es.wikipedia.org/wiki/Quirks_Mode [3] http://www.sidar.org/recur/desdi/traduc/es/xhtml/xhtml11.htm#normative (último párrafo del apartado 3.1.1) 2009/2/23 Mauricio Dulce mauricio.du...@gmail.com La decisión tomada es por los siguientes inconvenientes. min-h y min-w no funcionan en ie6, si a un div le ponemos un ancho y a eso un relleno y un margen ie lo toma como un todo, cosa que en muchas ocasiones me genera problemas con la diagramacion del sitio. Tengo que usar condicionales especiales para dicho navegador. La forma en que renderiza las fuentes me parece fatal comparada con safari. Problemas con los png Problemas con menús desplegables (toca usar javascript) Algunas cosas que se hace con jquery o prototype no funcionan de una manera adecuada. Es obsoleto No respeta lo que los demás pusieron como regla para css (estandares) Si se trata de hacer el sitio con un seo escore alto, el sitio se ve fatal en internet explorer No tengo un ordenador con windows instalado, tampoco tengo las licencias y mucho menos pienso comprar una ya que el proyecto para el cual e decidido hacer esto es mi portafolio ___ 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] Opinión y ayuda con la web
Hola, jis. Veo que te has basado en una plantilla de Andreas Viklund [1] (esto es sólo un comentario). Podrías mejorar un poco el menú centrando el texto verticalmente (te ha quedado un pelín alto). También creo que el texto de la cabecera quedaría mejor fuera de la imagen, al lado de ésta. Dando un apretoncito más de tuerca a la cabecera, la imagen la dejaría con su proporciones originales, sin deformar (ahora está achatada) y rellenaría el resto del hueco de la cabecera para integrarlo con la imagen. Dejando el diseño de lado, algunas recomendaciones sobre las que puedes trabajar: - Haz el sitio accesible sin necesidad de javascript. Tal y como lo tienes, sin javascript no puedes buscar inmuebles. - Cambia la apariencia de los enlaces. No se distinguen del resto de texto en negrita y, para saber donde están, hay que rastrear con el ratón hasta que se convierte el puntero en una mano. Debería de ser más obvio. - No abras nuevas ventanas. Por último, felicitarte. Aunque lo puedes mejorar, tienes un sitio en funcionamiento que seguro que cumple las expectativas de tu primo. Saludos. REFERENCIAS: [1] http://andreasviklund.com/files/demo/andreas09/ El 22 de febrero de 2009 22:19, ji s j...@conlared.com escribió: Hola t...@s. Hace un tiempo os pedí ayuda para realizar un web para un familiar y (por supuesto) vuestras respuestas me sirvieron de mucho. Siempre sigo la lista, pero no me atrevo a responder unas veces por desconocimiento y otras porque creo que no tengo suficiente nivel, ya que soy de los que saben poco de varias cosas. En fin (que me enrrollo), si me hacéis el favor os pediría que os pasaséis por la web os comentaba que hice a un primo mío y que estoy planteandome darle una vuelta. Con el tiempo la he ido afinando y la he validado para html 4.01 transitional y css. Por daros algo información la carga de la parte de vivienda nueva y segunda mano es dinámica y los datos salen de una pequeña aplicación que les hice (java+jsp+mysql). Lo que más me interesa son críticas (sin cebaros mucho) de posibles técnicas que esté haciendo mal y posibles mejoras que veáis que podría hacer en la página para una segunda revisión que quiero hacerle. De paso también me gustaría conocer vuestra opinión. La web es de una inmobiliaria de Haro (La Rioja) y la dirección es http://www.inmobiliariavistaalegre.com Gracias de antemano y perdón si no interesa el tema o me he enrrollado mucho. Besos y abrazos (Cada uno que coja lo que quiera (se puede repetir)) jis ___ 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 caja (div) y archivo flash (swf)
Me alegro. Ten en cuenta que ese hueco inferior también ocurre con las imágenes. Por defecto éstas se sitúan sobre la línea base como los demás elementos inline. Saludos El 16 de febrero de 2009 17:17, Daniel Rodriguez eldan...@gmail.comescribió: Gracias , me ha resultado perfecto con display: block o tambien con vertical-align: bottom; trabajando sobre object Saludos y Muchas gracias de nuevo, Daniel Rodriguez El 15 de febrero de 2009 11:55, Daniel Navarro webpe...@gmail.com escribió: Hola, Daniel Rodríguez. Se me ocurren dos posibilidades. Puede ser por el margen superior del elemento que esté debajo del div que contiene la animación. Asegúrate que este margen no se entrometa en el elemento superior. Para ello, establécelo en cero o aplícale un borde o un padding (aunque sea de 1px) a este elemento inferior. También puede ser porque la animación esté sobre la línea base (es el comportamiento predeterminado, a menos que tú lo cambies). La línea base es donde se sitúa el texto y los demás elementos inline. Debajo de la línea base siempre hay un hueco para dejar espacio a los trazos descendentes de letras como la q, p, etc. Si este es tu problema, tienes varias posibilidades: - Cambiar a *doctype transitional* (no te lo recomiendo) - Establecer *display: block; *en el elemento object - Establecer *vertical-align: bottom; *en el elemento object - Establecer *line-height: 0px;* en el div contenedor del object. Válido si éste sólo contiene una línea. No tienes que usar todas las soluciones anteriores, sólo una de ellas. Si esto no resuelve tu problema, indícanos el código o un enlace a la página. Saludos. 2009/2/14 Daniel Rodriguez eldan...@gmail.com Hola amigos, tengo el siguiente problema: Tengo una caja (div) con todos sus margenes y rellenos en 0 (cero) y un borde de 1 pixel solido, pero cuando le coloco dentro un archivo swf de flash, entre el swf y el borde inferior de la caja me deja un espacio como de 1 o 2 pixeles en blanco en firefox (no tengo ese problema en IE). Sabe alguien si esto tiene solucion por medio de algun Hack o no tendre mas remedio que darle ese borde de 1 pixel directamente desde flash. Desde ya muchas gracias, Daniel ___ 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
Re: [Ovillo] Problema con caja (div) y archivo flash (swf)
Hola, Daniel Rodríguez. Se me ocurren dos posibilidades. Puede ser por el margen superior del elemento que esté debajo del div que contiene la animación. Asegúrate que este margen no se entrometa en el elemento superior. Para ello, establécelo en cero o aplícale un borde o un padding (aunque sea de 1px) a este elemento inferior. También puede ser porque la animación esté sobre la línea base (es el comportamiento predeterminado, a menos que tú lo cambies). La línea base es donde se sitúa el texto y los demás elementos inline. Debajo de la línea base siempre hay un hueco para dejar espacio a los trazos descendentes de letras como la q, p, etc. Si este es tu problema, tienes varias posibilidades: - Cambiar a *doctype transitional* (no te lo recomiendo) - Establecer *display: block; *en el elemento object - Establecer *vertical-align: bottom; *en el elemento object - Establecer *line-height: 0px;* en el div contenedor del object. Válido si éste sólo contiene una línea. No tienes que usar todas las soluciones anteriores, sólo una de ellas. Si esto no resuelve tu problema, indícanos el código o un enlace a la página. Saludos. 2009/2/14 Daniel Rodriguez eldan...@gmail.com Hola amigos, tengo el siguiente problema: Tengo una caja (div) con todos sus margenes y rellenos en 0 (cero) y un borde de 1 pixel solido, pero cuando le coloco dentro un archivo swf de flash, entre el swf y el borde inferior de la caja me deja un espacio como de 1 o 2 pixeles en blanco en firefox (no tengo ese problema en IE). Sabe alguien si esto tiene solucion por medio de algun Hack o no tendre mas remedio que darle ese borde de 1 pixel directamente desde flash. Desde ya muchas gracias, Daniel ___ 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] centrar pagina web
IE6 admite perfectamente margin: 0 auto;
El hack de centrar el texto para luego volverlo a alinear a la izquierda es
para versiones anteriores. Ya no hace falta.
Si no te funciona para la versión 6 de IE es porque no configuras tu código
para que el navegador pase al modo de estándares. Para ello, incluye un
doctype adecuado al principio del documento html. Pero ojo, no incluyas nada
antes de esta línea, ni siquiera una línea de comentario; tampoco la
declaración xml.
Saludos.
El 11 de febrero de 2009 15:10, Rodrigo Álvarez Virgós
rodri.vir...@gmail.com escribió:
Hola, Lucas
Lucas Franco escribió:
No habia tambien que agregar text-align:center en el body ?... o lo
estuve
haciendo todos estos años innecesariamente ? :S
También. Sino no funciona el margin:0 auto; en IE6
2009/2/11 Sergio.Iglesias http://ser.igles...@gmail.com
Pon el margin: 0 auto; en el #contenedor_general
Un saludo
2009/2/11 Manuel Rojas manweb...@gmail.com
Buenas, tengo un problema con una web. estoy usando div para la
maquetación
de a web. todo bien hasta el momento, solo que no logro a que se
centre.
no
entiendo porqué. alguna opcion?
estos son los css del body y del contenedor principal, que en este caso
se
llama contenedor general
body
{
background-image: url(../images/fondo1.jpg);
background-repeat: repeat-x;
margin: 0 auto 0 auto;
}
#contenedor_general
{
width:750px;
}
espero su ayuda.
Ing. Manuel Rojas
0426-5180245
Caracas DF
Venezuela
___
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
--
Sergio Iglesias Sánchez
ser.igles...@gmail.com
www.sergioiglesias.net
___
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
Re: [Ovillo] Problema en Opera con overflow: hidden
El ejemplo que he puesto es una versión reducida al mínimo de una
plantilla de un gestor de contenidos y se supone que el ancho es
variable dentro de unos límites. De todas formas, me valdría dejarlo
fijo, lo probaré. También puedo usar otras soluciones como flotarlo
todo o añadir un elemento que limpie los flotantes. Pero sobre todo lo
que me interesa es saber si este comportamiento de Opera tal y como
está el código es normal y si tiene fácil solución. En caso contrario
el usar el método de overflow:hidden para limpiar flotantes perdería
toda su efectividad.
Gracias.
El 11/02/09, Ignacio Ricci ignacio.ri...@gmail.com escribió:
Probaste agregarle un ancho al contenedor aparte de overflow hidden?
2009/2/10 Daniel Navarro webpe...@gmail.com
Tengo un problema de diseño que no logro resolver para Opera. Estoy usando
Opera 9.63 en WinVista 32bits.
Cuando un elemento contiene flotantes en su interior, éstos pueden
sobresalir de los límites de su contenedor. Una solución que se puede
adoptar para que el contenedor se ensanche con los flotantes consiste en
establecer la propiedad clear:both a algún elemento dentro del contenedor
que esté detrás de los flotantes. Si no se dispone de ninguno, se puede se
colocar de forma artificial en el código html, bien directamente (ej. br
style=clear:both, bien mediante el pseudoelemento :after en las css.
Existen otros métodos como se explica en
http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
En el ejemplo que más abajo os muestro, estoy usando el método de Paul
O'Brien que consiste en establecer overflow:auto en el contenedor. También
vale overflow:hidden.
Sin embargo, en cuanto establezco esta declaración Opera calcula de forma
diferente los márgenes y el contenido se estrecha demasiado. Podéis probar
a
incluir o no overflow:hidden para ver su efecto.
Por último, aunque no es de mi agrado, he intentado usar el hack para
Opera
html:first-child #contenido {
margin: 0;
}
pero no funciona ¿?
¿alguna idea?
*CÓDIGO HTML*
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=es-ES lang=es-ES
head
meta http-equiv=content-type content=text/html; charset=UTF-8 /
titleProblema Opera/title
link rel=stylesheet type=text/css href=estilos.css /
/head
body
div id=bar1
lt;div id=bar1
/div
div id=bar2
lt;div id=bar2
/div
div id=content
h1Problema en Opera 9 con overflow:hidden/h1
El div#content, con fondo rojizo, debe de extenderse para incluir a los
dos
párrafos flotantes.
Para ello, se ha establecido overflow: hidden.
Se ha dejado espacio para las barras laterales estableciendo margin: 0
250px;
p id=p1
Párrafo flotante a la izquierda
/p
p id=p2
Párrafo flotante a la derecha
/p
/div !-- Fin #content --
/body
/html
*CSS*
/* Anula rellenos y márgenes predeterminados del navegador */
* {
padding: 0;
margin: 0;
}
#content {
overflow: hidden; /* Declaración con la que se produce el problema en
Opera */
margin: 0 220px; /* espacio para alojar las barras laterales.
Opera lo calcula mal si se establece overflow:hidden
*/
background-color: #fcc;
border: 2px solid red;
}
html:first-child #content {
margin: 0; /* Este hack para Opera no funciona ¿por qué? */
}
p#p1 {
float: left;
width: 250px;
height: 400px;
background-color: #ccf;
}
p#p2 {
float: right;
width: 250px;
height: 400px;
background-color: #cfc;
}
#bar1 {
float: left;
width: 200px;
height: 100px;
background: #eee;
}
#bar2 {
float: right;
width: 200px;
height: 100px;
background: #eee;
}
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
Re: [Ovillo] Resolucion inicial
Para ordenadores de escritorio, 1024x768 es la más usada. La página que comentas está creada pensando en esta resolución. Pero debes de hacer el sitio también accesible para otros dispositivos como pdas y teléfonos móviles enlazando la hoja de estilos correspondiente. Mira en http://www.w3schools.com/browsers/browsers_display.asp Saludos El 11 de febrero de 2009 13:35, 2tonewarrior setfsdg 2tonewarr...@gmail.com escribió: Buenas, me gustaría hacer un tema para wordpress desdo 0 (mi primer tema). Tengo bastantes dudas sobre CSS pero la que más me importa es: Con que tamaño empezar a diseñar? o sea para que resoluciones de pantalla? no se cuáles son las más utilizadas. Por otra parte, quiero que quede hueco no sólo para el contenido sino tambien para una imagen de fondo tipo http://www.webdesignerwall.com/, que se vean bien tanto el contenido como el background. Espero que me podais ayudar, 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 ___ 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] Recomendaciones de manuales
Hola, Cristian. El libro que recomiendas es muy bueno. Yo compré la versión en castellano que se llama *CSS Manual Avanzado* de Anaya (ISBN: 9788441521377). Aunque está bien explicado, yo lo recomendaría como segunda lectura, cuando ya se tenga un conocimiento general de css. También me encanta *CSS, The Definitive Guide* (Third Edition), de Eric Meyer, Ed. O'Reilly (ISBN: 0-596-52733-0) http://oreilly.com/catalog/9780596527334/ Fundamental para tener un buen conocimiento de css, aunque éste se ajusta todavía menos a a lo que pide 2tonewarrior. Además, creo que no está traducido al castellano. Saludos 2009/2/10 Cristian Wilgenhoff cristian.wi...@gmail.com CSS Mastery, un libro con tapa verde... Salu2 ___ 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] Recomendaciones de manuales
Sí, CSS Manual Avanzado es la traducción de CSS Mastery. El 10 de febrero de 2009 14:35, 2tonewarrior setfsdg 2tonewarr...@gmail.com escribió: Pero el libro del que hablas (CSS Manual Avanzado) es exactamente el mismo que el CSS Mastery pero traducido?, o es otro libro distinto? saludos El 10 de febrero de 2009 10:23, Daniel Navarro webpe...@gmail.com escribió: Hola, Cristian. El libro que recomiendas es muy bueno. Yo compré la versión en castellano que se llama *CSS Manual Avanzado* de Anaya (ISBN: 9788441521377). Aunque está bien explicado, yo lo recomendaría como segunda lectura, cuando ya se tenga un conocimiento general de css. También me encanta *CSS, The Definitive Guide* (Third Edition), de Eric Meyer, Ed. O'Reilly (ISBN: 0-596-52733-0) http://oreilly.com/catalog/9780596527334/ Fundamental para tener un buen conocimiento de css, aunque éste se ajusta todavía menos a a lo que pide 2tonewarrior. Además, creo que no está traducido al castellano. 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 ___ 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] Recomendaciones de manuales
El libro que comentas de Jennifer Niederst Robbins no lo conocía, pero lo he ojeado en O'Reilly y parece un libro genial. CSS Cookbook de Christopher Schmitt está muy bien, pero hay que tener cuidado en conseguir la segunda versión (octubre 2006). Yo tenía una versión más antigua y la regalé porque, entre otras cosas, le faltaba indicar la compatibilidad de los navegadores con las soluciones que planteaba. La última versión, la segunda, la compré en español (ojo, no indica nada de que sea la segunda versión, pero se sabe porque es del 2007): Curso de CSS, Christopher Schmitt, ed. Anaya, ISBN: 978-84-415-2198-8 http://www.anayamultimedia.es/cgi-bin/monta_ficha.pl?codigo_comercial=2327256 Respecto de los apuntes de BenKo, indicarte que contiene errores muy graves. Una pena porque es agradable de leer. 2tonewarrior, si lo vas a estudiar, podemos discutir su contenido; así también se aprende mucho. http://cafeina.ladybenko.net/wp-content/xhtml_tuto_beta.pdf Saludos El 10 de febrero de 2009 15:14, Rafael García Lepper rglep...@mpib.esescribió: Hola, Sobre libros de texto, yo te recomendaría el libro Diseño web, guía de referencia de Jennifer Niederst Robbins. No es solo de css pero lo que te cuenta de css es más que suficiente para tener las cosas claras y además te habla sobre html/xhtml, javascript, servidores, accesibilidad, navegadores, formatos de imagen, medios... y es el único libro que he encontrado que te hable sobre microformatos. En mi opinión es sencillamente un libro que hay que tener, lo único malo es que en español no está traducida la edición más actual, pero solo afecta al capitulo que habla sobre navegadores y poco más. Solo de css puedes encontrar un libro que a mi me gusta bastante, que en español se llama: Curso de css de Christopher Schmitt, excelente también, pero más enfocado en plan recetas el titulo en inglés es css cookbook lo que se debería haber traducido como libro del cocinero de css, pero... debe ser poco comercial ;-) Y gratuito puedes encontrar un libro en pdf que se llama: XHTML+CSS de una maldita vez escrito por Belen Albeza (BenKo) bastante claro y divertido aunque no profundiza demasiado y como ya te han dicho, los de librosweb que están muy muy bien. Saludos Rafa 2tonewarrior setfsdg escribió: Buenas, queria saber donde podia encontrar una página con manuales paso a paso de CSS desde un nivel muy básico y con ejemplos si es posible (y en español). He visitado muchos pero tengo poco tiempo y cojo un poco de aqui y un poco de allí, por lo que nunca acabo de aprender bien. Me gustaria que me recomendarais vosotros alguno bueno y unificado (también se admiten sugerencias de libros de texto). 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 ___ 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] Recomendaciones de manuales
Sigo pensando en recomendarte PC Cuaderno núm 33. Está en castellano, es de nivel básico con ejemplos (te puedes bajar el código de los emplos del sitio web) y es rápido de leer (tú comentas que tienes poco tiempo). Acabo de entrar en la página de BenKo y no he tenido problemas http://cafeina.ladybenko.net/ El manual está en el menú stuff. De todas formas, te lo mando a tu email. Saludos. 2009/2/10 2tonewarrior setfsdg 2tonewarr...@gmail.com Gracias a todos por vuestras recomendaciones. Creo que me decidiré por el CSS Mastery (o la traducción). Y si lo acabo y me quedo con ganas seguire por los siguientes que me habeis recomendado. Respecto a lo de BenKo, Daniel, me gustaria discutir los errores, seguro que no puedo aportar mucho pero aprenderia. Pero lo que pasa es que no me deja acceder a la pagina, me deniega el acceso como si hubiera cambiado los permisos del FTP. 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 ___ 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 en Opera con overflow: hidden
Tengo un problema de diseño que no logro resolver para Opera. Estoy usando
Opera 9.63 en WinVista 32bits.
Cuando un elemento contiene flotantes en su interior, éstos pueden
sobresalir de los límites de su contenedor. Una solución que se puede
adoptar para que el contenedor se ensanche con los flotantes consiste en
establecer la propiedad clear:both a algún elemento dentro del contenedor
que esté detrás de los flotantes. Si no se dispone de ninguno, se puede se
colocar de forma artificial en el código html, bien directamente (ej. br
style=clear:both, bien mediante el pseudoelemento :after en las css.
Existen otros métodos como se explica en
http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
En el ejemplo que más abajo os muestro, estoy usando el método de Paul
O'Brien que consiste en establecer overflow:auto en el contenedor. También
vale overflow:hidden.
Sin embargo, en cuanto establezco esta declaración Opera calcula de forma
diferente los márgenes y el contenido se estrecha demasiado. Podéis probar a
incluir o no overflow:hidden para ver su efecto.
Por último, aunque no es de mi agrado, he intentado usar el hack para Opera
html:first-child #contenido {
margin: 0;
}
pero no funciona ¿?
¿alguna idea?
*CÓDIGO HTML*
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=es-ES lang=es-ES
head
meta http-equiv=content-type content=text/html; charset=UTF-8 /
titleProblema Opera/title
link rel=stylesheet type=text/css href=estilos.css /
/head
body
div id=bar1
lt;div id=bar1
/div
div id=bar2
lt;div id=bar2
/div
div id=content
h1Problema en Opera 9 con overflow:hidden/h1
El div#content, con fondo rojizo, debe de extenderse para incluir a los dos
párrafos flotantes.
Para ello, se ha establecido overflow: hidden.
Se ha dejado espacio para las barras laterales estableciendo margin: 0
250px;
p id=p1
Párrafo flotante a la izquierda
/p
p id=p2
Párrafo flotante a la derecha
/p
/div !-- Fin #content --
/body
/html
*CSS*
/* Anula rellenos y márgenes predeterminados del navegador */
* {
padding: 0;
margin: 0;
}
#content {
overflow: hidden; /* Declaración con la que se produce el problema en
Opera */
margin: 0 220px; /* espacio para alojar las barras laterales.
Opera lo calcula mal si se establece overflow:hidden
*/
background-color: #fcc;
border: 2px solid red;
}
html:first-child #content {
margin: 0; /* Este hack para Opera no funciona ¿por qué? */
}
p#p1 {
float: left;
width: 250px;
height: 400px;
background-color: #ccf;
}
p#p2 {
float: right;
width: 250px;
height: 400px;
background-color: #cfc;
}
#bar1 {
float: left;
width: 200px;
height: 100px;
background: #eee;
}
#bar2 {
float: right;
width: 200px;
height: 100px;
background: #eee;
}
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] Un poco OffTopic -Desplazamiento horizontal
Hola, José Manuel. Gracias por mostrarnos esta página. Analizando sitios se puede aprender mucho. Las imágenes están incluidas en el documento html en la forma: div id=imagenes img ... img ... ... /div En las hojas de estilo: - El div#imagenes se posiciona de forma absoluta - Las imágenes se establecen con display:block y se flotan a la izquierda. - Con la propiedad z-index se controla que los diferentes elementos se sitúen por encima de las imágenes. Para el movimiento usa javascript, más concretamente la función *animate* de jQuery. Puedes ver ejemplos de uso en http://docs.jquery.com/Effects/animate Saludos. El 9 de febrero de 2009 10:11, Jose Manuel Segovia josego...@gmail.comescribió: Hola a todos, Quizá esta pregunta es un poco OffTopic pero es que me ha gustado el efecto que he visto en una web y no se como lo hacen. Esta es la web: www.ayerviernes.com Y lo que hacen es desplazarla a izquierda o derecha según la selección del menú. Por lo que veo no es Flash y no se muy bien como lo hacen. También tienen un efecto de centrado del fondo dependiendo del tamaño de la ventana que tampoco se como lo consiguen. Si alguien sabe algo, o de alguna web donde expliquen como hacerlo lo agradecería. Saludos, Jose 2008/11/16 Javier Guerrero demix...@gmail.com Hola, yo tambièn estaba buscando una soluciòn para hacer que el footer siempre se posicione en la parte inferior del navegador, y para mi alegrìa encontrè estas soluciones: http://ryanfait.com/sticky-footer/ http://www.csslab.cl/ejemplos/footer.html Saludos cordiales ___ 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
Re: [Ovillo] Recomendaciones de manuales
El PC Cuaderno núm. 33 (ISBN: 2-915605-62-9) titulado *CSS, un juego de niños* es barato (sólo 5€), con ejemplos que te puedes bajar del sitio y es fácil de entender. Para empezar y tener un conocimiento básico de css en poco tiempo está bien. http://www.pc-cuadernos.com/newsite/booklet.php?id=83 Como mejor lectura para empezar te recomiendo *Head First HTML with CSS XHTML* (ISBN: 0-596-10197-X) pero vale más dinero, es más gordo y está en inglés. Es un libro fantástico. http://oreilly.com/catalog/9780596101978/ Suerte. El 9 de febrero de 2009 12:46, 2tonewarrior setfsdg 2tonewarr...@gmail.comescribió: Buenas, queria saber donde podia encontrar una página con manuales paso a paso de CSS desde un nivel muy básico y con ejemplos si es posible (y en español). He visitado muchos pero tengo poco tiempo y cojo un poco de aqui y un poco de allí, por lo que nunca acabo de aprender bien. Me gustaria que me recomendarais vosotros alguno bueno y unificado (también se admiten sugerencias de libros de texto). 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 ___ 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] Un poco OffTopic -Desplazamiento horizontal
Estoy de acuerdo. Efectivamente, el sitio tiene defectos graves, pero eso no quita que, pese a mi alergia a javascript, pueda aprender algo de él. Siempre insisto en que un sitio tiene que ser usable y accesible sin necesidad de usar javascript ni flash ni cualquier otro tipo de plugin. Saludos. El 10 de febrero de 2009 0:50, Mauricio Dulce mauricio.du...@gmail.comescribió: Si pero esta pagina tiene un grave problema, si la vemos en una resolución superior a 1024 puede ver los otros contenidos, desde mi punto de vista nunca usaría un tipo de solución como esta. Si no estoy mal la idea original viene de http://www.panic.com/coda/ y creo que usaron este template, aunque lo modificaron un poco pero básicamente están usando jquery http://bustatheme.com/wordpress/wp-coda/ Pero lo que digo, no es aconsejable usar este tipo de interfases, pueden ser muy llamativas, pero complican un poco el tema de accesibilidad. El 9/02/2009, a las 18:43, Daniel Navarro escribió: Hola, José Manuel. Gracias por mostrarnos esta página. Analizando sitios se puede aprender mucho. Las imágenes están incluidas en el documento html en la forma: div id=imagenes img ... img ... ... /div En las hojas de estilo: - El div#imagenes se posiciona de forma absoluta - Las imágenes se establecen con display:block y se flotan a la izquierda. - Con la propiedad z-index se controla que los diferentes elementos se sitúen por encima de las imágenes. Para el movimiento usa javascript, más concretamente la función *animate* de jQuery. Puedes ver ejemplos de uso en http://docs.jquery.com/Effects/animate Saludos. El 9 de febrero de 2009 10:11, Jose Manuel Segovia josego...@gmail.comescribió: Hola a todos, Quizá esta pregunta es un poco OffTopic pero es que me ha gustado el efecto que he visto en una web y no se como lo hacen. Esta es la web: www.ayerviernes.com Y lo que hacen es desplazarla a izquierda o derecha según la selección del menú. Por lo que veo no es Flash y no se muy bien como lo hacen. También tienen un efecto de centrado del fondo dependiendo del tamaño de la ventana que tampoco se como lo consiguen. Si alguien sabe algo, o de alguna web donde expliquen como hacerlo lo agradecería. Saludos, Jose 2008/11/16 Javier Guerrero demix...@gmail.com Hola, yo tambièn estaba buscando una soluciòn para hacer que el footer siempre se posicione en la parte inferior del navegador, y para mi alegrìa encontrè estas soluciones: http://ryanfait.com/sticky-footer/ http://www.csslab.cl/ejemplos/footer.html Saludos cordiales ___ 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 Mauricio Dulce mauricio.du...@gmail.com +57 315 4183043 http://www.3zona.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
Re: [Ovillo] En Opera con dos imagenes, la segunda desborda el div
Hola. Edita el código html e incluye un espacio en blanco (nbsp; no vale) o un salto de línea (no un br /) entre las dos etiquetas a que contienen a las imágenes. Saludos 2009/2/5, Maira Vykus mairavy...@yahoo.es: Hola a todos. Tengo un problema en el siguiente sitio: http://www.maximopc.org/articulos/zotac-geforce-gtx-285.html Como verán la parte central tiene varias imagenes. Las mismas normalmente se colocan de a pares. En el código sería: img alt= src=/images/articulos/661/present01.jpg/img alt= src=/images/articulos/661/present01.jpg/ No tiene nada adicional más que los dos llamados a la imagen. Y en los CSS no tienen float ni nada. De esta forma si las imagenes son suficientemente pequeñas para entrar una al lado de la otra en el ancho del DIV contenedor lo hacen, de lo contrario la segunda imagen baja al renglón siguiente. Esto funciona correctamente en Firefox y en explorer, en los cuáles la segunda imagen va abajo. En opera 9.63 no pasa esto. Si bien el texto se adapta al ancho del DIV, la segunda imagen queda al lado de la primera y es solapada por el contenido de la columna derecha. Hice una busqueda importante de información para encontrar una solución pero no he encontrado nada. A alguien le ha pasado lo mismo? o leyó por casualidad sobre esto? Desde ya muchas gracias! Maira. __ LLama Gratis a cualquier PC del Mundo. Llamadas a fijos y móviles desde 1 céntimo por minuto. http://es.voice.yahoo.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] probar desarrollos en IE 6 sobre Windows Vista
Si no tienes un Windows XP original te puedes bajar de Microsoft una imagen de xp con ie6 para VirtualPC. Lo llaman *Internet Explorer Application Compatibility VPC Image*. El único inconveniente es que tiene fecha de caducidad y, cuando lo hace, se cierra a la hora. Pero no es trágico si no te importa volver a bajarla. La última caduca en abril. Mira el siguiente enlace http://ekort.blogspot.com/2008/09/utilizar-ie6-ie7-e-ie8-juntos-en-el.html Nota: aunque en los requisitos de Virtual PC 2007 no aparezca Windows Vista Home, sí que funciona en este sistema operativo. Saludos. El 23 de enero de 2009 10:30, sebastian garcia-valenciano sebast...@garcia-valenciano.net escribió: Hola, hace poco decidí dejar de usar el formato GIF (aunque su patente haya expirado) y pasarme al PNG (recomendado por el W3C). El problema como sabeis son las transparencias en IE6. He estado investigando las diferentes soluciones con JS, el problema es que no las he podido comprobar ya que tengo IE7 (sobre windows vista). He googleado especialmente en la lista Ovillo, y de momento todo lo que he probado falla: 1. Simulador IETester ( http://www.my-debugbar.com/wiki/IETester/HomePage ) En un principio funciona, pero al simular IE6 las transparencias no las respeta en páginas donde supuestamente están preparadas para ello, como por ejemplo estas: http://www.bpsite.net/miniemotes/index.html http://www.twinhelix.com/css/iepngfix/demo/ ¿Quizás no haga bien la simulación? 2. IE 6 for Vista ( http://tredosoft.com/IE6_For_Vista_Part_1 ) Pese a ejecutarlo con compatibilidad para xxx me es imposible ejecutarlo sobre Vista. 3. Multiple IE( http://tredosoft.com/Multiple_IE ) NO funciona en Windows Vistam ,para este SO reenvian a IE 6 Standalone 4. IE 6 standalone ( http://browsers.evolt.org/?/ie/32bit/standalone) Me da problemas sobre windows Vista :( ¿Alguna otra solución? gracias! in advanced! saludos sebas ___ 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] Problemas con Footer
Hola. Es mejor que adjuntes un enlace a la página en vez de al código. Con la página delante y herramientas como el complemento de firefox web developer toolbar es más sencillo estudiarla. Supongo que lo que quieres es un pie que permanezca en la parte inferior de la ventana hasta que el contenido se haga lo suficientemente amplio como para desplazarlo. Si es así mira en http://www.csslab.cl/2006/11/06/%C2%A1abajo/ Si no es eso lo que quieres no dudes en corregirme pero sería conveniente que dejaras un enlace a tu página. Un proveedor gratuito y sin propaganda donde puedes alojarla lo tienes en http://www.000webhost.com/. Saludos. 2009/1/19 Mauricio Dulce mauricio.du...@gmail.com Hola, buenos dias, estoy teniendo problemas con el loyout de una pagina que estoy maquetando, el cual consiste en que el footer se me esta montando encima de los contenidos, ya que le tengo un contenedor con el 100% de alto para que este me envie el fotter al final, el cual a su vez se encuentra con una margen negativa para que se me ubique en el 100% en dado caso de que el contenio no sea suficiente y no me genere scrooll pego condigo html y css Html http://pastie.org/364559 Css http://pastie.org/364562 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] selector css
Ampliando lo dicho, ahora los selectores contextuales también se llaman
selectores descendientes.
Los selectores contextuales es una denominación de CSS1:
http://www.w3.org/TR/REC-CSS1/#contextual-selectors
que en CSS2 se renombró a selectores descendientes:
http://www.w3.org/TR/CSS/selector.html#descendant-selectors
Saludos
El 18 de enero de 2009 14:33, Hernán Beati - SaberWeb.com.ar
her...@saberweb.com.ar escribió:
Hola Andrés,
Andres escribió:
div class=dostercios id=enviar
div class=btna href=#enviar/a/div
a href=#volver/a
/div
Como parece que por el color no se puede, ¿podría seleccionar la segunda
etiqueta a dentro del div#enviar?.
Puedes dividir el problema en dos pasos:
1) Primero aplicas un color a TODOS los enlaces dentro de dostercios,
lo cual incluirá ese segundo enlace suelto que quieres alcanzar;
2) y luego puedes indicar otro color distinto para el primer enlace:
div.dostercios a {
/* seleccionas todos los enlaces a que estén dentro de dostercios,
incluyendo el SEGUNDO enlace */
color:red;
}
div.btn a {
/* ahora cambias la apariencia solo del primero */
color:blue;
}
De esa manera, te quedan los dos enlaces de distintos colores.
Esta técnica se denomina selectores contextuales, puedes investigar.
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
___
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] lista top 10
Hola, si buscas en google los términos css gallery o css showcase te sorprenderá la cantidad de recopilaciones de sitios que te pueden servir de inspiración. El 18 de enero de 2009 5:50, Jonathan C. lockhe...@gmail.com escribió: buenas, me gustaría saber si existe una web o blog frecuentado por la mayoría aquí, donde pueda encontrar una lista de los mejores 10 sitios diseñados usando los estándares y aplicando correctamente las css y xhtml, algo así como un top 10 de websites, quizás mas. me gustaría conocer sitios con diseños que puedan servirme de guia para estar actualizado de las tendencias en diseño, colores y el layout mas común actualmente. saludos a la lista! -- Jonathan C. lockhe...@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
Re: [Ovillo] selector css
Hola, Andrés.
El selector que estás usando se denomina selector de atributo. IE6 no
soporta este selector pero los navegadores más modernos sí. No has indicado
el código html pero, para que funcione, color tiene que ser un atributo de
a:
a href=# color=#f30Esto es un enlace/a
Sin embargo, este código tiene varios inconvenientes. Por un lado, color
no es un atributo válido que puedas incluir en la etiqueta a. Por otro,
estás indicando información de estilo (nada menos que el color) en el
documento html y éste se debe de reservar para mostrar sólo la estructura y
el contenido de la página.
Si lo que tienes en el html es algo parecido a:
a href=# style=color: #f30Esto es un enlace/a
(o con el color indicado en una hoja de estilos externa)
entonces la regla css anterior no va a funcionar en ningún navegador y, como
dice Ignacio Ricci, mejor busca una solución javascript.
Saludos.
2009/1/17 Andres zumo_des...@hotmail.com
Hola,
Necesito seleccionar la única etiqueta a del div#enviar que tiene color
#f30.
Estoy probando con esto, pero no me funciona
#page #content #enviar a:link[color=#f30]{margin:5px 0 0 5px;}
¿Alguna sugerencia?.
¿Como funcionan estos selectores en ie?.
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] selector css
Sólo debería de haber un elemento con el ID #enviar en el documento, pero
dentro de él sí se pueden incluir más de un anchor y Andrés quiere
referenciar sólo uno de estor anchor (en concreto, el que tenga el color
#f30). Rectifico lo dicho anteriormente de buscar una solución javascript ya
que, si tiene acceso al documento html (y casi seguro que lo tendrá), lo
lógico sería que diferenciara ese enlace de forma que se pueda referenciar
en la css.
El 17 de enero de 2009 20:21, Ignacio Ricci ignacio.ri...@gmail.comescribió:
Buen si , porque en realidad esta mal usado el ID. No debería haber más de
1
elemento con el mismo id en esa pagina.
2009/1/17 Victor Hugo Arias Valencia hugovic1...@gmail.com
A mi me gusta la respuesta de rumoroso, si es la unica etiqueta con ese
color, pues seguro tiene una clase, a la cual le puedes aplicar los
estilos
que dices...
El 17 de enero de 2009 14:05, Daniel Navarro webpe...@gmail.com
escribió:
Hola, Andrés.
El selector que estás usando se denomina selector de atributo. IE6 no
soporta este selector pero los navegadores más modernos sí. No has
indicado
el código html pero, para que funcione, color tiene que ser un
atributo
de
a:
a href=# color=#f30Esto es un enlace/a
Sin embargo, este código tiene varios inconvenientes. Por un lado,
color
no es un atributo válido que puedas incluir en la etiqueta a. Por
otro,
estás indicando información de estilo (nada menos que el color) en el
documento html y éste se debe de reservar para mostrar sólo la
estructura
y
el contenido de la página.
Si lo que tienes en el html es algo parecido a:
a href=# style=color: #f30Esto es un enlace/a
(o con el color indicado en una hoja de estilos externa)
entonces la regla css anterior no va a funcionar en ningún navegador y,
como
dice Ignacio Ricci, mejor busca una solución javascript.
Saludos.
2009/1/17 Andres zumo_des...@hotmail.com
Hola,
Necesito seleccionar la única etiqueta a del div#enviar que tiene
color
#f30.
Estoy probando con esto, pero no me funciona
#page #content #enviar a:link[color=#f30]{margin:5px 0 0 5px;}
¿Alguna sugerencia?.
¿Como funcionan estos selectores en ie?.
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
--
Tutor - Soporte
Conocimiento Virtual Academia
www.ConocimientoVirtual.edu.co
www.ConocimientoVirtual.edu.co/foro
___
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
Re: [Ovillo] Personalizar colores en un sitio web.
Hola, Javier.
La página que mencionas funciona tanto con javascript como sin él.
Los pequeños botones que permiten conmutar de color son elementos anchor
en el código fuente:
a id=redhref=?style=redonclick=set_style(this);return
false;red/a
a id=orange href=?style=orange onclick=set_style(this);return
false;orange/a
a id=yellow href=?style=yellow onclick=set_style(this);return
false;yellow/a
[...]
CON JAVASCRIPT
Si tienes activado javascript, cuando pulsas en uno de los enlaces se
ejecuta la función *set_style()* que está dentro de *scripts.js*. A esta
función se le envía como parámetro el enlace en sí (*this*) y usa el valor
del atributo *id* para construir la dirección de la hoja de estilos.
function set_style(obj){
if(!document.getElementById) return false;
var sheet=document.createElement('link');
sheet.setAttribute('rel','stylesheet');
sheet.setAttribute('media','all');
sheet.setAttribute('href',_siteRoot+'css/'+obj.id+'/colour.css');
document.body.appendChild(sheet);
var img=new Image();
img.src=obj.href;
}
SIN JAVASCRIPT
Si el navegador no tiene activado javascript, se envía al servidor el color
correspondiente como parámetro en la url. Así, por ejemplo, cuando pulsas en
el botón rojo y no tienes javascript, verás que la barra de direcciones de tu
navegador muestra lo siguiente:
http://www.nue-media.com/?style=red
El parámetro *style* con el valor *red* es usado por el servidor para
incluir la siguiente línea en el código fuente.
link rel=stylesheet href=/css/red/colour.css type=text/css
media=all /
Si tecleas directamente lo siguiente:
http://www.nue-media.com/?style=yellow
Podrás comprobar cómo cambia el código fuente:
link rel=stylesheet href=/css/yellow/colour.css type=text/css
media=all /
Saludos
El 16 de enero de 2009 19:23, Javier Guerrero demix...@gmail.com escribió:
Es decir, si visitan esta página:
http://www.nue-media.com/
verán que en la parte superior hay una paleta de colores en el que se
puede
seleccionar un color, el cual cambia en la botonera y en los titulares del
cuerpo de la página, mi preguntas son ¿cuál es el nombre de este efecto?
¿como sería la hoja de estilos para esto? ¿utiliza algún plugin en
particular de las librería javascript que utilizar para dicho efecto?
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
___
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] (sin asunto)
Hola. Si lo que quieres es imprimir una página no diseñada por ti, puedes configurar el navegador como te ha respondido david0152, o capturar la pantalla mediante las teclas alt+impr o mediante una utilidad de captura. Si lo que quieres es que los usuarios puedan imprimir imágenes de tus páginas, tienes que tener en cuenta que la mayoría de ellos sólo pretenderán obtener impreso el contenido, sin imágenes de adorno que puedan malgastar tinta y papel o dificultar la legibilidad. Si la imagen no tiene sentido semántico, entonces ésta debe de añadirse con background-image; en caso contrario (ejemplo, una galería de fotos) debe incluirse en el documento mediante la etiqueta img. Si sigues interesado en que se puedan imprimir las imágenes de fondo puedes usar soluciones como el hack de list-style-image, pero mejor te propongo que ofrezcas una impresión con sólo el contenido por un lado y, por otro, un enlace a una versión pdf descargable con las imágenes de fondo que quieras. Saludos. El 14 de enero de 2009 12:24, Tonimb ton...@comin.cat escribió: Buenos días, buenas tardesa t...@s, en primer lugar agradecer a todos la aportación que haceis para los que , como yo,empezamos en el mundo del CSS,muchisimas gracias sin vosotros no lograriamos maquetar mas o menos en condiciones. Mi duda es la siguiente. Maquetando una web con css y html como podría hacer para que se puediese imprimir la web tal y como la ve el usuario? quiero decir que si pongo las imagenes en el archivo CSS creo que no se imprimen, solo se imprime lo que está en el archivo html. Al menos eso es lo que he visto navegando por ahi. He visto páginas muy bonitas con hermosas fotos pero que al mandar a imprimir, aún seleccionando todo, solo se imprime el texto que aparece en la web y no sus imagenes, investigando en su codigo fuente he visto que las imagenes estaban en el Css con background:url() y no en el html con img src=. Sabeis como se podría hacer para que una web se pueda imprimir todo y estando sus imagenes en el CSS? Gracias de antemano por vuestras respuestas. Un codial saludo para todos. -- Tonimb cada projecte, una estructura www.comin.cat Sent to you using Uebimiau Webmail version 3.11 Developed by Dave and Todd at http://www.manvel.net and http://www.tdah.us ___ 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] Respuesta a Wilfredo Rodríguez sobre cr ítica a www.musipan.net
Hola Cristian. No me has entendido, seguramente porque no me he explicado bien. Con atributos inexistentes no me refiero a que no existan en la especificación html, sino a que no lo han puesto en el código fuente de la página (etiquetas img) y son obligatorios, como tú bien dices. Quizás debería de hacer escrito faltan atributos obligatorios como alt, que se entiende mejor. Gracias por la aclaración. 2009/1/12 Cristian Wilgenhoff cristian.wi...@gmail.com errata: - atributos inexistentes (como alt para las imágenes Es obligatorio usar el atributo alt, q sirve para que cuando no se pueda hacer el retrive de la imagen se ve el texto, ejemplo: logo. ___ 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] Respuesta a Wilfredo Rodríguez sobre cr ítica a www.musipan.net
Es primordial indicar un doctype para conmutar los navegadores al modo de estándares y aumentar la consistencia de comportamiento entre ellos. De esta forma podemos olvidarnos, por ejemplo, del modelo de cajas erróneo (entre otros fallos) de Internet Explorer y hacer un código más sencillo. Coincido con vosotros en la importancia de validar porque, aunque no debería de ser un fin (el fin es conseguir un sitio funcional, usable y accesible, fácil de editar, etc.), es fundamental para encontrar errores en el código. Saludos. El 12 de enero de 2009 13:12, DJ-Dom soporten...@gmail.com escribió: Creo que antes de pedir opinion sobre una web, lo mejor es que al menos la revisen en w3c... Saludo, DJ-Dom El 12 de enero de 2009 3:17, Daniel Navarro webpe...@gmail.com escribió: Hola Cristian. No me has entendido, seguramente porque no me he explicado bien. Con atributos inexistentes no me refiero a que no existan en la especificación html, sino a que no lo han puesto en el código fuente de la página (etiquetas img) y son obligatorios, como tú bien dices. Quizás debería de hacer escrito faltan atributos obligatorios como alt, que se entiende mejor. Gracias por la aclaración. 2009/1/12 Cristian Wilgenhoff cristian.wi...@gmail.com errata: - atributos inexistentes (como alt para las imágenes Es obligatorio usar el atributo alt, q sirve para que cuando no se pueda hacer el retrive de la imagen se ve el texto, ejemplo: logo. ___ 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
Re: [Ovillo] A dentro de DIV y posiciones ...
Hola, Ardilla Roja. Una página bonita y hecha con gusto. Me han gustado las
referencias al mundo de la carretera, en especial las opciones del menú en
forma de carteles de señalización.
Entiendo que además del posicionamiento de la imagen del trailer, también
quieres que éste forme parte del enlace a la página de inicio.
*Lo que no logro hacer, es que el div 'trailer' se posicione [...], y
detrás del a*
Para conseguirlo, haz lo siguiente.
EN EL ARCHIVO HTML
Elimina la línea
div class=trailer /div
Cambia la línea
h1a href=index.phpContreras Trucking - Inicio/a/h1
para envolver el texto con una etiqueta span:
h1a href=index.phpspanContreras Trucking - Inicio/span/a/h1
EN EL ARCHIVO CSS
Elimina todo el bloque de declaraciones
#encabezado div.trailer {...}
y sustitúyelo por
#encabezado h1 a span {
background-color: #99FF00;
background: url(../interface/trailer-01.png) no-repeat center center;
width: 368px;
height: 242px;
position: absolute;
top: 0;
left: 35px;
cursor: pointer; /* para IE, convierte cursor en una mano */
text-indent: -1000px; /* ocultar el texto */
}
Por último, elimina la propiedad text-indent de
#encabezado h1 a {...}
Saludos.
2009/1/12 Ardilla Roja ardillar...@gmail.com
Buen dia a todos,
Aqui con un problemita:
Estoy trabajando en este sitio
http://www.kamikazedesarrollo.net/archivos/contrerastrucking/
Tengo este codigo:
div id=encabezado
h1a href=index.phpContreras Trucking - Inicio/a/h1
div class=trailer /div
/div
#encabezado { width: 874px; height: 181px; margin: 0 auto; }
#encabezado h1 { height: inherit; }
#encabezado h1 a { display: block; width: 100%; height: 100%;
text-indent: -1px; }
Lo que no logro hacer, es que el div 'trailer' se posicione a la
izquierda del #encabezado, y detras del a Ya le di vueltasy
vueltas, probe con las posiciones segun las especificaciones y nada...
:S
Espero alguien me pueda dar luz con esto xD
--
Ardilla Roja
La Trinchera // ardillaroja.com.mx
___
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] Respuesta a Wilfredo Rodríguez sobre cr ítica a www.musipan.net
Ante todo, pido perdón por la extensión de este correo, que es una respuesta
sobre la petición de críticas que hizo Wilfredo del sitio
http://www.musipan.net/
- - - - - - - - -
Hola, Wilfredo.
Veo que se ha empleado bastante esfuerzo en construir el sitio aunque, como
todo, es susceptible de mejorar.
Ya que la temática de esta lista son las CSS y el diseño con estándares,
empezaré comentando algunas deficiencias del sitio en este aspecto.
- - - - - - - - - - -
ANÁLISIS DEL CÓDIGO
Has encerrado todo el contenido en un iframe dentro de index.php, pero no le
encuentro justificación, a menos que quieras fastidiar al usuario medio para
que no pueda enlazar a una página interna ni incluirla en marcadores
(favoritos).
Si se analiza la página incluida en el iframe, principal.php, se descubre
un diseño basado en tablas y con numerosos errores. En ésta falta la
declaración doctype que es importante no sólo para validar la página, sino
para conmutar al modo de estándares (aunque como el diseño es por tablas
tampoco es tan dramático). El código contiene, entre otros errores,
atributos desautorizados, atributos inexistentes (como alt para las
imágenes o type para las etiquetas script), etc. Te recomiendo que
incluyas un doctype y valides las páginas para corregir los errores. Peor
incluso es la cantidad de reglas css en línea (unas veinte en principal.php)
para añadir un z-index a las imágenes. Puede que el código se haya realizado
mediante un programa de diseño visual, por lo que no voy a darle más
vueltas.
Lo que sí voy a comentar a nivel de código es la página index.php, el
contenedor del iframe. Incluso este documento tan sencillo contiene errores:
- En la etiqueta iframe has repetido el atributo style. Has escrito:
iframe style=background-color:#804000 ... style=border:none; ...
Debe de ser:
iframe style=background-color:#804000; border:none; ...
También te alerto sobre lo siguiente, aunque técnicamente no sean errores:
- Es recomendable por accesibilidad que indiques el idioma de la página:
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=es lang=es
Cuando el documento se sirve como text/html (como es este caso y el de la
inmensa mayoría de las páginas xhtml), los navegadores HTML ignoran los
atributos xmlns y xml:lang (son del lenguaje xhtml). Sin embargo, sí tienen
en cuenta el parámetro lang.
- En vez de usar el atributo align para centrar, que está desaprobado por el
W3C. Utiliza el equivalente css margin: auto;
- Has escrito en la etiqueta iframe align=top, pero top no es un valor
válido del atributo align. Sí lo son left, center, right y justify,
como puedes ver en
http://www.w3.org/TR/html4/present/graphics.html#adef-align
Quizás te has confundido con el atributo valign o con el atributo align de
otros elementos como caption, que sí admiten top como un valor válido.
- Has indicado estilo en línea mediante el atributo style (no confundir con
la etiqueta style). Te recuerdo que si se indica estilos en línea, es
obligatorio indicar el lenguaje de hoja de estilos por defecto. Se puede
hacer en la cabecera http o con la siguiente etiqueta meta:
meta http-equiv=Content-Style-Type content=text/css /
Ésta es una norma que se la salta todo el mundo (incluido yo).
- Usas comentarios html en el elemento style para esconder las css internas
de los navegadores antiguos que no entienden la etiqueta style. Pero si
este documento se sirviera como application/xhtml+xml, estos estilos se
ignorarían.
Por lo tanto, habría que quitar estos comentarios o indicar un doctype html.
Si los quitas y eres detallista, en prevención de que puedas usar caracteres
como o en la hoja de estilos, marca los estilos como bloque CDATA.
Si, además, te preocupa la compatibilidad de la etiqueta CDATA con ciertos
navegadores, ocúltala con comentarios css:
style type=text/css
/*![CDATA[*/
body {
background-color: ...
}
/*]]*/
/style
http://www.w3.org/TR/xhtml1/#h-4.8
http://www.w3.org/TR/xhtml1/#C_4
- - - - - - - - -
ANÁLISIS VISUAL
- La página de entrada es vistosa, pero no indica claramente de qué trata.
El muchacho vestido de rey y la leyenda MUSIPAN El Reino no dice mucho.
Mirando los demás elementos se puede deducir que se trata de un hotel con
restaurante para celebraciones. Pero tras navegar por el sitio se descubre
que es todo un parque temático. ¿Pero dónde? Pulsando en contáctenos parece
que se trata de algún país de América (después descubrí que era Venezuela).
La primera regla de usabilidad es dar a conocer al usuario sobre qué versa
el sitio. Al menos una línea de etiquetas que diga algo sobre que es un
parque temático y dónde se encuentra.
- Los enlaces no están claramente indicados como tales. Para saber dónde
están hay que ir escudriñando la página con el ratón para ver si el cursor
se convierte en una mano. He intentado pinchar en la foto del rey, e incluso
en el romano de la esquina. Tampoco hay efectos de rollover en los enlaces.
Y, lo peor, no indicas cual es la opción del
[Ovillo] Respuesta a Wilfredo Rodríguez sobre cr ítica a www.musipan.net
Ante todo, pido perdón por la extensión de este correo, que es una respuesta
sobre la petición de críticas que hizo Wilfredo del sitio
http://www.musipan.net/
- - - - - - - - -
Hola, Wilfredo.
Veo que se ha empleado bastante esfuerzo en construir el sitio aunque, como
todo, es susceptible de mejorar.
Ya que la temática de esta lista son las CSS y el diseño con estándares,
empezaré comentando algunas deficiencias del sitio en este aspecto.
- - - - - - - - - - -
ANÁLISIS DEL CÓDIGO
Has encerrado todo el contenido en un iframe dentro de index.php, pero no le
encuentro justificación, a menos que quieras fastidiar al usuario medio para
que no pueda enlazar a una página interna ni incluirla en marcadores
(favoritos).
Si se analiza la página incluida en el iframe, principal.php, se descubre
un diseño basado en tablas y con numerosos errores. En ésta falta la
declaración doctype que es importante no sólo para validar la página, sino
para conmutar al modo de estándares (aunque como el diseño es por tablas
tampoco es tan dramático). El código contiene, entre otros errores,
atributos desautorizados, atributos inexistentes (como alt para las
imágenes o type para las etiquetas script), etc. Te recomiendo que
incluyas un doctype y valides las páginas para corregir los errores. Peor
incluso es la cantidad de reglas css en línea (unas veinte en principal.php)
para añadir un z-index a las imágenes. Puede que el código se haya realizado
mediante un programa de diseño visual, por lo que no voy a darle más
vueltas.
Lo que sí voy a comentar a nivel de código es la página index.php, el
contenedor del iframe. Incluso este documento tan sencillo contiene errores:
- En la etiqueta iframe has repetido el atributo style. Has escrito:
iframe style=background-color:#804000 ... style=border:none; ...
Debe de ser:
iframe style=background-color:#804000; border:none; ...
También te alerto sobre lo siguiente, aunque técnicamente no sean errores:
- Es recomendable por accesibilidad que indiques el idioma de la página:
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=es lang=es
Cuando el documento se sirve como text/html (como es este caso y el de la
inmensa mayoría de las páginas xhtml), los navegadores HTML ignoran los
atributos xmlns y xml:lang (son del lenguaje xhtml). Sin embargo, sí tienen
en cuenta el parámetro lang.
- En vez de usar el atributo align para centrar, que está desaprobado por el
W3C. Utiliza el equivalente css margin: auto;
- Has escrito en la etiqueta iframe align=top, pero top no es un valor
válido del atributo align. Sí lo son left, center, right y justify,
como puedes ver en
http://www.w3.org/TR/html4/present/graphics.html#adef-align
Quizás te has confundido con el atributo valign o con el atributo align de
otros elementos como caption, que sí admiten top como un valor válido.
- Has indicado estilo en línea mediante el atributo style (no confundir con
la etiqueta style). Te recuerdo que si se indica estilos en línea, es
obligatorio indicar el lenguaje de hoja de estilos por defecto. Se puede
hacer en la cabecera http o con la siguiente etiqueta meta:
meta http-equiv=Content-Style-Type content=text/css /
Ésta es una norma que se la salta todo el mundo (incluido yo).
- Usas comentarios html en el elemento style para esconder las css internas
de los navegadores antiguos que no entienden la etiqueta style. Pero si
este documento se sirviera como application/xhtml+xml, estos estilos se
ignorarían.
Por lo tanto, habría que quitar estos comentarios o indicar un doctype html.
Si los quitas y eres detallista, en prevención de que puedas usar caracteres
como o en la hoja de estilos, marca los estilos como bloque CDATA.
Si, además, te preocupa la compatibilidad de la etiqueta CDATA con ciertos
navegadores, ocúltala con comentarios css:
style type=text/css
/*![CDATA[*/
body {
background-color: ...
}
/*]]*/
/style
http://www.w3.org/TR/xhtml1/#h-4.8
http://www.w3.org/TR/xhtml1/#C_4
- - - - - - - - -
ANÁLISIS VISUAL
- La página de entrada es vistosa, pero no indica claramente de qué trata.
El muchacho vestido de rey y la leyenda MUSIPAN El Reino no dice mucho.
Mirando los demás elementos se puede deducir que se trata de un hotel con
restaurante para celebraciones. Pero tras navegar por el sitio se descubre
que es todo un parque temático. ¿Pero dónde? Pulsando en contáctenos parece
que se trata de algún país de América (después descubrí que era Venezuela).
La primera regla de usabilidad es dar a conocer al usuario sobre qué versa
el sitio. Al menos una línea de etiquetas que diga algo sobre que es un
parque temático y dónde se encuentra.
- Los enlaces no están claramente indicados como tales. Para saber dónde
están hay que ir escudriñando la página con el ratón para ver si el cursor
se convierte en una mano. He intentado pinchar en la foto del rey, e incluso
en el romano de la esquina. Tampoco hay efectos de rollover en los enlaces.
Y, lo peor, no indicas cual es la opción del
Re: [Ovillo] ot: Opiniones y criticas de web
No soy diseñador gráfico, así que lo que te comento seguidamente tómatelo
como sugerencias. Te lo digo porque la mayoría de mis críticas versan sobre
la apariencia del sitio y porque adopto un tono de haz esto y esto
otro
- Si el logotipo de la empresa no es necesariamente el que se muestra, mejor
cámbialo; el efecto de bisel y relieve + sombra paralela sobre una fuente de
tipo sans serif está muy visto. En la página http://www.fontica.com/ tienes
muchas fuentes gratuitas. Prueba a bajarte alguna de tipo script (sólo para
el logo).
- Has alineado el logo a la derecha, pero no hay nada más que lo acompañe,
ni siquiera la línea de etiquetas E S P A C I O + D I S E Ñ O que la has
centrado, al igual que el menú.
- Quita el borde superior y el izquierdo de #contenido. El inferior lo
puedes dejar. Supongo que lo pusiste cuando estabas depurando la página.
- El resaltado de la opción de menú es asimétrico porque has cambiado la css
original. Vuelve a copiarla de nuevo y cambia lo que necesites (texto del
menú, ubicación de las imágenes, etc.). Si no la tienes, cógela de
http://www.13styles.com/css-menus/gloss/
- Por favor, retira ese efecto de transición de cubo en las imágenes. No
queda bien, sobre todo porque las imágenes son de diferente tamaño aunque,
como sólo se reproduce en IE, puede servir de castigo a los que usan este
navegador :))
Mejor un efecto de transición suave (fading) entre imágenes. Prueba a buscar
en Google javascript fade. Aunque no lo he usado, mira en
http://brainerror.net/scripts/javascript/blendtrans/
- Has mejorado las imágenes añadiéndoles bordes y sombras. Queda mucho
mejor. Sólo comentarte a efectos de información que esto también lo puedes
conseguir sin necesidad de editar cada imagen que añadas. Existen soluciones
CSS y también librerías javascript que hacen todo el trabajo.
- Evita la mezcla que has hecho de imágenes verticales con horizontales. Se
produce un salto desagradable cuando cambia la orientación de éstas y las
horizontales sobresalen del límite visual que marcan los demás elementos. Si
quieres mantener los dos tipos, enmárcalas en un contenedor visual común que
no se mueva.
- En un mensaje anterior preguntabas cómo arreglar el texto que aparecía
bajo la imagen cuando pasabas el cursor sobre la miniatura correspondiente.
Aunque bastaba con aplicar la anchura adecuada al contenedor de ese texto
(declaración width: 256px; en la regla de .thumbnail:hover span), veo
que lo has quitado. Te felicito; está mejor así.
- Las imágenes en miniatura se tienen que asociar visualmente con la imagen
ampliada. Colócalas debajo de ella. Además, te permitirá aumentar el texto
del cuerpo de la página sin que te estorben las miniaturas.
- Cuando pasas el ratón sobre las imágenes en miniatura el cursor se
convierte en una mano invitando a pensar que se puede hacer clic. Puedes
cambiar las hojas de estilos para que cuando se pulse con el ratón se
muestre la imagen ampliada hasta que se vuelva a pulsar en otro sitio (ya lo
comenté en otro post). Pero, como prefieres que no pase nada al hacer clic,
mejor deja el cursor por defecto con la declaración
.gallerycontainer a.thumbnail{ cursor: default; } (sin comillas, claro).
- Al pasar el cursor entre las imágenes en miniatura se produce un efecto de
parpadeo en la imagen ampliada. Esto sucede porque hay un espacio entre cada
miniatura. Si quieres mantener este espacio sin que se produzca este feo
efecto, sitúa juntas las miniaturas y genera la sensación visual de
separación añadiendo a éstas un borde ancho de color blanco o un padding.
- El nombre de fuente 'Lucida Sans' que has indicado en la CSS, no está en
la mayoría de los sistemas operativos. Supongo que quisiste escribir 'Lucida
Sans Unicode' que viene por defecto en Windows. En Mac OS tienes 'Lucida
Grande', pero en Linux desconozco si existe una fuente parecida (no sólo en
forma, sino también en tamaño). Mejor usa
font-family: verdana, Bitstream Vera Sans, sans-serif;
Con esto te aseguras que Windows y Mac usarán verdana y Linux Bitstream
Vera Sans.
- Una duda: ¿Las imágenes son trabajos realizados por la empresa? En caso
contrario deberías pensar en no incluirlas en el documento html, sino en las
css. De todas formas, tienes cosas más importantes que cambiar antes que
esto.
- Separa las hojas de estilos. Mantén los estilos del menú y las pequeñas
imágenes de éste separados del resto. Ganarás claridad; sobre todo porque es
trabajo de un tercero y te costará entenderlo mucho más que el tuyo propio.
- Organiza los archivos. Incluye todas las imágenes en la carpeta img/,
excepto las del menú que las puedes incluir en menu/. Tendrás que cambiar
las rutas tanto en los archivos html como en el css.
- Corrige los errores de validación del código fuente. Para ello te aconsejo
que instales el complemento para Firefox HTML Validator (elige serial en
la configuración).
- La página de formulario de contacto está mostrando la dirección de correo
mediante form
Re: [Ovillo] tutorial sobre uso de divs en css
Hola, William. Lo primero que tienes que hacer es establecer en modo de estándares al Internet Explorer. Para ello escribe una declaración doctype válida al principio del documento, por ejemplo: !DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd; Ten en cuenta que tiene que ser lo primero que aparezca; no sitúes nada antes. Con sólo insertar esa línea consigues que IE procure seguir los estándares (bueno... como puede) en vez de intentar visualizar la página como lo haría IE5 (compatibilidad hacia atrás). También te recomiendo que añadas el complemento HTML Validator a Firefox para validar tus páginas. Tras instalarlo, elige serial como método de validación. Acuérdate de pulsar en el icono que aparece en la parte derecha de la barra de tareas del firefox para ver tus fallos de validación. Seguramente esto no resuelva el problema de la raya que comentas, pero es lo primero que tendrías que corregir. Saludos. 2008/12/29 William Diaz Pabón - Hotmail. com wid...@hotmail.com Buenas tardes a todos de la lista. soy nuevo en esto del CSS y deseo conseguir un tutorial para aprender a manejar los divs que dan mucho problema sobre todo en el posicionamiento. Tengo una pagina que se ve super bien en Firefox, chrome, pero en IE 7 no se ve bien una partecita y quiero estudiar mas sobre el tema a para ver si lo puedo solucionar. si alguien me puede ayudar con el problemita aquí esta la página en Internet: http://infotechsoluciones.com/fex/template/default/index_ppal.htm El problema es que la parte inferior de la pestaña muestra una linea, cosa que no se ve en firefox ni en chrome. ___ 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] tutorial sobre uso de divs en css
El código es demasiado complicado para una página tan sencilla. Supongo que
para el menú has usado Dreamweaver u otro programa que te ha generado el
código automáticamente ¿o has copiado ese engendro de algún sitio?.
En fin, prueba a añadir, en tu archivo css, la declaración position:
relative; (sin las comillas, claro) en la regla de #tabs-inside:
#tabs-inside {
padding-top:0px;
padding-left:2px;
padding-right:2px;
padding-bottom:2px;
position: relative; /* Hack que sitúa el div por encima en IE */
z-index: 20; /* no hace falta */
}
Saludos
2008/12/29 William Diaz Pabón - Hotmail. com wid...@hotmail.com
Buenas tardes a todos de la lista.
soy nuevo en esto del CSS y deseo conseguir un tutorial para aprender a
manejar los divs que dan mucho problema sobre todo en el posicionamiento.
Tengo una pagina que se ve super bien en Firefox, chrome, pero en IE 7 no
se ve bien una partecita y quiero estudiar mas sobre el tema a para ver si
lo puedo solucionar.
si alguien me puede ayudar con el problemita aquí esta la página en
Internet:
http://infotechsoluciones.com/fex/template/default/index_ppal.htm
El problema es que la parte inferior de la pestaña muestra una linea, cosa
que no se ve en firefox ni en chrome.
___
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] mostrar informacion en un div
Gracias por tus críticas, Ángel. Tienes razón. Sólo comentarte que no pretendo que mis correos caigan en saco roto. Cuando me preguntan algo que ya he respondido en alguna ocasión, siempre me acuerdo de que tengo que plasmarlo por escrito para no repetir el esfuerzo, pero pocas veces lo hago, generalmente por falta de tiempo o porque le doy más prioridad a otras tareas. Por eso, el correo electrónico (en general, no hablo de esta lista de distribución en concreto) me da la oportunidad de almacenar mis respuestas para poder reutilizarlas posteriormente. Procuraré a partir de ahora hacer lo que dices, resolver dudas concretas en esta lista y extenderme más en los correos privados. Saludos. El 28 de diciembre de 2008 12:13, Angel Martin Alganza a...@ugr.esescribió: Hola, Daniel, On Sun, Dec 28, 2008 at 02:50:23AM +0100, Daniel Navarro wrote: valiente pero quería motivarte). Lo que si te ruego es que me avises si decides en algún momento no seguir adelante. No pretendo desmerecer tu esfuerzo, que me parece enorme, sino al contrario. Pero, ¿todo eso no está ya explicado en libros, manuales y tutoriales por todos los sitios? ¿No es más lógico indicar alguno/s de esos recursos en lugar de reescribirlos en mensajes de correo y dedicar el esfuerzo a aclarar dudas concretas y explicar puntos que no estén claros o no se entiendan bien, etc.? Perdón por meterme donde no me llaman, pero me parece demasiado esfuerzo, además de no ser un objetivo de una lista de mensajería, en mi opinión. Otra cosa sería que desearas emplear todo ese esfuerzo en escribir un manual, en ese caso todo esfuerzo sería poco. Un saludo, Ángel ___ 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] mostrar informacion en un div
Es sencillo ... para alguien que sepa algo de php. Si no sabes nada, supongo que casi todo lo que te cuente te sonará a chino. Pero si eres valiente y le echas coraje te recomiendo que lo intentes (bueno, no hace falta ser tan valiente pero quería motivarte). Lo que si te ruego es que me avises si decides en algún momento no seguir adelante. Ojo, presupongo que usas Windows. En caso contrario dímelo. Lo primero que tienes que saber es que las páginas hechas en php no se pueden visualizar directamente en tu ordenador tal y como haces con los archivos html. En estos últimos basta con hacer doble clic con el ratón para que se abra el navegador predeterminado mostrando la flamante página que acabas de hacer. Sin embargo, para los archivos php necesitas un *intérprete de php*, que es un programa que analiza el código fuente de tu archivo buscando todo aquello que esté entre las etiquetas *?php* y *?*. Seguidamente realiza las operaciones necesarias y te devuelve sólo código html (con las sustituciones pertinentes). Te preguntarás si tienes que instalar el intérprete de php. Sí y no. No, porque los proveedores de alojamiento lo suelen ofrecer en sus paquetes, incluso los más baratos. Y Sí, porque durante el proceso de construcción del sitio debes de trabajar localmente en tu ordenador, no directamente en el servidor. ¿Y es muy difícil instalar un intérprete de php en el ordenador?. Sinceramente, no. Es más puedes tener todo un servidor web, un interprete de php y un servidor de mysql (y más cosas) simplemente descomprimiendo un archivo ya preparado. Lo tienes en http://www.apachefriends.org/en/xampp-windows.html En esa misma página, vete a *Download XAMPP Lite* y bájate el archivo *EXE (7-zip)*. Una vez descargado (la versión actual es *xampplite-win32-1.7.0.exe*), haz doble clic sobre él. Te saldrá una ventana preguntando donde descomprimirlo y por defecto te propone la carpeta donde tienes este archivo. Cambia la ruta a *C:\* (o cualquier otra letra de unidad donde lo quieras instalar, por ejemplo, E:\). Aunque lo puedes descomprimir en cualquier carpeta, si lo haces en la raiz del disco duro te evitarás ejecutar posteriormente un fichero de configuración. No temas, que no se ensuciará el directorio raiz ya que todo se descomprimirá en una sola carpeta: *C:\xampplite*\ Entra en *C:\xampplite*. Allí encontraras dos ficheros llamados * xampp_start.exe* y *xampp_stop.exe*. Crea dos accesos directos en el escritorio a estos archivos. Para ello, pulsa con el botón derecho en cada uno de ellos y elige, en el menú contextual que aparece, *Enviar a Escritorio* (crear acceso directo). Haz doble clic en *xampp_start.exe *(mejor en el acceso directo que acabas de crear) y ¡TACHAN!, ya tienes tu servidor web funcionando. OJO, no cierres nunca la ventanita en negro que aparece, sólo minimízala para que no te estorbe. Para cerrarlo sólo tienes que ejecutar *xampp_stop.exe*. Y, lo mejor de todo, si lo quieres desinstalar alguna vez basta con eliminar la carpeta *C:\xampplite*. Incluso puedes copiar esta carpeta en otro ordenador y te funcionará igualmente, con todos tus documentos y configuraciones. ¿Cómo visualizas las páginas que diseñes?. Ya no vale con hacer doble clic sobre el archivo. Para poderlos ver tienes que colocarlos en lo que se denomina *Document Root*, que es el directorio donde tienes que colocar los documentos web (.html, .php, etc.) para que el servidor web los pueda ofrecer. En el caso de xampplite, se encuentra en: *C:\xampplite\htdocs* Te recomiendo que crees carpetas para tus sitios, en la forma: *C:\xampplite\htdocs\misitio1\ C:\xampplite\htdocs\misitio2\* y así. Supongamos que creas el archivo *mipagina.html* y lo guardas en * C:\xampplite\htdocs\misitio\* Para poder ver la página, tienes que abrir un navegador web y teclear en la barra de direcciones: *http://localhost/misitio/mipagina.html* Aviso: fíjate que en el navegador indicas la url mediante barras / (*slash *en inglés), que se obtiene con MAY+7 y no la contrabarra \ de Windows (*backslash *en inglés). Otro aviso: ¿no ves la página? Comprueba que la dirección es la correcta, y ¡que tienes la ventanita negra! En caso contrario, para el servidor con * xampp_stop.exe* y vuelve a arrancarlo con *xampp_start.exe*. Si nombras tu página como *index.html* (o *index.php* cuando trabajes con php), entonces puedes obviar el nombre del documento al teclear la url en la barra de direcciones: *http://localhost/misitio/* ESTABLECER SEGURIDAD AL SERVIDOR Aunque estás trabajando en local, es bueno que te acostumbres a asegurar mediante contraseña el servidor de base de datos y las páginas de configuración de xampp. La primera vez que teclees *http://localhost* en tu navegador, te aparecerá una ventana preguntándote el idioma. Elige Español. Puedes comprobar en la barra de direcciones que te han redirigido a * http://localhost/xampp/index.php*. Pulsa, en el menú de la izquierda, en *Chequeo de seguridad*. Se abrirá una nueva ventana (o
Re: [Ovillo] Uso de ems en anchos, rellenos y márg enes
Hola, Javier.
La respuesta la tienes en la especificación CSS2.1 del W3C. La tienes en
formato pdf en http://www.w3.org/TR/CSS/css2.pdf. Esto es lo que dice en su
apartado *4.3.2 Lengths*:
*The 'em' unit is equal to the computed value of the 'font-size' property of
the element on which it is used. The exception is when 'em' occurs in the
value of the 'font-size' property itself, in which case it refers to the
font size of the parent element. It may be used for vertical or horizontal
measurement. (This unit is also sometimes called the quad-width in
typographic texts.)*
[Traducción]
*La unidad 'em' es igual al valor calculado de la propiedad
http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#propdef-font-size'font-size'
del elemento en el que se usa. La excepción sucede cuando 'em' aparece en el
valor de la propia propiedad 'font-size', en cuyo caso se refiere al tamaño
de la fuente del elemento padre. Puede usarse para longitudes verticales u
horizontales. (Esta unidad a veces se denomina cuadratín en los textos sobre
tipografía.)*
Por lo tanto, en el ejemplo que has puesto, el valor equivalente de
*margin-bottom:
1em* es 20px.
Saludos.
El 21 de diciembre de 2008 13:59, Javier Guerrero demix...@gmail.comescribió:
Hola a todos.
Quería consultarles el tema de las unidades de medidas* para utilizar en
las
cajas *(width, padding, margin).
Siempre he establecido los anchos, rellenos y márgenes con pixeles lo cual
hasta ahora me ha servido, pues casi siempre maqueto diseños con anchos
fijos, sin embargo, la duda con respecto al uso de los pixel surgió al
darme
cuenta que en el tamaño de la tipografía estoy utilizando ems,
estableciendo como base el tamaño relativo de 62.5% (10px), así:
body {
font-size: 62.5%; /* 16px × 62.5% = 10px */
}
*Referencia:
http://www.maratz.com/blog/archives/2005/10/21/typetesters-base-font-size/
*
y cuando quiero establecer, por ejemplo el tamaño de un titular de primer,
lo haría así:
h1 {
font-size: 2em; /* 10px × 2em = 20px */
}
Bueno, eso con las tipografías, pero ¿qué pasaría si quisiera establecer el
margen inferior de un titular de primer nivel en ems? Expongo un ejemplo
para tratar de explicar mi duda:
h1 {
margin-bottom: 1em;
}
Según la teoría:
*em, relativa respecto del tamaño de letra empleado. Aunque no es una
definición exacta, el valor de 1 em se puede aproximar por la anchura de
la
letra M (eme mayúscula) del tipo de letra que se esté utilizando.
http://www.librosweb.es/css/capitulo3/unidades_de_medida.html
*
Ahora, yo supongo que el margen inferior que estoy estableciendo es de
10px,
pues es el tamaño base que he definio en el body.
¿Qué opinan al respecto? ¿Estoy en lo cierto?
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
___
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] Simular legend
En Internet Explorer falla la posición absoluta y la leyenda se desplaza a
la derecha por culpa del padding del contenedor. Para solucionarlo puedes
inluir *height: 1%* (sin las comillas) en la CSS del div contenedor de
clase con_leyenda.
Saludos.
El 17 de diciembre de 2008 11:21, Daniel Navarro danipe...@gmail.comescribió:
Hola:
Puedes crear un elemento de clase leyenda y posicionarlo absolutamente
respecto del elemento que lo contiene. Para que la posición sea relativa al
elemento contenedor, tendrás que establecer position: relative en éste.
HTML
div class=con_leyenda
div *class=leyenda*Leyenda/div
p
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
dictum nulla et orci.
/p
/div
CSS
* {
/* Establece a 0 los rellenos y márgenes por defecto del navegador */
margin: 0;
padding: 0;
}
.con_leyenda {
/* Establece este elemento como marco de referencia
para los posicionados dentro de él de forma absoluta */
*position: relative;*
padding: 20px;
* border: 1px solid #aaa;*
margin: 50px;
}
.leyenda {*
position: absolute;
height: 1.5em;
top: -0.75em;
left: 1.2em;*
padding: 3px;
border: 1px solid #aaa;
* background-color: white; /* impide que se muestre el borde del
contenedor */
*}*
*
2008/12/17 Rodrigo Álvarez Virgós rodri.vir...@gmail.com
Hola a todos
¿Existe la manera de poner un borde a una capa con una leyenda integrada
en el propio borde (como hace la etiqueta legend con los fieldset?)
___
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
