1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

positioning over a image...

Discussion in 'Web Design & Development' started by Duckman69, Aug 18, 2007.

Thread Status:
Not open for further replies.
Advertisement
  1. Duckman69

    Duckman69 Thread Starter

    Joined:
    Jun 26, 2007
    Messages:
    818
    1st i would like to say thank you to all those who have helped me over the last 10 days or so, i know ive really been annoying considering some posts were i suppose unnecessary, so i apologize... 2nd this will be my last annoying post for a while once i get this done im pretty much getting ready to go public after a few updates as far as text material...

    so heres the issue... im using this code below... now what im trying to do is overlay my image so it appears in the center of the other image but using top: 70px; left 275: px; its not going to be the same depending on how big your screen is and how big your explorer window is set to... so im wondering does any1 know anyway i can get that image to appear dead center regardless of user screen size?

    <center>
    <img src = "Best-1.gif" style="position: absolute; top: 70px; left: 275px; ">
    <img src="banner-top.JPG" width="100%" height="150" />
    </center>

    you can see the results on http://www.freewebs.com/fallingrain11/22.html
     
  2. tomdkat

    tomdkat Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,141
    I would make banner-top.jpg the background of a DIV and then have Best-1.gif be the image inside the DIV. I would specify "text-align: center;" for the DIV styling to center the Best-1.gif image.

    EDIT: Something kind of like this:
    Code:
    <table style="width: 100%;" border="2" bordercolor="lawngreen" cellpadding="12" cellspacing="2">
      <tbody>
        <tr class="td2">
          <td style="text-align: center;" class="td2" colspan="2">
    <!-- Header images -->
          <div style="background-image: url(banner-top.JPG); text-align: center; width: 904px; height: 150px; margin-left: auto; margin-right: auto;">
             <img  style="width: 481px; height: 65px; margin-top: 45px;" src="Best-1.gif">
          </div>
    </td>
    
    EDIT #2: The HTML you really want is in your other thread. :)

    Good luck!

    Peace...
     
  3. Duckman69

    Duckman69 Thread Starter

    Joined:
    Jun 26, 2007
    Messages:
    818
    thanks for the tip i think im closer going the way i was earlier your right... i was playing with similar scenarios before and the issue i kept getting with setup like that is the width=100% doesnt seem to work, when the page is small it looks great wehn i max the window though you can see the picture start a 2nd continuing banenr isntead of just stretching...
    http://www.freewebs.com/fallingrain11/zzzzzz.html

    im gonna keep playing with this maby ill get it mixing that code with the <td posted on the other thread... thanks for your help either way...
     
  4. Duckman69

    Duckman69 Thread Starter

    Joined:
    Jun 26, 2007
    Messages:
    818
    WO to the OT.... works like a charm... thanks for the help getting things figured out...

    <center>
    <div style="height:150px;overflow:hidden;">
    <img src="banner-top.JPG" width="100%" height="150" /><br />
    <img src = "Best-1.gif" style="position:relative;top:-110px;left:0px;">
    </div>
    </center>
     
As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/611490