Question

I have following aspx page called search.aspx:

 <div id="wrap">
        <div id="menu">
            <div id="t_menus" runat="server">                
                <div id="left">
                    <div class="Menu_Top">
                    </div>
                    <div id="a">
                    </div>
                    <div class="MenuBtm">
                    </div>
                </div>                
                <div id="bottom_menu">
                    <div class="MenuTop">
                    </div>
                    <div id="bottommenu">
                    </div>
                    <div class="MenuBtm">
                    </div>
                </div>
            </div>
        </div>       
        <div id="column_two">
            <div id="right_top" class="right_top">                
                <asp:Panel ID="SrchPanel" runat="server" EnableViewState="False" Wrap="False">
                    <div id="logo">
                        <asp:ImageButton ID="logo" runat="server" ImageUrl="/images/l.gif" />
                    </div>
                    <div id="SrchDivMid">
                        <asp:textbox id="txtS" runat="server" MaxLength="50" value="Search"></asp:textbox>
            <asp:button id="btnFind" runat="server" Text="Find" />
                    </div>                    
                    <div id="returnInfocenter">
                        <asp:HyperLink ID="return" runat="server" Text="Return"></asp:HyperLink>
                    </div>
                </asp:Panel>                                
            </div>
        </div>
        <div class="contentCont">
            <div id="content">
                <iframe id="iFrame" name="iframe" marginwidth="0" marginheight="0" frameborder="0" scrolling="auto" src=""></iframe>
            </div>
        </div>
     </div>

What it does is create simple google type layout like this image using css:

I want this to show like this… when user clicks on menu it loads up iframe with data. I want the css logo searchbox and return button come up and dotted line removed like this image:

I am trying few different things but its not working out. Can anyone please just guide me what approch should i take to achieve the result?

Answer 1

It will be tricky when user click on menu item, page layout change from style 1 to style 2 mentioned in photos.

Initially You need three main div elements

<div style="float:right;width:70%">Search Section</div>
<div style="float:left;width:28%">menu section</div>
<div style="clear:both"></div>

When menu item clicked all you need to transform div structure like this

<div style="width:100%">Search Section</div><!-- goes to top !>
<div style="float:left; width:28%">menu section</div>
<div style="float:right; width:70%;>iframe result section</div>
<div style="clear:both"></div>

Similar Shifting Require In Between Search Section e.g in start div structure look like

<div style="width:100%; padding:10px 0px; text-align:center;">Logo</div>
<div style="width:100%; padding:2px 0px; text-align:center;">Search Box</div>
<div style="width:100%; padding:2px 0px; text-align:center;">Search Links</div>

When menu clicked, shift style of these divs like

<div style="float:left;padding-left:10px; width:25%;">Logo</div>
<div style="float:left;padding-left:10px; width:50%;">Search Box</div>
<div style="float:left; width:20%;>Links</div>
<div style="clear:both;"></div>

You can create classes and when menu item clicked, replace one class with another to shift style of page layout.

Its general concept, rest require step by step tuning.