Foros del Web » Creando para Internet » CSS »

Código de principiante CSS no me aclaro llevo 4 días con lo mismo...

Estas en el tema de Código de principiante CSS no me aclaro llevo 4 días con lo mismo... en el foro de CSS en Foros del Web. El problema es imagen1 que aparece pero no consigo que se mueva ¿qué hago mal? llevo ya lo menos 40 tutoriales y no hay manera. ...
  #1 (permalink)  
Antiguo 18/06/2011, 06:17
 
Fecha de Ingreso: mayo-2011
Mensajes: 335
Antigüedad: 5 años, 8 meses
Puntos: 4
Código de principiante CSS no me aclaro llevo 4 días con lo mismo...

El problema es imagen1 que aparece pero no consigo que se mueva ¿qué hago mal? llevo ya lo menos 40 tutoriales y no hay manera.

Este es mi CSS:
@charset "UTF-8";
/* CSS Document */

h1 {color: red;
font-family:"Arial Black",Gadget, sans-serif;
size:1000px;
text-align:center;}


#imagen1{position: abosolute; left: 10%; top:60%}

Este es mi html:html>


<head>
<link rel="stylesheet" type="text/css" href="estilos.css"/>

</head>

<body>
<h1> PRUEBA</h1>
<img class="imagen1" src="imagenes/personajes.jpg">
</body>
</html>
  #2 (permalink)  
Antiguo 18/06/2011, 06:22
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 8 años, 7 meses
Puntos: 1008
Respuesta: Código de principiante CSS no me aclaro llevo 4 días con lo mismo...

fijate que estás usando la seleccion por id
Cita:
#imagen1
pero aquí usas class
Cita:
<img class="imagen1"
has de realizar uno de estos dos cambios o seleccionas por class
Cita:
.imagen1
o usas su id
Cita:
<img id="imagen1"
  #3 (permalink)  
Antiguo 18/06/2011, 09:24
 
Fecha de Ingreso: mayo-2011
Mensajes: 335
Antigüedad: 5 años, 8 meses
Puntos: 4
Respuesta: Código de principiante CSS no me aclaro llevo 4 días con lo mismo...

Muchas gracias ya lo cambié pero no funciona, sigue igual:

HTML
<html>

<head>
<link rel="stylesheet" type="text/css" href="estilos.css"/>

</head>

<body>
<h1> PRUEBA</h1>
<img class="imagen1" src="imagenes/personajes.jpg">
</body>
</html>

CSS
@charset "UTF-8";
/* CSS Document */

h1 {color: red;
font-family:"Arial Black",Gadget, sans-serif;
size:1000px;
text-align:center;}


.imagen1{position:abosolute; left:90%; top:60%;}
  #4 (permalink)  
Antiguo 18/06/2011, 09:47
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 6 años, 7 meses
Puntos: 309
Respuesta: Código de principiante CSS no me aclaro llevo 4 días con lo mismo...

Dale a html y body un width y height de 100%
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #5 (permalink)  
Antiguo 18/06/2011, 10:01
 
Fecha de Ingreso: mayo-2011
Mensajes: 335
Antigüedad: 5 años, 8 meses
Puntos: 4
Respuesta: Código de principiante CSS no me aclaro llevo 4 días con lo mismo...

Cita:
Iniciado por _cronos2 Ver Mensaje
Dale a html y body un width y height de 100%
Saludos (:
¿? ¿y eso para qué? No quiero que sea mi imagen de fondo, lo que quiero es aprender a desplazar las imágenes.
IsabelM me explicó pero no me sale, no se cambia de sitio.¿Qué parte de mi código está mal?
  #6 (permalink)  
Antiguo 18/06/2011, 12:19
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 9 años, 7 meses
Puntos: 538
Respuesta: Código de principiante CSS no me aclaro llevo 4 días con lo mismo...

Cita:
Iniciado por Tonimn Ver Mensaje
¿? ¿y eso para qué? No quiero que sea mi imagen de fondo, lo que quiero es aprender a desplazar las imágenes.
IsabelM me explicó pero no me sale, no se cambia de sitio.¿Qué parte de mi código está mal?
¿Y por qué no lo prueba primero y después de ver que ya funciona el desplazamiento de la imagen y agradecer la respuesta ya pregunta el porqué?

Porque % se aplica sobre el tamaño del elemento contenedor. Y si no ha declarado tamaño ninguno a los ancestros de su imagen, el x% de 0 es cero.

Y por cierto, dependiendo de qué doctype declare, que desconocemos, no puede colocar una imagen (elemento inline) como hija del body.
  #7 (permalink)  
Antiguo 18/06/2011, 12:49
 
Fecha de Ingreso: mayo-2011
Mensajes: 335
Antigüedad: 5 años, 8 meses
Puntos: 4
Respuesta: Código de principiante CSS no me aclaro llevo 4 días con lo mismo...

Ya lo he probado y no me sirve, por eso pregunto otra vez.
  #8 (permalink)  
Antiguo 18/06/2011, 12:56
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 8 años, 1 mes
Puntos: 66
Respuesta: Código de principiante CSS no me aclaro llevo 4 días con lo mismo...

es simple, escribiste:

Cita:
Iniciado por Tonimn Ver Mensaje
#imagen1{position: abosolute; left: 10%; top:60%}
y es "absolute"
__________________
Extension Google Chrome
dar las gracias no cuesta nada :D
  #9 (permalink)  
Antiguo 18/06/2011, 13:04
 
Fecha de Ingreso: mayo-2011
Mensajes: 335
Antigüedad: 5 años, 8 meses
Puntos: 4
Respuesta: Código de principiante CSS no me aclaro llevo 4 días con lo mismo...

Ya he puesto "absolute" y no me hace caso y no entiendo qué puede ser.

<html>
<head>
<link rel="stylesheet" type="text/css" href="estilos.css"/>

</head>

<body>
<h1> PRUEBA</h1>
<img class="imagen1" src="imagenes/personajes.jpg">
</body>
</html>

@charset "UTF-8";
/* CSS Document */

h1 {color: red;
font-family:"Arial Black",Gadget, sans-serif;
size:1000px;
text-align:center;}


#imagen1{position: "abosolute"; left: 10%; top:60%}

Última edición por Tonimn; 18/06/2011 a las 13:11
  #10 (permalink)  
Antiguo 18/06/2011, 14:21
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 8 años, 1 mes
Puntos: 66
Respuesta: Código de principiante CSS no me aclaro llevo 4 días con lo mismo...

ok, lo sigues poniendo mal :X, las comillas las puse solo para ejemplificar, es sin comillas, ademas, NO ES abosolute, ES absolute sin la O esa que pones despues de la B
__________________
Extension Google Chrome
dar las gracias no cuesta nada :D
  #11 (permalink)  
Antiguo 18/06/2011, 14:23
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 6 meses
Puntos: 1567
Respuesta: Código de principiante CSS no me aclaro llevo 4 días con lo mismo...

Primero, tu código original tiene una inconsistencia

Código CSS:
Ver original
  1. h1 {color: red;
  2. font-family:"Arial Black",Gadget, sans-serif;
  3. size:1000px;
  4.  text-align:center;}

size: 1000px ? no significa nada, podria ser width: 1000px; ó font-size: 1000px; (una grosería), digamos 12px mejor

Ahora vamos con la imágen, no necesitas definir ningun ancho y/o alto para el html, body,

Código CSS:
Ver original
  1. img#imagen1 {
  2. position: absolute;
  3.  left: 10%;
  4.  top: 20%;
  5.  margin: 0px
  6.  padding: 0px;
  7.   }

y vos pusiste
#imagen1{position: abosolute; left: 10%; top:60%}

saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Última edición por emprear; 18/06/2011 a las 14:30 Razón: error
  #12 (permalink)  
Antiguo 18/06/2011, 15:03
 
Fecha de Ingreso: mayo-2011
Mensajes: 335
Antigüedad: 5 años, 8 meses
Puntos: 4
Respuesta: Código de principiante CSS no me aclaro llevo 4 días con lo mismo...

Muchísimas gracias.Ha mejorado mucho la cosa pero ahora tengo un problema con los navegadores, en cada uno queda completamente diferente y en Safari no hace ni caso, se queda siempre igual ponga el % que ponga.


@charset "UTF-8";
/* CSS Document */

h1 {color: red;
font-family:"Arial Black",Gadget, sans-serif;
font-size:40px;
text-align:center;}


img#imagen1 {
position: absolute;
left: 10%;
top: 12%;
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="estilos.css"/>

</head>

<body>
<h1> PRUEBA</h1>
<img src="imagenes/personajes.jpg" id="imagen1">
</body>
</html>
  #13 (permalink)  
Antiguo 18/06/2011, 15:23
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 6 meses
Puntos: 1567
Respuesta: Código de principiante CSS no me aclaro llevo 4 días con lo mismo...

A ver, lo que sigue funciona en todos lados, le agregue un pequeño reset para pulirlo mas
( Probado en IE, Safari,Chrome,Opera, Firefox4, Konqueror)

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <title>Posicionar imágen</title>
  5.   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.   <style type="text/css">
  7.    
  8.  html, body, img, div {
  9. margin: 0px;
  10. padding: 0px;
  11. }
  12.  
  13. h1 {
  14. color: red;
  15. font-family:"Arial Black",Gadget, sans-serif;
  16. font-size: 12px;
  17. text-align: center;
  18.  }
  19.  
  20. img#imagen1 {
  21. position: absolute;
  22.  left: 20%;
  23.  top: 40%;
  24.  margin: 0px
  25.  padding: 0px;
  26.   }
  27.  
  28. </head>
  29.  <h1>PRUEBA</h1>
  30.  <img  id="imagen1" src="cat-black.jpg" width="320" height="400" alt="" />
  31. </body>
  32. </html>


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #14 (permalink)  
Antiguo 18/06/2011, 17:38
 
Fecha de Ingreso: mayo-2011
Mensajes: 335
Antigüedad: 5 años, 8 meses
Puntos: 4
Respuesta: Código de principiante CSS no me aclaro llevo 4 días con lo mismo...

Genial, muchas gracias.Pero ¿y el código CSS? No entiendo ¿puede meterse todo en el mismo sitio? es que yo lo ponía .css y en otro .html ¿puede estar todo en .html?
  #15 (permalink)  
Antiguo 18/06/2011, 18:08
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 6 meses
Puntos: 1567
Respuesta: Código de principiante CSS no me aclaro llevo 4 días con lo mismo...

en tu head:


<link rel="stylesheet" type="text/css" href="estilos.css" charset="utf-8" />

y en tu estilos.css

Código CSS:
Ver original
  1. @charset "utf-8";  
  2.  
  3. html, body, img, div {
  4. margin: 0px;
  5. padding: 0px;
  6. }
  7.  
  8. h1 {
  9. color: red;
  10. font-family:"Arial Black",Gadget, sans-serif;
  11. font-size: 12px;
  12. text-align: center;
  13.  }
  14.  
  15. img#imagen1 {
  16. position: absolute;
  17.  left: 20%;
  18.  top: 40%;
  19.  margin: 0px
  20.  padding: 0px;
  21. }

El charset, en uno u el otro, no en los dos

Y urgente a leer algún manual !!!

http://librosweb.es/css/index.html

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #16 (permalink)  
Antiguo 19/06/2011, 05:03
 
Fecha de Ingreso: mayo-2011
Mensajes: 335
Antigüedad: 5 años, 8 meses
Puntos: 4
Respuesta: Código de principiante CSS no me aclaro llevo 4 días con lo mismo...

Ya he revisado ese manual y montones de tutoriales, y lo he mejorado algo más pero sigue sin ir bien del todo ¿qué es lo que tengo mal de mi código? En Safari no cambia nada de nada mientras que en Firefox sí.

inicio.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="estilos.css"/>

</head>

<body>
<h1> PRUEBA</h1>
<img id="imagen1" src="imagenes/personajes.jpg" width="320" height="270"/>
</body>
</html>

estilos.css

@charset "UTF-8";
/* CSS Document */



h1 {color: red;
font-family:"Arial Black",Gadget, sans-serif;
font-size: 40px;
text-align: center;}


img#imagen1 {
position: relative;
left: 40%;
top: 11%;
margin: 0px;
padding:0px;
}
  #17 (permalink)  
Antiguo 19/06/2011, 13:41
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 6 meses
Puntos: 1567
Respuesta: Código de principiante CSS no me aclaro llevo 4 días con lo mismo...

Tonimn:


Si que funciona, lo que sucede es que ahora tye despachaste con un
position: relative;

lo que modifica la situación por completo.

Te aconsejo vuelvas al manual

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #18 (permalink)  
Antiguo 19/06/2011, 15:32
 
Fecha de Ingreso: febrero-2011
Ubicación: Vigo
Mensajes: 32
Antigüedad: 5 años, 10 meses
Puntos: 2
Respuesta: Código de principiante CSS no me aclaro llevo 4 días con lo mismo...

Emprear tiene razón, en: http://desarrolloweb.com

Empieza por el de introducción a CSS y después de ralizar todos los ejemplos y saber hacerlos con los ojos cerrados, te vas al de CSS avanzado, con este lo mismo, estúdiatelos por orden, cuando domines una cosa pasate a la otra.

No vale revisarlos...

Te vendría bien aprender lo que es un DOCTYPE; http://www.w3.org/QA/2002/04/valid-dtd-list.html

y también que es validar una web: validator.w3.org se aprende mucho validando.

Una web que te puede ayudar bastante a parte de esta también es: http://desarrolloweb.com

Por cierto...no me salen los enlaces resaltados en color naranja cuando le doy al botón insertar enlace, fijaos, me sale esto: [URL="http://nomesalenlosenlaces.com"]http://nomesalenlosenlaces.com[/URL]

Saludos.

Última edición por Oscareverb; 19/06/2011 a las 15:51

Etiquetas: principiante
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




La zona horaria es GMT -6. Ahora son las 01:47.