Hola, es que yo vi en este post que la propiedad top de CSS se puede usar por separada a las demás; o sea, no hace falta que tenga otra propiedad adelante.
Ejemplo: div { border-top: 2px; } También se puede usar así: div { top: 2px } (esto es lo que yo no sabía). Ahora el problema está en que no me funciona para mover bloques. Aunque lo pongo en position: relative, cuando le cambio el valor de la propiedad top no cambia nada. ¿Cuál puede ser el problema? Yo escribo el código en Adobe Dreamweaver, donde se ve el diseño en directo.
Gracias :D
Respuestas
Como tú mismo dices, la propiedad top se puede usar en solitario. La única condición es que el elemento defina también la propiedad position. Así que para mover un elemento respecto a donde se encuentra, sólo tienes que utilizar estos estilos:
div { position: relative; top: 2px; }
Como en este caso el código HTML y CSS es muy sencillo, es poco probable que tengas un error en el código. Así que te aconsejo que pruebes con otras posibles causas:
- Prueba a ver la página en un navegador "de verdad" en vez de en la ventana de previsualización de Dreamweaver. Es poco probable que Dreamweaver esté fallando, pero debemos descartarlo.
- Prueba a desplazar mucho el elemento (en vez de
2pxutiliza200px) para así descartar que se trate de un desplazamiento tan corto que pasa desapercibido. - Prueba la página en un navegador, pulsa el botón derecho sobre el elemento que debería estar desplazado y selecciona la opción "Inspeccionar elemento". Luego en el panel que muestra el navegador, mira a ver si algún otro selector de tu CSS está afectando a los estilos de este elemento. Es muy común que algún elemento externo modifique los estilos de otro elemento y no nos demos cuenta.
Cuéntanos el resultado de estas pruebas y si sigue fallando, ¿podrías compartir parte de tu código para que podamos seguir ayudándote a descubrir la causa?
@javiereguiluz
Creo que el problema está en el programa, porque al rato empezó a funcionar esa propiedad. Pero probé con cambiarle el ancho a los <div> y no cambian. Además (algo que antes no pasaba), dentro de la misma parte que dice diseño, puedo escribir dentro o fueras de los <div>, borrarlos y todo desde diseño, no desde el código.
Recién empezaba a armarlo porque aprendí hace poco. Una imagen de cómo se ve:
Si quieres te mando una del programa completo para saber si alguna configuración está mal o algo. Gracias amigo/a, esta página está muy buena.
@Ivan_Vvs
@Ivan_Vvs el problema de la visualización de Dreamweaver es que no es un navegador real, así que siempre es posible que te encuentres con algún problema.
El consejo obviamente es que siempre pruebes lo que haces en un navegador real. El problema es que esto es muy aburrido cuando estás desarrollando un sitio, porque tienes que guardar los cambios, pasarte al navegador, recargar la página y probar que todo está bien.
Para hacer este proceso más ágil, existen herramientas como browsersync, que lo que hacen es sincronizar instantáneamente los cambios que haces en tu aplicación (por ejemplo en Dreamweaver) con todos tus navegadores. Así que cada vez que le das a guardar en Dreamweaver, todos los navegadores se actualizan solos.
@javiereguiluz
Ok, muchas gracias amigo. Voy a probar con ese programa. Una pregunta más fuera de este tema, si yo aprendo bien todo el html+CSS y después aprendo PHP, ¿se pueden unir los códigos para armar una web mejor? Gracias.
@Ivan_Vvs
Sí que puedes unir ambos códigos. En realidad, lo que comentas es lo más común para crear sitios y aplicaciones web hoy en día. De hecho, esta misma página que estás leyendo está hecha así: por un lado creamos el HTML y CSS utilizando Bootstrap y por otro lado programamos la aplicación con PHP usando Symfony.
@javiereguiluz
Ok, gracias amigo. Después me voy a interiorizar en ese tema xD. Por ahora voy a tratar de aprender lo más que pueda sobre HTML y CSS. Esta página la verdad que es excelente :D
@Ivan_Vvs