Solved

HTML Image buttons are stacking not rowing

Posted on 2014-10-29
7
180 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 83

Expert Comment

by:Dave Baldwin
ID: 40412675
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 55

Expert Comment

by:Julian Hansen
ID: 40412844
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 34

Expert Comment

by:Slick812
ID: 40413609
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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

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

Accepted Solution

by:
Slick812 earned 500 total points
ID: 40418491
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
ID: 40420492
Thanks everyone!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

856 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