|
Faq 54 - Ver página en Safari Pregunta: No tengo dinero para comprarme una MAC :P ¿Cómo hago para ver la web que maqueté en Safari? Respuesta: Puedes ver tu sitio en Safari 2.0, Internet Explorer 5.2.3 y Netscape 1.7.7 de Mac con ésta utilidad: http://www.fundisom.com/g5/ Genera Screenshot en:
|
Faq-55 Fondo transparente para tablas Categoria: Tablas Pregunta: ¿Como poner un fondo transparente a una tabla usando un PNG? Respuesta: Ejemplo Código HTML: <style type="text/css">En la tabla se pone id="fondo" yo lo puse en una tabla, si se pone en la etiqueta <table> y la tabla tiene bordes sobrepondra la imagen a los bordes, si se pone en el <td> no. Funciona en: Lo he probado en Firefox 1.5, en IE 6 y en Opera 8.54 y en los 3 funciona bien. |
Faq 56.- Soporte de CSS en clientes de correo Pregunta: Estoy usando estándares para armar un e-mail (newsletter) ¿Qué elementos o propiedades soportan los diferentes clientes de correo? Respuesta: En Guía de Soporte de CSS en el correo electrónico nos muestran que clientes (sean web o de escritorio) soportan elementos y propiedades que se relacionan con CSS, entre ellos:
|
Faq - 57 Quitar punteado de los enlaces P - ¿Como quitar el punteado de los enlaces? R - Código HTML: a {outline:0;} |
FAQ - 58 Para que son las hojas de estilos externas ? Pregunta: Como puedo aplicar estilos que sean unicos para todo el sitio. Respuesta: Para ello en el head de tu documento (X)HTML incluyes la siguiente etiqueta: Cita:
Puntos a aclarar: 1-rel="stylesheets", atributo que sirve para indicarle al navegador, la relación con el documento llamado, o sea rel = relación. En este caso, Stylesheet(Hoja de Estilo). 2-type="text/css", atributo que sirve para indicarle al documento que tipo de lenguaje estamos utilizando, al igual que type="text/javascript" para Javascript. 3- Si usas un documento XHTML, debes cerrar la etiqueta con /> PD: Se parece mucho a la FAQ#2, pero veo que siguen habiendo muchas preguntas referente a esto, por lo que me decidi a ampliar la FAQ. |
FAQ - 59. Herramientas para ayudar al diseño web TEMA: ADD-ONs de Firefox WEB DEVELOPER Este excelente add-on puede simplificar la vida de los desarrolladores de sitios web de forma increíble: https://addons.mozilla.org/firefox/60/ Algunas características importantes: * Edición de CSS en tiempo real (en la misma página) * Habilitación/Deshabilitación de elementos: - Cookies - Imagenes - CSS - Cache - Javascript - etc * Visualización de elementos de markup - Frames - Tablas - Elementos posicionados - Links * Validación de (X)HTML y CSS de forma conectada y local * Validación de Links, WAI, Feed, Section 508 Entre otras, bueno, esta herramienta es excelente para probar paso a paso los la construcción de nuestra página Funciona con Firefox 1.0 - 2.0.0.* ALL Mozilla 1.0 - 1.7 ALL |
FAQ - 60. Manuales y referencias Manuales y Referencias (Inglés) http://www.w3schools.com/css/default.asp http://cssdocs.org/ http://www.blooberry.com/indexdot/css/propindex/all.htm Manuales y Referencias (Español) http://www.desarrolloweb.com/manuale...html#capitulos http://www.sidar.org/recur/desdi/tra...s/propidx.html http://usuarios.lycos.es/dhtml_club/...ropiedades.htm http://www.wikilearning.com/lista_de...cp-5366-20.htm http://www.htmlhelp.com/es/reference...roperties.html http://www.sidar.org/recur/desdi/mcss/manual/indice.php |
FAQ 61 - Esquinas redondeadas Esta previsto que en CS3 exista un atributo que permita redondear las esquinas. http://www.w3.org/TR/2002/WD-css3-bo...-border-radius Mientras tanto existen varias opciones con las CSS2 actuales Redondear esquinas con CSS2, ¡sin imágenes! http://www.cssplay.co.uk/boxes/snazzy.html Y aun mas, se pueden hacer todas estas formas con CSS2, ¡sin imágenes! http://www.cssplay.co.uk/boxes/krazy.html Usando imágenes está este generador automático (de código y de las imágenes) online: http://www.neuroticweb.com/recursos/css-rounded-box/ También existen otras aplicaciones, que usan JavaScript para generar el código necesario http://www.html.it/articoli/niftycube/index.html NIFTY CORNERS http://www.curvycorners.net/index.php CURVY CORNERS . |
FAQ - 62. Herramientas para ayudar al diseño web (Firebug) No olvidarse de la tambien exelente herramienta FIREBUG para Firefox https://addons.mozilla.org/firefox/1843/ EXELENTE, recomendable Sirve principalmente para localizar código pinchando sobre un elemento de una página web y viceversa; para localizar elementos de la página web desde el código. También cuenta con un debugger de javascript, consola que muestra errores javascript y errores CSS, línea de comandos javascript, espía en el tráfico del XMLHttpRequest (es decir, para su uso con aplicaciones AJAX), etc. |
FAQ - 63. Herramientas para ayudar al diseño web (Edit Css) Edit CSS https://addons.mozilla.org/firefox/179/ Te permite realizar edición básica de hojas de estilo CSS en el panel lateral de Firefox y ver los cambios al instante. La extensión abre la hoja de estilos de la página activa (incluyendo cualquier pagina online) y te la muestra en el panel lateral, desde donde la puedes guardar en tu disco duro después de editarla. Agradecimientos: bhagat |
FAQ - 64. Herramienta online que genera pantallazos en distintos navegadores http://browsershots.org/ Esta herramienta ofrece capturas de pantalla en los distintos navegadores. Con ello se logra ver el aspecto de la wb que estamos desarrollando en el momento. Navegadores soportados Dillo 0.8, Epiphany 2.16, Firebird 0.6, Firebird 0.7, Firefox 1.0, Firefox 1.5, Firefox 2.0, Firefox 3.0, Flock 0.7, Galeon 2.0, Iceweasel 2.0, Konqueror 3.5, Mozilla 1.0, Mozilla 1.1, Mozilla 1.2, Mozilla 1.3, Mozilla 1.4, Mozilla 1.5, Mozilla 1.6, Mozilla 1.7, Navigator 4.8, Opera 9.2, Opera 9.10, Phoenix 0.1, Phoenix 0.2, Phoenix 0.3, Phoenix 0.4, Phoenix 0.5, SeaMonkey 1.0, SeaMonkey 1.1, MSIE 5.0, MSIE 5.5, MSIE 6.0, MSIE 7.0, Safari 2.0. |
Re: FAQ's de CSS Programa para crear menús de navegación con CSS: |CSS tab designer 2| |
Re: FAQ's de CSS Pregunta: como posicionar imagenes en el fondo de la página? Respuesta: es sencillo, simplemente tienes que definir el alto del body,en manera ralativa, y posicionar la imagen al fondo, algo asi: Código: html,body{http://www.crysfel.com/index.php/200...o-al-inferior/ have funnnnnnnnnnnnn :adios: |
No imprimir ciertas partes de una página (todos los navegadores) Pregunta: Como imprimir una página pero no imprimir el menu u otros elemenos en cualquier navegador. Respuesta: existe una solución muuuucho más simple que la anterior y además funciona con todos los navegadores y no sólo con IEplorer. Se trata de crear el siguiente estilo: Código: <style media="print">:adios: |
FAQ's 68 - 10 errores comunes en los css 10 errores comunes en los css [DesarrolloWeb] Boletín 112, 4 de Diciembre de 2007. Cita:
PD: me acaba de llegar el boletin y creo que este es el articulo mas importante de esta edicion, por eso no dude en publicarlo aqui en las FAQ de CSS. saludos y suerte :aplauso: |
FAQ's 69 - Manual |
Re: FAQ's de CSS Atajos para estilos tipográficos: http://www.forosdelweb.com/f53/micro...uentes-555641/ |
FAQ's CSS: Menú desplegable 100% CSS Hola a todos. Como mucha gente pregunta por un menú desplegable que esté hecho sólo con CSS, y algunos dan problemas con los diferentes navegadores, he hecho uno horizontal de dos niveles y centrado en la página, que pueda servir como referencia para desarrollar el propio a partir de ahí. Menú CSS La hoja de estilo Ha sido probado y funciona correctamente en los siguientes navegadores: - Firefox 2 y 3b5 - IE 6 y 7 - Opera 9.50 - Safari 3.1 Windows - Konkeror - Firefox 2.0 Linux El código es válido XHTML 1.0 Strict y la CSS sin errores ni advertencias. Espero que os sirva. |
FAQ's CSS: Menú desplegable 100% CSS Como parece que están siendo prácticos, y por las consultas he ido haciendo más opciones, los voy a recopilar aquí para quien le pueda ser útil. Menú 2: menú horizontal con el segundo nivel también en horizontal. Y su css. Menú 3: segundo nivel en vertical, como el primero, pero que despliega hacia arriba. Y su css. Menú 4: segundo nivel en horizontal, como el segundo, pero hay que pulsar para que aparezca y queda activo tras hacerlo. Y su css. Menú 5: menú en vertical, con el segundo nivel también en vertical a su derecha. Y su css. Menú 6: Menú vertical, que despliega a la derecha en horizontal. Y su css Menú 7: vertical, con 4 niveles de profundidad también en vertical. Los que despliegan son los niveles 2, 2.1, 2.1.1 Y su css. Menú 12: menú horizontal que despliega en vertical, con un tercer nivel también en vertical a su derecha. Y su css. Es lo que hay por el momento. Seguiremos añadiendo. ;-) Mikel. |
FAQ's de CSS: Pie siempre abajo P: ¿Cómo hacer para que el pie de página se mantenga siempre abajo, haya mucho o poco texto? R: Es algo menos fácil de lo que parece a simple vista. Aquí pongo un ejemplo Para quien no entienda el código a la primera, aquí pongo un zip que contiene un artículo con una breve explicación y los ejemplos. Por si a alguien le pueda interesar. |
FAQ's de CSS: Columnas equilibradas P: ¿Cómo hacer para que dos columnas estén siempre equilibradas, y si el contenido de una crece la otra también? R: Esta es una de las cosas que más dudas y consultas suscita en los foros dedicados a la maquetación mediante CSS: cómo conseguir que teniendo dos o tres columnas, todas crezcan a la par cuando el contenido de una de ellas crece. Y es que no es complicado en absoluto, pero ahí está nuestro buen enemigo Internet Explorer 6, para entretenernos un poco y obligarnos a pensar (gracias, Bill). Olvidándonos de IE6 la cosa sería todavía más sencilla porque todos los navegadores saben dimensionar cajas con posición absoluta en arreglo a las coordenadas top y bottom, o bien saben usar display table y display table-cell, por ejemplo, pero desgraciadamente el susodicho IE6 no sabe usar ningua de esas cosas, por lo que nos da al traste con el diseño si queremos que sea lo más compatible posible. Existen infinidad de variantes en cuanto al asunto de conseguir que nuestras columnas queden equilibradas cuando una de ellas crece: la solución que presento se refiere a dos columnas que queden separadas entre sí. Cita:
Si alguien desea leer una explicación más detallada del por qué de las cosas, puede bajarse libremente este zip que contiene el ejemplo con contenido y un artículo que explica todos los detalles del código: http://www.araudi.net/forosdelweb/Co...uilibradas.zip |
Respuesta: FAQ's de CSS (Premisa: quizás sea de tu interés también hacer "botones con esquinas redondeadas utilizando sólo css. Sigue el enlace al foro de css.) EL EFECTO HOVER SOBRE IMÁGENES, CON CSS, claro. Encontrado en abeontech.com y que traduzco por libre: "Con css todo lo que necesitas hacer es colocar unas líneas en tu hoja de estilo para lograr el efecto rollover sobre imágenes o texto. No necesitas una segunda imagen o script. Paso 1: Coloca entre <head> y </head> el siguiente código: Cita:
Paso 2 Ahora añade la clase 'class="linkopaity" ' a el enlace que quiereas que tenga el rollover. Funciona con enlaces de texto e imágenes.: Código HTML: <a class="linkopacity" href="#" title="CSS-Rollover" ><img src="mi-imagen.jpg" alt="CSS tutorials"></a>Probado con FF 3.0.3, ie7, Opera 9.25 Un saludo ௫ |
Respuesta: FAQ's de CSS Pregunta: ¿Cómo usar una fuente no segura con css? Válido incluso para ie Respuesta: EDITO: en el #80 tienes una guía para hacer los .eot Cita:
Aquí lo vi aquí también Vale, en castellano en anieto2k |
FAQ - 77 Especificidad de los selectores en CSS P: ¿Cual es la especificidad de los selectores en CSS? Re: * = 0 p = 1 (cualquier etiqueta de html) :fisrt-line = 1 (Cualquier Pseudo-elemento) [rel=up] = 1 (Cualquier selector de atributo) .class = 10 :hover= 10 (Cualquier Pseudo-class) #id = 100 <p style="..."> = 1000 (cualquier etiqueta de html) Saludos. |
Respuesta: FAQ's de CSS |
Respuesta: FAQ's de CSS Los bugs de los navegadores, encontrarlos, arreglarlos y aprender a usar hacks avanzados en CSS. Muy útil: http://www.positioniseverything.net/ http://www.positioniseverything.net/explorer.html Un saludo. :adios: |
Respuesta: FAQ's de CSS Complementando el apunte de Nathan_1979 http://haslayout.net/ Css bug's, hasLayout, comentarios condicionales para ie, desde la ver. 6 hasta la 8 ... su descripción y cómo solucionarlos. |
Respuesta: FAQ's de CSS ¿Cómo incluir tipografías distintas a las "safety-fonts" en las páginas web?: He realizado una guía breve de cómo hacerlo utilizando la regla @font-face para aquellos navegadores que la soportan y cómo generar los archivos .eot que necesita la familia de internet explorer: Aquí la guía. Aquí el hilo donde podrás comentar al respecto. Un saludo P.D.: en la guía podrás ver también que sí funciona. |
¿Cómo Centrar vertical un texto dentro de un div? ¿Cómo Centrar vertical un texto dentro de un div? Hola que tal aqui les traigo dos sencillas propiedades para poder centrar un texto verticalmente
Ejemplo: Código: <style type="text/css">http://img685.imageshack.us/img685/6...neamientov.png PD: Tambien sirve para imagenes Saludos :adios: y espero que les sirva :arriba: |
Respuesta: FAQ's de CSS ¿Como centrar un div sin contenido alguno? Es muy sencillo, si queremos centrar un div contenedor el cual no tenga ningún contenido hay que hacerlo de la siguiente manera: Código HTML: <style type="text/css">****** Le puse un borde para que puedan comprobar el funcionamiento. Recomiendo también poner alguna palabra y tal :) !! Espero que les sirva. |
Respuesta: FAQ's de CSS ¿Como crear columnas “Fácilmente” con muy poco Código? Además que funcione fino en los diferentes navegadores, Además sin usar tablas, Además Sin usar la etiqueta “li”, Además etc. Ejemplo 1 Código: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Código: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.positioniseverything.net/easyclearing.html Por si acaso subí una copia de la pagina web en caso de que no este online. a varios servidores. y los ejemplos están incluidos. http://www.mediafire.com/file/dnznzdzymnr/ejemplos.zip http://www.megaupload.com/?d=8EWV1LI0 PD: La explicación de como funciona esta en ingles, Seria interesante verla en español y de fácil compresión. Y ver los ejemplos Mejorados ya que no son perfectos pero tienen la idea, Saludos. |
Respuesta: FAQ's de CSS 30 Selectores CSS que se deben memorizar (CSS3): http://net.tutsplus.com/tutorials/ht...must-memorize/ Excelente artículo, está en inglés, pero muy fácil de entender, con demos incluidos... Realmente muy bueno y útil. :arriba: |
Columnas con misma altura / height 100% ¿Como hacer que un div se extienda al 100%? ¿Cómo lograr que varias columnas se extiendan al height 100%? Tal como mencionó Mikmoro en su post anterior, hay muchas maneras de lograrlo, y a veces te puede servir una, y otras veces otra. Aquí pongo un enlace con un método que a mí me ha funcionado bien: (está en inglés) Raincity Studios: Equal height columns with css |
Esquinas redondeadas sin imágenes ¿Cómo hago esquinas redondeadas sin usar imágenes? Con CSS3 es muy fácil, sin embargo, no lo soportan algunas versiones de navegadores. Aquí hay una manera de lograrlo con CSS y Javascript. Presenta varios ejemplos de como lograrlo para distintas situaciones: Nifty Corners Cube |
Respuesta: FAQ's de CSS Pregunta: No me lee una clase cuando la tengo definida en mi hoja de estilos Solución: Una posible respuesta sería... tenemos la hoja de estilos
Código CSS:
Ver original Y le ponemos la clase margen-der-20 y no funciona
Código HTML:
Ver original La solución es cambiar el comentario en la hoja de estilos de la siguiente manera. Cambiar las // por /* */ y ya funcionará
Código CSS:
Ver original |
| La zona horaria es GMT -6. Ahora son las 22:41. |
Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.