box with 4 boxes inside the box using panels asp/css
Hi im trying to make a box with 4 boxes inside the box using panels as the box and boxes.
<asp:Panel ID="Panel1" CssClass="onthefly" runat="server" BackColor="#4A4A4A" Height="469px"
Width="476px">
<asp:Panel ID="Panel4" runat="server" CssClass="onthefly1" Height="210px"
Width="235px">
</asp:Panel>
<asp:Panel ID="Panel5" runat="server" CssClass="onthefly" Height="210px"
Width="240px">
<asp:Panel ID="Panel6" runat="server" CssClass="onthefly1" Height="210px"
Width="240px">
</asp:Panel>
<asp:Panel ID="Panel7" runat="server" CssClass="onthefly" Height="210px"
Width="240px">
</asp:Panel>
</asp:Panel>
css for panels:
.onthefly
{
display: inline;
float: right;
}
.onthefly1
{
display: inline;
float: left;
}
Atm panel 6 isnt below panel 4, panels 4 - 5 - 7 are all i开发者_如何学Cn the correct place.
Not sure how to get panel six to sit under panel 4 and to the left of panel 7.
Garrith, I believe this will get you the results you want:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.onthefly_container
{
display: inline;
float: right;
width: 476px;
height: 469px;
background-color:#4A4A4A;
border: 1px solid black;
}
.onthefly_left
{
display: inline;
float: left;
width: 238px;
height: 234px;
border: 0px;
}
.onthefly_right
{
display: inline;
float: right;
width: 238px;
height: 234px;
border: 0px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:Panel ID="Panel1" runat="server" CssClass="onthefly_container">
<asp:Panel ID="Panel4" runat="server" CssClass="onthefly_left">4
</asp:Panel>
<asp:Panel ID="Panel5" runat="server" CssClass="onthefly_right">5
</asp:Panel>
<asp:Panel ID="Panel6" runat="server" CssClass="onthefly_left">6
</asp:Panel>
<asp:Panel ID="Panel7" runat="server" CssClass="onthefly_right">7
</asp:Panel>
</asp:Panel>
</form>
</body>
</html>
There were a couple of issues with the markup that you posted:
- Panel 6 & 7 where nested inside of panel 5 (or you had a missing close tag for 5 as Joel pointed out.)
- When fitting a DIV (an asp:panel is rendered as a DIV) inside another Div it is sometimes necessary to set your border to a width of 0. Otherwise the border pixel (visible or not) will be interpreted OUTSIDE the div, and make the space the div is taking up = to BORDER + DIV + BORDER and creating a situation where 2 DIVs of 1/2 width or height overflow their container.
- Finally I would also recommend you use more native HTML markup than asp:XXXX controls. When created with the "runat='server'" tag HTML controls are equal players with the asp:controls at the server side, but native HTML controls are lower overhead and when used correctly, more cross browser compatible than their ASP control counterparts. Mostly it gives you more control over how they will render at runtime. In your question you can simply substitute
<div> or </div> everywhere you have <asp:panel> and </asp:panel>. If nothing else, it is few keystrokes.
Cheers,
CEC
加载中,请稍侯......
精彩评论