Solved

Re-position the objects

Posted on 2016-11-27
7
141 Views
Last Modified: 2016-11-29
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
Comment
Question by:HuaMinChen
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
7 Comments
 
LVL 22

Expert Comment

by:Kim Walker
ID: 41905268
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
 
LVL 11

Author Comment

by:HuaMinChen
ID: 41905276
Hi,
I do expect that picture file WOULD appear as a background of the Web page.
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 41905282
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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
LVL 11

Author Comment

by:HuaMinChen
ID: 41905307
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
 
LVL 11

Expert Comment

by:louisfr
ID: 41905375
Add a position:absolute style to the wrapper div.
0
 
LVL 11

Author Comment

by:HuaMinChen
ID: 41905392
Can I have more details to this advice?
0
 
LVL 11

Accepted Solution

by:
louisfr earned 500 total points
ID: 41905475
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

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to use the return statement in functions in C++. The video will also teach the user how to pass data to a function and have the function return data back for further processing.
The viewer will learn how to user default arguments when defining functions. This method of defining functions will be contrasted with the non-default-argument of defining functions.

623 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