Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    WDF Staff Wired's Avatar
    Join Date
    Apr 2003
    Posts
    7,657
    Member #
    1234
    Liked
    138 times
    Long story short, we're trying to use HTML to combine 2 images similarly to what's already been done in photoshop.

    Example (look at the avatar):
    http://www.vbulletin.org/forum/member.php?u=43427

    That was done in photoshop. Now check this out: (NOTE: badge.png is the green background image, avatar.jpg is the avatar)
    http://www.houseofhelp.com/forums/sh...ad.php?t=52133

    That avatar was done using tables. The table code is basically:

    Code:
      <table cellpadding="5" cellspacing="0" border="0" width="124" height="82" align="center">
          <tr>
            <td background="badge.png" nowrap="nowrap" no-repeat>
                <img src="avatar.jpg" height="64" width="59" align="right">
            </td>
          </tr>
      </table>
    png has a hole in it where the avatar is (it's seethrough, any image behind it will show through... I think)

    Problem with the code is that the avatar hole has beveled edges. It'd be nice to slip the avatar behind that to easily take advantage of the edges. Also, avatars of different sizes could be put behind it and no one would know of the size differences. Wouldn't have to make as many badges if the size isn't as important.

    With the table format as it is, it's hard coding where the avatar starts at, but when you mess with the dimensions of the image, you can easily go out of the bounds of the cell it's in.

    Now I SUCK at this type of stuff (CSS layering, etc). Anyone have any ideas? feel free to rewrite the table with divs or something else. ultimately a more fluid layout would be nice.

    Also, if this helps, the avatar dimensions need not be hard coded, they can be stored dynamically based on paramaters not needed here.
    The Rules
    Was another WDF member's post helpful? Click the like button below the post.

    Admin at houseofhelp.com

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    I would probably put two img elements in one div (or two divs with a background in one div, whichever) and layer them over each other with absolute positioning + z-index to specify which is on top. Alternatively, put them in the right order. The point is, use two elements instead of just the one. Alternatively, you can do it the same way it is right now, except with the thing you want in the whole as a background. Then use the background-position property to put the avatar where it needs to go.

  4. #3
    WDF Staff Wired's Avatar
    Join Date
    Apr 2003
    Posts
    7,657
    Member #
    1234
    Liked
    138 times
    .... huh? Me TOTALLY suck at CSS. pity this poor mod

    http://www.houseofhelp.com/forums/images/test_badge.png SHOULD be the png for the badge, can't get to it from work
    The Rules
    Was another WDF member's post helpful? Click the like button below the post.

    Admin at houseofhelp.com

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    I've attached an HTML file and two PNGs. The HTML has the embedded styles (please don't crucify me... :-P) I took the badge frame and made it transparent, and then I made the alien background transparent, too. Really, the alien background doesn't have to be, I just made a mistake :-P I also resized the alien so it would fit.
    Attached Images Attached Images

  6. #5
    WDF Staff Wired's Avatar
    Join Date
    Apr 2003
    Posts
    7,657
    Member #
    1234
    Liked
    138 times
    kewl, too bad transparencies apparently only work in FF though, avatar doesn't show up in IE. Gotta search for z-index info.
    The Rules
    Was another WDF member's post helpful? Click the like button below the post.

    Admin at houseofhelp.com

  7. #6
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    IE shoiuld support the absolute transparency I used... You just have to save it as a different kind of PNG, I think. Yeah, you need to have a 256-color PNG. The z-index stuff I was talking about also doesn't really apply without transparency :-/.

  8. #7
    WDF Staff Wired's Avatar
    Join Date
    Apr 2003
    Posts
    7,657
    Member #
    1234
    Liked
    138 times
    mspaint can do 256-bmp, not png
    The Rules
    Was another WDF member's post helpful? Click the like button below the post.

    Admin at houseofhelp.com


Remove Ads

Posting Permissions

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

Search tags for this page

divs to layer images

Click on a term to search for related topics.
All times are GMT -6. The time now is 02:46 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com