Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Alignment of two images off center

    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?

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,567
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    Why would you use JavaScript to do this? Isn't this a job for CSS?

    Just taking a stab at it:
    Code:
    <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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,567
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    Heh...okay, I'm slow, but I actually tested it.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,567
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    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:
    Code:
    <img id="cam1" src="http://datil.net/cam/HCpic.jpg" alt="webcam1" style="width: 1180px; height: 669px; border: solid 2px white;"  />
    How about:
    Code:
    <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???
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,567
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    p.s.: I'll come looking for you next time we visit our friends in Port Townsend.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,567
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    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
    Code:
    <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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,567
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    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:
    Code:
    <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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,567
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    Okay...not quite that.

    This worked with two images. Not sure whether it works with <object>. Try it?
    Code:
    <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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,567
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •