Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 182
  • Last Modified:

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?

<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;
		}
}

Open in new window

0
HuaMinChen
Asked:
HuaMinChen
  • 3
  • 2
  • 2
1 Solution
 
Kim WalkerWeb Programmer/TechnicianCommented:
It's unclear what you wish to adjust. The code snippet you've provided for HTML contains two header elements. But I do not see any styles that apply to header elements in the CSS snippet.

I am also unsure what you are referring to as TABS.
0
 
HuaMinChenBusiness AnalystAuthor Commented:
Hi,
I do expect that picture file WOULD appear as a background of the Web page.
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
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?
0
Industry Leaders: 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:
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.
0
 
louisfrCommented:
Add a position:absolute style to the wrapper div.
0
 
HuaMinChenBusiness AnalystAuthor Commented:
Can I have more details to this advice?
0
 
louisfrCommented:
Use an absolute position on the "wrapper" div so that it doesn't affect the position of the "container" div.
<div class="content" id="wrapper" style="position: absolute">

Open in new window

0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now