Link to home
Start Free TrialLog in
Avatar of Starquest321
Starquest321

asked on

Putting Pictures next to each other

I am trying to create a banner across the website. While the code below does create the banner size I need,  a single picture comes out too stretched. Therefore I would like to put two or three pictures right next to each other across the same row. However the code that I have puts the pictures one BELOW another. . how can I change that to make them stitched....
<table width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td>
					<img src="images/logo1.gif" width="580" height="240">
                    <img src="images/logo2.gif" width="580" height="240">
					</td>
				</tr>
				</table>

Open in new window

Avatar of Ryan Chong
Ryan Chong
Flag of Singapore image

try:
<table width="100%" cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                        <td>
                                        <img src="images/logo1.gif" width="580" height="240"></td>
                    <td><img src="images/logo2.gif" width="580" height="240">
                                        </td>
                                </tr>
                                </table>

Open in new window

Try adding style="display: inline;" to the image.

Also, is the table sitting inside of a fixed width tag?
Avatar of Starquest321
Starquest321

ASKER

Can you please tell me the exact "code" to use with the inline command? I have attached the complete code below. Also what is the <!-- tag? The values there are in gray in my dreamweaver and I don't see them on the actual site anywhere...


<tr>
	<td>&nbsp;</td>
	<td colspan="5">
		<table width="975" cellpadding="0" cellspacing="0" border="0" align="center">
		<!--
		<tr>
			<td colspan="3" bgcolor="#E92727" height="6"><img src="images/spacer.gif" border="0" width="1" height="1"></td>
		</tr>
		<tr>
			<td colspan="3" background="images/bg_topblue.gif" height="54">
			
				<table cellpadding="0" cellspacing="0" border="0" class="normal_12_black">
				<tr>
					<td width="500"><img src="images/logo.gif" width="356" height="24"></td>
					<td width="250">
 
						<form action="site_search.php" method="get" style="margin:0px">
						<table cellpadding="2" cellspacing="0" border="0" class="normal_12_black">
						<tr>
							<td valign="middle"><strong>FIND BUSINESS</strong></td>
							<td valign="middle"><input type="text" name="search_keyword" value="" style="width:120px" class="textbox"></td>
							<td valign="middle"><input type="image" src="images/icon_search.gif" vspace="2"></td>
						</tr>
						</table>
						</form>
 
					</td>
					<td width="230" align="right">
						<font class="normal_12_blue_verdana"><strong>Best Business Directory</strong></font><br>
					</td>
					<td width="20"><img src="images/spacer.gif" border="0" width="1" height="1"></td>
				</tr>
				</table>
 
			</td>
		</tr>
		-->
		<tr>
			<td colspan="3" bgcolor="#FFFFFF" height="3"><img src="images/spacer.gif" border="0" width="1" height="1"></td>
		</tr>
		<tr>
			<td colspan="3">
 
				<table width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td>
					<img src="images/logo1.gif" width="980" height="160">
                    				</td>
				</tr>
				</table>
 
			</td>
		</tr>
		<tr>
			<td colspan="5" bgcolor="#FFFFFF" height="3"><img src="images/spacer.gif" border="0" width="1" height="1"></td>
		</tr>
		<tr>
			<td colspan="3">
				
				<table width="100%" cellspacing="0" cellpadding="0">
				<tr>
					<td width="1%" align="left"><img src="images/nav_left.gif" width="20" height="37"></td>
					<td width="100%" background="images/nav_bg_blue.gif">
 
						<table cellspacing="0" cellpadding="0" class="normal_12_white_verdana">
						<tr>
 
							<td><img src="images/nav_divider.gif" width="2" height="37"></td>
							<td width="100" align="center" class="{$nav_class_home}" onclick="location.href='index.php'">
								<a href="index.php" class="normal_12_white_verdana"><strong>Home</strong></a>
							</td>
 
							<td><img src="images/nav_divider.gif" width="2" height="37"></td>
							<td width="100" align="center" class="{$nav_class_about}" onclick="location.href='site_about.php'">
								<a href="site_page_about.php" class="normal_12_white_verdana"><strong>About Us</strong></a>
							</td>
 
							<td><img src="images/nav_divider.gif" width="2" height="37"></td>
							<td width="100" align="center" class="{$nav_class_resources}" onclick="location.href='site_resources.php'">
								<a href="site_resources.php" class="normal_12_white_verdana"><strong>Resources</strong></a>
							</td>
 
							<td><img src="images/nav_divider.gif" width="2" height="37"></td>
							<td width="150" align="center" class="{$nav_class_account}" onclick="location.href='member_login.php'">
								<a href="member_login.php" class="normal_12_white_verdana"><strong>My Account</strong></a>
							</td>
 
							<td><img src="images/nav_divider.gif" width="2" height="37"></td>
							<td width="100" align="center" class="{$nav_class_register}" onclick="location.href='member_register.php'">
								<a href="member_register.php" class="normal_12_white_verdana"><strong>Register</strong></a>
							</td>
 
							<td><img src="images/nav_divider.gif" width="2" height="37"></td>
							<td width="100" align="center" class="{$nav_class_contact}" onclick="location.href='site_contact.php'">
								<a href="site_page_contact.php" class="normal_12_white_verdana"><strong>Contact Us</strong></a>
							</td>
 
							<td><img src="images/nav_divider.gif" width="2" height="37"></td>
							<td width="150" align="center" class="{$nav_class_terms}" onclick="location.href='site_terms.php'">
								<a href="site_page_terms.php" class="normal_12_white_verdana"><strong>Terms of Use</strong></a>
							</td>
 
							<td><img src="images/nav_divider.gif" width="2" height="37"></td>
							
						</tr>
						</table>
 
					</td>
					<td width="1%" align="right"><img src="images/nav_right.gif" width="20" height="37"></td>
				</tr>
				</table>
				
			</td>
		</tr>
		<tr>
			<td colspan="2" bgcolor="#FFFFFF" height="3"><img src="images/spacer.gif" border="0" width="1" height="1"></td>
		</tr>
		<tr>
			<td width="1%" valign="top"><img src="images/search_left.gif" width="12" height="48"></td>
			<td width="100%" height="60" background="images/search_hor.gif" style="background-repeat:repeat-x;">
			
				{if $clogin_member != ""}
				<table width="100%" cellpadding="0" cellspacing="0" border="0" class="normal_12_black">
				<tr>
					<td>
 
						<table cellpadding="2" cellspacing="0" border="0" class="normal_12_black">
						<tr>
							<td valign="middle"><strong>MY ACCOUNT : </strong></td>
							<td valign="middle"><a href="member_profile.php" class="normal_12_red">My Profile</a></td>
							<td valign="middle"> | </td>
							{if $clogin_member_type == "agent"}
							<td valign="middle"><a href="member_subscription.php" class="normal_12_red">My Subscription</a></td>
							<td valign="middle"> | </td>
							{/if}
							<td valign="middle"><a href="member_listing.php" class="normal_12_red">My Property Listings</a></td>
							<td valign="middle"> | </td>
							<td valign="middle"><a href="member_favourite.php" class="normal_12_red">My Favourite Listings</a></td>
							<td valign="middle"> | </td>
							<td valign="middle"><a href="system_member_logout.php" class="normal_12_red">Logout</a></td>
						</tr>
						</table>
					
					</td>
					<td align="right" class="normal_12_blue_verdana"><strong>Welcome, <u>{$clogin_member_firstname} {$clogin_member_lastname}</u>!</strong></td>
				</tr>
				</table>
				{else}
				<img src="images/spacer.gif" border="0" width="956" height="1">
				{/if}
 
			</td>
			<td width="1%" valign="top"><img src="images/search_right.gif" width="12" height="48"></td>
		</tr>
		</table>
	</td>
	<td>&nbsp;</td>
</tr>

Open in new window

<!-- opens a comment and --> closes it. Anything within the comments are ignored and wont be displayed.
<table width="100%" cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                        <td>
                                        <img src="images/logo1.gif" width="580" height="240" style="display: inline;"><img src="images/logo2.gif" width="580" height="240" style="display: inline;">
                                                </td>
                                </tr>
                                </table>

Open in new window

Thanks for you help. Can you also look to see if you see anything with my post:

https://www.experts-exchange.com/questions/23884495/gmail-setting-in-setting-ini-file.html

Much appreciated.
It worked with the pictures but it put the whole site to display vertically. It seems that it put all the tables on top of one another.
No problem,

Glad I could help. I will take a look at your other post soon.
ASKER CERTIFIED SOLUTION
Avatar of lpxtech
lpxtech
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Excellent! Thanks so much!