Easy way to arrange element of the web site using CSS

By -


1.       Create CSS class first and add body, content, Header, title, Application Title, Page Title methods.(method implementation below)

body {
    color: #333333;
    padding: 0;
    margin: 0;
    font-family: Verdana;
    font-size: 12px;
    background-color: #F6F6F6;
}
#content {
    width: 90%;
    height: 600px;
    padding: 10px 10px;
}

#Header {
    float: left;
    clear: both;
    width: 100%;
    height: 80px;
    background-color: #00A6EB;
}

.title {
    text-shadow: 1px 1px 1px rgba(242,242,242,1);
    font-weight: bold;
    text-transform: uppercase;
    color: #1D1212;
    letter-spacing: 1pt;
    word-spacing: 2pt;
    font-size: 16px;
    text-align: left;
    font-family: times new roman, times, serif;
    line-height: 1;
    margin: auto;
    width: auto;
}
.ApplicationTitle {
    font-family: 'Arial Narrow';
    font-size: 24px;
    color: #ffffff;
    text-transform: uppercase;
    padding: 15px 15px;
    letter-spacing: 8px;
}

.PageTitle {
    font-family: Tahoma;
    font-size: 18px;
    font-weight: bold;
    margin: 10px 5px 30px 5px;
    text-transform: capitalize;
}

2.       Then create another few methods for alignments leftalign, rightalign, clearright, clearleft and separator( this method use for alignments only)
.leftalign {
    float: left;
}

.rightalign {
    float: right;
}

.clearright {
    clear: right;
}

.clearleft {
    clear: left;
}

.seperator {
    clear: both;
    float: left;
    margin: 30px 0px;
}

3.       To see how div panels behave we can use css class like

div {
border :1px solid black;
}

4.       For the menu bar you can use css like this

#menu {
    margin: 25px 50px 5px 5px;
    text-transform: capitalize;
}

    #menu li {
        float: left;
        color: #ffffff;
        margin: 10px;
        list-style-type: none;
        padding:0;
    }

        #menu li a {
            color: #ffffff;
            text-decoration: none;
        }

        #menu li:hover * {
            display: block;
        }

    #menu .sub {
    display: none;
    position: fixed;
    background-color: #3399FF;
    float: left;
    clear: both;
    margin: 0px;
    padding: 2px;
}

        #menu .sub li {
             padding:0px;
            margin: 5px;
            float: left;
            clear: both;
        }


Css class Complete now design the page


5.       Inside header section add the css class link

<head runat="server">
    <title></title>
    <link href="css/layout.css" rel="stylesheet" />
</head>


6.       In the layout designing first we need to add each element in to div panels the we control div panel using css like this.
<div class="leftalign ApplicationTitle">
            Application name
        </div>

7.       All the element first we align  to the left then we can arrange.

<div class="leftalign lable clearleft">
     Name
</div>
<asp:TextBox ID="txtName" runat="server" Width="250px" required CssClass="leftalign clearright">
</asp:TextBox>

As you can see I have assign left alignments and first element clear left and right element clear right then automatically align to one line and clear both side.

8.       For the menu use following code.

<div id="Header">
        <div class="leftalign ApplicationTitle">
            Shopping Eye
        </div>
        <div class="rightalign">
            Logout</div>
        <div class="rightalign">
            <ul id="menu">
                <li>
                    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/1.aspx">main </asp:HyperLink>
                </li>
                <li>
                    <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/2.aspx">add </asp:HyperLink>
                </li>
                <li>
                    <asp:HyperLink ID="HyperLink5" runat="server" NavigateUrl="~/3.aspx">retail </asp:HyperLink>
                </li>
                <li>Advanced
                    <ul class="sub">
                        <li>
                            <asp:HyperLink ID="HyperLink6" runat="server" NavigateUrl="~/12.aspx">administrator</asp:HyperLink></li>
                        <li>
                            <asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="~/13.aspx">add  shop</asp:HyperLink></li>
                        <li>
                            <asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="~/14.aspx">add map </asp:HyperLink></li>
                    </ul>
                </li>
                <li>
                    <asp:HyperLink ID="HyperLink7" runat="server" NavigateUrl="~/4.aspx">3D </asp:HyperLink>
                </li>
            </ul>
        </div>
    </div>


Layout CSS file for dowload



Comments

Post a Comment

Popular posts from this blog

Find Country from URI

By -
Image
First Add the Service reference  :  http://www.webservicex.com/geoipservice.asmx?WSDL IPAddress [] address = Dns .GetHostAddresses(textBox1.Text);             string [] array = new string [address.Count()];             int i=0;             foreach ( IPAddress item in address)             {                 array[i] = item.ToString();             }             textBox2.Text = array[0].ToString();             ServiceReference1. GeoIPServiceSoapClient cl = new ServiceReference1. GeoIPServiceSoa...
Read more

Encrypt and Decrypt text using alphabet shifting method

By -
Image
Decrypt             char [] alpha = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" .ToCharArray();             char [] cypertext = (txtCyperText.Text.ToUpper()).ToCharArray();             string decryptText = "" ;             foreach ( char item in cypertext)             {                 for ( int i = 0; i < alpha.Length; i++)                 {                     if (item == 'A' )              ...
Read more

How to Call Stored Procedure

By -
                SqlConnection conn = new SqlConnection("Data Source=*****;Initial Catalog=****User                           ID=**;Password=**;");                 SqlCommand cmd = new SqlCommand("NL_PremiumCalculation", conn);                 conn.Open();                 cmd.CommandType = CommandType.StoredProcedure;                 cmd.Parameters.AddWithValue("@BP", Convert.ToDouble(BasicPremium));                 cmd.Parameters.AddWithValue("@PolicyType", policyType);                 SqlDataAdapter da = new SqlDataAdapter(cmd);                 DataSet ds = new DataSet();        ...
Read more