• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 151
  • Last Modified:

Problem with the page

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
HuaMinChen
Asked:
HuaMinChen
  • 7
  • 5
2 Solutions
 
Julian HansenCommented:
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
 
HuaMinChenBusiness AnalystAuthor Commented:
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
 
Julian HansenCommented:
body {
   padding-top: 100px;
}

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
HuaMinChenBusiness AnalystAuthor Commented:
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
 
Julian HansenCommented:
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
 
HuaMinChenBusiness AnalystAuthor Commented:
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
 
Julian HansenCommented:
I don't understand your question - this is what I get
28533483ss.jpg
0
 
HuaMinChenBusiness AnalystAuthor Commented:
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
 
Julian HansenCommented:
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
 
Julian HansenCommented:
@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
 
HuaMinChenBusiness AnalystAuthor Commented:
Sorry, as per your reply, I really advise to have A grade for this, as I really appreciate your good help! Thanks again.
0
 
Julian HansenCommented:
Thank you - much appreciated. Good luck with your project.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 7
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now