How to merge image ?

Discussion in 'HTML & Website Design' started by SEOdir.net, Jun 22, 2007.

Thread Status:
Not open for further replies.
0
  1. #1
    Hello,
    I have 3 images that i want to merge into that image:
    [​IMG]

    But I want to do that in HTML, please help, me my code isnt working :/

    Here are the images:
    part 1: [​IMG] (begin of the strip)
    part 2: [​IMG] (background)
    part 3: [​IMG] (last pixels of the strip)
     
    SEOdir.net, Jun 22, 2007 IP
  2. toby

    toby Notable Member

    Messages:
    6,923
    Likes Received:
    269
    Best Answers:
    0
    Trophy Points:
    285
    #2
    using CSS absolute position? just my guess.
     
    toby, Jun 22, 2007 IP
  3. SEOdir.net

    SEOdir.net Banned

    Messages:
    2,549
    Likes Received:
    105
    Best Answers:
    0
    Trophy Points:
    173
    #3
    I have that code, you can see the result here: http://www.seodir.eu (do not add links)
    <table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td align="right">
    <img src="{$smarty.const.FULL_TEMPLATE_PATH}/images/striprow.png" width="20" height="21" align="left"/></td>
	<div style="bar">
   {* Display current path *}
   {assign var="current_path" value=""}
   {foreach from=$path item=cat name=path}
      {assign var="current_path" value="`$current_path``$cat.TITLE_URL`/"}
      {if !$smarty.foreach.path.first} &raquo; {/if}
      {if !$smarty.foreach.path.last}
         <a href="{if $smarty.const.ENABLE_REWRITE}{$current_path}{else}index.php?c={$cat.ID}{/if}">{$cat.TITLE|escape|trim}</a>
      {else}
         {$cat.TITLE|escape|trim}
      {/if}
	  </div>
   {/foreach}
	</td>
    <td><img src="{$smarty.const.FULL_TEMPLATE_PATH}/images/endstrip.png"  width="1" height="21" align="right"/></td>
   </tr>
  </table>
    Code (markup):
    P.S. I am making path table for phpld.
     
    SEOdir.net, Jun 22, 2007 IP
  4. krt

    krt Well-Known Member

    Messages:
    829
    Likes Received:
    38
    Best Answers:
    0
    Trophy Points:
    120
    #4
    Add this to the <td>, the one I think you removed. It should be on line 5 of your code. :)
    style="background-image: url('http://img411.imageshack.us/img411/8366/stripbgeb4.png');"
    Code (markup):
    This is how it should end up:
    <table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td align="right">
        <img src="{$smarty.const.FULL_TEMPLATE_PATH}/images/striprow.png" width="20" height="21" align="left"/>
      </td>
      <td style="background-image: url('http://img411.imageshack.us/img411/8366/stripbgeb4.png');">
	<div style="bar">
   {* Display current path *}
   {assign var="current_path" value=""}
   {foreach from=$path item=cat name=path}
      {assign var="current_path" value="`$current_path``$cat.TITLE_URL`/"}
      {if !$smarty.foreach.path.first} &raquo; {/if}
      {if !$smarty.foreach.path.last}
         <a href="{if $smarty.const.ENABLE_REWRITE}{$current_path}{else}index.php?c={$cat.ID}{/if}">{$cat.TITLE|escape|trim}</a>
      {else}
         {$cat.TITLE|escape|trim}
      {/if}
	  </div>
   {/foreach}
	</td>
    <td><img src="{$smarty.const.FULL_TEMPLATE_PATH}/images/endstrip.png"  width="1" height="21" align="right"/></td>
   </tr>
  </table>
    Code (markup):
    Of course, replace the imageshack URL with {$smarty.const.FULL_TEMPLATE_PATH}/images/stripbg.png or whatever you want to call it.
     
    krt, Jun 22, 2007 IP
  5. SEOdir.net

    SEOdir.net Banned

    Messages:
    2,549
    Likes Received:
    105
    Best Answers:
    0
    Trophy Points:
    173
    #5
    SEOdir.net, Jun 22, 2007 IP
  6. krt

    krt Well-Known Member

    Messages:
    829
    Likes Received:
    38
    Best Answers:
    0
    Trophy Points:
    120
    #6
    Here. Added widths to the left and right cells and some colour and padding to the text over the background: 
    <table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td align="right" width="20">
        <img src="{$smarty.const.FULL_TEMPLATE_PATH}/images/striprow.png" width="20" height="21" align="left"/>
      </td>
      <td style="padding: 3px 0pt 0pt 3px; color: white; background-image: url('{$smarty.const.FULL_TEMPLATE_PATH}/images/stripbg.png');">
	<div style="bar">
   {* Display current path *}
   {assign var="current_path" value=""}
   {foreach from=$path item=cat name=path}
      {assign var="current_path" value="`$current_path``$cat.TITLE_URL`/"}
      {if !$smarty.foreach.path.first} &raquo; {/if}
      {if !$smarty.foreach.path.last}
         <a href="{if $smarty.const.ENABLE_REWRITE}{$current_path}{else}index.php?c={$cat.ID}{/if}">{$cat.TITLE|escape|trim}</a>
      {else}
         {$cat.TITLE|escape|trim}
      {/if}
	  </div>
   {/foreach}
	</td>
    <td width="1"><img src="{$smarty.const.FULL_TEMPLATE_PATH}/images/endstrip.png"  width="1" height="21" align="right"/></td>
   </tr>
  </table>
    Code (markup):
     
    krt, Jun 22, 2007 IP
  7. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #7
    <html>
    <head>
    <style>

    #strip {
    width: 600px;
    background-image: url(http://img411.imageshack.us/img411/8366/stripbgeb4.png);
    height:22px;
    }

    #strip img {
    padding: 0px;
    float: left;
    margin-right: 1px;
    }

    #strip p {
    font-family: arial, heletica, sans-serif;
    font-size: 12px;
    color: #7E888F;
    margin: 0px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 0px;
    padding-bottom: 0px;
    }

    </style>
    </head>
    <body>
    <div id="strip">
    <img src="http://img525.imageshack.us/img525/7391/striprownn8.png"/>
    <p>Sample Text</p>
    </div>
    </body>
    </html>

    Don't know what the third image is for, but it doesn't appear as though you need it.
     
    Arnold9000, Jun 22, 2007 IP
  8. SEOdir.net

    SEOdir.net Banned

    Messages:
    2,549
    Likes Received:
    105
    Best Answers:
    0
    Trophy Points:
    173
    #8
    SEOdir.net, Jun 23, 2007 IP
  9. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Add your image right after the paragraph with an id name that you want to give it. Then, in your styles, give it a float right property and zero out all padding and margins

    <img src="http://img525.imageshack.us/img525/7391/striprownn8.png"/>
    <p>Sample Text</p>
    <img id="rightImage" src="http://img525.imageshack.us/img525/4379/endstriphh6.png">

    Then, in the styles,

    #rightImage {
    float: right;
    padding: 0;
    margin: 0;
    }

    Should work, but I haven't tested.
     
    Arnold9000, Jun 25, 2007 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #10
    Arnold, yours is ok, but has a 'problem' - you've got your presentation in your content.

    The HTML for this should be REALLY simple. (If this is a header though, I'd consider changing the inner DIV to a header tag)

    <div class="imagebar"><div><div>Sample Text</div></div></div>

    With the following CSS

    
* {
	margin:0;
	padding:0;
}

.imagebar {
	font:normal 14px/21px arial,helvetica,sans-serif;
	color:#CDE;
	background:#567 url(images/stripbgeb4.png) repeat-x;
}

.imagebar div {
	background:url(images/striprownn8.png) no-repeat;
}

.imagebar div div {
	background:url(images/endstriphh6.png) top right no-repeat;
	padding:0px 1px 0px 24px;
	height:21px;
}
    Code (markup):
    That should be all it takes... doesn't even need floats.... ALTHOUGH

    The border is so close to an even color nobody is going to notice that 5% shading, as such I'd probably drop the border and use.... BORDER... likewise I'd combine your dark button and repeating background to a single image to reduce the ping time.

    Hang on, I'll toss together what I mean.
     
    deathshadow, Jun 25, 2007 IP
  11. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #11
    I've got one div name and one id name for one image. I don't think that one "img id=" is really any sort of no no. You replace it with many nested divs. A blind person has to listen to all of your nested divs as well as listening to one image id attribute that I have. So I'm not sure I really see the advantage. And, btw, you're supposed to use a p tag for the text, not a div tag. Div tags are only used when you can't use another tag. Other than that, they are only supposed to be used as informational tags and for grouping styles together, although sometimes, there is nothing that will substitute for a div..
     
    Arnold9000, Jun 25, 2007 IP
  12. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #12
    By presentation I meant the images - they don't make much sense when you turn the CSS off. Images that are not content are presentation - presentation these days works better in the CSS. Nowadays I only use the IMG tag for images that are content - you used them for what are basically overglorified borders.

    As to the para, yeah you are probably right - the innermost should be a <p> - though as I said I suspect this to be a header, as such it should probably be a <h2> or lower.
     
    deathshadow, Jun 25, 2007 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #13
    http://battletech.hopto.org/for_others/SEODir/template.html

    as with all my examples the directory
    http://battletech.hopto.org/for_others/SEODir

    Is unlocked so you can get a the files... or file in this case. That uses a single 356 byte .png
    [​IMG]
    to accomplish what you were attempting with three images totalling almost 7k.

    Simplify, simplify, simplify. The big trick here is a 'sliding background'. I use this one a good deal... and unlike my first example it only has one extra container. (Ideally I'd like to drop that to none, but with the lack of support for :before and generated content)

    IDEALLY I'd probably make the arrow separate from it's background, make all three images 32px tall (or even taller - that's 96px total height) so it could dynamically adjust to the height of the text inside it... but that's a whole 'nother excercise.
     
    deathshadow, Jun 25, 2007 IP
  14. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Borders? How so? I'm sorry, but I don't understand what you're saying.

    Also, what happens when you put a background image inside a div, and then nest another div inside of that with a background image as well? Doesn't the nested div background cover over the outer div background or am I missing some sort of subtlety? Thanks.
     
    Arnold9000, Jun 25, 2007 IP
  15. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #15
    Well, your images result in a one pixel wide grey border. Instead of storing that in the images, we just put border:1px solid #EEE; in the CSS for the outermost container, as I did in the example I linked to.

    That's EXACTLY what happens, and we can use that to our advantage.

    Backgrounds do not have to repeat. You can set them to not repeat, AND you can set their position. By default their position is 0px 0px, or the top left corner.

    So, if we set the tiled background stripbgeb4.png inside out outermost DIV as 'repeat-x', then put your right image endstriphh6.png as 'top right no-repeat' it will only appear in the upper right corner once, letting the first image show through. Then we take striprownn8.png and set it to 'no-repeat' and it will appear only once in the upper left corner, again allowing the background to show through the rest of it.

    Background layering, VERY powerful effect once you get a handle on it.

    My second example
    http://battletech.hopto.org/for_others/SEODir/template.html

    takes this one step further... Because you can position the background in px, I removed the 1px border you had around the images, and put them one atop the other. By assigning '0px -21px repeat-x' we get the bottom of the combined images tiled across the page, while the top one can't show the bottom of the image because of the fixed height container.

    That's the method I'd suggest putting the most study toward, since less images means less pings - combine that with a paint program that actually makes OPTIMIZED images (Paint Shop Pro for example) and some palette/transparancy tricks, and you can do all sorts of fancy image borders for a minimum of bandwidth, and with relatively lightweight code.

    Have a look at this for a good example of how far this can be pushed.
    http://battletech.hopto.org/html_tutorials/fourcorners/template.html

    The header area is dynamic height to 64px (could be larger, just make the images larger), the content area is fully dynamic - you could expand any of that to any size - and the whole thing relies on just TWO images.

    http://battletech.hopto.org/html_tutorials/fourcorners/images/greybox_TheRest.png

    and

    http://battletech.hopto.org/html_tutorials/fourcorners/images/greybox_LeftRight.gif

    totalling a whopping 663 bytes.
     
    deathshadow, Jun 25, 2007 IP
  16. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Ahhh, I see what you're saying. Similar to the sliding door technique. I do like the fact that I can avoid floats as it's good practice to avoid them if possible because of their funky and sometimes unpredictable nature. So what really separates presentation from non presentation in regard to images? For example, is a company logo presentation or information? On my site, I have a lot of titles that are images because of font-branding issues. Should these be background images?

    Transparencies are often no nos because you can't anti alias the curves, and therefore you get choppy, ugly curves.
     
    Arnold9000, Jun 26, 2007 IP
  17. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #17
    That's a great example !!!

    If you wanted to be completely anal and perfect, you don't need class specifications on your html page except for <div class="post">

    I've had people hammer it into my head to get every single peice of markup off the page, including id or class mentions where possible. Also, I've read books about people having what's called "classitis". From what I've read, it's preferable to use ids instead of classes where something will not be repeated on the page. I forget why.
     
    Arnold9000, Jun 26, 2007 IP
  18. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #18
    I would say yes, use image replacement for those so you can mark them up with header tags and meaningful text inside them.

    Header images are presentation, borders are presentation... menu buttons are presentation - a thumbnail is content. A link banner to someone else's website is content. An image in your news item of the company party is content. A picture of the companies product is content...

    A good way to think about it, is ask yourself if they were to rebrand tomorrow with new fonts and a whole new site skin, would this image remain the same, or would you have to change it? (an experience I'm entirely WAY too familiar with at the moment)

    There's nothing quite like being able to completely reskin a website, even going so far as to switch column orders, without once touching the HTML...

    Which I believe is point people have been trying to sell CSS on all along.
     
    deathshadow, Jun 29, 2007 IP
Thread Status:
Not open for further replies.