¿Puedo hacer espacios entre etiquetas HTML no meter la pata posicionamiento relativo?

Question

Hay un salto de línea entre dos etiquetas <img>, y son una sangría en el documento de Niza-formato.

Pero estoy usando posicionamiento relativo y el orden z para colocar una imagen (parte de la disposición) overtop de otro.

Tengo algo como esto

<img style="position: relative; z-index: -1;" width=a height=b>
<img style="position: relative; z-index: 0; left: -a" width=x height=y>

el salto de línea después de la primera etiqueta <img> añade un espacio, y luego, cuando me puse la posición relativa izquierda de la segunda etiqueta <img>, ese espacio se toma en consideración y se encuentra a sólo un poco a la derecha de la primera imagen .

No quiero ponerlos en la misma línea, por lo que la etiqueta de imagen inferior un fondo no es una opción (que tiene que ser de un tamaño), y jugando con la posición relativa está fuera de la cuestión (I' m suponiendo espacios serán diferentes tamaños en diferentes navegadores / sistemas).

¿Puedo hacer este trabajo?

editar - más información

El espaciamiento está lanzando fuera el posicionamiento relativo. ¿No hay manera de simplemente la posición de ellos absolutamente, sino a la left y top de otro elemento, que tiene la posición estática?

De todas formas, el diseño en su estado actual tiene una imagen superpuestos otra imagen. La imagen superpuesta es un fondo div y la pieza de diseño es una imagen en el div.

Es necesario cambiar la imagen superpuesta cuando se hace clic en un enlace (se hace clic en una miniatura de una imagen, y una versión más grande aparece en la imagen superpuesta). Pero las imágenes son todas diferentes tamaños más grandes la imagen predeterminada div fondo de. No puedo cambiar el tamaño de un fondo div así que tiene que ser una imagen. Pero el problema es conseguir una imagen a otra solaparse. Ellos quieren que se desvanecen también entre las imágenes, por lo que necesitan dos imágenes, apiladas una encima de la otra (con el de arriba fundido o salir a otro inferior), además de la ventaja de la disposición sobre la parte superior de ellos.

No sé cómo lograr esto de otra manera

Answer 1

¿Qué es ese orden z allí? su z-index. Y cómo se alineará ruptura en el diseño de mejorar nada. Como veo las cosas z-index y saltos de línea en el sitio web de diseño / diseño son las últimas cosas que debe utilizar. Lo que necesita es márgenes y rellenos adecuados. También leer sobre los márgenes negativos antes de usar z-index.

Verlas: http://www.barelyfitz.com/screencast/html-training/css / posicionamiento / http://www.elated.com/articles/css-positioning/ http: //www.smashingmagazine .com / 2009/07/27 /-la-definitiva-guía-a-negativas usando-márgenes / http: //www.smashingmagazine .com / 2007/05/01 / css-float-teoría-cosas-que-debe-saber /

Answer 2

Esto es lo que terminó trabajando para mí:

I acaba de colocar la imagen superior (una parte de la disposición, una especie de un borde que se arrastra sobre sobre la imagen en una parte) en la disposición como normal (alineado a la izquierda en un div estáticamente de tamaño, que está en el centro de la página).

Entonces hice los otros dos con posición absoluta, a tan sólo 0,0 (pero no importa dónde).

<center>
    <div style="width: 686">
        <img id="ed" src="./edge.jpg">
        <img id="bg" style="position: absolute; left: 0; top: 0; z-index: -2;">
        <img id="fg" style="position: absolute; left: 0; top: 0; z-index: -1;">
    </div>
</center>

a continuación, utilizando un poco de JavaScript, me fijo la posición de los otros dos imágenes:

function fixImages() {
    var imageEdge = document.getElementById('ed');
    var foregroundImage = document.getElementById('fg');
    var backgroundImage = document.getElementById('bg');

    foregroundImage.style.left = imageEdge.style.left;
    foregroundImage.style.top = imageEdge.style.top;

    backgroundImage.style.left = imageEdge.style.left;
    backgroundImage.style.top = imageEdge.style.top;
}

que podría no es la mejor manera de hacerlo, pero funciona y estoy siendo presionados para que este proyecto se haya terminado, por lo que tendrá que hacer por ahora.

Answer 3

Carson,

La etiqueta <center> está en desuso. (Que yo sepa). Creo que si, ya que ha establecido el div de ancho: 686px, se puede utilizar el margen:. 0 auto

Por lo que creo que es el efecto que se está tratando, tal vez esto jQuery diapositivas tutorial ayudará.

Se utiliza una lista desordenada hecho horizontal, sólo hace una lista visible a la vez, y se desplaza a través de ellos de forma automática. Puede cambiar la función de deslizamiento de 'fade' en los slideshow.js, así:

 $slideshow = {
        context: false,
        tabs: false,
        timeout: 5000,      // time before next slide appears (in ms)
        slideSpeed: 500,   // time it takes to slide in each slide (in ms)
        tabSpeed: 500,      // time it takes to slide in each slide (in ms) when clicking through tabs
        fx: 'scrollLeft',   // the slide effect to us

e

cambiar el fx arriba: 'scrollLeft' a fx: 'fade' lo que va a tener este aspecto:

$slideshow = {
        context: false,
        tabs: false,
        timeout: 5000,      // time before next slide appears (in ms)
        slideSpeed: 500,   // time it takes to slide in each slide (in ms)
        tabSpeed: 500,      // time it takes to slide in each slide (in ms) when clicking through tabs
        fx: 'fade',   // CHANGED TO 'FADE'

Además, después de la construcción de este, utilizar sus imágenes como elementos de la lista, y reemplazar los textos de paginación en el tutorial para las miniaturas de las imágenes pertinentes.

Puede jugar con la velocidad y el tiempo de espera y también funciona bien sin javascript activado.

Además, si esto no ayuda a lograr el efecto deseado, se puede hacer un dibujo? El uso de 'superposición' es un poco confuso.

Answer 4

solicite display: block; a labrar sus etiquetas img.