views:

310

answers:

3

i am new in CSS and have a problem with styling ListView Control in ItemTemplate tag.
my project language is rtl(persian) and i want to set the user image at the right and her/his infos to the left of the image.
but this is the result:

alt text

and here is the code for ListView:

<asp:ListView ID="NokListView" runat="server" DataSourceID="ObjectDataSource1">
    <LayoutTemplate>
        <img alt="" src="./img/group.png"><br />
        <br />
        <fieldset>
            <legend>ليست کلي</legend>
            <asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
        </fieldset>
    </LayoutTemplate>
    <ItemSeparatorTemplate>
        <hr />
    </ItemSeparatorTemplate>
    <ItemTemplate>
        <img style="float: right;" alt="" src='<%# Eval("Gender","./img/{0}.png") %>' />
        <span>نام وارث:</span><%# Eval("FirstName") %>&nbsp;<%# Eval("LastName") %><span
            dir="ltr">(<%# Eval("Email") %>)</span><br />
        <span>نسبت او با شما:</span>
        <%# Eval("Relationship")%><br />
    </ItemTemplate>
</asp:ListView>

I set the style of to float:right and it is working but as you see the template is like a Hierarchical list!
I want each Item place below the previous Item NOT in the front of. please explain me what is exactly happening?! and how to fix it?

A: 

can we see a screen shot of whats happening?

Aly
you are now seeing! what happening. i put it above the ListView code.in the shot you see ListView Result and no other element exist in the page.
mahdiahmadirad
A: 

Put the non-image data together in a div with float:left and see if that works?

IrishChieftain
I tried that. not works!
mahdiahmadirad
A: 

I Found My Answer here: doctype.com

and the complete fixed code is:

<ItemSeparatorTemplate>
<hr style="clear:right;" />
</ItemSeparatorTemplate>
<ItemTemplate>
    <div style="clear: both;">
        <img style="float: right;" alt="" src='<%# Eval("Gender","./img/{0}.png") %>' />
        <span>نام وارث:</span><%# Eval("FirstName") %>&nbsp;<%# Eval("LastName") %>
        <span dir="ltr">(<%# Eval("Email") %>)</span><br />
        <span>نسبت او با شما:</span><%# Eval("Relationship")%><br />
    </div>
</ItemTemplate>

So Look at the result:

alt text

mahdiahmadirad