Adding hspace to Image

evil-monkey · 06-05-2009 9:07pm #1

Hi all,

Have a quick q.

I'm pulling data from a mysql database and displaying on a page using php.

I want the image (a book cover) to be left aligned with all the details (price etc). I have achieved this as I wanted nice and easy with;

<?php

while($dat = mysql_fetch_array($result))
{
echo "<table border='0' width=100%>";
echo "<h2>".$dat."</h2>";
echo "<p><img src=".$dat." align=left /> </p>";
echo "<p><b>Synopsis: </b>" . $dat . "</p>";
echo "<p><b>Author: </b>" . $dat . "</p>";
echo "<p><b>Price: </b> €" . $dat . "</p>";
echo "</table>";
echo "<br>";
}

mysql_close($connect);

?>

My problem is as follows;

I want to add space between the image and info. But when I add hspace to the image in the above as follows;

echo "<p><img src=".$dat." hspace=10 align=left /> </p>";

it does nothing. It doesn't give me any errors, doesn't just effect the design the way I thought it should.

Any ideas?? Thanks in advance

DonkeyStyle \o/ · 06-05-2009 9:17pm

This is the first time I've actually heard of hspace, not sure how that one slipped by me :eek:
You could try using something like...
<img src="whatever" style="padding: 0 10px 0 10px;">
Or use margin instead of padding.
The cell-less table might be doing some weird shít too, might as well make it a div.

evil-monkey · 06-05-2009 9:20pm

DonkeyStyle \o/ wrote: »

This is the first time I've actually heard of hspace, not sure how that one slipped by me :eek:
You could try using something like...
<img src="whatever" style="padding: 0 10px 0 10px;">
Or use margin instead of padding.
The cell-less table might be doing some weird shít too, might as well make it a div.

Same thing. Image doesn't budge...

Gordon · 06-05-2009 9:25pm

What is the type of HTML you are outputting to, it looks like hspace is defunct with later html, could be wrong though.

DonkeyStyle \o/ · 06-05-2009 9:26pm

I'm probably not visualising this properly.
Is the text below the picture? Or supposed to be beside it.
If it's below, then you want padding: 0 0 10px 0;
Maybe some screengrabs would help.

Gordon · 06-05-2009 9:27pm

Post the html.

DonkeyStyle \o/ · 06-05-2009 9:37pm

Change your table tags to <div></div>
For some reason being in a table makes it behave strangely. ó_O

evil-monkey · 06-05-2009 9:55pm

<?php


    $connect = mysql_connect("localhost","bla","bla");
    if (!$connect)
        {
            die('Could not connect: ' . mysql_error());
        }

        mysql_select_db("bookshop", $connect);

           $result = mysql_query("SELECT * FROM books WHERE Era LIKE 'Old Republic'");
?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Star Wars Novels</title>
<meta name="keywords" content="star wars novels, star wars books" />
<meta name="description" content="Star Wars novels for people who want more from the Galaxy far, far away..." />

<link rel="stylesheet" type="text/css" href="jedistyle.css" title="default" />
<link rel="stylesheet" type="text/css" href="sithstyle.css" title="alt1" />

<script type="text/javascript" src="styleselection.js"></script>

<style type="text/css">

</style></head>

<body>
<div id="templatemo_container">

    <div id="templatemo_top_panel">
        <div id="templatemo_header">
               <div id="site_title">StarWarsBooks.com</div>
            <div id="slogan">For those who want more from the Galaxy far, far away...</div>
        </div>

    </div> <!-- end of top panel -->
    
    <div id="menu">
        <ul>
            <li><a href="index.html"  class="current">Home</a></li>
            <li><a href="books.html">Books</a></li>
            <li><a href="aboutus.html">About Us</a></li>
            <li><a href="events.html">Events</a></li>  
            <li><a href="contact.html">Contact</a></li> 
            <li></li>            
        </ul>  
        
        <form method="get" action="#">
            <input name="search" value="Search..." type="text" /> <input class="button" type="submit" name="Search" value="GO" />
        </form>
</div> <!-- end of menu -->
    
    <div id="templatemo_content">
        
        <div id="templatemo_content_left">
          <div class="tempaltemo_content_left_section_01">
            <div class="section_01_two_col">
              <h2>The Old Republic</h2>
<blockquote>
    <div align="justify">
      <p><strong>The Galactic Republic was the galactic government prior to the establishment of the Galactic Empire in 19 BBY. Although it is commonly known as the Old Republic, this was not so until the establishment of the Empire; its name when it existed was the Galactic Republic, or simply, the Republic. Rarely, it was referred to as the First Republic.</strong>     </p>
      <p><strong>The Old Republic, which lasted for centuries, was a time of both peace and turmoil, an era that witnessed the deeds of many great heroes and notorius villians; Revan, Gorm and Bane just a taste of the inconic figures that made the lengthy age their own.</strong></p>
    </div>
</blockquote>
</div>
            <div class="section_01_two_col">
              <div class="section_01_box">
                <h4>Latest Releases</h4>
                <p align="justify"><a href="#"><img src="http://ecx.images-amazon.com/images/I/51604ZM6K2L._SL500_.jpg" alt="http://ecx.images-amazon.com/images/I/51604ZM6K2L._SL500_.jpg" width="66" height="108" /></a><a class="section_01_box_title" href="#">Shatterpoint</a><br />
                  The Clone Wars rage throughout the Galaxy, f following the momentous events climaxing in the  Battle of Geonosis, Jedi Master Mace Windu must undertake a perilous mission. </p>
              </div>
              <div class="section_01_box">
                <div align="justify">
                  <p><a href="#"><img src="http://a7.vox.com/6a00c22522f494604a00e398ecff4f0005-500pi" alt="http://a7.vox.com/6a00c22522f494604a00e398ecff4f0005-500pi" width="66" height="108" /></a><a class="section_01_box_title" href="#">Darth Bane: Rule of Two</a><br />
                  When the Sith Wars were over, the Jedi believed their sworn enemies  destroyed. But one remained: Darth Bane. The sequel to Path of Destruction sees the Dark Lord set out with his new  apprentice in pursuit of the secrets and power of the ancient Sith masters.                </p>
                </div>
              </div>
            </div>
            <div class="cleaner"></div>
          </div>
          <!-- end of content left section 01 -->
<div class="tempaltemo_content_left_section_02">
  <h2>Browse through the tales from the Old Republic...</h2>

[B]<?php

        while($dat = mysql_fetch_array($result))
            {
            echo "<table border='0' width=100%>";
            echo "<h2>".$dat['Title']."</h2>";
            echo "<p><img src=".$dat['Image']." align=left />  </p>";
            echo "<p><b>Author: </b>" . $dat['Author'] . "</p>";
            echo "<p><b>Price: </b> &euro;" . $dat['Price'] . "</p>";
            echo "<p><b>ISBN: </b>" . $dat['ISBN'] . "</p>";
               echo "<p><b>Synopsis: </b>".$dat['Description']. "</p>";
            echo "</table>";
            echo "<br>";
            }
            
            mysql_close($connect);
            ?>
                               
</div> [/B]
<!-- end of content leeft section 01 -->
<div class="tempaltemo_content_left_section_02"></div> <!-- end of content leeft section 01 -->
      </div> <!-- end of content left -->

      <div id="templatemo_content_right">
            <div class="content_right_section_01">
              <p>Search form going here</p>
              <p>&nbsp;</p>
              <p>la</p>
              <p>la</p>
              <p>la</p>
            </div>
           <div class="content_right_section_01">
<div class="blog_box">
                  <h5><a href="http://www.play.com/Games/Xbox360/4-/3433932/Star-Wars-The-Force-Unleashed/Product.html" target="_blank"><br />
                  <img src="Images/play.com advert.jpg" width="299" height="155" /><br />
                  </a></h5>
        <p><br />
                  <a href="http://www.masterreplicas.com/" target="_blank"><img src="Images/masterreplicaslogo.jpg" width="132" height="111" align="left" /></a><a href="http://www.screenclick.com/Default.aspx"><img src="Images/screenclickadvert.jpg" width="164" height="39" /></a><br />
                  <br />
                  <a href="http://www.play.com/Gadgets/Gadgets/4-/3321923/-/Product.html?page=title&amp;dpr=0" target="_blank"><img src="Images/spykeeadvert.jpg" width="165" height="50" /></a></p>
             <blockquote>
               <blockquote>
                 <p><a href="http://www.swtor.com" target="_blank"><img src="Images/swtor.jpg" width="145" height="53" align="texttop" /></a></p>
            </blockquote>
        </blockquote>
        <script src="http://www.gmodules.com/ig/ifr?url=http://1o4.jp/google/module/slim-reader.xml&amp;up_mtitle=SWTOR%20Latest%20News&amp;up_mfeed=http%3A%2F%2Fswtor.com%2Ffeed%2Fnews%2Fall&amp;up_contentsnum=9&amp;up_titlelink=http%3A%2F%2Fgoogleblog.blogspot.com%2F&amp;synd=open&amp;w=290&amp;h=100&amp;title=Star+Wars+The+Old+Republic:+Latest+News&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>
</div>
</blockquote>
<br />
<img src="Images/mastercardlogo.jpg" width="61" height="35" /> <img src="Images/visalogo.gif" width="69" height="29" /> <img src="Images/accredited_isis.gif.jpg" width="80" height="34" /> <img src="Images/but_idis.gif.jpg" width="80" height="34" /></div> 
        <!-- end of content right -->
      </div> 
        <!-- end of content -->
    <div id="templatemo_footer">
        <a href="#">Home</a> | <a href="#">Books</a> | <a href="#">About Us</a> | <a href="#">Events</a> | <a href="#">Contact</a><br />
    Copyright &#169; 2024<strong> Mos Eisley Enterprises Inc.</strong><a href="http://www.templatemo.com" target="_parent"></a><br />
    </div> <!-- end of footer -->
</div> <!-- end of container -->
</body>
</html>

As you can see from the bit in bold, at this stage of the page it just drags down all of the books for this section, and lists them with an image and some details. The attached screenshot shows how it is appearing now. I want it to appear like this, but with some space between the image and the info...

DonkeyStyle \o/ · 06-05-2009 10:08pm

Some options for you to try....

Using a div + css
[php]
while($dat = mysql_fetch_array($result))
{
echo "<div>";
echo "<h2>".$dat."</h2>";
echo "<p><img src=".$dat." style=\"padding: 0 10px 0 0;float: left;\" /> </p>";
echo "<p><b>Author: </b>" . $dat . "</p>";
echo "<p><b>Price: </b> €" . $dat . "</p>";
echo "<p><b>ISBN: </b>" . $dat . "</p>";
echo "<p><b>Synopsis: </b>".$dat. "</p>";
echo "</div>";
echo "<br>";
}

mysql_close($connect);
?>
[/php]

Using tables
[php]while($dat = mysql_fetch_array($result))
{
echo "<table border='0' width=100%>";
echo "<tr><td colspan=2><h2>".$dat."</h2></td></tr>";
echo "<tr><td width=\"5%\"><p><img src=".$dat." align=left /> </p></td>";
echo "<td valign=top><p><b>Author: </b>" . $dat . "</p>";
echo "<p><b>Price: </b> €" . $dat . "</p>";
echo "<p><b>ISBN: </b>" . $dat . "</p>";
echo "<p><b>Synopsis: </b>".$dat. "</p></td></tr>";
echo "</table>";
echo "<br>";
}

mysql_close($connect);
?>
[/php]

Gordon · 06-05-2009 10:28pm

You're using xhtml, that does not allow hspace or vspace, so use the css as donkeystyle suggests.

Webmonkey · 06-05-2009 10:29pm

And in addition to that in xhtml that should be the <strong> tag. CSS is the way to go, tables are ancient things that shouldn't be used for laying out sites anymore

evil-monkey · 07-05-2009 5:40pm

DonkeyStyle \o/ wrote: »

Some options for you to try....

As always donkey, i am in your debt. Worked a charm so it did. Much obliged.

evil-monkey · 07-05-2009 5:42pm

One last thing. Using your code as above donkey, how might I justify the alignment of the "description" text?

DonkeyStyle \o/ · 07-05-2009 6:39pm

replace your opening div with...
echo "<div style=\"text-align: justify;\">";
... might do it... not 100% sure what you're after.
Or if the text isn't wrapping at all, then you'll probably need to reduce the width of the div.
Try...
echo "<div style=\"text-align: justify; width: 500px; border: 1px solid #00F; \">";
The border will give you a good look at what area your text has to play in.

evil-monkey · 07-05-2009 7:23pm

Sticking echo "<div style=\"text-align: justify;\">"; at the start did the trick. Thanks again

Adding hspace to Image

Comments