Alignment of two images off center

[Greg_M]

Here's what I'd like to do.

I have two images. I would like them centered on a webpage, 915 px from the top. One to the left of center and one to the right of center. Separated by maybe 10px.

Everything I have come up with puts the images in different places depending on the rez of the monitor and browser. If it were just one image I could just simply say "center"
The images are changing so I can't just make one image out of two in PhotoShop

Help?

[DanInMa]

this is more of an html/css question.

you should probably show the html and css you are currently using so someone can assist you in tweaking it.

[Old Pedant]

Why would you use JavaScript to do this? Isn't this a job for CSS?

Just taking a stab at it:

<div style="position: absolute; top: 915px; width: 100%; text-align: center;">
    <img ... style="margin-right: 5px;"><img ... style="margin-left: 5px;">
</div>

(tested, seems to work fine)

Of course, if the screen is too narrow to hold the two images side by side, then they will end up stacked. If it's really important to you to avoid that, then there are other CSS tricks you can use.

[Old Pedant]

Heh...okay, I'm slow, but I actually tested it.

[Greg_M]

Here's is the webpage

http://www.datilcam.com/

What it is supposed to look like is the webcam image at the top center. It updates every 60 sec

Below it to the left side of center is the Weather Underground image which updates every 3 seconds (my little weather station)

To the right of center is supposed to be the local TV stations 7 day outlook which updates once per day.

Eventually I'd like to add a time lapse of the previous day in an mp4 format below or above those two images. But one thing at a time....

Thanks for looking

[Old Pedant]

Yes? It looks fine except that it doesn't adjust for the screen width.

It's weird...the main top image is a completely different size in Firefox and Chrome browsers than it is in MSIE. In MSIE it's about 1700pixels wide. In the others, somewhere around 1200 pixels. Why don't you simply specify the width as a percentage of the screen?

Instead of this:

<img id="cam1" src="http://datil.net/cam/HCpic.jpg" alt="webcam1" style="width: 1180px; height: 669px; border: solid 2px white;"  />

How about:

<img id="cam1" src="http://datil.net/cam/HCpic.jpg" alt="webcam1" style="width: 85%; border: solid 2px white;"  />

If you only specify width, then the browser will auto adjust height to match.

Anyway, what's your question here???

[Old Pedant]

p.s.: I'll come looking for you next time we visit our friends in Port Townsend.

[Greg_M]

On some computers/browsers the two images at the bottom are not side by side.
It looks fine on Firefox Ubuntu and Firefox Win7

I'm not good enough at coding to know why it screws up

[Old Pedant]

Hmmm...might be because the FLASH is in an <object> tag and the browser is treating that as a BLOCK element instead of an INLINE element?

You *MIGHT* be able to fix it using

<object style="display: inline;" ... >

If you weren't aware: <div>s and <form>s are block elements. Meaning they never will sit side by side, by default. <span>s and <input>s and <img>s are all inline elements, meaning they are all happy side by side.

Clearly in FF, Chrome, IE on Windows, <object> is treated as an inline element, but if any browser treated it as block element, then what you see makes sense.

Anyway, with CSS you can override the block/inline nature of any element by just specifying it as [icode]style="display: inline;"[/code] or style="display: block;"

But you could do yourself another big favor by NOT using absolute sizes for your widths. I already suggested using something like width: 85%; for your main image. Instead of the fixed 510px size for the <object> and small image, why not use something like width: 40%? Now your page will self adjust for any window size.

[Old Pedant]

If worst comes to worst, you could always solve the problem by putting the <object> and adjacent <img> into <div>s that you specify the positions of.

Something like this:

<div style="position: relative; width: 100%;>
    <div style="position: relative; width: 50%; text-align: right;">
        <object style="width: 80%; margin-right: 5px;" ...>
    </div>
    <div style="position: relative; width: 50%; text-align: left;">
        <img style="width: 80%; margin-left: 5px;" ...>
   </div>
</div>

THat's just a stab in the dark. Play with it. But in any case, it's clearly nothing to do with JavaScript.

[Old Pedant]

Okay...not quite that.

This worked with two images. Not sure whether it works with <object>. Try it?

<html>
<body>
test test test
<br/><br/>
test test test
<br/><br/>
test test test
<br/><br/>
test test test
<br/><br/>
test test test
<br/><br/>
<div style="position: relative; width: 100%; text-align: center; border: solid 3px green;">
    <div style="position: absolute; left: 0px; width: 50%; text-align: right; border: solid 3px red;">
        <img style="width: 80%; margin-right: 5px;" src="3leaves.jpg" />
    </div>
    <div style="position: absolute; right: 0px; width: 50%; text-align: left; border: solid 3px blue;">
        <img style="width: 80%; margin-left: 5px;" src="3leaves.jpg" />
   </div>    
</div
</body>
</html>

The borders were just there to help me make sure I had the positions correct.

[Old Pedant]

If you couldn't tell, the images 80% means 80% *OF* the 50% of the inner <div> that each is in. So 40% of the total page width.

And, yes, this adjusts to any size window, automatically.