Member Avatar for herms14

Hi there, Im basically new in web development and Im trying to design a simple login menu. the problem is when I resize my Chrome window the input textboxes does not adjust and is left out. How could I make them adjust based on the size and resolution of my browser? here is my code

/* custom font*/
@font-face {
font-family: myfont;
src: url('Neov2b.ttf')
}
body{
		min-width: 800px;
		margin-left: 5%;
		width: 90%;
		height:100%;
		/*background-image:url('images/social_networking.jpg');*/
		background-size: 100% 100%;
		background-position: 100% 100%;
		opacity:.0.6;
	}

#mainLogo {
	width: 100%;
	position:relative;
	text-align:left;
	background-color: #00004e;
	font-size: 2.5em;
	color: white;
	font-style:normal;
	font-family: myfont;
	margin-top:-10px;
	margin-left: -10px;
	margin-right: -10px;
	padding:15px;
			}
.version {
font-size: 20px;

		}
		
input.username{
	position:absolute;
	margin-left:505px;
	margin-right: auto;
	top: 25px;
	}
label.label1{
	position:absolute;
	margin-left: 400px;
	top: 30px;
	color: white;
	font-family: myfont;
	}
label.label2{
	position:absolute;
	margin-left: 690px;
	color: white;
	top:30px;
	font-family: myfont;
}
input.password{
	position:absolute;
	margin-left: 795px;
	top:25px;
	}
input.submit{
	width: 100px;
	position:absolute;
	margin-left: 960px;
	top: 25px;
	}
#footer{
	position:relative;
	text-align:left;
	background-color: #00004e;
	font-size: 5px;
	color: white;
	font-style:normal;
	font-family: myfont;
	margin-top: 750px;
	margin-left: -10px;
	margin-right: -10px;
	padding:15px;
	
}
<html>
<head></head>
<link rel="stylesheet" type="text/css" href="style1.css" media="screen />
<body >
<div id ="header" > </div>
<p id="mainLogo">
mlms&nbsp;<span class ="version">v1.1</span> 
</p>
<div id = "loginForm"> 
<form action="" method="post">
<label class="label1" >Username:</label> <input type="text" name="username" size= "20" class="username">
<label class="label2"> Password:</label> <input type="password" name="password" size="20" class="password">
<input type="submit" value="Enter" class="submit">
</form>
</div>
<br />
<div id = "registration"> </div>
<div id= "footer">
random system
</div>
</body>
<html>

Hope the hear some suggestions soon. Thanks

  • 4 Contributors
  • 4 Replies
  • 221 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by herms14

Dani AI

Generated

Quick, practical fix and why: the inputs are positioned with explicit coordinates so they don’t flow when the viewport changes. That makes them “fall out” of the layout as the window shrinks. ’s fixed-width idea will stop the jump but forces a fixed layout; and suggested absolute positioning and debugging tools — helpful for rapid prototyping, but brittle for real pages. Replace the absolute offsets with a fluid container and let CSS layout the form.

A simple, modern pattern is a centered container with a flex row that wraps. It keeps labels and fields aligned on wide screens and stacks them on narrow ones:

<form class="login-row">
  <label for="user">Username</label>
  <input id="user" name="username" type="text">
  <label for="pass">Password</label>
  <input id="pass" name="password" type="password">
  <button type="submit">Enter</button>
</form>
.login-row {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.login-row label { flex: 0 0 120px; }
.login-row input { flex: 1 1 200px; min-width: 140px; box-sizing: border-box; }
.login-row button { flex: 0 0 100px; }

@media (max-width: 520px) {
  .login-row { flex-direction: column; align-items: stretch; }
  .login-row label { flex: none; }
  .login-row button { width: 100%; }
}

Quick checklist for : 1) Ensure your stylesheet link is correctly placed inside <head> and the tag is syntactically correct. 2) Remove position:absolute and fixed pixel margin-left from the form controls. 3) Use box-sizing: border-box so padding doesn’t break widths. 4) Add a media query to stack controls on small screens. 5) Use label for with matching id on inputs for accessibility. These small changes make the login form resilient across window sizes and resolutions.

Recommended Answers

All 4 Replies

Member Avatar for lps

Truthfully, seldom of the web developer will set the minimum width to the body. They just simply set a fix width to it so that its width is static on any resolution's screen and the content is aligned properly.

Edited by lps because: n/a
Member Avatar for phoenix_2000

Making a page resolution-dependent is considered a bad practice indeed, i would personally use position:absolute on everything, and simply make sure it runs well on every acceptable resolution.

I have a Firefox plugin (the web developer toolbar) that allows me to automatically resize the browser as if it was on a different resolution.

But if you really want to resize you page with your browser, try using position: fixed;

Oh, and i know desinging a resolution-independent page might seem rather hard at the begin.
Just keep trying it until you get the hang of it :)

Member Avatar for webdesign22

I agree I would use position:absolute as well. Another good Firefox plugin that would help you is Firebug.

Keep on trying, it will get easier.
Good Luck,
Sarah

Edited by Ezzaral because: Snipped 'fake sig' link. Please restrict such links to your site-wide user signature, which can be edited from the user control panel.
Member Avatar for herms14

Thanks for the suggestions guys :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.