2 replies [Last post]
ron2891
ron2891's picture
Offline
newbie
Last seen: 4 years 1 week ago
Timezone: GMT-7
Joined: 2015-08-05
Posts: 1
Points: 3

I am trying to develop a web application and the home page has a background image on which I have few buttons on the background image . when I am trying to minimize the window or resize it, the buttons and background image are remaining on the fixed place. I want the button to remain on the same spot on the top of the background image even if i resize the window. It does not make sense if i resize the window and background image and buttons does not remains on the fixed spot(on top of background image) I am a beginner please help me by your valuable feedback and suggestions. Thank you.

ron2891
ron2891's picture
Offline
newbie
Last seen: 4 years 1 week ago
Timezone: GMT-7
Joined: 2015-08-05
Posts: 1
Points: 3

I have attached the code

I have attached the code :
JSP file is :home.txt
css file is: back.txt
background image is: lablayout new.png

CSS CODE:
@CHARSET "ISO-8859-1";
 
	/*------------------------------------------ header template(header.jsp)--------------------------*/
	.header {
	position: fixed;
	width: 100%;
	height: 130px;
	top: 0px;
	left: 0px;
	background: gray;
	z-index: 1;
}
 
.logo {
	position: fixed;
	width: 25px;
	top: 10px;
	left: 5px;
	float: left;
}
 
.logotext {
	position: fixed;
	top: -10px;
	left: 130px;
	font-family: cursive;
	font-size: x-large;
	font-weight: bolder;
	color: white;
}
 
.welcometext {
	position: absolute;
	top: 50px;
	left: 75%;
	color: white;
}
 
#headersubmit {
	position: absolute;
	top: 100%;
	border: none;
	background: none;
	font-weight: normal;
	font-size: small;
	color: white;
}
 
/* ------------------------------------------background image(lab layout) css-------------------------------------------- */
#ll
{
	-moz-background-size: cover;
-webkit-background-size: cover;
background-size: 1580px 620px;
background-position: bottom ;
background-repeat: no-repeat ;
background-attachment: fixed;
}
/*--------buttons top(home.jsp)---------------------------*/
 
#bfft:hover {
    border: medium black solid;
}
#iav
{
	border: medium gray solid;
	font-size: large;
	background-color: gray;
	margin-top: 128px;
    margin-bottom:100px;
    margin-left: 228px;
    margin-right: 100px;
    position:fixed;
    height:33px;
    width: 11em;
    float: left;  
    color: white;
   font-weight: bold;
	font-style: oblique;
}
#iav:hover {
    border: medium black solid;
}
#bfft
{
	border: medium gray solid;
	font-size: large;
	background-color: gray;
	margin-top: 128px;
    margin-bottom:100px;
    margin-left: 25px;
    margin-right: 100px;
    position:fixed;
    height:33px;
    width: 11em;
    color: white; 
    font-weight: bold;
	font-style: oblique; 
 
}
 
 
#upload
{
	border: medium gray solid;
	font-size: large;
	background-color: gray;
	margin-top: 128px;
    margin-bottom:100px;
    margin-left: 431px;
    margin-right: 100px;
     position:fixed;
    height:33px;
    width: 11em; 
     float: left;    
     color: white;
     font-weight: bold;
	font-style: oblique;
 
}
#upload:hover {
    border: medium black solid;
}
#report
{
	border: medium gray solid;
	font-size: large;
	background-color: gray;
	margin-top: 128px;
    margin-bottom:100px;
    margin-left: 634px;
    margin-right:100px;
    position:fixed;
    height:33px;
    width: 11em; 
    color: white;
    font-weight: bold;
	font-style: oblique; 
}
#report:hover {
    border: medium black solid;
}
#storage
{
	border: medium gray solid;
	font-size: large;
	background-color: gray;
    margin-top: 128px;
    margin-bottom:100px;
    margin-left: 837px;
    margin-right: 100px;
     position:fixed;
    height:33px;
    width: 11em; 
    color: white;
    font-weight: bold;
	font-style: oblique;
 
}
#storage:hover {
    border: medium black solid;
}
 
	/*---admin header---*/
#move
{
	border: medium gray solid;
	font-size: large;
	width: 11em; 
	background-color: gray;
	 margin-top: 128px;
    margin-bottom:100px;
    margin-left: 1040px;
    margin-right: 100px;
     height:33px; 
     color: white;  
     font-weight: bold;
	font-style: oblique; 
	position:fixed;
 
}
#move:hover {
    border: medium black solid;
}
 
 
 
#logout
{
	border: medium gray solid;
	font-size: large;
	width: 11em; 
	background-color: gray;
	 margin-top: 128px;
    margin-bottom:100px;
    margin-left: 1380px;
    margin-right: 100px;
     height:33px; 
     color: white;  
     font-weight: bold;
	font-style: oblique; 
	position:fixed;
}
}
#logout:hover {
    border: medium black solid;
}
 
/* ------------------------------------------test benches css-------------------------------------------- */
#inventory
{
	border: medium gray solid;
	font-size: medium;
	background-color: orange;
	margin-top: 177px;
    margin-bottom:100px;
    margin-left: 799px;
    margin-right: 100px;
    position:fixed;
 height:40px;
}
 
 
#z11
{
	border: medium gray solid;
	font-size: medium;
	background-color: #CCCC33;
	margin-top: 306px;
    margin-bottom:100px;
    margin-left: 320px;
    margin-right: 100px;
    position:fixed;
    height:40px;
 
}
#z11:hover {
    border: medium black solid;
}
#z13
{
	border: medium gray solid;
	font-size: medium;
	background-color: #CCCC33;
	margin-top: 361px;
    margin-bottom:100px;
    margin-left: 320px;
    margin-right: 100px;
    position:fixed;
    height:40px;
 
} 
#z13:hover {
    border: medium black solid;
}
 #z12
{
	border: medium gray solid;
	font-size: medium;
	background-color: #CCCC33;
	margin-top: 306px;
    margin-bottom:100px;
    margin-left: 650px;
    margin-right: 100px;
    position:fixed;
    height:40px;
 
}
#z12:hover {
    border: medium black solid;
}
#z14
{
	border: medium gray solid;
	font-size: medium;
	background-color: orange;
	margin-top: 361px;
    margin-bottom:100px;
    margin-left: 650px;
    margin-right: 100px;
    position:fixed;
    height:40px;
 }
 #z14:hover {
    border: medium black solid;
}
#ict
{
	border: medium gray solid;
	font-size: medium;
	background-color: #CCCC33;
	margin-top: 227px;
    margin-bottom:100px;
    margin-left: 75px;
    margin-right: 100px;
    position:fixed;
    height:40px;
   }
 
 
#inventory:hover {
    border: medium black solid;
}
 
    #ict
{
	border: medium gray solid;
	font-size: medium;
	background-color: #CCCC33;
	margin-top: 262px;
    margin-bottom:100px;
    margin-left: 75px;
    margin-right: 100px;
    position:fixed;
    height:40px;
   }
   #ict:hover {
    border: medium black solid;
}
   #z112
{
	border: medium gray solid;
	font-size: medium;
	background-color: #CCCC33;
	margin-top: 305px;
    margin-bottom:100px;
    margin-left: 461px;
    margin-right: 100px;
    position:fixed;
    height:40px;
}
#z112:hover {
    border: medium black solid;
}
     #z134
{
	border: medium gray solid;
	font-size: medium;
	background-color: #CCCC33;
	margin-top: 361px;
    margin-bottom:100px;
    margin-left: 461px;
    margin-right: 100px;
    position:fixed;
    height:40px;
   }
   #z134:hover {
    border: medium black solid;
}
 
       #z234
{
	border: medium gray solid;
	font-size: medium;
	background-color: #CCCC33;
	margin-top: 551px;
    margin-bottom:100px;
    margin-left: 461px;
    margin-right: 100px;
    position:fixed;
    height:40px;
   }
   #z234:hover {
    border: medium black solid;
}
         #z212
{
	border: medium gray solid;
	font-size: medium;
	background-color: #CCCC33;
	margin-top: 495px;
    margin-bottom:100px;
    margin-left: 461px;
    margin-right: 100px;
    position:fixed;
    height:40px;
   }
   #z212:hover {
    border: medium black solid;
}
     #z21
{
	border: medium gray solid;
	font-size: medium;
	background-color: #CCCC33;
	margin-top: 495px;
    margin-bottom:100px;
    margin-left: 320px;
    margin-right: 100px;
    position:fixed;
    height:40px;
   }
   #z21:hover {
    border: medium black solid;
}
 
   #z23
{
	border: medium gray solid;
	font-size: medium;
	background-color: #CCCC33;
	margin-top: 551px;
    margin-bottom:100px;
    margin-left: 320px;
    margin-right: 100px;
    position:fixed;
    height:40px;
   }
   #z23:hover {
    border: medium black solid;
}
      #z22
{
	border: medium gray solid;
	font-size: medium;
	background-color: #CCCC33;
	margin-top: 495px;
    margin-bottom:100px;
    margin-left: 650px;
    margin-right: 100px;
    position:fixed;
    height:40px;
   }
   #z22:hover {
    border: medium black solid;
}
             #z24
{
	border: medium gray solid;
	font-size: medium;
background-color: #CCCC33;
	margin-top: 551px;
    margin-bottom:100px;
    margin-left: 650px;
    margin-right: 100px;
    position:fixed;
    height:40px;
   }
 #z24:hover {
    border: medium black solid;
}
 
 
#z31
{
	border: medium gray solid;
	font-size: medium;
	background: gray;
	color: white;
 
	margin-top: 709px;
    margin-bottom:100px;
    margin-left: 529px;
    margin-right: 100px;
    position:fixed;
    height:40px;
   }  
   #z31:hover {
    border: medium black solid;
}
#z32
{
	border: medium gray solid;
	font-size: medium;
	background-color: #CCCC33;
	margin-top: 707px;
    margin-bottom:100px;
    margin-left: 695px;
    margin-right: 100px;
    position:fixed;
    height:40px;
   }
   #z32:hover {
    border: medium black solid;
}
 #z33
{
	border: medium gray solid;
	font-size: medium;
	background-color: #CCCC33;
	margin-top: 709px;
    margin-bottom:100px;
    margin-left: 832px;
    margin-right: 100px;
    position:fixed;
    height:36px;
   }
   #z33:hover {
    border: medium black solid;
}
#z34
{
	border: medium gray solid;
	font-size: medium;
	background-color: #CCCC33;
	margin-top: 707px;
    margin-bottom:100px;
    margin-left: 962px;
    margin-right: 100px;
    position:fixed;
    height:40px;
   }
   #z34:hover {
    border: medium black solid;
}
#z35
{
	border: medium gray solid;
	font-size: medium;
	background-color: #CCCC33;
	margin-top: 709px;
    margin-bottom:100px;
    margin-left: 1133px;
    margin-right: 100px;
    position:fixed;
    height:40px;
   }
   #z35:hover {
    border: medium black solid;
}
 
#z41
{
	border: medium gray solid;
	font-size: medium;
	background-color: #CCCC33;
	margin-top: 495px;
    margin-bottom:100px;
   margin-left: 1047px;
    margin-right: 100px;
    position:fixed;
    height:40px;
}
#z41:hover {
    border: medium black solid;
}
#z42
{
	border: medium gray solid;
	font-size: medium;
	background-color: #CCCC33;
	margin-top: 495px;
    margin-bottom:100px;
    margin-left: 1302px;
    margin-right: 100px;
    position:fixed;
   height:40px;
}
#z42:hover {
    border: medium black solid;
}
#z43
{
	border: medium gray solid;
	font-size: medium;
	background-color: #CCCC33;
	margin-top: 551px;
    margin-bottom:100px;
    margin-left: 1047px;
    margin-right: 100px;
    position:fixed;
    height:40px;
   }
   #z43:hover {
    border: medium black solid;
}
#z44
{
	border: medium gray solid;
	font-size: medium;
	background-color: #CCCC33;
	margin-top: 551px;
    margin-bottom:100px;
   margin-left: 1302px;
    margin-right: 100px;
    position:fixed;
    height:40px;
   }
   #z44:hover {
    border: medium black solid;
}
#z54
{
	border: medium gray solid;
	font-size: medium;
	background-color: #CCCC33;
	margin-top: 361px;
    margin-bottom:100px;
    margin-left: 1302px;
    margin-right: 100px;
    position:fixed;
   height:40px;
 
}
#z54:hover {
    border: medium black solid;
}
#z53
{
	border: medium gray solid;
	font-size: medium;
	background-color: #CCCC33;
	margin-top: 361px;
    margin-bottom:100px;
    margin-left: 1047px;
    margin-right: 100px;
    position:fixed;
  height:40px;
 
}
#z53:hover {
    border: medium black solid;
}
#z51
{
	border: medium gray solid;
	font-size: medium;
	background-color: #CCCC33;
	margin-top: 306px;
    margin-bottom:100px;
    margin-left: 1047px;
    margin-right: 100px;
    position:fixed;
    height:40px;
   }
   #z51:hover {
    border: medium black solid;
}
   #z52
{
	border: medium gray solid;
	font-size: medium;
	background-color: #CCCC33;
	margin-top: 306px;
    margin-bottom:100px;
    margin-left: 1302px;
    margin-right: 100px;
    position:fixed;
    height:40px;
   }
   #z52:hover {
    border: medium black solid;
}
      #z61
{
	border: medium gray solid;
	font-size: medium;
	background-color: #CCCC33;
	margin-top: 641px;
    margin-bottom:100px;
    margin-left: 271px;
    margin-right: 100px;
    position:fixed;
    height:40px;
   }
   #z61:hover {
    border: medium black solid;
}
 
   #z71
{
	border: medium gray solid;
	font-size: medium;
	background-color: #CCCC33;
	margin-top: 641px;
    margin-bottom:100px;
    margin-left: 1369px;
    margin-right: 100px;
    position:fixed;
    height:40px;
   }
   #z71:hover {
    border: medium black solid;}

JSP code:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="back.css" type="text/css">
<title>Home</title>
</head>
<body background="lablayout new.png" id="ll">
<div>
				<jsp:include page="Header.jsp"> 
					<jsp:param name="username" value="${user}" />
				</jsp:include>
			</div>
 
			<div>
			<form action="bfft.jsp">
			<input type="button" value="BFFT " id="bfft" title="bfft">
			</form>
			</div>
 
			<div>
			<form action="iav.jsp">
			<input type="submit" value="IAV " id="iav">
			</form>
			</div>
 
 
			<div>
			<form action="upload.jsp">
			<input type="submit" value="Upload " id="upload">
			</form>
			</div>
			<div>
 
			<div>
			<form action="report.jsp">
			<input type="submit" value="Report " id="report">
			</form>
			</div>
 
			<div>
			<form action="storage.jsp">
			<input type="button" value="Storage" id="storage">
			</form>
			</div>
 
			<div>
			<form action="move.jsp">
			<input type="submit" value="Move" id="move">
			</form>
			</div>
 
			<div>
			<form action="logout.jsp">
			<input type="submit" value="Logout" id="logout">
			</form>
			</div>
 
			<div>
			<form action="inventory.jsp">
			<input type="submit" value="Inventory " id="inventory" title="Inventory">
			</form>
			</div>
			<div>
			<form action="ict.jsp">
			<input type="submit" value="IZT" id="ict" title="IZT">
			</form>
			</div>
 
			<input type="button" value="z1.1" id="z11" title="1.1">
			<input type="button" value="z1.1/1.2" id="z112" title="1.1/1.2">
			<input type="button" value="z1.2" id="z12" title="1.2">
			<input type="button" value="z5.1" id="z51" title="5.1">
			<input type="button" value="z5.2" id="z52" title="5.2">
			<input type="button" value="z1.3" id="z13" title="1.3">
			<input type="button" value="z1.3/1.4" id="z134" title="1.3/1.4">
			<input type="button" value="z1.4" id="z14" title="1.4">
			<input type="button" value="z5.3" id="z53" title="5.3">
			<input type="button" value="z5.4" id="z54" title="5.4">
			<input type="button" value="z2.1" id="z21" title="2.1">
			<input type="button" value="z2.1/2.2" id="z212" title="2.1/2.2">
			<input type="button" value="z2.2" id="z22" title="2.2">
 
			<div>
			<form action="benchdetails.jsp">
			<input type="submit" value="z4.1" id="z41"></form>
			</div>
 
			<div>
			<form action="benchdetails.jsp">
			<input type="submit"value="z4.2" id="z42"></form>
			</div>
 
			<input type="button" value="z2.3" id="z23">
			<input type="button" value="z2.3/2.4" id="z234">
			<input type="button" value="z2.4" id="z24">
 
			<div class="4.3">
			<FORM NAME="form1" METHOD="POST">
        <INPUT TYPE="HIDDEN" NAME="buttonName"><input type="button" onclick="button1()" value="z4.3" id="z43"></FORM>
			 <input type="button" value="z4.4" id="z44">
 
			<input type="button" value="z6.1" id="z61">
 
			<input type="button" value="z3.1" id="z31">
					<input type="button" value="z3.2" id="z32">
 
			<input type="button" value="z3.3" id="z33">
			<input type="button" value="z3.4" id="z34">
			<input type="button" value="z3.5" id="z35">
 
			<input type="button" value="z7.1" id="z71">
 
			</div>
			 <SCRIPT LANGUAGE="JavaScript">
 
        function button1()
        {
            document.form1.buttonName.value = "yes";
            form1.submit();
        } 
 
    </SCRIPT>
 
</body>
</html>

AttachmentSize
lablayout new.png 40.67 KB
home.txt 3.65 KB
back.txt 14.02 KB
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi ron2891, Use

Hi ron2891,
Use position:absolute on the buttons to position them exactly where you want them from the closest positioned parent element of body.