Hello fellow coders! I've recently started diving into the world of website development and I have a query regarding positioning elements and handling window resizing. Can anyone help me out?
I'm trying to center an image, a message, and a password input on my webpage. While it looks good on my screen, in the code snippet below, there seems to be no space below the password line (you may need to scroll around to see anything), so clearly something is amiss...it's supposed to be perfectly centered on the screen.
However, I feel like I'm not efficiently positioning my elements. I also want to ensure that when the user shrinks their window, scroll bars appear and any empty space disappears (similar to Twitter's login page: https://twitter.com/login). Unfortunately, in my current code, shrinking the window still leaves empty space which I believe is not ideal for UI.
In essence, if anyone has tips on how to effectively position text and images, as well as utilize CSS to handle window resizing gracefully, I would greatly appreciate the guidance :) Any help is welcome and thank you in advance!
.pretty {
text-align: center;
color: #00008b;
font-family: Lucida Console;
position: absolute;
top: 115%;
left: 39%;
}
.pwd {
text-align: center;
position: absolute;
top: 155%;
left: 38.5%;
}
.chatbubble {
height: 14%;
width: 6%;
position: absolute;
top: 102%;
left: 48.5%;
}
body {
background-color: #fff0f5;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 960px;
}
.contain {
position: relative;
height: 200px;
}
html {
height: 100%;
}<!DOCTYPE html>
<html>
<div id="wrapper">
<head>
<title> Log In </title>
<link href="loginstyle.css" type="text/css" rel="stylesheet">
<script language="JavaScript">
function showPass(form, e) {
e.preventDefault();
var pass = form.pwd.value;
var pass1 = "webdesign"
if (pass == pass1) {
window.location.href = 'https://www.google.com'
} else {
window.location.href = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
}
}
</script>
</head>
<body>
<div class="contain">
<img class="chatbubble" src="chatbubble.png" alt="Chat Bubble" />
<p class="pretty center">Welcome to a <br/> digital photobook. <br/> Please enter the password to continue: <br/> </p>
<form class="pwd center" onsubmit="showPass(this, event)">
Password: <input type="password" name="pwd" />
<input type="submit" value="Log In" />
</form>
</div>
</body>
</div>
</html>