Place a control over an image

Discussion in 'ASP.NET / ASP.NET Core' started by lukesb, Nov 18, 2009.

  1. Hi

    I want to re-do my site so that it sits centrally and when a user re-sizes the width of the browser window the site adjusts nicely...

    I think I have to put everything in a div..? and center it..?

    This goes fine with my sliced up images, but how do I then put controls on top of the images..? I know I can use absolute positioning, but then when the width of the browser window is resized, the controls don't line up with the images properly...

    What's the best way of going about this..?

    Cheers..!

    Luke
     
  2. Hi,
    Best way will be with some tricky CSS.
    You can find lots of tips on-line, check with sites like http://www.smashingmagazine.com/
    As for placing controls over images I'm using a trick on this page:
    http://msftwise.com/contact/

    The Master page is loading an image via CSS then the controls on that page load what is needed over it.
    Not very hard to do with CSS.
    I can post the code if you want.
    All the best,
    Mark
     
  3. Hi Mark

    That contact page looks great. Exactly what I am trying to achieve. Any help you can give me on that would be sweet...

    By the way, is that drop shadow on the light blue box actually on the image or is it generated at a later stage..? I'm sure I saw it re-drawing as I re-sized the window...

    Cheers..!

    Luke
     
  4. Hi,
    Everything re-sizes, even the background image, which is not really a background image.
    I test most of the time at 1680x1050 and get tired of seeing static background images fall short. ;-)
    The shadow is done with the AjaxControlToolkit, on the ASP.NET Ajax site.
    i.e.:
    Code:
    <ajaxToolkit:DropShadowExtender ID="HeadPanelShadow" runat="server"
    TargetControlID="HeadPanel" 
    Width="5"
    Opacity=".5" 
    Rounded="true"
    Radius="6"
    TrackPosition="true" />
    Email me at [email protected] and I'll send you the code to play with.
    All the best,
    Mark
     

Share This Page