CODEWITHSUNDEEP
htmlcss
Amon
Amon

Reputation: 2951

HTML changes position when resizing window

{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link href="{% static 'css/hover.css' %}" rel="stylesheet" media="all">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">

<!-- CSS -->    
<style>

.menu {
font-family: sans-serif;
background: blue;
padding: 5px;
width: 130px;
z-index: 100;
bottom: 200px;
right: 700px;
box-shadow: 5px 5px 5px;
border-radius:5px 5px 5px 5px;
margin-bottom: 160px;
position: relative;left:700px;top:250px;

}

.menu a, 
.menu h3 {
font-size: 0.9em;
display: block;
margin: 0 0.5em;
color: white;
}

input {
    width: 120px;
}

</style>
</head>
<body>


<!-- HTML -->
<main>

<nav class="menu">
<div id='wrapper'>
<h3>Login</h3>

<form method='POST' class= "post-form"> {{ form.as_p }} </form>

<a href="#" class="hvr-grow">Create Account</a>
</div>

</nav>

</main>

</body>
</html>

It just displays a square menu in the middle of the screen, until I resize the window. It doesn't stay in the center anymore, how can I change that? I've tried using min-width but to no avail. How do I get it to stay fixed in place?

Upvotes: 0

Views: 66

Answers (2)

wlh
wlh

Reputation: 3515

You have hard coded the positioning of your menu. Instead, set the body to position: relative and your nav to position: absolute. Then you can use the css calc() function to center your nav on any size page. See example:

html {
  min-height: 100%;
    }
body {
  height: 100vh;
  width: 100%;
  position:relative;
    }

.menu {
position: absolute;
font-family: sans-serif;
background: blue;
padding: 5px;
width: 130px;
z-index: 100;
top:calc((100vh - 2.7em - 10px)/2);
right:calc((100% - 140px)/2);
box-shadow: 5px 5px 5px;
border-radius:5px 5px 5px 5px;



}

.menu a, 
.menu h3 {
font-size: 0.9em;
display: block;
margin: 0 0.5em;
color: white;
}

input {
    width: 120px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">




<!-- HTML -->
<main>

<nav class="menu">
<div id='wrapper'>
<h3>Login</h3>

<form method='POST' class= "post-form"> {{ form.as_p }} </form>

<a href="#" class="hvr-grow">Create Account</a>
</div>

</nav>

</main>

Upvotes: 2

grinmax
grinmax

Reputation: 1855

Try this 

.menu {
font-family: sans-serif;
background: blue;
padding: 5px;
width: 130px;
z-index: 100;
box-shadow: 5px 5px 5px;
border-radius:5px 5px 5px 5px;
margin-bottom: 160px;
position: relative;
top:250px;
margin: auto;
}

.menu a, 
.menu h3 {
font-size: 0.9em;
display: block;
margin: 0 0.5em;
color: white;
}

input {
    width: 120px;
}
<main>
  <nav class="menu">
    <div id='wrapper'>
      <h3>Login</h3>
      <form method='POST' class= "post-form"> {{ form.as_p }} </form>
      <a href="#" class="hvr-grow">Create Account</a>
    </div>
  </nav>
</main>

JsFiddle - https://jsfiddle.net/f39wurmn/

Upvotes: 1

Related Questions