Foros del Web » Creando para Internet » CSS »

FAQ's de CSS

Estas en el tema de FAQ's de CSS en el foro de CSS en Foros del Web. 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 ...

  #61 (permalink)  
Antiguo 05/02/2007, 19:39
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.021
Antigüedad: 13 años, 6 meses
Puntos: 832
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.

Última edición por metacortex; 09/02/2007 a las 01:24
  #62 (permalink)  
Antiguo 12/03/2007, 10:34
Avatar de yournightmare86  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 875
Antigüedad: 11 años, 7 meses
Puntos: 9
Re: FAQ's de CSS

Programa para crear menús de navegación con CSS:
|CSS tab designer 2|
  #63 (permalink)  
Antiguo 22/05/2007, 11:13
Avatar de stock  
Fecha de Ingreso: junio-2004
Ubicación: Monterrey NL
Mensajes: 2.390
Antigüedad: 13 años, 5 meses
Puntos: 53
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

Última edición por stock; 22/05/2007 a las 11:20
  #64 (permalink)  
Antiguo 24/07/2007, 09:09
 
Fecha de Ingreso: enero-2004
Mensajes: 207
Antigüedad: 13 años, 10 meses
Puntos: 1
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.

  #65 (permalink)  
Antiguo 04/12/2007, 08:15
Avatar de rogertm
Mod->Cuba
 
Fecha de Ingreso: julio-2005
Ubicación: /home/Cuba/Habana/rogertm/
Mensajes: 2.922
Antigüedad: 12 años, 4 meses
Puntos: 638
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
__________________
Friki y Blogger por Cuenta Propia:213
Twenty'em: Theming is Prose
  #66 (permalink)  
Antiguo 18/12/2007, 13:01
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
FAQ's 69 - Manual

Un Excelente manual

http://www.virtualnauta.com/es/css/csshome.php
  #67 (permalink)  
Antiguo 09/02/2008, 14:06
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.021
Antigüedad: 13 años, 6 meses
Puntos: 832
Re: FAQ's de CSS

Atajos para estilos tipográficos: http://www.forosdelweb.com/f53/micro...uentes-555641/
  #68 (permalink)  
Antiguo 10/06/2008, 18:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
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.
  #69 (permalink)  
Antiguo 18/06/2008, 08:11
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
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.

Última edición por Mikmoro; 04/11/2008 a las 17:06 Razón: Añadir
  #70 (permalink)  
Antiguo 12/09/2008, 18:56
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
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.
__________________
Visita mi nueva web idplus.org
  #71 (permalink)  
Antiguo 25/09/2008, 10:49
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
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
__________________
Visita mi nueva web idplus.org

Última edición por Mikmoro; 30/09/2008 a las 05:40
  #72 (permalink)  
Antiguo 11/10/2008, 17:40
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
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:
<style type="text/css">
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 16/10/2008 a las 11:20 Razón: enlazar los 2 efectos, rollover y esquinas redondeadas
  #73 (permalink)  
Antiguo 04/11/2008, 17:04
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
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:
<style type="text/css" media="screen">
h1 {
font-family:'stencil', georgia, serif;
}

/* TODOS LOS NAVEGADORES MODERNOS*/
@font-face{
font-family:'stencil';
src: url('ruta_en_nuestro_servidor/stencil.ttf') format('truetype') /*u ('opentype') si lo fuera*/;
}
</style>

/* PARA INTERNET EXPLORER*/
<!--[if IE]>
<style type="text/css" media="screen">
@font-face{
font-family:'stencil';
src: url('ruta_en_nuestro_servidor/stencil.eot);
}
</style>
<![endif]-->
A divertirse.

Aquí lo vi
aquí también

Vale, en castellano en anieto2k
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 23/09/2009 a las 16:54
  #74 (permalink)  
Antiguo 25/12/2008, 19:03
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 11 meses
Puntos: 181
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.
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------

Última edición por pitufoweb; 01/07/2009 a las 20:49 Razón: Agregados mas selectores
  #75 (permalink)  
Antiguo 19/01/2009, 07:40
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
Respuesta: FAQ's de CSS

Glosario: que son los bugs, los hacks, el hasLayout, los comentarios condicionales y el modo quirks?
  #76 (permalink)  
Antiguo 17/07/2009, 18:23
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 08/09/2009 a las 07:32 Razón: ampliar listado
  #77 (permalink)  
Antiguo 05/08/2009, 13:40
 
Fecha de Ingreso: mayo-2007
Mensajes: 348
Antigüedad: 10 años, 6 meses
Puntos: 9
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.

  #78 (permalink)  
Antiguo 30/08/2009, 09:01
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #79 (permalink)  
Antiguo 20/09/2009, 16:33
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #80 (permalink)  
Antiguo 05/01/2010, 14:55
 
Fecha de Ingreso: agosto-2009
Mensajes: 292
Antigüedad: 8 años, 3 meses
Puntos: 5
¿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>



PD: Tambien sirve para imagenes

Saludos y espero que les sirva
  #81 (permalink)  
Antiguo 03/02/2010, 07:05
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 años, 8 meses
Puntos: 15
De acuerdo 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.
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?

Última edición por webosiris; 04/02/2010 a las 06:25
  #82 (permalink)  
Antiguo 27/03/2010, 15:01
Avatar de romel_inc  
Fecha de Ingreso: diciembre-2007
Ubicación: Venezuela-monagas
Mensajes: 285
Antigüedad: 10 años
Puntos: 14
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.
__________________
Lo que se usar (JAVA, Spring MVC, IntelliJ IDEA , GAE, CakePHP, Bootstrap, Underscorejs, jQuery, HTML5, CSS3, JSON, Ajax, Prototype), Aprendiendo a usar Angularjs y Git.
  #83 (permalink)  
Antiguo 08/11/2010, 15:13
Avatar de rogertm
Mod->Cuba
 
Fecha de Ingreso: julio-2005
Ubicación: /home/Cuba/Habana/rogertm/
Mensajes: 2.922
Antigüedad: 12 años, 4 meses
Puntos: 638
De acuerdo 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.
__________________
Friki y Blogger por Cuenta Propia:213
Twenty'em: Theming is Prose
  #84 (permalink)  
Antiguo 20/01/2011, 10:39
Avatar de Anya82
Colaborador
 
Fecha de Ingreso: noviembre-2007
Ubicación: tij.bc.mx
Mensajes: 1.269
Antigüedad: 10 años
Puntos: 196
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
__________________
¿Ya se enteraron? Grandes y maravillosas noticias... ¡Google no te cobra por búsqueda!

Última edición por Anya82; 20/01/2011 a las 12:00
  #85 (permalink)  
Antiguo 20/01/2011, 11:59
Avatar de Anya82
Colaborador
 
Fecha de Ingreso: noviembre-2007
Ubicación: tij.bc.mx
Mensajes: 1.269
Antigüedad: 10 años
Puntos: 196
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
__________________
¿Ya se enteraron? Grandes y maravillosas noticias... ¡Google no te cobra por búsqueda!
  #86 (permalink)  
Antiguo 12/11/2015, 02:50
Avatar de baldaweb  
Fecha de Ingreso: septiembre-2010
Ubicación: Barco pirata
Mensajes: 207
Antigüedad: 7 años, 2 meses
Puntos: 13
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
  1. .margen-der-15{margin-right:15px!important} //margen derecho a 15
  2. .margen-der-20{margin-right: 20px!important;}

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

Código HTML:
Ver original
  1. <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
  1. .margen-der-15{margin-right:15px!important} /* margen derecho a 15 */
  2. .margen-der-20{margin-right: 20px!important;}
__________________
CHOOO COOO LAAA TEEEEEEEEE

Etiquetas: faq
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 35 personas (incluyéndote)




La zona horaria es GMT -6. Ahora son las 23:35.