Photoshop Question posted in
The official user guide can be found here.

Partitioned image in a table – Photoshop

I need to cut an image in Photoshop and to recompose it. I thought to create a table / div-table where put the pieces of the partitioned image.

I have done this:

<div id="Table">
    <div id="row">
        <div id="col">
            <img src="01.png" alt="">
        </div>
        <div id="col">
            <img src="02.png" alt="">
        </div>
        <div id="col">
            <img src="03.png" alt="">
        </div>
    </div>
    <div id="row">
        <div id="col">
            <img src="04.png" alt="">
        </div>
        <div id="col">
            <img src="05.png" alt="">
        </div>
        <div id="col">
            <img src="06.png" alt="">
        </div>
    </div>
    <div id="row">
        <div id="col">
            <img src="07.png" alt="">
        </div>
        <div id="col">
            <img src="08.png" alt="">
        </div>
        <div id="col">
            <img src="09.png" alt="">
        </div>
    </div>
</div>

with Css:

<style type="text/css">
<!--
img {
    width: 100%;
    height: auto;
}

#Table {
    display: table;
    width: 50%;
}
#row {
    display: table-row;
}

#col {
    display:table-cell;
}

-->
</style>

UPDATE:

I have to add in the middle (img 5) a table with the items, the quantity and the price. I have updated the fiddle. There are some problems in the fiddle but here there are the link with the screenshot of my page.

https://www.dropbox.com/s/sxa2ug1vz5lcdml/schermata7.png?dl=0

JSFIDDLE:
http://jsfiddle.net/wdb5gq29/43/

Tags:

2

Answers


  1. 0

    Add display: block and remove width from your img tag to get rid of the cellspacing:

    img {
    display: block;
    height: auto;
}

    updated fiddle: http://jsfiddle.net/wdb5gq29/42/

    Login or Signup to reply.
  2. 0

    I’m working on a similar project (responsive image map), and I found positioned divs placed over a single image to be much more stable.

    It has the added advantage of being used as an image map, because you can put content in or add functionality to the 9 divs, use more or less divs, and there are no alignment issues because it uses one image versus multiple sliced images. An awesome example is the responsive image map at CSS Play: http://www.cssplay.co.uk/menu/cssplay-responsive-image-map.html

    Here is the code for an example similar to yours.

    JSFiddle

    HTML

    <div id="wrapper">

<div class="image-holder">
<img src="http://i.imgur.com/3bhQPx0.jpg" class="image-background" />
<div class="hotspot-container">
<div id="L01">1</div>
<div id="L02">2</div>
<div id="L03">3</div>
<div id="L04">4</div>
<div id="L05">5</div>
<div id="L06">6</div>
<div id="L07">7</div>
<div id="L08">8</div>
<div id="L09">9</div>
</div>
</div>

</div>

    (Note: The CSS is written out in long form as an example for easier use. It would be shortened down on a live site by combining the similar styles.)

    html{
height:100%;
width:100%;
margin:0;
padding:0;
border:none;
}

body {
height:100%;
width:100%;
margin:0;
padding:0;
border:none;
}

#wrapper {
height:100%;
width:100%;
}

.image-holder {
width:50%;
position:relative;
}

.image-background {
width:100%;
display:block;
}

.hotspot-container {
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
}

#L01 {
width:33%;
height:33%;
position:absolute;
left:0%;
top:0%;
border:solid 1px #000000;
}
#L02 {
width:33%;
height:33%;
position:absolute;
left:33%;
top:0%;
border:solid 1px #000000;
}
#L03 {
width:33%;
height:33%;
position:absolute;
left:66%;
top:0%;
border:solid 1px #000000;
}
#L04 {
width:33%;
height:33%;
position:absolute;
left:0%;
top:33%;
border:solid 1px #000000;
}
#L05 {
width:33%;
height:33%;
position:absolute;
left:33%;
top:33%;
border:solid 1px #000000;
}
#L06 {
width:33%;
height:33%;
position:absolute;
left:66%;
top:33%;
border:solid 1px #000000;
}
#L07 {
width:33%;
height:33%;
position:absolute;
left:0%;
top:66%;
border:solid 1px #000000;
}
#L08 {
width:33%;
height:33%;
position:absolute;
left:33%;
top:66%;
border:solid 1px #000000;
}
#L09 {
width:33%;
height:33%;
position:absolute;
left:66%;
top:66%;
border:solid 1px #000000;
}

    Remember to add !DOCTYPE html, or IE will have issues. Also, the div widths are set at 33% with a border to highlight the structure. On the live version, you’ll delete the borders and try setting the horizontal divs to 33.333%, equaling to 100%. Or 33% 34% 33%.

    For your original CSS table layout, you can add the following additional CSS to stabilize the table and remove the default bottom gap under the images, and it worked in Firefox and Explorer, but showed the odd gap or alignment issues in other browsers at various screen sizes.

    .table {
display:table;
width:50%;
margin:0;
padding:0;  
border-width:0;
border-style:none;
border-collapse:collapse;                           
}

.col {
display:table-cell;
border:none;
}

.image {
width:100%;
height:auto;
border:0px;
vertical-align:bottom;
}

    Updated Redesign Using a Flexable Image Background

    According to your latest Fiddle, it looks like you would like to display a data table, with the printer image as a background. The JSFiddle example below has a flexible container div set at the requested 50%. Within the container is the data table, and an absolutely positioned printer image that scales, and serves as the background.

    JSFiddle

    .price-container {
    position:relative;    
    padding:0;
    display:table;
    width:50%;
}

.image-bg {
    display:block;
    position:absolute;
    top:0;
    left:0;
    min-height:100%;
/*  min-width:300px; - setting is helpful if the distortion at smaller sizes is bothesome, set here and on table-holder - width of the actual image */
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    z-index:-1;
}

.table-holder {
    z-index:2;
    padding:2em;
/*  min-width:300px;   */
}

.printer-display-table {
    width:100%;
    padding:0;
    border-width:0;
    border-style:none;
    border-collapse:collapse;
    font-family:verdana;
    font-size:.6em;
}

.printer-display-table td {
    border:solid 1px #000000;
    padding:.5em;
}

    HTML

    <div class="price-container">    

<img src="http://i.imgur.com/wurCt2y.jpg" class="image-bg" />
 
<div class="table-holder">   
<table class="printer-display-table">
<tr><td>Item</td><td>Q</td><td>Price</td></tr>
<tr><td>BlaBlaBla</td><td>1</td><td>50</td></tr>
<tr><td>Eve</td><td>Jackson</td><td>94</td></tr>
<tr><td>Item</td><td>Q</td><td>Price</td></tr>
<tr><td>BlaBlaBla</td><td>1</td><td>50</td></tr>
<tr><td>Eve</td><td>Jackson</td><td>94</td></tr>
</table>
</div>
    
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search