{% 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>
Create Account
</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?
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>
Create Account
</div>
</nav>
</main>
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>
Create Account
</div>
</nav>
</main>
JsFiddle - https://jsfiddle.net/f39wurmn/
Related
So I'm trying to design my very first website using CSS and HTML. But I have run into a bit of an issue.
I'm trying to make a simple sidebar with just a profile picture next to the content container. But, the div pushes down the other div instead of going behind it. I've used position relative and z index but nothing seems to work.
This is how the code looks like now.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
rel="stylesheet"
/>
<title>Document</title>
</head>
<body>
<div id="sidebar">
<img src="./Img/pepe.png" alt="" />
</div>
<div class="contentbox"></div>
<div class="Wrapper">
<header>
<h1>Welcome To My Site</h1>
<h2>First CSS Site</h2>
</header>
<nav>
<ul class="meny">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
font-family: "Roboto";
}
body {
background-color: #E0F2E9;
}
#sidebar{
border: 2px solid brown;
text-align: right;
margin-top: 50%;
margin-left: 0%
}
.contentbox{
border: solid 2px red;
width: 60vw;
margin: 0 auto;
background-color: white;
height: 100vh;
margin-top: 300px;
}
.Wrapper {
border: 2px solid green;
height: 250px;
background-color: #5B7B7A;
margin: auto;
width: 95vw;
position: absolute;
top: 30px;
right: 30px;
left: 30px;
border-radius: 5px;
}
.meny{
text-align: center;
line-height: 32px;
border: 2px solid purple;
padding: 10px 10px;
}
ul.meny{
margin: 15px 10px;
text-decoration: none;
}
.meny li{
display: inline;
padding: 0px 10px;
}
.meny a{
text-decoration: none;
color: white;
font-size: 1em;
}
.Wrapper h1, h2 {
margin: 10px;
border: 2px solid blue;
display: flex;
text-align: center;
justify-content: center;
text-transform: uppercase;
color: #ffffff;
}
.Wrapper h1 {
padding: 30px;
}
.Wrapper h2 {
padding: 4px;
z-index values are relative and it depend to you, for instance : i write z-index: 50 for my div and z-index : 51 for my another element . Element has z-index 51 comes above div has less value of z-index . i hope this is help .
I am currently working on a project with Django. The home / main page of the project is locked behind a login form. I have the background blurred with the login form on top of the blur and I am looking to remove that form and blur when the user logs in with a valid account.
Is this possible and where should I look, googling has turned up nothing.
the blur is applied via css.
Also is it possible to stop the user from interacting with the elements behind the blur until they log in?
thank you
home.html
{% extends "main/base.html" %}
{% block content %}
<div class='login-form'>
<form method="POST">
{% csrf_token %}
<div class='larger-form'>
<h3>Login Form</h3>
<div class='smaller-form'>
<p>
<label>Username</label>
<input type="text" name="username">
</p>
<p>
<label>Password</label>
<input type="password" name="password">
</p>
<button type="submit" class='login'>Login</button>
Need an account? <a class='' href="{% url 'register-page' %}">Sign Up</a>
</div>
</div>
</form>
</div>
<div class="search-content">
<div class='bar-container'>
<h1> Search Here </h1>
</div>
<div class='searchbar-container'>
<p>
<input type="text" class="search-bar">
</p>
</div>
<div class='content-section'>
</div>
</div>
<style>
.search-content {
filter: blur(4px);
}
.login-form {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 20%;
height: 30%;
display: grid;
z-index: 3;
}
.search-bar {
border-radius: 2px;
width: 40%;
margin-left: 30%;
}
.bar-container {
filter: blur(4px);
margin: auto;
text-align: center;
color: white;
background-color: #545452;
border-radius: 3px;
width: 75%;
box-shadow: 1px 1px 3px grey;
}
.searchbar-container {
margin: auto;
right: 50%;
}
h3 {
color: white;
}
.loginform {
margin-top: auto;
margin: 0 auto;
width: 300px;
}
.larger-form {
margin-top: 25px;
background-color: #545452;
border: 3px solid #545452;
border-radius: 8px;
box-shadow: 1px 1px 3px grey;
text-align: center;
}
.smaller-form {
background-color: white;
text-align: left;
}
.login {
border: none;
text-align: center;
font-size: 16px;
display: inline-block;
background-color: white;
color: black;
text-decoration: none;
}
.login:hover {
color: #42A5F5;
</style>
{% endblock %}
base.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class='container'>
<div class='bar'>
<a href="{% url 'main-home' %}" class='button'>Home</a>
<a href="{% url 'register-page' %}" class='button'>Sign up</a>
</div>
{% block content %}
{% endblock %}
</div>
<div class='menu-bottom'>
<div id='colorstrip'>
</div>
</div>
</body>
<style>
.container {
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
background: white;
}
.bar {
background-color: #545452;
padding-top: 10px;
height: 50px;
align-items: end;
box-shadow: 2px 2px 5px black;
border-radius: 1.5px;
}
.button {
float: right;
padding-top: 5px;
padding-right: 20px;
border: none;
text-align: center;
font-size: 18px;
display: inline-block;
background-color: #545452;
color: white;
text-decoration: none;
}
.button:hover {
color: #42A5F5;
}
.menu-bottom {
position: absolute;
bottom: 10px;
width: 100%;
}
#colorstrip{
width: 100%;
height: 0px;
border-style: solid;
border-color: #545452;
border-radius: 1px;
background-color: white;
}
</style>
</html>
Let me know if any other code is needed or if this is formatted incorrectly.
Yes. You can wrap the inline CSS code like so:
{% if not user.is_authenticated %}filter: blur(4px);{% endif %}
Also, you can disable interaction with the BG content by adding pointer-events: none; to the class of the element above the content you don't want interacted with.
I want to create a homepage where you see an image at first with the actual navigation bar on the bottom of the browser. When you scroll down the navigation should stick to the top when it reaches the top of the browser.
I got 1 Logo on the left of the screen and the navigation on the right. The navigation should have a background as a bar across the screen and the logo should overlap this. When I scroll down i first want the logo (which is for example 250px high) to stick to the top and then when i further scroll down i want the navigation + background (about 100px) also to stick to the top. I don't know why the white space is generated either. Between the first and the second picture there should only be about 100px (the height of the grey bar(navigation bar). With this code everything except the background bar works..
#charset "utf-8";
*{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.top-container{
position: absolute;
width: 100%;
}
.stopleft{
padding-top: 34%;
width: 50%;
margin: 0px 0px 0px 0px;
border: solid 0px #000;
float: left;
}
.stopright{
padding-top: 44.2%;
width: 50%;
margin: 0px 0px 0px 0px;
border: solid 0px #000;
float: right;
}
.whiteBarSmall{
width: 100%;
padding-top: 5%;
background-color: #fff;
position: absolute;
}
.logo{
position: sticky;
top: 0;
width: 50%;
float: left;
}
.navigation{
margin: 0px 0px 0px 0px;
border: solid 0px #000;
position: sticky;
top: 0;
width: 50%;
float: right;
}
.navigation ul{
height: 100px;
}
.button{
list-style: none;
margin: 25px 20px 25px 20px;
float: right;
}
.navBackground{
border: solid 0px #000;
position: sticky;
top: 0;
width: 100%;
padding-top: 5%;
background-color: #a7a7a7;
float: right;
z-index: -1;
}
.whiteBarLarge{
width: 100%;
padding-top: 10%;
background-color: #fff;
}
.indexImage{
width: 100%;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 102px;
}
footer{
width: 100%;
padding-top: 2.5%;
background-color: #a7a7a7;
}
.navigation a:link {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
.navigation a:visited {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
.navigation a:focus {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
.navigation a:hover {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
.navigation a:active {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Test</title>
<meta name="description" content="…." />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="icon" href="pics/favicon.ico" />
<link rel="stylesheet" href="styles/basics.css" type="text/css" />
<link rel="stylesheet" href="styles/index.css" type="text/css" />
<link rel="stylesheet" href="styles/links.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Volkhov" rel="stylesheet">
</head>
<body>
<div class="top-container">
<img src="https://pre00.deviantart.net/e893/th/pre/i/2006/132/b/4/widescreen_dreamy_world_6th_by_grafixeye.jpg" alt="Test header" width="100%" />
</div>
<div class="stopleft"></div>
<div class="stopright"></div>
<div class="logo"><img src="https://png.icons8.com/ios/1600/external-link-squared-filled.png" alt="Logo" width="50%" /></div>
<div class="navigation">
<ul>
<li class="button">Über uns</li>
<li class="button">Kontakt</li>
<li class="button">Preise</li>
<li class="button">Blog</li>
<li class="button">Galerie</li>
</ul>
</div>
<div class="navBackground"></div>
<div class="indexImage">
<img src="http://www.hdwallpapery.com/static/images/dual-monitor-wallpapers-hd_dJyDicr.jpg" alt="" width="100%" />
</div>
<div class="whiteBarLarge">
</div>
<div class="indexImage">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUPqqyzvnT6JVdDUeUgzDvX9tUpwjKv59spOBgVdYtf-2EaLhD" alt="" width="100%" />
</div>
<div class="whiteBarLarge"></div>
<footer></footer>
</body>
</html>
I am having a lot of trouble with this bar...
Hope someone can help me. Thanks!
Is that what you want?
#charset "utf-8";
body {margin:0;}
.navbar {
overflow: hidden;
background-color: #808080;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
/* height: 1500px; */ /* Used in this example to enable scrolling */
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<div class="navbar">
<img src="https://png.icons8.com/ios/1600/external-link-squared-filled.png" alt="Logo" class-="logo" height=50 width=50 style="float: left">
Galerie
Blog
Preise
Contact
Über uns
</div>
<div class="main">
<div class="top-container">
<img src="https://pre00.deviantart.net/e893/th/pre/i/2006/132/b/4/widescreen_dreamy_world_6th_by_grafixeye.jpg" alt="Test header" width="100%" />
</div>
<div class="indexImage">
<img src="http://www.hdwallpapery.com/static/images/dual-monitor-wallpapers-hd_dJyDicr.jpg" alt="" width="100%" />
</div>
<div class="whiteBarLarge">
</div>
<div class="indexImage">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUPqqyzvnT6JVdDUeUgzDvX9tUpwjKv59spOBgVdYtf-2EaLhD" alt="" width="100%" />
</div>
<div class="whiteBarLarge"></div>
<footer></footer>
</div>
</body>
</html>
My angular code on gitHub is using ngRoute, where the page1.html gets loaded in ngView.
I have input element in page1.html with its css set to 100% thus is expected to fill the width of the view but it is only taking about 70% or so.
If the main element width set to 100%, the footer buttons disappear, image 2.
Not sure why? Thanks
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 1%;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
main, .mainMenu {
position: absolute;
top: 2.5em;
}
main {
z-index: -2;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
}
footer > button {
font-size: 1em;
padding: 0.5em 1em;
}
input {
font-size: 1em;
padding: 0.25em;
margin: 0.25em;
width: 100%;
}
header, footer {
background-color: white;
}
.horizontal-style {
display: table;
width: 100%
}
.horizontal-style li {
display: table-cell;
padding: 2px;
}
.horizontal-style button {
display: block;
border: 1px solid black;
text-align: center;
background: #dfdfdf;
}
footer button {
width: 100%;
border-radius: 6px;
font-size: 1.5em;
}
.mainMenu {
padding-left: 1em;
background-color: #dfdfdf;
width: 70%;
border-radius: 0 6px 10px 0;
}
ul {
list-style-type: none;
}
ul li img {
vertical-align: middle;
padding-right: 0.25em;
}
a {
display: block;
padding: 1em 0em;
}
// page1.html
<section>
<input type="text" placeholder="page1-input1">
</section>
// index.html
<!doctype html>
<html lang="en" ng-app="appModule">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
<base href="http://localhost:63342/students/">
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.js"></script>-->
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="app.js"></script>
<script src="services/routing.js"></script>
<script src="services/menuToggle.js"></script>
<script src="controllers/menuToggleCtrl.js"></script>
<script src="controllers/mainMenuCtrl.js"></script>
<script src="controllers/page1Ctrl.js"></script>
<script src="controllers/page2Ctrl.js"></script>
</head>
<body>
<header ng-controller="MenuToggleCtrl">
<button class="menuLeft" type="button" ng-model="clicked" ng-click="menuToggle()">☰</button>
<label id="pageTitle" class="pageTitle">Select item from list</label>
<button class="menuRight" type="button">⋮</button>
</header>
<section class="mainMenu" ng-controller="MainMenuCtrl" ng-if="!clicked">
<ul>
<li ng-repeat="item in menuItems">
<a href="#/{{item.name}}">
<image ng-src="images/{{item.image}}.png"></image>
{{item.name}}
</a>
</li>
</ul>
</section>
<main ng-view></main>
<footer ng-controller="MenuToggleCtrl" ng-if="clicked">
<ul class="horizontal-style">
<li><button type="button">NO</button></li>
<li><button type="button">EXTRA</button></li>
<li><button type="button">YES</button></li>
</ul>
</footer>
</body>
</html>
Try to set the min-width of the input field to 100% something like this in your CSS code:
input {
font-size: 1em;
padding: 0.25em;
margin: 0.25em;
width: 100%;
min-width: 100%; }
this should solve the issue when input is not getting 100% width of its parent.
The input element is getting inserted inside 'main' container. Hence, set the width to 100% for the main tag.
main, .mainMenu {
position: absolute;
top: 2.5em;
width: 100%;
}
Here is the fix
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 1%;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
main, .mainMenu {
position: absolute;
top: 2.5em;
width: 100%;
}
main {
z-index: -2;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
}
footer > button {
font-size: 1em;
padding: 0.5em 1em;
}
input {
font-size: 1em;
padding: 0.25em;
margin: 0.25em;
width: 100%;
}
header, footer {
background-color: white;
}
.horizontal-style {
display: table;
width: 100%
}
.horizontal-style li {
display: table-cell;
padding: 2px;
}
.horizontal-style button {
display: block;
border: 1px solid black;
text-align: center;
background: #dfdfdf;
}
footer button {
width: 100%;
border-radius: 6px;
font-size: 1.5em;
}
.mainMenu {
padding-left: 1em;
background-color: #dfdfdf;
width: 70%;
border-radius: 0 6px 10px 0;
}
ul {
list-style-type: none;
}
ul li img {
vertical-align: middle;
padding-right: 0.25em;
}
a {
display: block;
padding: 1em 0em;
}
// index.html
<!doctype html>
<html lang="en" ng-app="appModule">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
<base href="http://localhost:63342/students/">
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.js"></script>-->
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="app.js"></script>
<script src="services/routing.js"></script>
<script src="services/menuToggle.js"></script>
<script src="controllers/menuToggleCtrl.js"></script>
<script src="controllers/mainMenuCtrl.js"></script>
<script src="controllers/page1Ctrl.js"></script>
<script src="controllers/page2Ctrl.js"></script>
</head>
<body>
<header ng-controller="MenuToggleCtrl">
<button class="menuLeft" type="button" ng-model="clicked" ng-click="menuToggle()">☰</button>
<label id="pageTitle" class="pageTitle">Select item from list</label>
<button class="menuRight" type="button">⋮</button>
</header>
<!--
<section class="mainMenu" ng-controller="MainMenuCtrl" ng-if="!clicked">
<ul>
<li ng-repeat="item in menuItems">
<a href="#/{{item.name}}">
<image ng-src="images/{{item.image}}.png"></image>
{{item.name}}
</a>
</li>
</ul>
</section>
-->
<main ng-view>
<section>
<input type="text" placeholder="page1-input1">
</section>
</main>
<footer ng-controller="MenuToggleCtrl" ng-if="clicked">
<ul class="horizontal-style">
<li><button type="button">NO</button></li>
<li><button type="button">EXTRA</button></li>
<li><button type="button">YES</button></li>
</ul>
</footer>
</body>
</html>
Well you mainMenu is set to width 70% and when you assign a child of mainMenu width 100% it takes the whole width of its parent, so eventually your input will be long as you parent container which means 70%. If you want it to be 100% of the screen you have to make the mainMenu 100%.
EDIT#2: Fixed it i have added to my code position: absolute; top 130px; display:block; thanks for all respondes ... code on codepen was fixed too .. :D
EDIT: So i fixed the content-holder problem now i have a new one i cant move him inside my main .... i have been trying vertical align and it doesnt work Codepen: http://codepen.io/anon/pen/VvKdrL
My new code :
header>a
{
font-size: 38px;
font-weight: 500;
border-bottom: 1px solid #888;
text-align: left;
color: #555;
font-family: "Monserat";
}
header
{
border-bottom:1px solid #888;
}
main
{
height: 530px;
display: block;
margin-top: -40px;
}
ul
{
list-style-type: none;
}
li a
{
font-size: 22px;
font-family: Helvetica;
margin: 4px;
font-weight: 500;
font-family: "Roboto";
line-height: 34px;
color: #222;
}
a
{
text-decoration: none;
}
li::before
{
content: "➢";
}
.center
{
width: 960px;
margin: 0 auto;
}
.content-holder
{
position: absolute;
width: 250px;
height: 200px;
top: 130px;
background: #eee;
display: block;
z-index: 2;
}
.background
{
z-index: 1;
background-repeat: no-repeat;
}
.footer
{
border-top: 1px solid #888;
height: 20px;
content:
}
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:500,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="center">
Name
</header>
<main class="center sizemain">
<div class="background"></div>
<div class="content-holder">
<ul>
<li>
List
</li>
<li>
List
</li>
<li>
List
</li>
<li>
List
</li>
<li>
List
</li>
</ul>
</div>
</main>
<footer class="footer">
</footer>
</body>
</html>
Thanks for respondes
You need to comment out both the margin-top and the margin. Margin applies 50px to every side.
.content-holder {
width: 250px;
height: 190px;
background: #eee;
/* margin: 30px; */
/* margin-top: 50px; */
vertical-align: 50px;
z-index: 2;
}
See: http://www.w3schools.com/css/css_margin.asp