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
  • 203 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by herms14
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.