Solved

HTML Image buttons are stacking not rowing

Posted on 2014-10-29
7
170 Views
Last Modified: 2014-11-03
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

0
Comment
Question by:padmasambhava
7 Comments
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
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
 
LVL 33

Expert Comment

by:Slick812
Comment Utility
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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 

Author Comment

by:padmasambhava
Comment Utility
Slick, we're getting close. In your code how do I put the picture and description side by side?
0
 
LVL 33

Accepted Solution

by:
Slick812 earned 500 total points
Comment Utility
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
 

Author Closing Comment

by:padmasambhava
Comment Utility
Thanks everyone!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now