?
Solved

Aligning graphic images with text side-by-side within a table cell?

Posted on 2005-03-17
8
Medium Priority
?
238 Views
Last Modified: 2008-03-10
Can u help.
I have a table cell ... say ... 200wide by 30height ...
In the cell I need to display two images (20x20 each) left aligned ... and text (that linewraps to two lines).

so - image, image, text (line wraps to 2 lines of text).

the problem: ... I can valign middle the images - left justified ... but the line wrapped text refuses to play nice .. and does not vertically align correctly.

Any ideas?
Richard
0
Comment
Question by:rcbuchanan
[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
  • 4
  • 2
  • 2
8 Comments
 
LVL 38

Expert Comment

by:lherrou
ID: 13571423
Can you post your code?
0
 
LVL 5

Expert Comment

by:jericotolentino
ID: 13571431
Hi,

How about using 3 cells?

<table>

<tr height="30">
<td width="200" valign="top"><img src="image1.jpg" /></td>
<td width="200" valign="top"><img src="image2.jpg" /></td>
<td width="200" valign="top">Your text goes heretd>
</tr>

</table>

Although in some browsers, the height attribute of tr is not supported...
0
 

Author Comment

by:rcbuchanan
ID: 13571446
I cannot. They have to be together (can't explain).

<td width="294" align="left" class="stylemyfriends1" valign="middle">
<img name="icon_want_n" src="/icon_want_1.jpg" width="14" height="14">
<img name="icon_agree_n" src="/icon_agree_1.jpg" width="14" height="14">
<a href="whatever"><cfoutput>#left(loadQuery.discussionSubject,50)#</cfoutput></a>
</td>
0
WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

 
LVL 38

Expert Comment

by:lherrou
ID: 13571457
Have you tried using align="left" for the images themselves?
0
 

Author Comment

by:rcbuchanan
ID: 13571473
its the vertical alignment that is the problem, not the horizontal.
0
 
LVL 38

Accepted Solution

by:
lherrou earned 1200 total points
ID: 13571475
I know, but the image alignment determines where the browser places the text next to the image. Funny quirk, but that's the way it works.
0
 
LVL 38

Expert Comment

by:lherrou
ID: 13571485
align     top bottom    Specifies how to align the    Use styles instead
            middle left    image according to
            right             surrounding text.
                               Deprecated.
        
0
 
LVL 5

Assisted Solution

by:jericotolentino
jericotolentino earned 800 total points
ID: 13571524
An alternative to tables would be CSS. Make a wrapper for the cell, then align the images where you want.

<html>
<head>
<title>My page</title>
<style>
<!--
#wrapper {
position: relative;
width: 600px;
height: 200px;
}
#image1 {
position: absolute;
top: 0px;
left: 0px;
}
#image 2 {
position: absolute;
top: 0px;
left: 250px;
}
#text {
position: absolute;
top: 0px;
left: 450px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="image1"></div>
<div id="image2"></div>
<div id="text"></div>
</div>
</body>
</html>
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Find out what you should include to make the best professional email signature for your organization.
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 an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Suggested Courses

800 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