CODEWITHSUNDEEP
htmlcssuser-interface
Rahul
Rahul

Reputation: 759

How to prevent the UI elements overlapping from each other when the browser is resized?

I've spent the last week learning how to design a UI through HTML. I basically thought I had everything perfect with my website layout and was ready to demo.But I accidentally resized my web browser and observed that all the elements are getting overlapped each other(even in other machines the same behaviour).

I have googled this issue but none is helpful.Basically, am not sure where to modify the code.Please let me know how can I resolve this issue.

<!Document html>
<html lang="en">
<base href="file:///C:/Users/myuser/Pictures/HTML/">
<head>
    <title>This is title</title>
</head>
<style>
    body {
        background-color:#FDF5E6;
        background-image: url("file:///C:/Users/myuser/Pictures/HTML/bicycles.jpg");
        background-repeat: no-repeat;
        background-size: cover;
    }
</style>
<body>
    <h1 align="center" style="font-family: Colonna MT;font-size:50px;color:brown;position:absolute;top: 3%; left: 41%;">This is website heading</h1>
    <p style="color:DarkSalmon;position:absolute;top: 10%; left: 48%;"><i>"This is caption"</i>
    </div>
    <h2 style="color:skyblue; position:absolute;top: 20%; left: 39%;">Login</h2>
    <div style="color:Teal;position:absolute;top: 26%; left: 39%; width:300px;height:125px;border:1px solid #000;"></div>
    <form name="login" style="color:SandyBrown;font-size:larger;position:absolute;top: 27%; left: 40%;">
            Username : <input type="text" name="userid"/><br></br>
            Password : <input type="password" name="pswrd"/><br></br>
            <input class="btn btn-primary" style="font-size:medium;background-color: #FFFF00; position:absolute;top: 95%; left: 50%;" type="button" onclick="check(this.form)" value="Login"/>
        <input style="font-size:medium;background-color: #FFFF00; position:absolute;top: 95%; left: 75%;" type="reset" value="Cancel"/>
    </form>
    <a style="color:MediumVioletRed;position:absolute;bottom: 58%; left: 50.5%;" href="Forgot Password">Forgot Password</a>
    <p style="color:YellowGreen;font-size:20px;position:absolute;bottom: 53%; left: 39%;">Don't have an account?</p>
    <a style="color:Purple ;font-size:20px;position:absolute;bottom: 55%; left: 50.5%;" href="Signup.html" onClick="return popup(this, 'Signup')">Sign up</a>
    <p style="font-size:20px;position:absolute;bottom: 53%; left: 54.5%;">here</p>

    <SCRIPT TYPE="text/javascript"> 
         function popup (mylink, windowname) { 
            if (! window.focus)
                return true; 
            var href; 
            if (typeof(mylink) == 'string') 
                href=mylink; 
            else 
                href=mylink.href; 
            window.open(href, windowname, 'width=400,height=200,scrollbars=yes'); 
            return false; 
        } 
    </SCRIPT>

</body>
</html>

Upvotes: 0

Views: 3776

Answers (2)

Timo
Timo

Reputation: 738

I created a simple solution for you. I did not style it much, but you should be able to do this by yourself.

/**
*    JS / jQuery
*/
$('#btn-login').on('click', function(){
	alert('Do login');
});

$('#btn-cancel').on('click', function(){
	$('.login-form')[0].reset();
});
/**
*    CSS
*/
.login-box{
  display: block;
  background: #fff;
  border: 1px solid #ddd;
  padding: 20px 10px;
}

.login-box a{
  display: block;
  text-align: right
}

.login-form input,
.login-form .btn{
  border-radius: 0px;
}

.button-container{
  margin: 10px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-sm-push-3 col-xs-8 col-xs-push-2">
      <h1 class="text-center">The website heading</h1>
      <p class="lead text-center">"This is caption"</p>

      <h2>Login</h2>
      <div class="login-box">
        <form action="post" class="login-form">
          <div class="form-group">
            <label for="user-name">Username</label>
            <input type="text" class="form-control" name="user" id="user-name">
          </div>
          <div class="form-group">
            <label for="password">Password</label>
            <input type="password" class="form-control" name="password" id="password">
          </div>
          <div class="button-container text-right">
            <button class="btn btn-default" type="button" id="btn-cancel">Cancel</button>
            <button class="btn btn-primary" type="button" id="btn-login">Login</button>
          </div>
        </form>
        <a href="#">Forgot password?</a>
      </div>
    </div>
  </div>
</div>

I used bootstrap framework for css as I think it is the fastest way for beginners to create responsive mobile-first design. You can visit their website for more information.

I used jQuery for javascript, although I did not use it much.

In order to keep your code clean, readable and well organized, you should keep your html, css, javascript separated. If you have any questions, feel free to ask.

Upvotes: 1

Aivaras P
Aivaras P

Reputation: 166

You are using position: absolute; that's why your elements overlap when You re-size the view port. You should not be using this property for this kind of layout. Instead You should be using something like float: left;. And I would recommend You to look deeper into website layouts, grid models and bootstrap.

Div positioning examples

float: left; makes the div align to the left side.

float: right; - aligns the div the right.

And position: absolute; makes them float around like a balloon, and lets You choose it's position.

Upvotes: 1

Related Questions