Click here to Skip to main content
15,861,168 members
Please Sign up or sign in to vote.
4.00/5 (1 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 8: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.

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.
 
Share this answer
 
Comments
NishaPai 11-May-11 6:10am    
Thanks James. I got the solution. I used tables to achieve this.
Below is what I tried and is working fine.

MasterPage:
XML
<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>


 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900