Please help me solve this problem to my web page codes.
Any solution will be considered.
Thanks.
Hello!
You haven’t given us any nformation pertaining to your problem. Could you please give us a well-detailed post explaining your issue? Preferably some sort of demo as well.
heres the link of the image sir.
(sorry i cant upload the image because im a new user)
Problem: When i zoomed in the page, the Login Form and the Logo was also zoomed in.
I want to remain the Login Form and Logo even if it is zoomed.
If the user wants to zoom the page, don’t you think you should not interfere? They need a bigger version.
Right, but if they want to zoom the page,its okay for me, but i want to remain the log-in form and the logo to the center (when zoomed). Is there any possible solution for that sir Ryan?
Do you possibly have a live demo showcasing this? Best to work with the actual code 
.
Sir, can i ask, where can i upload my web page to provide you a demo?
sorry sir, im only a beginner of making simple html\css webpage and i don’t know any sites for that. This is my Codes.
<html>
<head>
<link rel="stylesheet" type="text/css" href="1.css">
<style type="text/css">
<!--
.style1 {font-size: 16px}
-->
</style>
</head>
<body>
<div class="login">
<h1> </h1>
<h1 class="style1">Login</h1>
<form method="post">
<input type="text" name="u" placeholder="Username" required="required" />
<input type="password" name="p" placeholder="Password" required="required" />
<button type="submit" class="btn btn-primary btn-block btn-large">Let me in</button>
</form>
</div>
<img src="prifood-logo.png" width="386" height="146" hspace="460" vspace="210" align="texttop">
</body>
</html>
HERES MY CSS attached to it:
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
.btn { display: inline-block; *display: inline; *zoom: 1; padding: 4px 10px 4px; margin-bottom: 0; font-size: 13px; line-height: 18px; color: #333333; text-align: center;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; background-color: #f5f5f5; background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); background-image: linear-gradient(top, #ffffff, #e6e6e6); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0); border-color: #e6e6e6 #e6e6e6 #e6e6e6; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border: 1px solid #e6e6e6; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); cursor: pointer; *margin-left: .3em; }
.btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] { background-color: #e6e6e6; }
.btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.btn:hover { color: #333333; text-decoration: none; background-color: #e6e6e6; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; }
.btn-primary, .btn-primary:hover { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #ffffff; }
.btn-primary.active { color: rgba(255, 255, 255, 0.75); }
.btn-primary { background-color: #4a77d4; background-image: -moz-linear-gradient(top, #6eb6de, #4a77d4); background-image: -ms-linear-gradient(top, #6eb6de, #4a77d4); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6eb6de), to(#4a77d4)); background-image: -webkit-linear-gradient(top, #6eb6de, #4a77d4); background-image: -o-linear-gradient(top, #6eb6de, #4a77d4); background-image: linear-gradient(top, #6eb6de, #4a77d4); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr=#6eb6de, endColorstr=#4a77d4, GradientType=0); border: 1px solid #3762bc; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5); }
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { filter: none; background-color: #4a77d4; }
.btn-block { width: 100%; display:block; }
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }
html { width: 100%; height:100%; overflow: hidden; margin: 0 auto;}
body {
margin:0 auto;
padding:0;
font-family: 'Open Sans', sans-serif;
background: #3e73ef; /* Old browsers */
background: -moz-linear-gradient(-45deg, #3e73ef 0%, #4cce50 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#3e73ef), color-stop(100%,#4cce50)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #3e73ef 0%,#4cce50 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #3e73ef 0%,#4cce50 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #3e73ef 0%,#4cce50 100%); /* IE10+ */
background: linear-gradient(135deg, #3e73ef 0%,#4cce50 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e73ef', endColorstr='#4cce50',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.login {
position: absolute;
top: 439px;
left: 658px;
margin: -150px 0 0 -150px;
width:300px;
height:167px;
}
.login h1 { color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center; }
input {
width: 100%;
margin-bottom: 10px;
background: rgba(0,0,0,0.3);
border: none;
outline: none;
padding: 10px;
font-size: 13px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);
border-radius: 4px;
box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
-webkit-transition: box-shadow .5s ease;
-moz-transition: box-shadow .5s ease;
-o-transition: box-shadow .5s ease;
-ms-transition: box-shadow .5s ease;
transition: box-shadow .5s ease;
}
input:focus { box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); }
THe problem is that you are centering it for your own screen.
.login {
position: absolute;
top: 439px;
left: 658px;
margin: -150px 0 0 -150px;
width:300px;
height:167px;
}
top:439px? left:658px? Those are “magic numbers” and you should sort of get the hint that they are not special numbers of any kind and will not work universally.
Since you have a fixed width/height (a bad thing; that’s another discussion) we can actually do the following
.login {
position: absolute;
top: 50%;/*move it down 50% of the screen*/
left: 50%;/*move it over 50% of the screen*/
margin: -84px 0 0 -150px;/*the negative top margin is half the height to perfectly align. The negative left margin is half of the width*/
width:300px;
height:167px;
}
You should see it centered now.
Yes, i saw it sir Ryan ,
Sorry i just search that log in form code to the GOOGLE and copy the codes i didn’t make it on my own. 
Sir, the logo was still zoomed.
Oh, I thought you just wanted it centered still.
No, you can’t unzoom it. Not with CSS only, at least.
I’m guessing you mean “zoomed out” i.e. “tiny”
Isn’t this because there is no
<meta name="viewport" content="width=device-width,initial-scale=1" />
If I understand the OP, when a user zooms in the webpage, he wants the logo to remain untouched. So zoom the entire page minus the image (and the login form). Keep the logo/form being small.
That meta tag will have no affect on anything (assuming I understand OP correct. I often am wrong though 
).
So something like no matter what the view-port dimensions are the logo and form will always take up the same amount of real estate?
I guess they could be resized, but I imagine users could get annoyed if they purposely zoom in or out and things adjust to look like they hadn’t.
Sorry Alvie, but I’m sure I’m missing some crucial bit of information here about exactly what you are wanting to happen,
Sir Mittneague, thanks for the response.
My problem is, how to remain the logo and form when the browser was zoom in our out, sir Ryan provided a code and it works only on the log-in form.
Heres the image link of my web at first.
After Sir Ryan provided a code, heres the image. The logo is not still but the form is Okay now.
Thanks, that helps a lot.
If you move the logo like so is it any better?
<body>
<img src="prifood-logo.png" width="386" height="146" hspace="460" vspace="210" align="texttop">
<div class="login">
Nothing happens sir, still the same.
I don’t think I’ve ever used them, but I suspect it’s the hspace and vspace causing the positioning problems. If you take those out I think it will help.
Thanks to Sir Ryan and Mittineague. You gave me a very very Big Great Help. 
Hope you will help me to the next problem when occurs.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.