Foros del Web - FAQ's de CSS

Página 3 de 3

Mostrar 50 mensajes desde este tema en una página

Foros del Web (http://www.forosdelweb.com/)

- CSS (http://www.forosdelweb.com/f53/)

- - FAQ's de CSS (http://www.forosdelweb.com/f53/faqs-css-114830/)

metacortex

05/02/2007 19:39

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.

yournightmare86

12/03/2007 09:34

Re: FAQ's de CSS

Programa para crear menús de navegación con CSS:
|CSS tab designer 2|

stock

22/05/2007 10:13

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{

        margin:0px;

        padding:0px;

        min-height:100%;

}

body{

        background-image:url(fondo.jpg);

        background-position:center bottom;

        background-repeat:no-repeat;

}
 

* html body{

        height:100%;

}

con eso es suficiente, si quieres saber el por que? te recomiendo visitar el link de abajo, donde se explica paso a paso y a detalle los conceptos del por que ese codigo, como se fue construllendo!

http://www.crysfel.com/index.php/200...o-al-inferior/

have funnnnnnnnnnnnn :adios:

dblanco

24/07/2007 08:09

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">

        .noPrint {

                display: none;

        }

</style>

luego aplicamos la clase "noPrint" a todo lo que queremos que NO se imprima.

:adios:

rogertm

04/12/2007 08:15

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:

Esta es una recopilación de errores comunes en las hojas de estilo. Es bastante provechoso hacer una lista con estos y otros errores comunes.
1.Uso innecesario del valor 0

El código siguiente no necesita la unidad especificada si el valor es cero.

padding:0px 0px 5px 0px;

En su lugar puede ser escrito de esta manera:

padding:0 0 5px 0;

De la misma manera es igual para otros estilos. Ej.:

margin:0;

No malgastes espacios agregando unidades tales como px, pt, em, etc, cuando el valor es cero. La única razón de hacer esto es si necesitas cambiar estos valores más tarde. Si no declarar estas unidades no tiene sentido. Los pixeles cero son iguales que los puntos cero.

Sin embargo,line-height puede no tener unidad.Por eso es válido lo siguiente:

line-height:1;

De cualquier manera puedes utilizar una unidad en concreto como em si lo deseas.

2.Los colores en formato hexadecimal necesitan una almohadilla

Esto está mal:

color: ea6bc2;

Debe ser:

color: #ea6bc2;

O esto otro:

color: rgb (234.107.194);

3.Valores duplicados en los códigos de colores

No escribir el código de esta manera:

color: #ffffff;
background-color:#000000;
border:1px solid #ee66aa;

Los valores duplicados pueden ser omitidos.Escribiendo los códigos de esta manera:

color:#fff;
background-color:#000;
border:1px solid #e6a;

¡Por supuesto esto no debes hacerlo con códigos como este!

color: #fe69b2;

4.Evitar repeticiones de código innecesaria

Evita usar varias líneas cuando lo puedes conseguir con una sola. Por ejemplo, al fijar los bordes, algunas veces se debe hacer por separado pero en casos como el siguiente no es necesario:

border-top:1px solid #00f;
border-right:1px solid #00f;
border-bottom:1px solid #00f;
border-left:1px solid #00f;

Podríamos resumirlo en una única línea esta:

border:1px solid #00f;

5.La duplicación es necesario con los estilos en cascada

En los estilos en cascada es aceptable repetir el mismo codigo para un elemento elemento dos veces, si significa evitar la repetición mencionada en el punto arriba. Por ejemplo, digámos que tenermos un elemento donde solamente es diferente el "border" izquierda. En vez de poner cada "border" escrito usando cuatro líneas, uso sólo dos:

border:1px solid #00f;
border-left:1px solid #f00;

En este caso primero definimos todos los "borders" con el mismo color pero más tarde para ahorrarnos dos lineas de código redefinimos el "border" izquierda a otro color, de esta manera hemos ahorrado dos líneas de código.
El ejemplo malgastando espacio quedaría así:

border-top:1px solid #00f;
border-right:1px solid #00f;
border-bottom:1px solid #00f;
border-left:1px solid #f00;

Obviamente supuestamente este ahorro de carga supone un retraso en la carga de la página pues estamos definiendo el "border" izquierda dos veces, pero la carga de este proceso es insignificante.

6.Los estilos inválidos no hacen nada

Un ejemplo es suficiente para explicar este error:

padding:auto

Este estilo solo puede ser aplicado a width y height pero no a padding.

7.Código Específico para cada navegador

Obviamente este tipo de código solo funcionará en el navegador al que va destinado , pero es hay que pensar si es rentable puesto que solo algunos usuarios podrán apreciar esos cambio.

8.Espacio perdido

No estoy seguro del porqué pero muchos diseñadores estan empeñados en desaprovechar el espacio en su código, usando un montón de innecesarios saltos de línea. Recuerda que eso sólo lo verás tu y estas haciendo un uso excesivo de ancho de banda. Tambien tu código será más facil de leer puesto que tendrá menos "boquetes".

Por supuesto es sabio dejar un cierto espacio para mantenerlo legible, aunque a algunos les encanta condensar todo, no dejando ningún espacio.

9.Especificar los colores sin usar palabras

Definir los colores usando las palabras que lo definen no es una buena idea puesto que estaríamos confiando en el navegador para que el interprete que color y código debe aplicar.Las tonalidades para un mismo nombre de color cambian mucho de un navegador a otro.

Es una buena práctica especificar siempre el color por su código hexadecimal.
Ej.: utilizar "#fff" en lugar de blanco.

10.Agrupar estilos idénticos

Es común ver los estilo escritos una y otra vez con el mismo código, aún cuando el estilo es igual.

Sería conveniente agruparlos y asi optimizaríamos espacio:

h1, p, #footer, .intro {
font-family:Arial,Helvetica,sans-serif;
}

Tambien nos hara mucho más facil la tarea de actualizar el código.

fuente => http://www.desarrolloweb.com/articul...munes-css.html

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:

DoPeY-BBS

18/12/2007 13:01

FAQ's 69 - Manual

Un Excelente manual

http://www.virtualnauta.com/es/css/csshome.php

metacortex

09/02/2008 14:06

Re: FAQ's de CSS

Atajos para estilos tipográficos: http://www.forosdelweb.com/f53/micro...uentes-555641/

Mikmoro

10/06/2008 17:50

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.

Mikmoro

18/06/2008 07:11

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.

Mikmoro

12/09/2008 17:56

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.

Mikmoro

25/09/2008 09:49

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:

<!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" lang="es-es">
<head>
<title>Columnas equilibradas</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#caja_izq {width: 850px;
margin: 20px auto;
color:#fff;
background-color: #4c9ab1;
overflow: auto;
}
#caja_der {width: 500px;
float: right;
background-color: #82b04d;
border-left: solid 30px #fff;
}
.columna_izquierda {width: 280px;
float: left;
padding: 20px;
position: relative;
margin-left: -350px;
}
.columna_derecha {width: 450px;
float: left;
padding: 20px;
}
</style>
</head>
<body>
<div id="caja_izq">
<div id="caja_der">

<div class="columna_izquierda">Lorem ipsum...
</div>

<div class="columna_derecha">Lorem ipsum dolor...
</div>

</div>
</div>
</body>
</html>

Este código ha sido probado y funciona correctamente en los navegadores Firefox 2 y 3, Explorer 6 y 7, Opera 9.5, Safari 3.1 Windows, Firefox 2 y 3 Linux y Konkeror.

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

kseso?

11/10/2008 16:40

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>

Aquí un ejemplo funcionando

Probado con FF 3.0.3, ie7, Opera 9.25

Un saludo
௫

kseso?

04/11/2008 17:04

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:

A divertirse.

Aquí lo vi
aquí también
Vale, en castellano en anieto2k

pitufoweb

25/12/2008 19:03

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.

webosiris

19/01/2009 07:40

Respuesta: FAQ's de CSS

Glosario: que son los bugs, los hacks, el hasLayout, los comentarios condicionales y el modo quirks?

kseso?

17/07/2009 17:23

Respuesta: FAQ's de CSS

Menús a la carta para todos los gustos
Recopilación de orígenes varios, en diferentes momentos y técnicas diversas (no sólo css)
CSS Menu Maker herramienta para crear menús
http://www.mycssmenu.com/ Otro generador de menús
http://www.izzymenu.com/ Otra herramienta para crear
Free CSS Drop-Down Menu Framework
http://css.maxdesign.com.au/listamatic/index.htm Una colección de estilos basados en listas
http://www.lwis.net/free-css-drop-down-menu/
http://e-lusion.com/design/menu/
http://alvit.de/css-showcase/css-nav...s-showcase.php
http://www.webdesignerwall.com/tutor...nced-css-menu/
http://purecssmenu.com/
http://webdeveloper.econsultant.com/...vigation-tabs/
http://www.ndesign-studio.com/blog/d...css-dock-menu/ el dock de Mac
http://www.anieto2k.com/2008/04/02/d...ss-animations/ otro dock
http://www.alistapart.com/articles/hybrid/
http://www.twinhelix.com/dhtml/fsmenu/
http://devsnippets.com/reviews/10-br...echniques.html
Recopilación de 50 menús para inspirarte
menú MTv
menu Adobe
Menú de flickr
Hoverbox Menu

38 menús multinivel con css+jquery

Nathan_1979

05/08/2009 12:40

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:

kseso?

30/08/2009 08:01

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.

kseso?

20/09/2009 15:33

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.

WinderJerter

05/01/2010 14:55

¿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

display:table-cell;

vertical-align:middle;

Ejemplo:

Código:

<style type="text/css">

#vertical {

        background:#999;

        color:#CCC;

        display:table-cell;  /*Propiedad obligatoria*/

        height:30px; 

        text-align:center;

        vertical-align:middle; /*Propiedad obligatoria*/

        width:300px;

}

</style>
 

<div id="vertical">Este texto esta centrado verticalmente</div>

http://img685.imageshack.us/img685/6...neamientov.png

PD: Tambien sirve para imagenes

Saludos :adios: y espero que les sirva :arriba:

Jask	03/02/2010 07:05

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">

.contenedor{

    width: 900px;

    margin:0 auto;

    display:block;

    border:1px solid black;

}
 
 </style>
 
 <div class="contenedor"></div>

******

Le puse un borde para que puedan comprobar el funcionamiento. Recomiendo también poner alguna palabra y tal :) !! Espero que les sirva.

romel_inc

27/03/2010 14:01

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento sin título</title>

</head>
 

<style type="text/css">
 

body{ width:1000px; background:#CCC; margin:0 auto;}
 

a{ float:left; width:24%; background:#999; margin: 1px 2px; }
 

  .clearfix:after {

    content: ".";

    display: block;

    height: 0;

    clear: both;

    visibility: hidden;

    }
 

.clearfix {display: inline-block;}  /* for IE/Mac */
 

</style><!-- main stylesheet ends, CC with new stylesheet below... -->
 

<!--[if IE]>

<style type="text/css">

  .clearfix {

    zoom: 1;     /* triggers hasLayout */

    display: block;     /* resets display for IE/Win */

    }  /* Only IE can see inside the conditional comment

    and read this CSS rule. Don't ever use a normal HTML

    comment inside the CC or it will close prematurely. */

</style>

<![endif]-->
 
 

<body>

<div class="clearfix" > <!-- float container -->
 

  <a href="#">Some content</a>

  <a href="#">Some content</a>

  <a href="#">Some content</a>

  <a href="#">Some content</a>

  <a href="#">Some content</a>

  <a href="#">Some content</a>

  <a href="#">Some content</a>

  <a href="#">Some content</a>

  <a href="#">Some content</a>

  <a href="#">Some content</a>

  <a href="#">Some content</a>

  <a href="#">Some content</a>

  <a href="#">Some content</a>

  <a href="#">Some content</a>

  <a href="#">Some content</a>

  <a href="#">Some content</a>

  <a href="#">Some content</a>

  <a href="#">Some content</a>

  <a href="#">Some content</a>

  <a href="#">Some content</a>

  <a href="#">Some content</a>

  <a href="#">Some content</a>

  <a href="#">Some content</a>

  <a href="#">Some content</a>

  <a href="#">Some content</a>

  <a href="#">Some content</a>

  <a href="#">Some content</a>

  <a href="#">Some content</a>

  <a href="#">Some content</a>

 
 

<div style="clear:both;"></div>
 

</div>
 
 

</body>

</html>

Ejemplo 2

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento sin título</title>

</head>
 

<style type="text/css">
 

body{ width:1000px; background:#CCC; margin:0 auto;}
 

a.estilo{ float:left; width:24%; background:#999; margin: 1px 2px; }
 

  .clearfix:after {

    content: ".";

    display: block;

    height: 0;

    clear: both;

    visibility: hidden;

    }
 

.clearfix {display: inline-block;}  /* for IE/Mac */
 

</style><!-- main stylesheet ends, CC with new stylesheet below... -->
 

<!--[if IE]>

<style type="text/css">

  .clearfix {

    zoom: 1;     /* triggers hasLayout */

    display: block;     /* resets display for IE/Win */

    }  /* Only IE can see inside the conditional comment

    and read this CSS rule. Don't ever use a normal HTML

    comment inside the CC or it will close prematurely. */

</style>

<![endif]-->
 
 

<body>

<div class="clearfix" > <!-- float container -->
 

  <a class="estilo" href="#">Some content</a>

  <a class="estilo" href="#">Some content</a>

  <a class="estilo" href="#">Some content</a>

  <a class="estilo" href="#">Some content</a>

  <a class="estilo" href="#">Some content</a>

  <a class="estilo" href="#">Some content</a>

  <a class="estilo" href="#">Some content</a>

  <a class="estilo" href="#">Some content</a>

  <a class="estilo" href="#">Some content</a>

  <a class="estilo" href="#">Some content</a>

  <a class="estilo" href="#">Some content</a>

  <a class="estilo" href="#">Some content</a>

  <a class="estilo" href="#">Some content</a>

  <a class="estilo" href="#">Some content</a>

  <a class="estilo" href="#">Some content</a>

  <a class="estilo" href="#">Some content</a>

  <a class="estilo" href="#">Some content</a>

  <a class="estilo" href="#">Some content</a>

  <a class="estilo" href="#">Some content</a>

  <a class="estilo" href="#">Some content</a>

  <a class="estilo" href="#">Some content</a>

  <a class="estilo" href="#">Some content</a>

  <a class="estilo" href="#">Some content</a>

  <a class="estilo" href="#">Some content</a>

  <a class="estilo" href="#">Some content</a>

  <a class="estilo" href="#">Some content</a>

  
 

<div style="clear:both;"></div>
 

</div>
 
 

</body>

</html>

Fuente: [En ingles]
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.

rogertm

08/11/2010 15:13

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:

Anya82

20/01/2011 10:39

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

Anya82

20/01/2011 11:59

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

baldaweb

12/11/2015 02:50

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.margen-der-15{margin-right:15px!important} //margen derecho a 15
.margen-der-20{margin-right: 20px!important;}

Y le ponemos la clase margen-der-20 y no funciona

Código HTML:

Ver original<button type="button" class="margen-der-20" data-dismiss="modal">Cancelar</button>

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.margen-der-15{margin-right:15px!important} /* margen derecho a 15 */
.margen-der-20{margin-right: 20px!important;}

La zona horaria es GMT -6. Ahora son las 21:17.

Página 3 de 3

Mostrar 50 mensajes desde este tema en una página