Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Re-position the objects

Posted on 2016-11-27
7
Medium Priority
?
158 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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 1500 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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will be introduced to the technique of using vectors in C++. The video will cover how to define a vector, store values in the vector and retrieve data from the values stored in the vector.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

688 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