Can I make spaces between HTML tags not screw up relative positioning?

Question

There is a line break between two <img> tags, and they are indented in the document for nice-formatting.

But I'm using relative positioning and z-order to place one image (part of the layout) overtop of another.

I have something like this

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

the line break after the first <img> tag adds a space, and then when I set the relative left position of the second <img> tag, that space is taken into consideration and it's set just a little bit to the right of the first image.

I don't want to put them on the same line, making the lower image tag a background isn't an option (it has to be sized), and fiddling with the relative position is out of the question (I'm assuming spaces will be different sizes on different browsers/systems).

Can I make this work?

edit -- more info

The spacing is throwing off the relative positioning. Is there no way to just position them absolutely, but to the left and top of another element, which has static positioning?

anyways, the layout in its current state has an image overlapping another image. The overlapped image is a div background and the piece of layout is an image in the div.

I need to change the overlapped image when a link is clicked (a thumbnail of an image is clicked, and a larger version appears in the overlapped image). But the images are all different sizes, larger than the default div background image. I can't resize a div background so it has to be an image. But the problem is getting one image to overlap another. They want me to also fade between images, so I need two images, stacked on top of each other (with the top one fading in and out to a bottom one), plus the edge of the layout over top of those.

I don't know how to accomplish this any other way

Answer 1

apply display: block; to your img tags' styling.

Answer 2

What is that z-order there? its z-index. And how will line break within design improve anything. As i see things z-index and line breaks in website layout/design are the last things you should use. What you need is proper margins and paddings. Also read about negative margins before you start using z-index.

Check these out : http://www.barelyfitz.com/screencast/html-training/css/positioning/ http://www.elated.com/articles/css-positioning/ http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/ http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

Answer 3

This is what ended up working for me:

I just placed the top image (a part of the layout, sort of an edge which creeps over onto the image in one part) in the layout like normal (left aligned in a statically sized div, which is in the center of the page).

Then I made the other two absolutely positioned, at just 0,0 (but it doesn't matter where).

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

then using a bit of JavaScript, I fixed the position of the other two images:

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

it might not be the best way to do it, but it works and I'm being pressured for this project to be finished, so it will have to do for now.

Answer 4

Carson,

The <center> tag is deprecated.(to my knowledge). I believe if you since you've set the div to width:686px, you can use margin:0 auto.

For what I believe is the effect you're attempting, maybe this jQuery slideshow tutorial will help.

It uses an unordered list made horizontal, makes only one list visible at a time, and scrolls through them automatically. You can change the sliding feature to 'fade' in the slideshow.js like so:

 $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

change the above fx:'scrollLeft' to fx: 'fade' so it'll look like this:

$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'

Also, after building this, use your images as list items, and replace the pagination texts in the tutorial to the relevant image thumbnails.

You can tinker with the speeds & time out & it also works well without javascript enabled.

Also, if this doesn't help you achieve the effect you want, can you make a sketch? The use of 'overlapping' is a bit confusing.