CODEWITHSUNDEEP
htmlcss
John Deegan
John Deegan

Reputation: 39

navbar interfering with div - HTML/CSS

Total beginner with HTML/CSS. Working on a simple webpage. So far I've inserted a side nav bar but all my attempts to get the log in form to the center of the page has failed. The only margin value that works is "auto" and that sticks my form to the top of the page. Any changes I make to any margin property causes my navbar to completely mess up. I wish for it to be positioned in the center of the page that isn't the navbar as shown.

Currently: ![enter image description here]1

    @import url('http://fonts.googleapis.com/css?family=Open+Sans');
    body {
    	font-family: 'Open Sans', Arial, sans-serif;
    	background-color: #ccf;
    }
    
    nav {
    	position: fixed;
    	width: 200px;
    	height: 100%;
    	background-color: #036;
    }
    
    nav ul {
    	list-style: none;
    	margin-top: 50px;
    }
    
    nav ul li a {
    	text-decoration: none;
    	display: block;
    	text-align: center;
    	color: #ccf;
    	padding: 30px 0;
    	font-size: 30px
    }
    
    nav ul li a:hover {
    	color: #fff;
    }
    
    .login {
    
    height:100px;
    width:170px;
    margin:auto;
    border:1px #CCC solid;
    padding:10px;
    background-color:#E9E9E9 
    }
    
    input {
    background: #E1FFE1;
    border:1px #CCC solid;
    padding:5px;
    }
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Project</title>
		<link rel="stylesheet" href="reset.css">
		<link rel="stylesheet" href="style.css">

	</head>
	<body>
		<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Services</a></li>
				<li><a href="#">Contact</a></li>
			</ul>

		</nav>

		<div class="login">
		<input type="text" placeholder="Username" id="username"> 
		<input type="password" placeholder="Password" id="password"> 

		<a href="#" class="forgot">forgot password?</a>

		<input type="submit" value="Sign In">

		</div>


	</body>
</html>

Upvotes: 0

Views: 668

Answers (4)

caramba
caramba

Reputation: 22490

add this to .login style

position:absolute; /*can also be fixed*/
left:0; right:0;
top:0; bottom:0;
margin:auto;

http://jsfiddle.net/145w1b6s/

or if you want to place it 200px from the left cause of the width from the <nav> 

position:absolute; /*can also be fixed*/
left:200px; right:0;
top:0; bottom:0;
margin:auto;

http://jsfiddle.net/145w1b6s/1/

Upvotes: 1

BCDeWitt
BCDeWitt

Reputation: 4783

There are a number of ways to vertically center elements. In my opinion, the easiest to understand is using a table layout. In this case, we aren't making an actual table of data, just creating containers for our design that act like a table. So, using CSS to create the layout is preferable compared to <table> or <td> elements.

The CSS equivalents are display: table; and display: table-cell;, respectively. In addition to these two styles, you will find vertical-align: middle; used on the cells in the included snippet to create the desired effect. This should also solve your horizontal centering issue.

@import url('http://fonts.googleapis.com/css?family=Open+Sans');

* { margin: 0px; padding: 0px; }

html {
  height: 100%;
}

body {
  display: table;
  width: 100%;
  min-height: 100%;
  font-family: 'Open Sans', Arial, sans-serif;
  background-color: #ccf;
}

nav {
  display: table-cell;
  padding: 20px;
  width: 200px;
  background-color: #036;
  vertical-align: top;
}

nav ul {
  list-style: none;
}

nav ul li a {
  text-decoration: none;
  display: block;
  text-align: center;
  color: #ccf;
  padding: 30px 0px;
  font-size: 20px
}

nav ul li a:hover {
  color: #fff;
}

.main {
  display: table-cell;
  width: 100%;
  vertical-align: middle;
  text-align: center;
}

.login {
  height: 100px;
  width: 170px;
  margin: auto;
  border: 1px #CCC solid;
  padding: 10px;
  background-color: #E9E9E9 
}

input {
  background: #E1FFE1;
  border: 1px #CCC solid;
  padding: 5px;
}
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<div class="main">
  <div class="login">
    <input type="text" placeholder="Username" id="username"> 
    <input type="password" placeholder="Password" id="password"> 

    <a href="#" class="forgot">forgot password?</a>

    <input type="submit" value="Sign In">

  </div>
</div>

Upvotes: 0

Mike Donkers
Mike Donkers

Reputation: 3699

If you want the .login div to be centered you could also take a look at the CSS property transform 

.login {
    -ms-transform: translate(50%, 50%); /* IE 9 */
    -webkit-transform: translate(50%, 50%); /* Chrome, Safari, Opera */
    transform: translate(50%, 50%); /* Default syntax */
}

This might solve the problem altogether

Upvotes: 0

Farhang darzi
Farhang darzi

Reputation: 121

You should wrap your login div with another div then insert margin-left property then assign equal marign with nav width(200px) to it. checkout my snipped.

@import url('http://fonts.googleapis.com/css?family=Open+Sans');


body {
    font-family: 'Open Sans', Arial, sans-serif;
    background-color: #ccf;
}

.main {
  margin-left: 200px;  
}

nav {
    position: fixed;
    width: 200px;
    height: 100%;
    background-color: #036;
}

nav ul {
    list-style: none;
    margin-top: 50px;
}

nav ul li a {
    text-decoration: none;
    display: block;
    text-align: center;
    color: #ccf;
    padding: 30px 0;
    font-size: 30px
}

nav ul li a:hover {
    color: #fff;
}

.login {

height:100px;
width:170px;
margin:0 auto;
border:1px #CCC solid;
padding:10px;
background-color:#E9E9E9;
text-align: center;
}

input {
background: #E1FFE1;
border:1px #CCC solid;
padding:5px;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Project</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">

    </head>
    <body>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>

        </nav>
        <div class="main">
        <div class="login">
        <input type="text" placeholder="Username" id="username"> 
        <input type="password" placeholder="Password" id="password"> 

        <a href="#" class="forgot">forgot password?</a>

        <input type="submit" value="Sign In">

        </div>
        </div>


    </body>
</html>

Upvotes: 0

Related Questions