.content{
-
check_circle_outlineMódulo 1 | 3 clases
Introducción
expand_more -
check_circle_outlineMódulo 2 | 7 clases
Conceptos Fundamentales
expand_more -
check_circle_outlineMódulo 3 | 17 clases
Primeros pasos en Desarrollo Web
expand_more -
check_circle_outlineMódulo 4 | 12 clases
Concretando el conocimiento
expand_more -
check_circle_outlineMódulo 5 | 13 clases
CSS
expand_more-
done_all
Clase 1
Colores y fondos
-
done_all
Clase 2
Compatibilidad entre navegadores
-
done_all
Clase 3
Posicionamiento
-
done_all
Clase 4
Fuentes personalizadas
-
done_all
Clase 5
Modificadores de texto
-
done_all
Clase 6
Estilizar tablas
-
done_all
Clase 7
Bordes y Sombras
-
done_all
Clase 8
Shorthand Properties
-
done_all
Clase 9
Especificidad en CSS
-
done_all
Clase 10
Posiciones (absolute,fixed,relative) en CSS
-
done_all
Clase 11
Animaciones
-
done_all
Clase 12
Pseudo clases
-
done_all
Clase 13
Detalles finales de estilo
-
-
check_circle_outlineMódulo 6 | 7 clases
Diseño Responsivo
expand_more -
check_circle_outlineMódulo 7 | 11 clases
JavaScript
expand_more -
check_circle_outlineMódulo 8 | 3 clases
Despedida
expand_more -
check_circle_outlineMódulo 9.-
Examen del curso
expand_more-
done_all
Examen
Examen final del curso
-
11 comentario(s)
En mi caso la X no se cambia de posicion y se queda como se muestra al principio (por encima del titulo), asi esta mi codigo:
.content{
.content{
max-width: 960px;
max-height: 500px;
width: 100%;
height: 100%;
background-color: #FFE0B2;
/* box-shadow: diferenciaHorizontal diferenciaVertical desenfoque amplitud de color;*/
box-shadow: 10px 3px 6px 5px #91171F;
border-radius: 4px;
position: relative;
}
.actions{
position: absolute;
top: 1em;
right: 1em;
}
Hola, va todo bien hasta el donde coloco la X, pero luego, cuando le pongo el color blanco todo mi cuadro se pone blanco, y con las demas propiedades que sigo agregando mi pagina cambia completamente, las palabras se ponen una abajo de la otra y no entiendo cual es el error porque revise mil veces y tengo todo tal cual el video.
hola como estas tengo un problema al momento de ponerle el color a las filas impares no me quedan alinedas con el cuadro principal y si inteto moverlas, mueve todo e texto tambien
Creo que el display inline block sale sobrando con el display flex consigo el mismo efecto, no se tengo duda
Mi botón y la 'x' de dentro me aparece centrado aunque no haya puesto lo de flex, align y justify. Dejo mi código por si alguien puede explicarme a qué se debe esto: https://codepen.io/canastillo/pen/vYXGMQb Igual no entiendo bien cómo afecta lo de inline-block al botón.
Tengo una duda, cuando se le dieron las propiedades a la clase .close primero se le puso display: inline-block, pero también se le puso mas abajo display: flex esto por qué? si toma los dos display ?
Estos temas tienen su complejidad, pero son muy interesantes y los explicas excelente.
creo que creare mi pagina con las notas que estoy tomando en notepad++
+Posiciones (absolute,fixed,relative) en CSS
-definir donde aparece un elemento requiere conocer las herramientas CSS y mucha practicar
-position: valor;
-NO define en donde aparecerá, sino como las posiciones especificadas en las propiedades (top,left,bottom,right) afectaran el lugar en el q se posicionara el elemento
-valores para position:
-static: todos los elementos empiezan con el valor static en la propiedad position
-relative: modifica la posición del elemento. tomando de origen la posición original
-fixed: las propiedades se añaden de forma relativa al VIEWPORT (es todo lo que estamos viendo en pantalla)
relativo al VIEWPORT-->1-se colocara relativo a la pantalla 2-el scroll no le afectara
-absolute: la posicion es relativo al contenedor mas cercano q este posicionado. el padre tiene =/= a static
si no hay un padre, es relativo al VIEWPORT
-sticky: intercambia los valores del elemento relative y fixed, dependiendo si el elemento se sale del VIEWPORT por el scoll
creo que creare mi pagina con las notas que estoy tomando en notepad++
+Posiciones (absolute,fixed,relative) en CSS
-definir donde aparece un elemento requiere conocer las herramientas CSS y mucha practicar
-position: valor;
-NO define en donde aparecerá, sino como las posiciones especificadas en las propiedades (top,left,bottom,right) afectaran el lugar en el q se posicionara el elemento
-valores para position:
-static: todos los elementos empiezan con el valor static en la propiedad position
-relative: modifica la posición del elemento. tomando de origen la posición original
-fixed: las propiedades se añaden de forma relativa al VIEWPORT (es todo lo que estamos viendo en pantalla)
relativo al VIEWPORT-->1-se colocara relativo a la pantalla 2-el scroll no le afectara
-absolute: la posicion es relativo al contenedor mas cercano q este posicionado. el padre tiene =/= a static
si no hay un padre, es relativo al VIEWPORT
-sticky: intercambia los valores del elemento relative y fixed, dependiendo si el elemento se sale del VIEWPORT por el scoll
He visto estas mismas propiedades en otros vídeos y con otros profesores, es un concepto un poco difícil de entender en un principio.
Lo explicaste con una precisión y simpleza única, que buen vídeo, ojala lo hubiera visto antes de que existiera Flex, me hubiera ahorrado horas de practica y dolores de cabeza. Muchas gracias.
Lo explicaste con una precisión y simpleza única, que buen vídeo, ojala lo hubiera visto antes de que existiera Flex, me hubiera ahorrado horas de practica y dolores de cabeza. Muchas gracias.
Tengo un problema con la X, seguí todos los pasos pero las características de la X siguen iguales, no cambió a color blanco ni se centró.
Así escribí los datos en css:
.close{
width: 40px;
height: 40px;
color: #FCFCF0;
border-radius: 50%;
display: inline-block;
background: #F3F9A7;
cursor: pointer;
font-weight: 400;
box-shadow: 3px 3px 5px #b3b066;
display: flex;
align-items: center;
justify-content: center;
}
Espero que me puedan ayudar, gracias.
Así escribí los datos en css:
.close{
width: 40px;
height: 40px;
color: #FCFCF0;
border-radius: 50%;
display: inline-block;
background: #F3F9A7;
cursor: pointer;
font-weight: 400;
box-shadow: 3px 3px 5px #b3b066;
display: flex;
align-items: center;
justify-content: center;
}
Espero que me puedan ayudar, gracias.
Clase 70