471,627 Members | 2,356 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,627 software developers and data experts.

How to align a small image within <li> tag

3
Hi,

I am a CSS/HTML novice. Can anyone please answer my question.

I am trying to insert a small image(an arrow) within an <li> tag. My problem is that I cannot right align the image.
Here is what I am trying to do.
<div class="menu">
<ul>
<li><a href="link_path">Display text<img src="flyout_arrow.gif" width="4" height="7" border="0" align="right"/></a>
</li>
</ul>
</div>


Here is the CSS used along with the html

.menu {display:block; font-family: arial, helvetica, sans serif; font-size: 11px; width:175px; position:relative; margin:0; padding:0; z-index: 1000}

.menu ul li a {display:block; text-decoration:none; cursor: hand; color:#08288d; width:175px; height:22px; text-align:left;margin:0; padding:0;border:1px solid #efefef; background-color:#ffffff; line-height:20px; font-size:11px;z-index: 1000}

.menu ul li a:visited {display:block; text-decoration:none; cursor: hand; color:#08288d; width:175px; height:22px; text-align:left;margin:0; padding:0; border:1px solid #efefef; background-color:#ffffff; line-height:20px; font-size:11px;}

.menu ul {padding:0; margin:0;list-style-type: none; }

Is there any other way it can be done?
Oct 5 '07 #1
3 24855
Why not take out the img tag and insert the image into the css, the whole Idea of CSS is to take out all design elements leaving plain XHTML. Only images that portray information should be included within the html.

Try somthing like the below to position your arrow image and then add in your other css.

Another tip is to make your site work in Firefox and then create a ie only spreadsheet. More info can be found on creating an IE only spreadsheet by search through google for CSS conditional if statements.

Its important to make it work for Firefox as its a standards browser and does everything right. IE on the other hand is not standards based.

Expand|Select|Wrap|Line Numbers
  1. HTML:
  2.  
  3. <ul class="list">
  4.      <li>Test</li>
  5. </ul>
  6.  
  7. CSS:
  8.  
  9. .list{
  10.      background: (pathtoimage.gif) right no-repeat;
  11.      padding-right: 20px;  
  12. }
If you have any problems give us a shout.
Oct 5 '07 #2
drhowarddrfine
7,435 Expert 4TB
CSS conditional if statements.
Just to be clear, CSS does not have "conditional statements". This is something that only IE would recognize while all other browsers would ignore it. The actual term for it is "conditional comments".
Oct 5 '07 #3
drhowarddrfine
7,435 Expert 4TB
Why do you give the image dimensions inline when everything else is in CSS? The sizes you currently have are too small to be viewable. Also, there is no attribute 'valign' for <img>.

I don't know the purpose of all the 'ul li' stuff though some of it is needed, but if you get rid of all of it, and just put height and width dimensions for the image in CSS, you'll see the image gets placed where you want.
Oct 5 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

7 posts views Thread by YT | last post: by
1 post views Thread by Randall Sell | last post: by
5 posts views Thread by toylet | last post: by
8 posts views Thread by Udo Marx | last post: by
2 posts views Thread by Andrew Donaldson | last post: by
1 post views Thread by XIAOLAOHU | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.