Solved

Problem with the page

Posted on 2014-10-08
13
123 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 51

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 51

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 51

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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 51

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 51

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 51

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 51

Expert Comment

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

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

706 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

18 Experts available now in Live!

Get 1:1 Help Now