Click here to Skip to main content
14,384,431 members
Rate this:
Please Sign up or sign in to vote.
See more:
Hi,

Any help in achieving the below would be greatly appreciated.

I have a master-page with Title bar on top of the page where I have 2 images, one to the right corner and other to the left. In between there is blank white space. I have a grid in the page content and I'll get the horizontal scroll-bar if the grid columns increase. But the width of the image remains fixed at the master-page which looks odd when the page is moved to the left with scrolling. So I want to increase the middle white space width in the title bar, retaining image positions at right and left corners.

Please provide any inputs/suggestions in getting this.

Thanks in advance
Posted
Updated 10-May-11 9:47am
v2
Comments
NuttingCDEF 10-May-11 13:09pm
   
Can you provide some sample HTML code and associated CSS that generates the problem? With that, someone might be able to suggest possible solutions - without it anything anyone suggests is probably little more than a guess.
thatraja 10-May-11 14:46pm
   
Yes, Need HTML & CSS code...if possible post the screenshot of the page too.
Rate this:
Please Sign up or sign in to vote.

Solution 1

You can use CSS for this.

Set your header DIV to margin-left:auto;margin-right:auto;width:95% and for your images use float:left or float:right accordingly. Set your width % accordingly.

Alternatively, you can wrap your entire page (header, body, footer) inside another DIV and use that to control the exact width as your layout root.

Cheers.
   
Comments
NishaPai 11-May-11 6:10am
   
Thanks James. I got the solution. I used tables to achieve this.
Rate this:
Please Sign up or sign in to vote.

Solution 3

Below is what I tried and is working fine.

MasterPage:
<body>
    <form id="form2" runat="server">
    <table style="min-width:100%">
        <tr>
            <td>
                <table style="width: 100%;">
                    <tr>
                        <td style="width: 100px;">
                            <img id="Img1" src="~/Images/Image1.jpg" runat="server" />
                        </td>
                        <td style="background-image: url('Images/Image2.jpg');
                            background-repeat: no-repeat; background-position: center; width: 99%;">
                        </td>
                        <td style="width: 100px;">
                            <asp:Image ID="imgLogo" ImageUrl="~/Images/Image3.jpg" runat="server" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <div>
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
            </td>
        </tr>
    </table>
    </form>
</body>


Content Page:
Put the page content inside a div with below style:
<pre lang="xml"><asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder" runat="Server">
    <div style="white-space: nowrap">
        Page content here
    </div>
</asp:Content>


   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100