Solved

Problem with the page

Posted on 2014-10-08
13
128 Views
Last Modified: 2014-10-09
Hi,
I want to place the menu that is having few TABs, of which each is having sub-menu items, to the middle of page (as now the menu is shown on the top of the page). How to do the adjustment below?

<%@ Page Title="??????/????" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="App3._Default" ValidateRequest="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Refresh" content="120" />
	<title>??/??</title>
    <style type="text/css">
        #horizontalmenu ul {
            padding: 1;
            margin: 1;
            list-style: none;
        }

        #horizontalmenu li {
            float: left;
            position: relative;
            padding-right: 100;
            display: block;
            border: 4px solid #CC55FF;
            border-style: inset;
        }

            #horizontalmenu li ul {
                display: none;
                position: absolute;
            }

            #horizontalmenu li:hover ul {
                display: block;
                background: red;
                height: auto;
                width: 8em;
            }

            #horizontalmenu li ul li {
                clear: both;
                border-style: none;
            }
        ul.imagesList {
             display: block;
             list-style-type: none;
             margin: 0;
             padding: 0;
             overflow: hidden;
         }
         ul.imagesList li {
             display: block;
             position: relative;
             float: left;
             width: 17%;
             height: 237px;
             box-sizing: border-box;
             padding: 3px;
             margin: 0;
    
         }
         ul.imagesList .imagesList-item-frame {
             border: solid 1px #dcdcdc;
             position: absolute;
             padding: 3px;
             top: 3px;
             right: 3px;
             bottom: 3px;
             left: 3px;
         }
         ul.imagesList li img {
             width: 100%;
             height: 140px;
         }
         ul.imagesList li .legend {
             width: 100%;
             margin: 3px 3px 0 3px;
         }

        #demo {
            margin: 30px 0 50px 0;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        }
    
        #demo .wrapper {
            display: inline-block;
            width: 180px;
            margin: 0 3px 0 0;
            height: 20px;
            position: relative;
        }
    
        #demo .parent {
            height: 100%;
            width: 100%;
            display: block;
            cursor: pointer;
            line-height: 30px;
            height: 30px;
            border-radius: 5px;
            background: #F9F9F9;
            border: 1px solid #AAA;
            border-bottom: 1px solid #777;
            color: #282D31;
            font-weight: bold;
            z-index: 2;
            position: relative;
            -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
            -webkit-transition-delay: .8s;
            text-align: center;
        }
    
        #demo .parent:hover,
        #demo .content:hover ~ .parent {
            background: red;
            -webkit-transition-delay: 0s, 0s, 0s;
        color:#fff
        }
    
        #demo .content:hover ~ .parent {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            z-index: 0;
        }
    
        #demo .content {
            position: absolute;
            top: 0;
            display: block;
            z-index: 1;
            height: 0;
            width: 180px;
            padding-top: 30px;
            -webkit-transition: height .5s ease;
            -webkit-transition-delay: .4s;
            border: 1px solid #777;
            border-radius: 5px;
            box-shadow: 0 1px 2px rgba(0,0,0,.4);
        }
    
        #demo .wrapper:active .content {
            height: 123px;
            z-index: 3;
            -webkit-transition-delay: 0s;
        }
    
        #demo .content:hover {
            height: 123px;
            z-index: 3;
            -webkit-transition-delay: 0s;
        }
    
    
        #demo .content ul {
            background: #fff;
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100%;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
    
        #demo .content ul a {
            text-decoration: none;
        }
    
        #demo .content li:hover {
            background: #eee;
            color: #333;
        }
    
        #demo .content li {
            list-style: none;
            text-align: left;
            color: #888;
            font-size: 14px;
            line-height: 30px;
            height: 30px;
            padding-left: 10px;
            border-top: 1px solid #ccc;
        }
    
        #demo .content li:last-of-type {
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        .button
        {
            background: url(/ite2/app-spotlight.png);
            background-size: 36px 36px;
            background-repeat: no-repeat;
            background-position: 0px 2px; 
            cursor:pointer;
            border: none;
            width:36px;
            height:36px;
        }
        .body {background-color:#BBAEBF;font-family: 'Segoe UI';} 
        ul {border-bottom:2px solid #757575; margin:0px; padding:0px; }
        ul li { display: inline-block;  }
        ul li a { display:block; padding:5px 10px 5px 10px; text-decoration:none; color:#333; }

        ul li a:hover {
            background-color: #757575; color:#fff;
            border-top-left-radius:7px;
            border-top-right-radius:7px;
        }
        .active {
            background-color: #757575; color:#fff;
            border-top-left-radius:7px;
            border-top-right-radius:7px;
        }
        .lb_reg
        {
            width: 36px;
            height: 30px;
            font-weight:bold;
        }    
        .lb_log{
            top: 30px;
            left: 1185px;
            width: 36px;
            height: 30px;
            font-size:large;
            font-weight:bold;
        }    
        .left {
             position:absolute;
             left:10px;
             border:Groove 1px #ccc;
             width:55px;
             right:10px;
        }

        .right {
             position:absolute;
             left:60px;
             border:none 1px #c00;
             width:65%;
        }
        img.background {
            position: absolute;
            z-index: -1;
            width: 100%;
            top: 0;
            left: 0;
        }
        #wowslider-container1 .ws_images{
	        position: relative;
	        left:0;
	        top:0;
	        width:100%;
	        height:100%;
	        overflow:hidden;
        }
        ul.imagesList {
             display: block;
             list-style-type: none;
             margin: 0;
             padding: 0;
             overflow: hidden;
         }
         ul.imagesList li {
             display: block;
             position: relative;
             float: left;
             width: 17%;
             height: 237px;
             box-sizing: border-box;
             padding: 3px;
             margin: 0;
    
         }
         ul.imagesList .imagesList-item-frame {
             border: solid 1px #dcdcdc;
             position: absolute;
             padding: 3px;
             top: 3px;
             right: 3px;
             bottom: 3px;
             left: 3px;
         }
         ul.imagesList li img {
             width: 100%;
             height: 140px;
         }
         ul.imagesList li .legend {
             width: 100%;
             margin: 3px 3px 0 3px;
         }
         .shadow {
             -moz-box-shadow: 0 0 5px #888;
             -webkit-box-shadow: 0 0 5px#888;
             box-shadow: 0 0 5px #888;
         }
        .dia {
        display:none;
        }
        .content {
            position: relative;
            width: 1220px;
            height: 780px;
            color:  #fff; /* Text color for content div. */
        }
        #wrapper {width: 1180px; margin-left: auto; margin-right: auto;}
        .topnav{ margin: 102px auto;
        width: 70%;
        }
        .dia {
        display:none;
        }
    </style> 
</head>
<body>
    <form id="form1" runat="server">
    <div style="background-color:#8E6ACC; position: fixed;left: 0;top: 0; width: 100%; height:100px">
        <div style="position: fixed; left: 0; right: 0; width: 91%; height:80px; margin:auto;">
            <div style="position:absolute; width: 100px; top:5px; height: 30px; background-color: #8E6ACC; right: 0%;">
                <table width="100%">
                    <tr>
                        <td align="right" >
                            <asp:LinkButton ID="lb_reg" 
                               Text = "??"
                               CssClass="lb_reg"
                               Font-Names="Arial Unicode MS" 
                               Font-Bold="true"
                               Font-Size="10pt" 
                               ForeColor="White"
                               OnClick="lb_reg_Click"
                               runat="server"/>
                               &nbsp;|&nbsp; 
                            <asp:LinkButton ID="lb_user_acc" 
                                Text = "??"
                               CssClass="lb_log" 
                               Font-Names="Arial Unicode MS" 
                               Font-Bold="true"
                               Font-Size="10pt" 
                               ForeColor="White"
                               OnClick="lb_log_Click" 
                               runat="server"/>
                        </td>
                    </tr>
                </table>
            </div>
            <div style="background-color:#7BD4C9; position: fixed; left: 0; right: 0; top: 10px; border-radius:6px; width: 63%; height:67px; margin:auto;">
                <table width="100%">
                    <tr style="height:8px;"></tr>
                    <tr>
                        <td style="width:8px;" ></td>
                        <td align="left" >
                            <div style="background-color:#9FC2CC; left:0; width: 60%; border-radius:11px;" >
                                <asp:Label ID="Label2"
                                    Text=""
                                    Width="3px"
                                    Font-Names="Arial Unicode MS" 
                                    Font-Size="16pt" 
                                    Font-Bold="true"
                                    ForeColor="#F0B411"
                                    runat="server" />
                                <asp:Label ID="Label1"
                                    Text="??????"
                                    Font-Names="Arial Unicode MS" 
                                    Font-Size="19pt" 
                                    Font-Bold="true"
                                    ForeColor="#F0B411"
                                    runat="server" />
                                <asp:Textbox ID="tb_fndtext"
                                    Font-Names="Arial Unicode MS" 
                                    Font-Size="13pt" 
                                    Width="280px"
                                    Font-Bold="true"
                                    ForeColor="#5637D4"
                                    BackColor="White"
                                    runat="server" />
                                <asp:Label ID="Label3"
                                    Text=""
                                    Width="1px"
                                    Font-Names="Arial Unicode MS" 
                                    Font-Size="19pt" 
                                    Font-Bold="true"
                                    ForeColor="#F0B411"
                                    runat="server" />
                                <input type="button" name="bt_fnd" onclick="" class="button"/>
                            </div>
                        </td>
                        <td >
                            <div style="background-color:white; width: 14.5%; border-radius:4px;" >
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="width:8px;" ></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div id="horizontalmenu">
        <ul>
            <li>
                <a href="#">News</a>
                <ul>
                    <li><a href="#">National</a></li>
                    <li><a href="#">International</a></li>
                    <li><a href="#">Sport</a></li>
                    <li><a href="#">Hollybood</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Technology</a>
                <ul>
                    <li><a href="#">IT/Software</a></li>
                    <li><a href="#">Hardware</a></li>
                    <li><a href="#">Iphone</a></li>
                    <li><a href="#">Neuro-Science</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Sports</a>
                <ul>
                    <li><a href="#">Cricket</a></li>
                    <li><a href="#">Tenis</a></li>
                    <li><a href="#">Badminton</a></li>
                    <li><a href="#">Hockey</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Country</a>
                <ul>
                    <li><a href="#">India</a></li>
                    <li><a href="#">America</a></li>
                    <li><a href="#">France</a></li>
                    <li>
                        <a href="#">Pakistaan</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    <br />
    <asp:Label ID="lb_ite21"
        CssClass="dia"
        Font-Names="Times New Roman" 
        Font-Size="11pt" 
        Font-Bold="true"
        ForeColor="DarkBlue"
        runat="server" />
    <asp:Label ID="lb_ite22"
        CssClass="dia"
        Font-Names="Times New Roman" 
        Font-Size="11pt" 
        Font-Bold="true"
        ForeColor="DarkBlue"
        runat="server" />
    <asp:Label ID="lb_ite23"
        CssClass="dia"
        Font-Names="Times New Roman" 
        Font-Size="11pt" 
        Font-Bold="true"
        ForeColor="DarkBlue"
        runat="server" />
    <asp:Label ID="lb_ite24"
        CssClass="dia"
        Font-Names="Times New Roman" 
        Font-Size="11pt" 
        Font-Bold="true"
        ForeColor="DarkBlue"
        runat="server" />
    <asp:Label ID="lb_ite25"
        CssClass="dia"
        Font-Names="Times New Roman" 
        Font-Size="11pt" 
        Font-Bold="true"
        ForeColor="DarkBlue"
        runat="server" />
    <asp:Label ID="lb_ite26"
        CssClass="dia"
        Font-Names="Times New Roman" 
        Font-Size="11pt" 
        Font-Bold="true"
        ForeColor="DarkBlue"
        runat="server" />
    <asp:Label ID="lb_var1"
        Visible="false"
        Font-Names="Times New Roman" 
        Font-Size="11pt" 
        Font-Bold="true"
        ForeColor="DarkBlue"
        runat="server" />
    <asp:Label ID="lb_ite_id"
        width="165px"
        Visible="false"
        Font-Names="Times New Roman" 
        Font-Size="11pt" 
        Font-Bold="true"
        ForeColor="DarkBlue"
        runat="server" />
    </form>
</body>
</html>

Open in new window

0
Comment
Question by:HuaMinChen
  • 7
  • 5
13 Comments
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 40367795
Change the declaration of your container div to
#horizontalmenu {
  text-align: center;
}
#horizontalmenu ul {
  padding: 1;
  margin: 1;
  list-style: none outside none;
  display: inline-block;
}

Open in new window

0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 40367861
thanks.
Here is the current css part
    <style type="text/css">
        #horizontalmenu {
          text-align: center;
        }
        #horizontalmenu ul {
          padding: 1;
          margin: 1;
          list-style: none outside none;
          display: inline-block;
        }
        #horizontalmenu li {
            float: left;
            position: relative;
            padding-right: 100;
            display: block;
            border: 4px solid #CC55FF;
            border-style: inset;
        }

            #horizontalmenu li ul {
                display: none;
                position: absolute;
            }

            #horizontalmenu li:hover ul {
                display: block;
                background: red;
                height: auto;
                width: 8em;
            }

            #horizontalmenu li ul li {
                clear: both;
                border-style: none;
            }
            ...

Open in new window


and I also expect that menu with sub-options to appear right under the purple area on the page. how to adjust the css file?
0
 
LVL 52

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 40367875
body {
   padding-top: 100px;
}

Open in new window

0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 40367967
I did adjust body part in css like
    <style type="text/css">
        #horizontalmenu {
          text-align: center;
        }
        #horizontalmenu ul {
          padding: 1;
          margin: 1;
          list-style: none outside none;
          display: inline-block;
        }
        #horizontalmenu li {
            float: left;
            position: relative;
            padding-right: 100;
            display: block;
            border: 4px solid #CC55FF;
            border-style: inset;
        }

            #horizontalmenu li ul {
                display: none;
                position: absolute;
            }

            #horizontalmenu li:hover ul {
                display: block;
                background: red;
                height: auto;
                width: 8em;
            }

            #horizontalmenu li ul li {
                clear: both;
                border-style: none;
            }
        ul.imagesList {
             display: block;
             list-style-type: none;
             margin: 0;
             padding: 0;
             overflow: hidden;
         }
         ul.imagesList li {
             display: block;
             position: relative;
             float: left;
             width: 17%;
             height: 237px;
             box-sizing: border-box;
             padding: 3px;
             margin: 0;
    
         }
         ul.imagesList .imagesList-item-frame {
             border: solid 1px #dcdcdc;
             position: absolute;
             padding: 3px;
             top: 3px;
             right: 3px;
             bottom: 3px;
             left: 3px;
         }
         ul.imagesList li img {
             width: 100%;
             height: 140px;
         }
         ul.imagesList li .legend {
             width: 100%;
             margin: 3px 3px 0 3px;
         }

        #demo {
            margin: 30px 0 50px 0;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        }
    
        #demo .wrapper {
            display: inline-block;
            width: 180px;
            margin: 0 3px 0 0;
            height: 20px;
            position: relative;
        }
    
        #demo .parent {
            height: 100%;
            width: 100%;
            display: block;
            cursor: pointer;
            line-height: 30px;
            height: 30px;
            border-radius: 5px;
            background: #F9F9F9;
            border: 1px solid #AAA;
            border-bottom: 1px solid #777;
            color: #282D31;
            font-weight: bold;
            z-index: 2;
            position: relative;
            -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
            -webkit-transition-delay: .8s;
            text-align: center;
        }
    
        #demo .parent:hover,
        #demo .content:hover ~ .parent {
            background: red;
            -webkit-transition-delay: 0s, 0s, 0s;
        color:#fff
        }
    
        #demo .content:hover ~ .parent {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            z-index: 0;
        }
    
        #demo .content {
            position: absolute;
            top: 0;
            display: block;
            z-index: 1;
            height: 0;
            width: 180px;
            padding-top: 30px;
            -webkit-transition: height .5s ease;
            -webkit-transition-delay: .4s;
            border: 1px solid #777;
            border-radius: 5px;
            box-shadow: 0 1px 2px rgba(0,0,0,.4);
        }
    
        #demo .wrapper:active .content {
            height: 123px;
            z-index: 3;
            -webkit-transition-delay: 0s;
        }
    
        #demo .content:hover {
            height: 123px;
            z-index: 3;
            -webkit-transition-delay: 0s;
        }
    
    
        #demo .content ul {
            background: #fff;
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100%;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
    
        #demo .content ul a {
            text-decoration: none;
        }
    
        #demo .content li:hover {
            background: #eee;
            color: #333;
        }
    
        #demo .content li {
            list-style: none;
            text-align: left;
            color: #888;
            font-size: 14px;
            line-height: 30px;
            height: 30px;
            padding-left: 10px;
            border-top: 1px solid #ccc;
        }
    
        #demo .content li:last-of-type {
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        .button
        {
            background: url(/pict/app-spotlight.png);
            background-size: 36px 36px;
            background-repeat: no-repeat;
            background-position: 0px 2px; 
            cursor:pointer;
            border: none;
            width:36px;
            height:36px;
        }
        .body {
            padding-top: 100px;
            background-color:#BBAEBF;
            font-family: 'Segoe UI';
        } 
        ...

Open in new window


but the menu with sub-options is still not shown under the purple area. why?
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 40367987
body is not a class it is an element so you must do

body {
   padding-top: 100px;
}

Open in new window

not
.body
i.e. no (.) in front of body.

Also put the body style at the top of your styles - try to make your styles follow the order they appear in the document
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 40369923
Many thanks.
One last thing is, I try to put one color to the body, like

            body {
               padding-top: 100px;
               color: gray;
            }
            ...
but that is not effecting there to the area that is under the purple area within the page. why?
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 52

Expert Comment

by:Julian Hansen
ID: 40370049
I don't understand your question - this is what I get
28533483ss.jpg
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 40370187
Here is the current css part
    <style type="text/css">
        #horizontalmenu {
          text-align: center;
        }
        #horizontalmenu ul {
          padding: 1;
          margin: 1;
          list-style: none outside none;
          display: inline-block;
        }
        #horizontalmenu li {
            float: left;
            position: relative;
            padding-right: 100;
            display: block;
            border: 4px solid #CC55FF;
            border-style: inset;
        }

            #horizontalmenu li ul {
                display: none;
                position: absolute;
            }

            #horizontalmenu li:hover ul {
                display: block;
                background: red;
                height: auto;
                width: 8em;
            }

            #horizontalmenu li ul li {
                clear: both;
                border-style: none;
            }

            body {
               padding-top: 100px;
               color: gray;
            }
        ul.imagesList {
             display: block;
             list-style-type: none;
             margin: 0;
             padding: 0;
             overflow: hidden;
         }
         ul.imagesList li {
             display: block;
             position: relative;
             float: left;
             width: 17%;
             height: 237px;
             box-sizing: border-box;
             padding: 3px;
             margin: 0;
    
         }
         ul.imagesList .imagesList-item-frame {
             border: solid 1px #dcdcdc;
             position: absolute;
             padding: 3px;
             top: 3px;
             right: 3px;
             bottom: 3px;
             left: 3px;
         }
         ul.imagesList li img {
             width: 100%;
             height: 140px;
         }
         ul.imagesList li .legend {
             width: 100%;
             margin: 3px 3px 0 3px;
         }

        #demo {
            margin: 30px 0 50px 0;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        }
    
        #demo .wrapper {
            display: inline-block;
            width: 180px;
            margin: 0 3px 0 0;
            height: 20px;
            position: relative;
        }
    
        #demo .parent {
            height: 100%;
            width: 100%;
            display: block;
            cursor: pointer;
            line-height: 30px;
            height: 30px;
            border-radius: 5px;
            background: #F9F9F9;
            border: 1px solid #AAA;
            border-bottom: 1px solid #777;
            color: #282D31;
            font-weight: bold;
            z-index: 2;
            position: relative;
            -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
            -webkit-transition-delay: .8s;
            text-align: center;
        }
    
        #demo .parent:hover,
        #demo .content:hover ~ .parent {
            background: red;
            -webkit-transition-delay: 0s, 0s, 0s;
        color:#fff
        }
    
        #demo .content:hover ~ .parent {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            z-index: 0;
        }
    
        #demo .content {
            position: absolute;
            top: 0;
            display: block;
            z-index: 1;
            height: 0;
            width: 180px;
            padding-top: 30px;
            -webkit-transition: height .5s ease;
            -webkit-transition-delay: .4s;
            border: 1px solid #777;
            border-radius: 5px;
            box-shadow: 0 1px 2px rgba(0,0,0,.4);
        }
    
        #demo .wrapper:active .content {
            height: 123px;
            z-index: 3;
            -webkit-transition-delay: 0s;
        }
    
        #demo .content:hover {
            height: 123px;
            z-index: 3;
            -webkit-transition-delay: 0s;
        }
    
    
        #demo .content ul {
            background: #fff;
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100%;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
    
        #demo .content ul a {
            text-decoration: none;
        }
    
        #demo .content li:hover {
            background: #eee;
            color: #333;
        }
    
        #demo .content li {
            list-style: none;
            text-align: left;
            color: #888;
            font-size: 14px;
            line-height: 30px;
            height: 30px;
            padding-left: 10px;
            border-top: 1px solid #ccc;
        }
    
        #demo .content li:last-of-type {
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        .button
        {
            background: url(/pict/app-spotlight.png);
            background-size: 36px 36px;
            background-repeat: no-repeat;
            background-position: 0px 2px; 
            cursor:pointer;
            border: none;
            width:36px;
            height:36px;
        }
        .body {
            background-color:#BBAEBF;
            font-family: 'Segoe UI';
        } 
        ul {border-bottom:2px solid #757575; margin:0px; padding:0px; }
        ul li { display: inline-block;  }
        ul li a { display:block; padding:5px 10px 5px 10px; text-decoration:none; color:#333; }

        ul li a:hover {
            background-color: #757575; color:#fff;
            border-top-left-radius:7px;
            border-top-right-radius:7px;
        }
        .active {
            background-color: #757575; color:#fff;
            border-top-left-radius:7px;
            border-top-right-radius:7px;
        }
        .lb_reg
        {
            width: 36px;
            height: 30px;
            font-weight:bold;
        }    
        .lb_log{
            top: 30px;
            left: 1185px;
            width: 36px;
            height: 30px;
            font-size:large;
            font-weight:bold;
        }    
        .left {
             position:absolute;
             left:10px;
             border:Groove 1px #ccc;
             width:55px;
             right:10px;
        }

        .right {
             position:absolute;
             left:60px;
             border:none 1px #c00;
             width:65%;
        }
        img.background {
            position: absolute;
            z-index: -1;
            width: 100%;
            top: 0;
            left: 0;
        }
        #wowslider-container1 .ws_images{
	        position: relative;
	        left:0;
	        top:0;
	        width:100%;
	        height:100%;
	        overflow:hidden;
        }
        ul.imagesList {
             display: block;
             list-style-type: none;
             margin: 0;
             padding: 0;
             overflow: hidden;
         }
         ul.imagesList li {
             display: block;
             position: relative;
             float: left;
             width: 17%;
             height: 237px;
             box-sizing: border-box;
             padding: 3px;
             margin: 0;
    
         }
         ul.imagesList .imagesList-item-frame {
             border: solid 1px #dcdcdc;
             position: absolute;
             padding: 3px;
             top: 3px;
             right: 3px;
             bottom: 3px;
             left: 3px;
         }
         ul.imagesList li img {
             width: 100%;
             height: 140px;
         }
         ul.imagesList li .legend {
             width: 100%;
             margin: 3px 3px 0 3px;
         }
         .shadow {
             -moz-box-shadow: 0 0 5px #888;
             -webkit-box-shadow: 0 0 5px#888;
             box-shadow: 0 0 5px #888;
         }
        .dia {
        display:none;
        }
        .content {
            position: relative;
            width: 1220px;
            height: 780px;
            color:  #fff; /* Text color for content div. */
        }
        #wrapper {width: 1180px; margin-left: auto; margin-right: auto;}
        .topnav{ margin: 102px auto;
        width: 70%;
        }
        .dia {
        display:none;
        }
    </style> 

Open in new window

and I do get the attached
t829.png
0
 
LVL 52

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
ID: 40370271
Do you want the text to be gray or the background to be gray?

The way you have it you are setting the colour of the text

color: gray

Open in new window


To set the background you need to do this
body {
   padding-top: 100px;
   background-color: gray;
}

Open in new window

0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 40370326
@HuaMinChen - I am a bit confused about the grade - a B is usually for a partial solution refer grading guidelines here http://support.experts-exchange.com/customer/portal/articles/481419

An A should be the default grade unless the solution given did not totally solve your problem.

Can you explain in what way the answer did not solve your problem and why you awarded a B grade

Thanks

JulianH
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 40370329
Sorry, as per your reply, I really advise to have A grade for this, as I really appreciate your good help! Thanks again.
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 40372322
Thank you - much appreciated. Good luck with your project.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Today I had a very interesting conundrum that had to get solved quickly. Needless to say, it wasn't resolved quickly because when we needed it we were very rushed, but as soon as the conference call was over and I took a step back I saw the correct …
The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

943 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now