Peter Chan
asked on
Re-position the objects
Hi,
I expect the picture file to be shown as the background of the header, TABs (picture file would be right shown behind them). How to adjust the following?
I expect the picture file to be shown as the background of the header, TABs (picture file would be right shown behind them). How to adjust the following?
<body>
<form id="main_form" runat="server">
<div class="content" id="wrapper" >
<asp:Image ID="img1" ImageUrl="~/../pict/ID-10028343.jpg" CssClass="background" Height="780px" Width="1220px" runat="server"/>
</div>
<div class="container">
<!-- freshdesignweb top bar -->
<div class="freshdesignweb-top">
<a href="http://my-friend.co/login5/Default.aspx" target="_blank">主页</a>
<span class="right">
<a href="http://my-friend.co/login5/Default.aspx/drop-down-responsive-menu-with-css3-and-jquery.html">
<strong>登入</strong>
</a>
</span>
<div class="clr"></div>
</div><!--/ freshdesignweb top bar -->
<header>
<h1><span>寻找而拥有</span>一个属于自己的天地</h1>
</header>
<!-- start header here-->
<header>
<div id="fdw">
<!--nav-->
<nav>
<ul>
<li class="current"><a href="http://my-friend.co/login5/Default.aspx">新楼盘<span class="arrow"></span></a>
<ul style="display: none;" class="sub_menu">
<li class="arrow_top"></li>
<li><a class="subCurrent" href="http://my-friend.co/login5/Default.aspx">Home Service</a></li>
<li><a href="http://my-friend.co/login5/Default.aspx">Home Responsive</a></li>
</ul>
</li>
<li><a href="http://my-friend.co/login5/Default.aspx">about</a></li>
<li><a href="http://my-friend.co/login5/Default.aspx">services</a></li>
<li>
<a href="http://my-friend.co/login5/Default.aspx">租盘<span class="arrow"></span></a>
<ul style="display: none;" class="sub_menu">
<li class="arrow_top"></li>
<li><a href="http://my-friend.co/login5/Default.aspx">Portfolio 3 </a></li>
<li><a href="http://my-friend.co/login5/Default.aspx">Portfolio 4 </a></li>
<li><a href="http://my-friend.co/login5/Default.aspx">Portfolio Single</a></li>
<li><a href="http://my-friend.co/login5/Default.aspx">Portfolio Two</a></li>
</ul>
</li>
...
.content {
position: relative;
width: 1220px;
height: 780px;
color: #fff; /* Text color for content div. */
}
#wrapper {width: 1180px; margin-left: auto; margin-right: auto;}
.lb_bck{
color: black;
top: 30px;
left: 1075px;
width: 36px;
height: 30px;
font-size: large;
font-weight: bold;
text-decoration: none;
}
.lb_bck:hover, .lb_reg:hover{
background-color: black !important;
color: white !important;
}
.lb_reg{
color: black;
top: 30px;
left: 1185px;
width: 36px;
height: 30px;
font-size:large;
font-weight: bold;
text-decoration: none;
}
/* Slider
http://www.freshdesignweb.com/drop-down-responsive-menu-with-css3-and-jquery.html
*/
@import url(http://fonts.googleapis.com/css?family=Gentium+Basic:400,700|Yanone+Kaffeesatz);
/*===== nav style ======*/
#fdw nav select {
display:none; /* this is just for the mobile display */
}
#fdw nav ul {
display:block;
z-index:999999;
}
#fdw nav ul li {
display:inline-block;
padding:50px 3px 30px;
margin-left:30px;
position:relative;
}
#fdw nav ul li a:link, #fdw nav ul li a:visited {
color:#444;
font:normal 20px 'Yanone Kaffeesatz', sans-serif;
text-transform:uppercase;
display:inline-block;
position:relative;
}
#fdw nav ul li a:hover, #fdw nav ul li a:active {
color:#e25d29;
text-decoration:none;
}
#fdw nav ul li span {
position:absolute;
right:-12px;
bottom:6px;
width:7px;
height:8px;
margin:0 0 0 3px;
float:right;
display:block;
background:url('images/nav_arrow.png') no-repeat left -8px;
font:0/0 a;
}
#fdw nav ul li.current {
border-bottom:2px solid #e25d29;
}
#fdw nav ul li.current a {
color:#e25d29;
cursor: default;
}
#fdw nav ul li.current a span {
background:url('../images/nav_arrow.png') no-repeat left 0;
}
#fdw nav ul li.current ul li a {
cursor:pointer;
}
/*===== sub_menu Style =======*/
#fdw nav ul li ul.sub_menu {
position:absolute;
top:90px;
left:0;
margin:0;
padding:0;
background:#fff;
border:1px solid #ececec;
border-top:5px solid #e25d29;
display:none;
z-index:999999;
-moz-box-shadow: 0px 6px 7px #121012;
-webkit-box-shadow: 0px 6px 7px #121012;
box-shadow: 0px 6px 7px #121012;
}
#fdw nav ul li ul.sub_menu li.arrow_top {
position:absolute;
top:-12px;
left:12px;
width:13px;
height:8px;
display:block;
border:none;
background:url('images/arrow_top.png') no-repeat left top;
}
#fdw nav ul li ul.sub_menu li {
float:none;
margin:0;
padding:0;
border-bottom:1px solid #ececec;
}
#fdw nav ul li ul.sub_menu li a {
white-space: nowrap;
width: 150px;
padding:12px;
font:13px Arial, tahoma, sans-serif;
text-transform:capitalize;
color:#777;
}
#fdw nav ul li ul.sub_menu li a:hover {
background:#f9f9f9;
color:#333;
}
#fdw nav ul li ul.sub_menu li a.subCurrent {
color:#e25d29;
cursor:default;
}
#fdw nav ul li ul.sub_menu li a.subCurrent:hover {
background:none;
}
/*===================== end Header style ======================*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
/* nav */
#fdw nav ul li{
margin-left:12px;
}
}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
/* nav menu ul & select */
#fdw nav ul {
display:none;
}
#fdw nav select {
width:100%;
display:block;
margin-bottom:30px;
cursor:pointer;
padding:6px;
background:#f9f9f9;
border:1px solid #e3e3e3;
color:#777;
}
}
ASKER
Hi,
I do expect that picture file WOULD appear as a background of the Web page.
I do expect that picture file WOULD appear as a background of the Web page.
The entire page? Not just the header element?
I don't see any background-images in your CSS except for arrows. What picture file are you referring to? Do you want to change the picture file linked to the img element in the first div to become the background image for the body element?
I don't see any background-images in your CSS except for arrows. What picture file are you referring to? Do you want to change the picture file linked to the img element in the first div to become the background image for the body element?
ASKER
Can you please try against this?
http://my-friend.co/Main/Default.aspx
Within it, all objects are not shown on top of the picture file.
http://my-friend.co/Main/Default.aspx
Within it, all objects are not shown on top of the picture file.
Add a position:absolute style to the wrapper div.
ASKER
Can I have more details to this advice?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I am also unsure what you are referring to as TABS.