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?
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"/>
|
<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>ASKER
thanks.
Here is the current css part
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?
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;
}
...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?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I did adjust body part in css like
but the menu with sub-options is still not shown under the purple area. why?
<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';
}
...but the menu with sub-options is still not shown under the purple area. why?
body is not a class it is an element so you must do
.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
body {
padding-top: 100px;
}.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
ASKER
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?
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?
I don't understand your question - this is what I get
ASKER
Here is the current css part
t829.png
<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> t829.png
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
@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
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
ASKER
Sorry, as per your reply, I really advise to have A grade for this, as I really appreciate your good help! Thanks again.
Thank you - much appreciated. Good luck with your project.
Open in new window