Introduction:
As you know, designing the websites in the table is outdated. Most of the new websites are building in the CSS layout. The rendering of the web pages from the server into the client browser always take the time when we use the table designing. We are going to discuss about the CSS layout in the ASP.Net data controls. Let us see with an example.
What is CSS Layout?
The Cascading Style Sheet (CSS) layout can stipulate the web site layout, style of the controls and positioning the controls. Normally the table can do like that. But the CSS layout can be designed through the div tags. Without using the table, the entire web site can be designed using the div tags. CSS can be written using the id of the controls. It can enforce the same standard and no need to change in the many pages. The development and changes can be easily made without soo many controls usage in the every page. It s drastically reduce e the size of the web page. It will increase the performance of the loading web content.
Types of way to design CSS layout:
Inline CSS
The CSS properties can be defined in the HTML tag itself. It is not good practice to enforce in the real time application. Because there are some difficulties when you want to change the entire site for the same style, then you have to search in the every page.
For example,
<div id="divMain">
<ul>
<li style="width:15%;float:left;">Product ID</li>
<li style="width:15%;float:left;">Product Name</li>
<li style="width:15%;float:left;">Supplier ID</li>
<li style="width:15%;float:left;">Category ID</li>
<li style="width:15%;float:left;">Unit Price</li>
</ul>
</div>
The above CSS method is not recommended. Because it will increase the size of the web page as well as it is very difficult to change in the every page when you want to enforce same style throughout the web site.
Embedded CSS
The embedded CSS can be defined in the every page as global. This can be given in the head tag. Mostly developers choose like this to make clear of the HTML tags or needs in more than once place in the same page. Again, it's difficult to change in the every page when you want to change the look and feel throughout the web site.
<style type="text/css">
div#Embdded
{
width:100%;
border-style:solid;
text-align:center;
background-color:Green;
color:Silver;
font-family:Calibri;
font-style:normal;
font-size:medium;
}
div#Embdded ul
{
width:75%;
text-align:center;
background-color:Green;
color:Silver;
font-family:Calibri;
font-style:normal;
font-size:medium;
float:left;
}
div#Embdded ul li
{
width:15%;
text-align:center;
background-color:Green;
color:Silver;
font-family:Calibri;
font-style:normal;
font-size:medium;
float:left;
}
</style>
Again it's also not recommended method.
External CSS
The external CSS is the external CSS file that will be pointed to the url of the file location. The name of the CSS can be given to the HTML tag. There are two ways. The CSS name can be given in the css class or class.
Another one way is CSS can be written based on the control id name. That hierarchy of the controls design elements also can be given.
<link href="../Common/CSS/MyStyle.css" rel="Stylesheet" type="text/css" />
CSS Layout on Repeater control:
I have designed the CSS layout for the ASP.Net Repeater control.
<asp:Repeater ID="rptProducts" runat="server">
<HeaderTemplate>
<div id="Rpter">
<ul>
<li>Product ID</li>
<li>Product Name</li>
<li>Supplier ID</li>
<li>Category ID</li>
<li>Unit Price</li>
</ul>
</HeaderTemplate>
<ItemTemplate>
<ul>
<li>
<asp:Label ID="lblProductID" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"ProductID") %>'></asp:Label></li>
<li>
<asp:Label ID="lblProductName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"ProductName") %>'></asp:Label></li>
<li>
<asp:Label ID="lblSupplierID" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"SupplierID") %>'></asp:Label></li>
<li>
<asp:Label ID="lblCategoryID" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"CategoryID") %>'></asp:Label></li>
<li>
<asp:Label ID="lblUnitPrice" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"UnitPrice") %>'></asp:Label></li>
</ul>
</ItemTemplate>
<FooterTemplate>
</div>
</FooterTemplate>
</asp:Repeater>
Here you can see the tableless desgined for the repeater control.The CSS for the above repeater control is shown below.
div#Rpter
{
width:75%;
border-style:solid;
text-align:center;
color:Silver;
font-family:Calibri;
font-style:normal;
font-size:medium;
}
div#Rpter ul
{
width:100%;
float:left;
margin: 0px 0px 1px 0px;
vertical-align:top;
list-style-type:none;
background-color:Gray;
}
div#Rpter ul li
{
width:15%;
float:left;
}
Table Vs CSS layout
I have done the both table layout and CSS layout for the same content. After the implementation, I have checked the size of the output web page. I have found that CSS layout file size was lesser than table layout. Even though I am not familiar with the CSS layout. I have to go some in-depth learning of the optimized CSS layout designing. I am sure that you can get very less size than the table layout.
Advantages of CSS layout:
-
Increase the performance of the web pages.
-
Control the entire site design layout through the CSS.
-
Div tags can be easily loaded rather than tables.
-
It will avoid the unnecessary controls usage.
-
Future modification can be done easily.
Disadvantages of the CSS layout:
-
Hard to design the critical web pages.
-
Some of the Server side controls will not support the div based CSS layout.
-
If the CSS reference missed in the page then all the content of site may be messed up.
-
If the browser does not support the attribute of the CSS then it will be hard to look into the web site.
-
The additional tag insertion in the web page may harm the design layout.
Conclusion:
I hope that the above information was very useful and this will help you to design the web pages using the CSS layout. Here I would like to mention that I am not more familiar with the CSS layout designing. If you found any mistakes then don't hesitate to notify me. I welcome your suggestions and feedback about this article.