CSS - Uso de la propiedad position mediante clases

   
Vista:
Imágen de perfil de Artie

Uso de la propiedad position mediante clases

Publicado por Artie (2 intervenciones) el 24/03/2017 05:42:42
Hola, estoy teniendo un problema con un ejercicio:

En la estructura html he colocado la siguiente imagen directamente dentro de body:

1
<img class="3" src="imagen.jpg" alt="imagen ref"/>

Y en el archivo css trato de mover esa imagen, pero no se mueve:

1
2
3
4
img.3 {position: relative;
	top: 700px;
	left: 300px;
}

Ya probé colocar la etiqueta img dentro de un div, y así sí funciona (sin usar class, sólo div img {instrucción css}). No sé qué estoy haciendo mal, espero que por favor puedan orientarme, muchas gracias!

P.D. Las otras instrucciones de css sí funcionan, sólo tengo problema con el movimiento de la imagen.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Uso de la propiedad position mediante clases

Publicado por xve (464 intervenciones) el 24/03/2017 08:27:58
Hola Artie, en vez de poner como nombre de la clase el numero 3, pon un texto... algo así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
 
<style>
img.a3 {
	position: relative;
	top: 700px;
	left: 300px;
}
</style>
 
</head>
 
<body>
 
<img class="a3" src="imagen.jpg" alt="imagen ref"/>
 
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Artie

Uso de la propiedad position mediante clases

Publicado por Artie (2 intervenciones) el 24/03/2017 18:48:41
Hola xve, muchas gracias por tu respuesta, investigué un poco, y encontré que hay reglas para nombrar las clases, y no puede ser sólo un número, como yo lo tenía, pero bueno, ya aprendí. Gracias de nuevo!

Naming rules:

*Must begin with a letter A-Z or a-z
*Can be followed by: letters (A-Za-z), digits (0-9), hyphens ("-"), and underscores ("_")
*In HTML, all values are case-insensitive
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Revisar política de publicidad