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

Tonimn · #1 (**permalink**) 18/06/2011, 05:17

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>

IsaBelM · #2 (**permalink**) 18/06/2011, 05:22

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"

Tonimn · #3 (**permalink**) 18/06/2011, 08:24

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%;}

_cronos2 · #4 (**permalink**) 18/06/2011, 08:47

Dale a html y body un width y height de 100%
Saludos (:

Tonimn · #5 (**permalink**) 18/06/2011, 09:01

Cita:

Iniciado por _cronos2

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?

kseso? · #6 (**permalink**) 18/06/2011, 11:19

Cita:

Iniciado por Tonimn

¿? ¿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.

Tonimn · #7 (**permalink**) 18/06/2011, 11:49

Ya lo he probado y no me sirve, por eso pregunto otra vez.

tredio · #8 (**permalink**) 18/06/2011, 11:56

es simple, escribiste:

Cita:

Iniciado por Tonimn

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

y es "absolute"

Tonimn · #9 (**permalink**) 18/06/2011, 12:04

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%}

tredio · #10 (**permalink**) 18/06/2011, 13:21

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

emprear · #11 (**permalink**) 18/06/2011, 13:23

Primero, tu código original tiene una inconsistencia

Código CSS:

Ver originalh1 {color: red; 
font-family:"Arial Black",Gadget, sans-serif; 
size:1000px;
 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 originalimg#imagen1 {
position: absolute;
 left: 10%;
 top: 20%;
 margin: 0px
 padding: 0px;
  }

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

saludos

Tonimn · #12 (**permalink**) 18/06/2011, 14:03

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>

emprear · #13 (**permalink**) 18/06/2011, 14:23

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Posicionar imágen</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <style type="text/css">
    
 html, body, img, div {
margin: 0px;
padding: 0px;
}
 
h1 {
color: red; 
font-family:"Arial Black",Gadget, sans-serif; 
font-size: 12px;
text-align: center;
 }
 
img#imagen1 {
position: absolute;
 left: 20%;
 top: 40%;
 margin: 0px
 padding: 0px;
  }
 
</style>
</head>
<body>
 <h1>PRUEBA</h1>
 <img  id="imagen1" src="cat-black.jpg" width="320" height="400" alt="" />
</body>
</html>

Saludos

Tonimn · #14 (**permalink**) 18/06/2011, 16:38

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?

emprear · #15 (**permalink**) 18/06/2011, 17:08

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@charset "utf-8";  
 
html, body, img, div {
margin: 0px;
padding: 0px;
}
 
h1 {
color: red; 
font-family:"Arial Black",Gadget, sans-serif; 
font-size: 12px;
text-align: center;
 }
 
img#imagen1 {
position: absolute;
 left: 20%;
 top: 40%;
 margin: 0px
 padding: 0px;
}

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

Tonimn · #16 (**permalink**) 19/06/2011, 04:03

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;
}

emprear · #17 (**permalink**) 19/06/2011, 12:41

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

Oscareverb · #18 (**permalink**) 19/06/2011, 14:32

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.