CODEWITHSUNDEEP
asp.netcsslistview
CoreLean
CoreLean

Reputation: 2139

aling image with anchor text?

I am listview and to display data. so thought of displaying icon front of

So i did try to use below section.

.listview a
{
    font-weight: normal;
    background:transparent url(../images/arrow.png) scroll  no-repeat left center;
    padding:2px 0px 2px 20px;
}

it works fine for but if the text goes next line then the second line align to left most which looks odd. ( In stackoverflow you can see the example on right side, "Simliar quuestion" :-)). The next line align to first line if it continue of first line.

Any idea how to handle text for this.

And my listview layout is like below

<ItemTemplate>
      <tr>
          <td>
              <a href="">
                    <%#Eval("Description")%></a>
           </td>
       </tr>
 </ItemTemplate>

Should i use <ul></ul> instead of <a></a>?

Upvotes: 0

Views: 101

Answers (2)

शेखर
शेखर

Reputation: 17614

You can use two divs for that and set the float of that. It will work.

<ItemTemplate>
  <tr>
      <td>
          <a href="">
             <div class="imagBack"></div>
              <div class="noBackImage">
                 <%#Eval("Description")%></a>
              </div>
       </td>
   </tr>
</ItemTemplate>

create style sheet as follows

.listview a
{
    display:block
}
.listview a div.imagBack
{
    width:50px;
    float:left;
    font-weight: normal;
    background:transparent url(../images/arrow.png) scroll  no-repeat left center;
    padding:2px 0px 2px 20px;
 }
 .listview a div
 {
    width:100px;
    float:right;
    font-weight: normal;
 }

Upvotes: 0

defau1t
defau1t

Reputation: 10619

a tag is by default an inline tag, which means top and bottom padding wont work. To fix this you should add display:block; to a tag and play around the padding and/or background-position; to set it right.

Upvotes: 1

Related Questions