CODEWITHSUNDEEP
asp.net
Joseph
Joseph

Reputation: 661

I want to put some text beside my asp image, but I can't seem to get it right

I have a web page where I want to put some text that starts at the top of an image like this. But I changed the photo to be an asp image so I can make it to where the blog owner will be able to change the photo. Since I changed it to an asp control, the best I have been able to do is start the text at the bottom of the photo. Is there a way to make two columns or something and put them beside each other? Here is my current code:

<div class="aboutBodyStyle">
    <asp:AccessDataSource ID="AccessDataSource3" runat="server" 
            DataFile="~/App_Data/TravelJoansDB.mdb"
                SelectCommand="SELECT PicPath FROM AboutPic"></asp:AccessDataSource>

            <asp:FormView ID="Formview2" runat="server" DataSourceID="AccessDataSource3">
            <ItemTemplate>
            <asp:Image ID="Image1" CssClass="placePicCenter" runat="server" 
                            BorderWidth="1px"
                            BorderColor="#EEEEEE"
                            ImageUrl='<%# "Website Photos/" + Eval("PicPath") %>' />
            </ItemTemplate>                               
            </asp:FormView>
    Hello!  My name is Jo Ann, pen name TRAVEL JOANS, and welcome to my journey.  I’m an avid traveler with an 
    intense passion for travel, culture, language and photography.  I started my travel blog as a way to document 
    my travels, share my awesome travel adventures and connect with other liked-mind travelers and bloggers.  
    My travels have taken to some unique and faraway places and . . . <br /></div>

<h1 class="aboutHeader2Style">OOPS . . . LET ME BACK UP TO . . . HOW IT ALL STARTED!</h1>

<p class="aboutBodyStyle">
In 1997, I decided that it was time to spread my wings and see the world. Since it   would be my first time traveling abroad, I wanted my trip to be flawless so I enlis...

And so forth. How do I put the text at the top of the photo?

Upvotes: 1

Views: 449

Answers (1)

IrishChieftain
IrishChieftain

Reputation: 15253

Markup:

<ItemTemplate>
    <p>
        <asp:Image ID="Image1" CssClass="imageLeft" runat="server" 
            BorderWidth="1px" BorderColor="#EEEEEE"
                ImageUrl='<%# "Website Photos/" + Eval("PicPath") %>' />
        My name is Jo Ann, pen name TRAVEL JOANS, and welcome to my journey.
        I’m an avid traveler with an intense passion for travel, culture, 
        language and photography.  I started my travel blog as a way to document
        my travels, share my awesome travel adventures and connect with other 
        liked-mind travelers and bloggers. My travels have taken to some unique 
        and faraway places and . . . 
    </p>
</ItemTemplate>

CSS:

.imageLeft
{
    float: left; 
    margin-right: 10px;
    margin-bottom: 10px;
}

It's optional whether or not you want to place the leading text surrounding the image in the template. You could also set the dimension of the FormView to match those of the image and place the text outside of the control; either way should work.

Upvotes: 2

Related Questions