KompoZer (NVU): Imagen encima de otra

Archivado
Buenas, me he puesto a hacer paginas web (al menos he empezado bajandome el programa... xD) y elegi el NVU antes que el Dreamweaver pos er libre y asi. Luego mas tarde me encontre el KompoZer, que esta basado en NVU pero sin bugs.

Bueno, la cosa es que quiero empezar a hacer cosas sencillitas, ya que no tengo idea de php ni de html ni nada.

La primera duda que se me plantea es como poner una imagen encima de otra. Lo que hago es poner una imagen de fondo y sobre ella poner mas imagenes para hacer enlaces con esas imagenes, pero al darle a añadir otra imagen la imagen de fondo se mueve y aparece la 2º imagen en la parte de la izquierda, pero no encima del fondo. Es lo mismo que pasa en el office: que le tienes que dar al perrito para decirle que ponga el texto al lado (no se si me explico bien).
Mas o menos es algo asi:
Lo que sale
Lo que quiero hacer

Alguien me puede decir como lo hace en el NVU??

Gracias
Yo te puedo decir cómo hacerlo con CSS, pero conseguirlo sin tocar código creo que es complicado.
Puedes ir aprendiendo un poquito de HTML y CSS, porque los editores gráficos están bien para empezar, pero cuando necesites cosas avanzadas se te quedarán cortos.

Utilizando CSS, sería algo como:

<html>
<head>
  <style type="text/css">

  #imagen2 {
    /* Imágenes sin bordes */
    border: 0px;
  }

  #imagen1 {
    border: 0px;
    /* Le indicamos a la imagen que tome una posición fija... */
    position: fixed;
    /* ..y le decimos cuál es esa posición */
    left: 30px;
    top: 40px;
  }

  </style>
</head>

<body>

  <img id="imagen2" src="imagen2.png" alt="Fondo" />
  <a href="#" ><img id="imagen1" src="imagen1.png" alt="Imagen sobre Fondo"  /></a>

</body>
</html>


Lógicamente esta es una solución que puede no servirte si tienes que incluirla en una página en la que los elementos no van a estar siempre en las mismas posiciones, para eso habría que utilizar posiciones relativas o heredadas, pero al menos te sirve para hacerte una idea de que se puede hacer y cómo.

Una solución mejor sería utilizar un contenedor (div, span o lo que necesites), ponerle una imagen de fondo y en ese contenedor ir definiendo las distintas imágenes que quieras.

Sería algo como:

<html>
<head>
  <style type="text/css">

  #fondo {
    /* Le damos dimensiones al contenedor */
    height: 100px;
    width: 100px;
    /* Y una imagen de fondo */
    background: url('fondo.png') no-repeat;
  }

  #imagen1 {
    border: 0px;
    /*  Podemos posicionar la imagen dentro del contenedor utilizando unos márgenes */
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 50px;
    margin-left: 20px;
  }

  </style>
</head>

<body>

  <div id="fondo">
     <a href="#" ><img id="imagen1" src="imagen1.png" alt="Imagen sobre Fondo"  /></a>
  </div>

</body>
</html>



Te animo a que aprendas CSS ya que no es complicado y como ves te ofrece mucha más libertad y potencia que los editores WYSIWYG (al menos que los que yo conozco). Un saludo.
Pues yo diría que con un background="imagen1" para la imagen de fondo y luego un para la imagen de encima va tirando.

Aunque sí, el CSS es como dios ^__^

Saludos!
Sí claro, es una solución mucho más sencilla, pero seguramente llevaría a que haría un menú en una página y esa página la metería como frame en otra. Y... ratataaaa frames. Si está empezando, en mi opinión mejor que empiece bien.

Recordad, las páginas con frames hacen llorar al niño Jesús [risita].
Gooler escribió:Te animo a que aprendas CSS
ashitaka escribió:Aunque sí, el CSS es como dios ^__^
Vale, me apuntare a eso. He estado buscando programas por softonic y me he encontrado 2 que parece que estan bien, el TopStyle Lite y el CSS Tab Designer. Puedo empezar por ahi o tengo que buscarme manuales??
Yo de ti empezaba por saber que es el CSS :)
Para aprender CSS no necesitas de ningún programa, sólo un editor de texto básico, y un manual, por ejemplo, http://www.w3schools.com/css/

Aunque me imagino que antes de aprender CSS te vendría bien aprender un poco de html... Por supuesto, sin usar ningún programa raro. http://www.w3schools.com/html/ y, después, http://www.w3schools.com/xhtml/

En lawebdelprogramador.com hay también manuales de html y css, por si no te gustan los que te he dado. Por supuesto, en google encontrarás cien mil más.
Aquí tienes otra página en la que te enseñan CSS y HTML de forma muy sencilla, empezando desde 0 y en español: http://www.cssya.com.ar/
Gooler escribió:Aquí tienes otra página en la que te enseñan CSS y HTML de forma muy sencilla, empezando desde 0 y en español: http://www.cssya.com.ar/
Gracias, empezare por aqui y luego me metere en lawebdelprogramador

[bye]
8 respuestas
Archivado
Volver a Software libre