Solved

image alignment problems

Posted on 2002-07-19
15
158 Views
Last Modified: 2010-04-09
hi!
Just wondering how to right align an image - I've tried using p align before the image tag (didn't work) & I've tried it inside the image tag, which does work, but then the text that was below the image is hidden behind it.  I'm considering just separating the image & the text using frames, but I'm sure there is an easier way - any ideas?  

The image & text are in a right hand frame of three columns, all inside an inline frame & I'm using notepad, if any of this is of relevance.
0
Comment
Question by:kelllie
  • 4
  • 4
  • 3
  • +2
15 Comments
 
LVL 12

Accepted Solution

by:
lexxwern earned 50 total points
Comment Utility
<img ...... style="text-align:center/right/left;"/>

<img ...... style="position:absolute; top:100px; left:50px;"/>
0
 
LVL 18

Expert Comment

by:bruno
Comment Utility
<img src="" align="right">

<img src="" style="float: right;">
0
 
LVL 12

Expert Comment

by:lexxwern
Comment Utility
hmm. better attributes used than mine. you might want to post the bit of the code where this img appears.
0
 
LVL 12

Expert Comment

by:lexxwern
Comment Utility
*you = kelllie
0
 

Expert Comment

by:aaran
Comment Utility
Try using tables to lay out your page, and then add the alignment properties to the table cell that the image sits in...

i.e.

<table>
<tr>
<td align="right"><img src="image.gif" width="20" height="20"></td>
</tr>
</table>

In this way, you can seperate the images from the text to avoid 'wrapping'...

Email me for more info if this isn't clear...

Aaran
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
aaran,

Welcome to Experts-Exchange.  Please read the guidelines for comments and answers.  As I indicated in the other question that you remove from the active list.  This kind of behaviour is will get create problems for you.  The answer is, at best, a weak option, and incomplete.  Without seeing code, it is not possible to say anything is an answer.

By locking in an answer you have remove the question from the active list which will reduce participation in it.  Many questioners and most expert consider what you did to be disrespectful and unprofessional.  In the future please refrain from using the answer button for such comments.  I will ask a moderator to reject the "answer".
Cd&
0
 

Expert Comment

by:aaran
Comment Utility
I'm really not sure I see what you are getting at.  You mentioned the following:

"Without seeing code, it is not possible to say anything is an answer."

If you look at my response to the question, I have included appropriate code that works perfectly.

Apologies for this reply, but I'm quite frustrated that you don't seem to have read my reply properly.  Also, I don't understand why this is a weak, incomplete option, as I am a professional web designer, and industry standard suggests the use of tables for layout purposes.

I'd appreciate your comments so that I can understand how to use the site more productively.

I do consider the Experts Exchange to be a wholly valuable resource, so I hope that you can help me to overcome my lack of comprehension...

many thanks

Aaran
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
Your "answer" is a guess at a layout.  What you posted is an isolated table cell.  with the context of the code, there is no way of knowing what teh context of the image is and what relationships must be maintained.  

This may be the start to a solution, but it is not an "answer".  An answer delivers a complete and comprehensive solution.  This is neither.

If you observe the top-experts on the site they almost never post as an answer.  They use comments.  We are always please to have new professionals join us, and we welcome your participation, but please refrain from limiting discussion of quetions by removing them from the active list.

Cd&
0
 

Expert Comment

by:aaran
Comment Utility
Thanks for the clarification.  I understand now how the site works, and will endeavour to follow these guidelines.

Aaran
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
No problem.  Many new members make the same mistake.  It takes a while to learn the site.  You will find that most of the experts prefer collaboration, as we learn new things while helping the users of the site.

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
Frames is generally not a good idea for this kind of a layout problem.  It is more work than necessary and because the pieces are independent of each other it can actually create an even worse alignment problem.

Tables may be a solution by putting the text and images in seperate cells but the size of each of those is important in terms of getting the alignment the way you need it, and the table position on the page may also be an issues.  

The other option is to use CSS ofr the positioning using divs and or spans to control the relationships.

However all of this is speculation without seeing the code.  So if you can post the code or a link to the page, we can try and come up with the appropriate solution.

Cd&
0
 
LVL 18

Expert Comment

by:bruno
Comment Utility
>>and industry standard suggests the use of tables for layout purposes.

absolutely not.  in fact, industry standards suggest the use of CSS for layout, and tables for tabular data.  tables have been incorrectly used for layout for years, and it's time to start using CSS for layout as is intended.


BRUNO
0
 
LVL 6

Expert Comment

by:Mindphaser
Comment Utility
Answer rejected ...

** Mindphaser - Community Support Moderator **
0
 
LVL 12

Expert Comment

by:lexxwern
Comment Utility
ATTENTION. My solution even though it was accepted, is not the best solution. I dont know why i was accepted, but Bruno's comment was IMHO a better comment.

Please use that if you ever come accross looking in the PAQ's. Bruno's comment again,

From: brunobear  Date: 07/20/2002 04:51AM PST  
<img src="" align="right">

<img src="" style="float: right;">
0
 
LVL 18

Expert Comment

by:bruno
Comment Utility
thanks for the vote, lexx.... :-)
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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 to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

743 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now