4
votos
Aceptado
Agregar estilo CSS hasta cierto elemento hijo
Dándole un poco la vuelta al razonamiento, lo que puedes hacer es que todos los elementos .children sean rosas y crear una regla específica para que a partir del octavo se vuelvan rojos.
Para ello ...
4
votos
¿Cómo mantener relación de aspecto de un elemento según el ancho del padre en CSS?
Por lo que logro entender... .terrain debe mantener la relación de aspecto siempre.
Antes de saltarme algo...
VW es el ancho del viewport...
para el alto, usamos VH... viewport height
Si tenemos un ...
4
votos
El form no se expande cuando se le pone max-width
Para que los elementos se puedan ajustar correctamente te sugiero utilizar width:100%.
He realizado algunos cambios en la clase de estilos .contact-form, se agrego la clase .contents y agregue width: ...
3
votos
Aceptado
Mi estilo no cambia al hacer click
Cuando trabajes con addEventListener directamente a un elemento, puedes acceder a ese elemento dentro de la función utilizando this, entonces como es el mismo elemento al que le quieres cambiar el ...
3
votos
Aceptado
¿Cómo cambiar el color de un option cuando el ratón pasa por encima?
Para que te orientes un poco, a esto me refiero cuando te digo que deberias armar tu propio select, con un poco de css y jquery se consigue lo que buscás. Ahora solo faltaria hacer la funcion que, al ...
3
votos
Aceptado
¿Cómo hacer una transición más suave en un botón para mostrar más información?
Otra solución, modifica tu código pero es más suave. Se base en modificar la altura del bloque donde está el texto a mostrar. Se cambia desde la altura mínima a una altura máxima con un transition. ...
3
votos
¿Cómo hacer una transición más suave en un botón para mostrar más información?
Utiliza transacciones CSS para lograr un efecto de suavidad, al mostrar el texto. La propiedad display de CSS no se puede animar con transition, pero puedes hacer esto
function show() {
var dots ...
3
votos
Qué diferencia marca el role="button" en una etiqueta div
role="button" forma parte del conjunto de información conocido como ARIA (Accessible Rich Internet Applications). Son atributos que pretenden proporcionar información a los motores de ...
3
votos
Aceptado
¿Cómo puedo separar los estilos de una misma etiqueta <a>?
En css, puedes anidar elementos, clases e ids de elementos.
Puedes ver algunos ejemplos aquí:
http://www.w3big.com/es/css/css-grouping-nesting.html
En tu caso, para que aplicase el estilo, a todas ...
3
votos
Aceptado
¿Cómo aplicar estilo a un item hijo específico?
Puedes usar una clase de esta forma:
.red{
color:red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" ...
3
votos
Formulario CSS3 Y HTML5
Para la línea debajo del inicio, solo agrega un border-bottom al elemento header (la clase que tiene no la precisa podrías quitarla), o sea en el CSS tu header quedaría así:
header{
display: flex;
...
3
votos
Problemas con la etiqueta <nav>
El botón 5 flota correctamente a la izquierda, visualmente se ve debajo del 1 porque al no tener espacio a la derecha del 4 arma su propia "línea".
La falta de espacio está dada porque el ...
3
votos
Aceptado
¿Cómo aplicar una clase css a un Label cuando un input es seleccionado?
Hasta ahora he hallado dos enfoques para agregar estilo a label con css puro:
Cambiar de orden y usar el selector +, que se usa para elementos consecutivos.
input[type=text] {
width: 100%;
...
3
votos
Aceptado
¿Como agregar un div dentro de otro div?
Prueba con esta forma, recuerda que el h2 actúa como un elemento de bloque así que se pondrá antes de los demás cajas.
.contenedor{
border: 1px solid black;
text-align: center;
display:...
3
votos
Aceptado
¿Cómo hago un efecto de perilla en CSS?
Podrías hacerlo obteniendo las coordenadas del mouse y las del objeto div y luego aplicar un rotate en base a esas coordenadas utilizando Math.atan2, por ejemplo:
// Creamos una función que ...
3
votos
problemas con posicionamiento de texto en un input
hola para lo que intentas hacer es recomendable usar un textarea de la siguiente forma:
<p>
<label class="Mensaje" for="Mensaje">Diagnostico clinico
<span ...
3
votos
Aceptado
¿Por qué no me funciona el flexbox?
Prueba utilizando justify-content.
La propiedad CSS justify-content define cómo el navegador distribuye el espacio entre y alrededor de los items flex, a lo largo del eje principal de su contenedor.
...
2
votos
Aceptado
¿Cómo centrar una imagen vertical y horizontalmente en un contenedor mas pequeño?
Una posible solución con CSS es la siguiente:
.A1_post-galery-item{
width: auto;
height: 100%;
min-height: 100%;
min-width: 100%;
position: absolute;
top: 50%;
left: 50%;
...
2
votos
Como se puede lograr un diseño tipo clip path |-/-/-/-/-| con imagenes y que s autoajusten al ancho de pantalla?
Creo que más o menos entendí el estilo que quieres aquí te muestro un pequeño ejemplo. Si vas al url de cada imagen de das de cuenta que cada una tiene un tamaño diferente.
.conteiner {
...
2
votos
¿Como centrar div o elementos centrados verticalmente?
Deberías considerar usar un container si estás usando Bootstrap, te haría las cosas más sencillas, a partir de alli, el row debe tener las clases justify-content-center y align-items-center, luego, ...
2
votos
Aceptado
Como solucionar margen de flipcard con css y html
Cuando usas objetos en posición absolute, no se usa margin pues la posición de estos objetos son absolutos, por lo que se usa las instrucciones, top, left, right o bottom, sin el margin para mover el ...
2
votos
¿Cómo hacer una transición más suave en un botón para mostrar más información?
No es una respuesta a tu pregunta, pero has probado con las etiquetas summary y details de HTML5? Tienen un efecto parecido pero te ahorras todo el código Javascript. Te paso un ejemplo por si quieres ...
2
votos
¿Cómo hacer una transición más suave en un botón para mostrar más información?
Puedes usar la propiedad transform, específicamente con su valor scale, el cual escala los elementos
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document....
2
votos
Aceptado
Estoy creando un Theme de Wordpress y no se aplican los estilos los widgets. Donde esta el problema?
El problema es en esta linea 'before_widget'=>'<article id="%1$s" class="Widget%2$s">', le estas pasando el nombre del widget en la clase, por lo que te estaría generado ...
2
votos
¿Cómo establecer el mismo tamaño para varias imágenes con CSS?
El problema que estás teniendo es que las imágenes tienen un tamaño libre por defecto, por lo que al llegar el evento hover éstas tratan de cambiar al estilo que le has fijado que es:
.imgcec:hover {
...
2
votos
¿como configurar el carrusel, para que sirva en móviles, pero que en pantallas de computador, no se comporte como carrusel?
El primer problema es que activas el carrusel antes de analizar el ancho de pantalla y deberías activarlo solo cuando la pantalla tenga un ancho menor que el deseado.
El segundo problema es que ...
2
votos
Aceptado
Problema con hover en CSS y HTML
Al parecer tienes unos espaciados en el hover y el css no los detecta. Te recomiendo que los estilos que le diste a #title los pases a la etiqueta ul, así quedaría:
<style type="text/css"&...
2
votos
Aceptado
Mi header es un desastre con position: fixed;
varias cosas, la forma de hacer que un fixed se vea por encima de todos los demás elementos en pantalla es z-index:1000, le pones un valor y vas probando hasta que tengas el header por encima de los ...
2
votos
Aceptado
No Funciona la propiedad Sticky en la Navbar
Después de horas intentando resolver el problema, acabo de encontrar la solución.😅 Faltaba el siguiente código en el archivo styles.css:
.row:after {
content: "";
display: table;
clear: ...
2
votos
Limitar la cantidad de fotos que se muestran en un celular en una galería adaptable
¿Me podrían dar una idea cómo limitar la cantidad de fotos que aparecen cuando se visualiza con el celular?
En el CSS de Bootstrap una tableta (screen-md) está definida como toda pantalla con un ancho ...
Only top scored, non community-wiki answers of a minimum length are eligible
Etiquetas relacionadas
css3 × 1691html5 × 943
css × 779
html × 603
javascript × 418
jquery × 187
bootstrap × 173
php × 63
bootstrap-4 × 53
responsive × 35
web × 32
flexbox × 32
scss × 26
animación × 24
mediaqueries × 19
sass × 18
svg × 16
css-transform × 16
angular × 15
wordpress × 15
div × 15
materialize × 15
bootstrap-3 × 15
css-grid-layout × 14
imagen × 13