We help IT Professionals succeed at work.

ASP.net Positioning GIF

Medium Priority
98 Views
Last Modified: 2020-02-03
Hi
In the ASP.net web app http://office2web.com.au/
I am trying to move a GIF that is currently to the left more to the right and higher up
so that I can put text on the left and the GIF on the right of the grey area. The image shows how I want to move it

The markup for my page is shown further down

1
<%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="Office2Web._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

   

        <div class="jumbotron">
              <h1 style="color:#003399;">Microsoft Office and Web Experts</h1>      
              <p class="lead">Microsoft Access, Excel, SQL and Web Development. Based in Australia, Consulting Internationally</p>
              <h2 style="color:darkcyan;">Call 1300 049 0499 for a free consultation</h2>
            <asp:Image ID="Image2" runat="server" Height="169px" ImageUrl="~/Resources/Web Animation GIF.gif" Width="323px" />
        </div>

    <div class="row">
        <div class="col-md-4">
            <h2 style="color:#003399;">Microsoft Office Solutions</h2>
            <p>
                We build custom solutions into your existing  Microsoft Office. Use the familiar Excel, Word, Outlook or Access environment to evolve your business.
                Get up and running quickly with database applications in Microsoft Access or SQL. Automate and integtrate Excel,Outlook, Access and Word. Our consultants have
                over 15 years of experience in Microsoft development. Call us for a free consultation!</p>
            <p>
                <a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301948">Learn more &raquo;</a>
            </p>
        </div>
        <div class="col-md-4">

            <h2 style="color:#003399;">Tell Us Your Needs</h2>
             <p>
                 Work in an environment that exactly suites your functional requirements. Let us know what you would like and where you would like it. A lot of the time we will have built similar apps for another client. We like to keep things simple so that you are able to run with it with no or little guidance. Please click on the button below and fill out the form on the page that you are taken to.</p>
            <p>
               
                <a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301949">Learn more &raquo;</a>
            </p>
        </div>
        <div class="col-md-4">
            <h2 style="color:#003399;">Web Application Solutions</h2>
            <p>
                Our web applications are built using the same technology as the Microsoft Cloud (ASP.net). They integrate well with your Microsoft Office and can be used to run your business nationally or globally. We typically
                include a cloud database (SQL) that is used as your central data store and interacted with from web pages and Microsoft Excel, Outlook, Word, Access and PowerPoint
            </p>
            <p>
                <a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301950">Learn more &raquo;</a>
            </p>
        </div>
    </div>
     
</asp:Content>
Comment
Watch Question

CERTIFIED EXPERT
Distinguished Expert 2019
Commented:
I think based on your setup, I do not think it is possible.
You may have to define a div containing the image, while resizing the div at the top, while positioning the did of the image ....

It is a dhtml based.  Thing versus asp.net which is run on the server.

Do you want the image between the title/heading?

Placing the image align right..... Between the two lines.

Div manipulation for position is more complex and has to potentially account for the differences among the browsers.
Murray BrownASP.net/VBA/VSTO Developer

Author

Commented:
Thanks for the advice. Probably better not to do it. Thanks
ZvonkoSystems architect
CERTIFIED EXPERT
Top Expert 2006
Commented:

Hello Murray,


everithing correct what expert arnold stated, but when you still want to try, you could check this:

<asp:Image ID="Image2" runat="server" Height="169px" ImageUrl="~/Resources/Web Animation GIF.gif" Width="323px"
sytle="position:relative; top:-80px; left:60%;"  />


It looks then like this on PC:


But like this on Mobile:


And that is what expert arnold stated, it is not responsive.


ZvonkoSystems architect
CERTIFIED EXPERT
Top Expert 2006

Commented:

Instaed of positon:relativ is perhaps better to adjust the margin attribute like this:


< asp:Image ID="Image2" runat="server" Height="169px" ImageUrl="~/Resources/Web Animation GIF.gif" Width="323px"
 sytle="margin-left:50%; margin-top:-40px;"  />


The mobile view looks then like this: