Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

HTML Image buttons are stacking not rowing

Posted on 2014-10-29
7
Medium Priority
?
191 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
7 Comments
 
LVL 84

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 59

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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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 2000 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

715 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