Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Rotator > Image Overlap

Not answered Image Overlap

Feed from this thread
  • Haris avatar

    Posted on Nov 23, 2011 (permalink)

    Hi,
    I am working with div-based pages and RadRotator and wanted to ask the following:
    Can any image overlap part of RadRotator with image?

    Attached is the requirement:
    Black = RadRotator
    Red = Image within RadRotator
    Green = Overlapping image

    I've been playing around with css but with no avail. Any help will be greatly appreciated.

    Thanks.

    -Haris
    Attached files

    Reply

  • Kevin Master avatar

    Posted on Nov 24, 2011 (permalink)

    Hello Haris,

    Here's a simple example on how to implement what you want:

    <div style="position: relative;">
            <telerik:RadRotator ID="RadRotator1" runat="server" ItemHeight="100px" ItemWidth="50px"
                Height="100px" Width="200px">
                <Items>
                    <telerik:RadRotatorItem BorderColor="Black" BorderStyle="Solid" BorderWidth="1px"
                        Height="100px" Width="50px">
                        <ItemTemplate>
                            Some text content 1
                        </ItemTemplate>
                    </telerik:RadRotatorItem>
                    <telerik:RadRotatorItem BorderColor="Black" BorderStyle="Solid" BorderWidth="1px"
                        Height="100px" Width="50px">
                        <ItemTemplate>
                            Some text content 2
                        </ItemTemplate>
                    </telerik:RadRotatorItem>
                    <telerik:RadRotatorItem BorderColor="Black" BorderStyle="Solid" BorderWidth="1px"
                        Height="100px" Width="50px">
                        <ItemTemplate>
                            Some text content 3
                        </ItemTemplate>
                    </telerik:RadRotatorItem>
                    <telerik:RadRotatorItem BorderColor="Black" BorderStyle="Solid" BorderWidth="1px"
                        Height="100px" Width="50px">
                        <ItemTemplate>
                            Some text content 4
                        </ItemTemplate>
                    </telerik:RadRotatorItem>
                    <telerik:RadRotatorItem BorderColor="Black" BorderStyle="Solid" BorderWidth="1px"
                        Height="100px" Width="50px">
                        <ItemTemplate>
                            Some text content 5
                        </ItemTemplate>
                    </telerik:RadRotatorItem>
                    <telerik:RadRotatorItem BorderColor="Black" BorderStyle="Solid" BorderWidth="1px"
                        Height="100px" Width="50px">
                        <ItemTemplate>
                            Some text content 6
                        </ItemTemplate>
                    </telerik:RadRotatorItem>
                    <telerik:RadRotatorItem BorderColor="Black" BorderStyle="Solid" BorderWidth="1px"
                        Height="100px" Width="50px">
                        <ItemTemplate>
                            Some text content 7
                        </ItemTemplate>
                    </telerik:RadRotatorItem>
                </Items>
            </telerik:RadRotator>
            <div style="position:absolute;top:30px;left:50px;z-index:500;background-color:Green;height: 100px;width:100px;">
                This is overlapping rotator
            </div>
        </div>

    The basic premise is that you need to wrap the RadRotator and the image that will overlap it inside of a div with the position set as relative (this is necessary in order for the overlapped image to be positioned correctly within the div). The next step is to add the image that will be overlapped and set the position to absolute, set the z-index (in this case I made it 500, so it shows over the RadRotator) and then adjust the top and left properties to position it over the RadRotator.

    I hope that helps.

    Reply

  • Haris avatar

    Posted on Nov 30, 2011 (permalink)

    Thanks for the reply Kevin!

    I didn't want to use absolute positioning but It seems that will work as well.

    Instead, I used the negative margin and it worked out for me.

    -Haris

    <div style="width:20px; height:35px;position:relative;margin-right:40px;bottom:160px;margin-bottom:-160px;">Some image</div>

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Rotator > Image Overlap
Related resources for "Image Overlap"

[  ASP.NET Rotator Features  |  Documentation  |  Demos |  Telerik TV  |  Self-Paced Trainer  |  Step-by-step Tutorial  ]