HTML Image buttons are stacking not rowing

This code is good except that the button images are stacked atop one another. I want them to appear side by side.

echo "<table><tr><td style=\"width:60%\">";
echo "<img id=\"pic\" src=".$row[0]." style=height:425px><td style=\"width:3%\">";
echo "<td id=\"desc\" style=\"width:30%\">".$row[1];
echo "<tr><td>All images copyright Linda Matthews.";
echo "<td><button onclick=\"prevPicture()\"   <img src=\"images/arrow-left.png\">  </button>";
echo     "<button onclick=\"history.go(-1);\" <img src=\"images/arrow-up.png\">    </button>";
echo     "<button onclick=\"nextPicture()\">  <img src=\"images/arrow-right.png\"> </button>";
echo "</table></div>";

Open in new window

padmasambhavaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
That's not enough info to help.  We at least need the picture sizes.

I will note that your format for the button is not correct.  There is no place for an <img> link inside the button element.  http://www.w3schools.com/tags/tag_button.asp
0
Julian HansenCommented:
Several issues

1. Using tables for layout - not considered a good idea
2. Opening <td> without closing </td>
3. Mismatch of columns in row 2
4. <button> without a closing '>'

Also consider using the PHP Heredoc notation http://php.net/manual/en/language.types.string.php#language.types.string.syntax.heredoc

To make your button's side by side you need to put them into a column that is wide enough for them to be side by side
Currently you have
col1: 60%
col2: 3%
col3: 30%
In row 2 you have only two columns defined so you are constraining the buttons to a column width 3%.
What you need to do is either
a) Add another empty column definition between the two columns in row 2
b) Add a colspan to either of the two columns to swallow up the middle column.
You also have a total width of 93% - might want to round that out to 100%

Here is some code that should do the trick - but change based on the above to suite requirements
<?php
// FUDGE TO SUPPLY VALUES FOR
// $row ARRAY

$row = array(
  'images/pic1.png',
  'Description'
);

// CONSIDER USING HEREDOC NOTATION
// DON'T NEED TO ESCAPE '\'
// CAN EMBEDD VARS INTO STRING
echo <<< HTML
<table>
  <tr>
    <td style="width:60%">
      <img id="pic" src={$row[0]} style=height:425px>
    </td>
    <td style="width:3%"></td>
    <td id="desc" style="width:30%">{$row[1]};</td>
  </tr>
  <tr>
    <td>All images copyright Linda Matthews.
    <td></td>
    <td>
      <button onclick="prevPicture()"><img src="images/arrow-left.png">
	  </button><button onclick="history.go(-1);"><img src="images/arrow-up.png">
	  </button><button onclick="nextPicture()"><img src="images/arrow-right.png"></button>
    </td>
  </tr>
</table>
</div>
HTML;

Open in new window

Working sample here http://www.marcorpsa.com/ee/e054.php
0
Slick812Commented:
greetings padmasambhava, because you have the buttons with onclick functions of prevPicture()  an nextPicture() I take this to be sort of muti image "slide" viewer, that is clicked button to see the different images.
You try and use a <table> for your arrangement, withe nearly all table elements in incorrect HTML format., But I do NOT SEE using a <table> for this as something that will work well for "click-able Slide viewer".
 Below is the raw HTWL - CSS for a what I think is a better arrangement and understanding for your users, to see for a "click-able Slide viewer"
<div style="display:inline-block; text-align:center; border:1px solid #d00; 
  padding:6px; border-radius:10px;">
<img id="pic" src="large_Image.jpg" style="width:425px">
<div id="desc" style="margin:4px; padding:2px; border:1px solid #00d;">
   Description Here for the above Image
   </div>
<button onclick="prevPicture()"><img src="prev.jpg"></button> 
<button onclick="history.go(-1); ><img src="up.jpg"></button> 
<button onclick="nextPicture()"><img src="next.jpg"></button><br />
<span style="font-size:75%;color:#888;">All images copyright Linda Matthews.</span>
</div>

Open in new window

Please notice that I changed the large Image CSS sizer from a Height to a Width Style definition, which has worked well for me in my slide displays

I Left OUT the PHP $row[ ] for this demo as The HTML-CSS was important, and you seem to know how to place the PHP inside of Echo statements. .
ask questions if you need more Info.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

padmasambhavaAuthor Commented:
Slick, we're getting close. In your code how do I put the picture and description side by side?
0
Slick812Commented:
OK, I have changed the CSS for some of the elements and added a horizontal rule, for separation.
This will have the description <div> to the right of the image

HOWEVER, be very aware, I have NOT done the CSS on this for responsive design, so the description may drop below the image on narrow phones. I could have guaranteed the Image text description ALWAYS is right of image with a <table> design. But I have no Idea of the other design elements or responsive factors you may neeed.
<div style="display:inline-block; text-align:center; border:1px solid #d00; 
  padding:6px; border-radius:10px;">
<img id="pic" src="images3/11php.jpg" style="width:425px;vertical-align:middle;">
<div id="desc" style="display:inline-block;width:80px;height:217px;margin:4px; padding:2px; border:1px solid #00d;">
   Description and Information plus Title, Here for the Image
   </div><hr style="border-style: solid; border-color: #00d;"/>
<button onclick="prevPicture()"><img src="images3/globe16.gif"></button> 
<button onclick="history.go(-1)" ><img src="images3/globe16.gif"></button> 
<button onclick="nextPicture()"><img src="images3/globe16.gif"></button><br />
<span style="font-size:75%;color:#888;">All images copyright Linda Matthews.</span>
</div>

Open in new window

I have used Images on that server host to test this,

Please take the time to learn your CSS, so you can do web page design, and change this image slide view to what you may need for your page.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
padmasambhavaAuthor Commented:
Thanks everyone!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.