Solved

HTML Image buttons are stacking not rowing

Posted on 2014-10-29
7
178 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 54

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 33

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
Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

 

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 33

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

777 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