RadhaKrishnaKiJaya
asked on
Web page design problem
Hi Experts,
I want to place a calender control and a data repeater side by side in a web page. Both should same size and in half of the screen I want calender control and in the other half I want the data of repeater control. I tried in so many ways but can not fix this problem. I have attached the views of different browers. This is my code.
<div class="InputDiv50percent" >
<asp:Calendar ID="mnuCalender" runat="server" BackColor="White" BorderColor="#999999" Font-Names="Verdana" Font-Size="13pt" ForeColor="Black" Height="600px" Width="650px" CellPadding="4" DayNameFormat="Shortest" >
<DayHeaderStyle Font-Bold="True" Font-Size="13pt" BackColor="#CCCCCC" />
<NextPrevStyle VerticalAlign="Bottom" />
<OtherMonthDayStyle ForeColor="#808080" />
<SelectedDayStyle BackColor="#666666" ForeColor="White" Font-Bold="True" />
<SelectorStyle BackColor="#CCCCCC" />
<TitleStyle BackColor="#B9DEAA" Font-Bold="True" BorderColor="Black" />
<TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
<WeekendDayStyle BackColor="#FFFFCC" />
</asp:Calendar>
</div>
<div id="DivMenu" runat="server" class="InputDiv50percent">
<table class="menutables">
<asp:Repeater ID="outerRepeater" runat="server" EnableViewState="true">
<ItemTemplate>
<tr>
<td style ="color:black;background :rgb(205, 218, 177)">
<asp:Label ID="lblMealTimeID" runat="server" Text='<%#Eval("MealTimeID" )%>' Visible="false" ></asp:Label>
<asp:Label ID="lblMealTime" runat="server" Text='<%#Eval("MealTimeNam e")%>'></a sp:Label>
</td>
</tr>
<asp:Repeater ID="innerRepeater" runat="server" EnableViewState="true" >
<ItemTemplate>
<tr>
<td style="padding-left :50px;">
<asp:Label ID="lblMenuItem" runat="server" Text='<%#Eval("MenuItem")% >'></asp:L abel>
<asp:Label ID="lblMenuItemID" runat="server" Text='<%#Eval("MenuItemID" )%>' Visible="false"></asp:Labe l>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</ItemTemplate>
</asp:Repeater>
</table>
</div>
Css
------
.InputDiv50Percent
{
float :left ;
width:50%;
margin-left :10px;
}
Any help is greatly appreciated.
Thanks in advance.
IEView.png
GoogleChromeView.png
SmallScreenView.png
I want to place a calender control and a data repeater side by side in a web page. Both should same size and in half of the screen I want calender control and in the other half I want the data of repeater control. I tried in so many ways but can not fix this problem. I have attached the views of different browers. This is my code.
<div class="InputDiv50percent" >
<asp:Calendar ID="mnuCalender" runat="server" BackColor="White" BorderColor="#999999" Font-Names="Verdana" Font-Size="13pt" ForeColor="Black" Height="600px" Width="650px" CellPadding="4" DayNameFormat="Shortest" >
<DayHeaderStyle Font-Bold="True" Font-Size="13pt" BackColor="#CCCCCC" />
<NextPrevStyle VerticalAlign="Bottom" />
<OtherMonthDayStyle ForeColor="#808080" />
<SelectedDayStyle BackColor="#666666" ForeColor="White" Font-Bold="True" />
<SelectorStyle BackColor="#CCCCCC" />
<TitleStyle BackColor="#B9DEAA" Font-Bold="True" BorderColor="Black" />
<TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
<WeekendDayStyle BackColor="#FFFFCC" />
</asp:Calendar>
</div>
<div id="DivMenu" runat="server" class="InputDiv50percent">
<table class="menutables">
<asp:Repeater ID="outerRepeater" runat="server" EnableViewState="true">
<ItemTemplate>
<tr>
<td style ="color:black;background :rgb(205, 218, 177)">
<asp:Label ID="lblMealTimeID" runat="server" Text='<%#Eval("MealTimeID"
<asp:Label ID="lblMealTime" runat="server" Text='<%#Eval("MealTimeNam
</td>
</tr>
<asp:Repeater ID="innerRepeater" runat="server" EnableViewState="true" >
<ItemTemplate>
<tr>
<td style="padding-left :50px;">
<asp:Label ID="lblMenuItem" runat="server" Text='<%#Eval("MenuItem")%
<asp:Label ID="lblMenuItemID" runat="server" Text='<%#Eval("MenuItemID"
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</ItemTemplate>
</asp:Repeater>
</table>
</div>
Css
------
.InputDiv50Percent
{
float :left ;
width:50%;
margin-left :10px;
}
Any help is greatly appreciated.
Thanks in advance.
IEView.png
GoogleChromeView.png
SmallScreenView.png
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Excellent!! It worked. Thank you so much for your help.
http://getbootstrap.com/