Positioning a container next to its menu
up vote
6
down vote
favorite
I'm a beginner in CSS and need help with a suggestion.
I'm working on a project, in which I managed to position container_main right next to container_menu giving the remaining dimension of the screen, giving it relative position and floating it to the right. container_menu has a dimension and a fixed position specified.
body {
font-size: 16px;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
height: 100%;
position: relative;
}
/*Contenedor de la barra de navegacion: Columna*/
.container_menu {
height: 100%;
width: 18rem;
/*display: inline-block;*/
position: fixed;
background-color: gray;
}
/*Barra de navelación: Elemento <ul>*/
.container_menu .menu {
width: 100%;
padding: 0;
}
.container_menu ul {
list-style-type: none;
}
.container_menu .menu li a{
color: white;
display: block;
padding: 1rem 1.5rem;
background-color: gray;
}
.container_menu .menu li a:hover {
color: white;
background-color: black;
}
.container_main {
height: 100%;
width: 66.31rem;
background-color: black;
position: relative;
float: right;
}
p {
color: white;
background-color: blue;
width: 30rem;
height: 20rem;
border: .7rem solid white;;
padding: 5rem;
margin: 10rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300i,400" rel="stylesheet">
<title>MDN - Mockup</title>
</head>
<body class="wrapper">
<nav class="container_menu">
<ul class="menu">
<li><a href="#"><i class="fa fa-pencil"></i>Teaching Activities</a></li>
<li><a href="#">Web Literacy</a></li>
<li><a href="#">Leadership Opportunities</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Comunity</a></li>
</ul>
</nav>
<main class="container_main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
<<footer></footer>
</body>
</html>I would like to know if the characteristics I gave the containers are ideal, or if there is a better way to get the same result using other properties.
beginner html css layout
edited Dec 24 '16 at 13:02
200_success
127k15148411
asked Nov 23 '16 at 19:23
user123855
311
add a comment |
up vote
6
down vote
favorite
I'm a beginner in CSS and need help with a suggestion.
I'm working on a project, in which I managed to position container_main right next to container_menu giving the remaining dimension of the screen, giving it relative position and floating it to the right. container_menu has a dimension and a fixed position specified.
body {
font-size: 16px;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
height: 100%;
position: relative;
}
/*Contenedor de la barra de navegacion: Columna*/
.container_menu {
height: 100%;
width: 18rem;
/*display: inline-block;*/
position: fixed;
background-color: gray;
}
/*Barra de navelación: Elemento <ul>*/
.container_menu .menu {
width: 100%;
padding: 0;
}
.container_menu ul {
list-style-type: none;
}
.container_menu .menu li a{
color: white;
display: block;
padding: 1rem 1.5rem;
background-color: gray;
}
.container_menu .menu li a:hover {
color: white;
background-color: black;
}
.container_main {
height: 100%;
width: 66.31rem;
background-color: black;
position: relative;
float: right;
}
p {
color: white;
background-color: blue;
width: 30rem;
height: 20rem;
border: .7rem solid white;;
padding: 5rem;
margin: 10rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300i,400" rel="stylesheet">
<title>MDN - Mockup</title>
</head>
<body class="wrapper">
<nav class="container_menu">
<ul class="menu">
<li><a href="#"><i class="fa fa-pencil"></i>Teaching Activities</a></li>
<li><a href="#">Web Literacy</a></li>
<li><a href="#">Leadership Opportunities</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Comunity</a></li>
</ul>
</nav>
<main class="container_main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
<<footer></footer>
</body>
</html>I would like to know if the characteristics I gave the containers are ideal, or if there is a better way to get the same result using other properties.
beginner html css layout
edited Dec 24 '16 at 13:02
200_success
127k15148411
asked Nov 23 '16 at 19:23
user123855
311
add a comment |
up vote
6
down vote
favorite
up vote
6
down vote
favorite
I'm a beginner in CSS and need help with a suggestion.
I'm working on a project, in which I managed to position container_main right next to container_menu giving the remaining dimension of the screen, giving it relative position and floating it to the right. container_menu has a dimension and a fixed position specified.
body {
font-size: 16px;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
height: 100%;
position: relative;
}
/*Contenedor de la barra de navegacion: Columna*/
.container_menu {
height: 100%;
width: 18rem;
/*display: inline-block;*/
position: fixed;
background-color: gray;
}
/*Barra de navelación: Elemento <ul>*/
.container_menu .menu {
width: 100%;
padding: 0;
}
.container_menu ul {
list-style-type: none;
}
.container_menu .menu li a{
color: white;
display: block;
padding: 1rem 1.5rem;
background-color: gray;
}
.container_menu .menu li a:hover {
color: white;
background-color: black;
}
.container_main {
height: 100%;
width: 66.31rem;
background-color: black;
position: relative;
float: right;
}
p {
color: white;
background-color: blue;
width: 30rem;
height: 20rem;
border: .7rem solid white;;
padding: 5rem;
margin: 10rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300i,400" rel="stylesheet">
<title>MDN - Mockup</title>
</head>
<body class="wrapper">
<nav class="container_menu">
<ul class="menu">
<li><a href="#"><i class="fa fa-pencil"></i>Teaching Activities</a></li>
<li><a href="#">Web Literacy</a></li>
<li><a href="#">Leadership Opportunities</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Comunity</a></li>
</ul>
</nav>
<main class="container_main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
<<footer></footer>
</body>
</html>I would like to know if the characteristics I gave the containers are ideal, or if there is a better way to get the same result using other properties.
beginner html css layout
edited Dec 24 '16 at 13:02
200_success
127k15148411
asked Nov 23 '16 at 19:23
user123855
311
I'm a beginner in CSS and need help with a suggestion.
I'm working on a project, in which I managed to position container_main right next to container_menu giving the remaining dimension of the screen, giving it relative position and floating it to the right. container_menu has a dimension and a fixed position specified.
body {
font-size: 16px;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
height: 100%;
position: relative;
}
/*Contenedor de la barra de navegacion: Columna*/
.container_menu {
height: 100%;
width: 18rem;
/*display: inline-block;*/
position: fixed;
background-color: gray;
}
/*Barra de navelación: Elemento <ul>*/
.container_menu .menu {
width: 100%;
padding: 0;
}
.container_menu ul {
list-style-type: none;
}
.container_menu .menu li a{
color: white;
display: block;
padding: 1rem 1.5rem;
background-color: gray;
}
.container_menu .menu li a:hover {
color: white;
background-color: black;
}
.container_main {
height: 100%;
width: 66.31rem;
background-color: black;
position: relative;
float: right;
}
p {
color: white;
background-color: blue;
width: 30rem;
height: 20rem;
border: .7rem solid white;;
padding: 5rem;
margin: 10rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300i,400" rel="stylesheet">
<title>MDN - Mockup</title>
</head>
<body class="wrapper">
<nav class="container_menu">
<ul class="menu">
<li><a href="#"><i class="fa fa-pencil"></i>Teaching Activities</a></li>
<li><a href="#">Web Literacy</a></li>
<li><a href="#">Leadership Opportunities</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Comunity</a></li>
</ul>
</nav>
<main class="container_main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
<<footer></footer>
</body>
</html>I would like to know if the characteristics I gave the containers are ideal, or if there is a better way to get the same result using other properties.
body {
font-size: 16px;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
height: 100%;
position: relative;
}
/*Contenedor de la barra de navegacion: Columna*/
.container_menu {
height: 100%;
width: 18rem;
/*display: inline-block;*/
position: fixed;
background-color: gray;
}
/*Barra de navelación: Elemento <ul>*/
.container_menu .menu {
width: 100%;
padding: 0;
}
.container_menu ul {
list-style-type: none;
}
.container_menu .menu li a{
color: white;
display: block;
padding: 1rem 1.5rem;
background-color: gray;
}
.container_menu .menu li a:hover {
color: white;
background-color: black;
}
.container_main {
height: 100%;
width: 66.31rem;
background-color: black;
position: relative;
float: right;
}
p {
color: white;
background-color: blue;
width: 30rem;
height: 20rem;
border: .7rem solid white;;
padding: 5rem;
margin: 10rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300i,400" rel="stylesheet">
<title>MDN - Mockup</title>
</head>
<body class="wrapper">
<nav class="container_menu">
<ul class="menu">
<li><a href="#"><i class="fa fa-pencil"></i>Teaching Activities</a></li>
<li><a href="#">Web Literacy</a></li>
<li><a href="#">Leadership Opportunities</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Comunity</a></li>
</ul>
</nav>
<main class="container_main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
<<footer></footer>
</body>
</html>body {
font-size: 16px;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
height: 100%;
position: relative;
}
/*Contenedor de la barra de navegacion: Columna*/
.container_menu {
height: 100%;
width: 18rem;
/*display: inline-block;*/
position: fixed;
background-color: gray;
}
/*Barra de navelación: Elemento <ul>*/
.container_menu .menu {
width: 100%;
padding: 0;
}
.container_menu ul {
list-style-type: none;
}
.container_menu .menu li a{
color: white;
display: block;
padding: 1rem 1.5rem;
background-color: gray;
}
.container_menu .menu li a:hover {
color: white;
background-color: black;
}
.container_main {
height: 100%;
width: 66.31rem;
background-color: black;
position: relative;
float: right;
}
p {
color: white;
background-color: blue;
width: 30rem;
height: 20rem;
border: .7rem solid white;;
padding: 5rem;
margin: 10rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300i,400" rel="stylesheet">
<title>MDN - Mockup</title>
</head>
<body class="wrapper">
<nav class="container_menu">
<ul class="menu">
<li><a href="#"><i class="fa fa-pencil"></i>Teaching Activities</a></li>
<li><a href="#">Web Literacy</a></li>
<li><a href="#">Leadership Opportunities</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Comunity</a></li>
</ul>
</nav>
<main class="container_main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
<<footer></footer>
</body>
</html>beginner html css layout
beginner html css layout
edited Dec 24 '16 at 13:02
200_success
127k15148411
asked Nov 23 '16 at 19:23
user123855
311
edited Dec 24 '16 at 13:02
200_success
127k15148411
asked Nov 23 '16 at 19:23
user123855
311
edited Dec 24 '16 at 13:02
200_success
127k15148411
edited Dec 24 '16 at 13:02
200_success
127k15148411
edited Dec 24 '16 at 13:02
200_success
127k15148411
127k15148411
asked Nov 23 '16 at 19:23
user123855
311
asked Nov 23 '16 at 19:23
user123855
311
asked Nov 23 '16 at 19:23
user123855
311
311
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
I have trouble to realize what were your initial whishes, since the current choices lead to some inconveniences (as it already appears in the reduced "snippet box").
Here is what I can|can't understand:
- You want to keep menu always visible and located at the same place regardless how user scrolls.
So usingcontainer_menu {position: fixed;}is ok. - You want to have main container occuping the rightmost place, in front of
container_menuand starting at the top of the window.
So usingcontainer_main {float: right;}is ok. - But why did you also set its postion to relative? Without adding some of
top|left|right|bottomproperties it changes nothing to its own location. In the other hand, it might be useful to constraint its<p>childs if they had for examplefixedposition but they don't.
So usingcontainer_main {position: relative;}is useless. - Since you set fixed
widthvalues forcontainer_mainand its<p>children, depending on the window width it may result in a (likely) unwanted layout: as soon as the window is small enough,container_mainpartially or totall overwritescontainer_menu.
So regarding only this point (but see also below) you should addcontainer_menu {z-index: 1;}(or any other
convenient value, depending on other elements not currently showed). - For the same reason, if the window width is smaller than the fixed
<p>children, their content becomes cropped.
So you had better using a totally different technique, such as settingcontainer_menupostion to fixed, with a left margin equal tocontainer_menuwidth, and using percentage forcontainer_mainwidth
Here is an example using the above technique:
body {
font-size: 16px;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
height: 100%;
position: relative;
}
/*Contenedor de la barra de navegacion: Columna*/
.container_menu {
height: 100%;
width: 18rem;
/*display: inline-block;*/
position: fixed;
background-color: gray;
}
/*Barra de navelación: Elemento <ul>*/
.container_menu .menu {
width: 100%;
padding: 0;
}
.container_menu ul {
list-style-type: none;
}
.container_menu .menu li a{
color: white;
display: block;
padding: 1rem 1.5rem;
background-color: gray;
}
.container_menu .menu li a:hover {
color: white;
background-color: black;
}
.container_main {
height: 100%;
margin-left: 18rem;
background-color: black;
position: fixed;
overflow-y: scroll;
}
p {
color: white;
background-color: blue;
width: 60%;
border: .7rem solid white;;
padding: 5rem;
margin: 10rem auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300i,400" rel="stylesheet">
<title>MDN - Mockup</title>
</head>
<body class="wrapper">
<nav class="container_menu">
<ul class="menu">
<li><a href="#"><i class="fa fa-pencil"></i>Teaching Activities</a></li>
<li><a href="#">Web Literacy</a></li>
<li><a href="#">Leadership Opportunities</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Comunity</a></li>
</ul>
</nav>
<main class="container_main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
<<footer></footer>
</body>
</html>answered Nov 24 '16 at 0:21
cFreed
2,463719
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
I have trouble to realize what were your initial whishes, since the current choices lead to some inconveniences (as it already appears in the reduced "snippet box").
Here is what I can|can't understand:
- You want to keep menu always visible and located at the same place regardless how user scrolls.
So usingcontainer_menu {position: fixed;}is ok. - You want to have main container occuping the rightmost place, in front of
container_menuand starting at the top of the window.
So usingcontainer_main {float: right;}is ok. - But why did you also set its postion to relative? Without adding some of
top|left|right|bottomproperties it changes nothing to its own location. In the other hand, it might be useful to constraint its<p>childs if they had for examplefixedposition but they don't.
So usingcontainer_main {position: relative;}is useless. - Since you set fixed
widthvalues forcontainer_mainand its<p>children, depending on the window width it may result in a (likely) unwanted layout: as soon as the window is small enough,container_mainpartially or totall overwritescontainer_menu.
So regarding only this point (but see also below) you should addcontainer_menu {z-index: 1;}(or any other
convenient value, depending on other elements not currently showed). - For the same reason, if the window width is smaller than the fixed
<p>children, their content becomes cropped.
So you had better using a totally different technique, such as settingcontainer_menupostion to fixed, with a left margin equal tocontainer_menuwidth, and using percentage forcontainer_mainwidth
Here is an example using the above technique:
body {
font-size: 16px;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
height: 100%;
position: relative;
}
/*Contenedor de la barra de navegacion: Columna*/
.container_menu {
height: 100%;
width: 18rem;
/*display: inline-block;*/
position: fixed;
background-color: gray;
}
/*Barra de navelación: Elemento <ul>*/
.container_menu .menu {
width: 100%;
padding: 0;
}
.container_menu ul {
list-style-type: none;
}
.container_menu .menu li a{
color: white;
display: block;
padding: 1rem 1.5rem;
background-color: gray;
}
.container_menu .menu li a:hover {
color: white;
background-color: black;
}
.container_main {
height: 100%;
margin-left: 18rem;
background-color: black;
position: fixed;
overflow-y: scroll;
}
p {
color: white;
background-color: blue;
width: 60%;
border: .7rem solid white;;
padding: 5rem;
margin: 10rem auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300i,400" rel="stylesheet">
<title>MDN - Mockup</title>
</head>
<body class="wrapper">
<nav class="container_menu">
<ul class="menu">
<li><a href="#"><i class="fa fa-pencil"></i>Teaching Activities</a></li>
<li><a href="#">Web Literacy</a></li>
<li><a href="#">Leadership Opportunities</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Comunity</a></li>
</ul>
</nav>
<main class="container_main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
<<footer></footer>
</body>
</html>answered Nov 24 '16 at 0:21
cFreed
2,463719
add a comment |
up vote
0
down vote
I have trouble to realize what were your initial whishes, since the current choices lead to some inconveniences (as it already appears in the reduced "snippet box").
Here is what I can|can't understand:
- You want to keep menu always visible and located at the same place regardless how user scrolls.
So usingcontainer_menu {position: fixed;}is ok. - You want to have main container occuping the rightmost place, in front of
container_menuand starting at the top of the window.
So usingcontainer_main {float: right;}is ok. - But why did you also set its postion to relative? Without adding some of
top|left|right|bottomproperties it changes nothing to its own location. In the other hand, it might be useful to constraint its<p>childs if they had for examplefixedposition but they don't.
So usingcontainer_main {position: relative;}is useless. - Since you set fixed
widthvalues forcontainer_mainand its<p>children, depending on the window width it may result in a (likely) unwanted layout: as soon as the window is small enough,container_mainpartially or totall overwritescontainer_menu.
So regarding only this point (but see also below) you should addcontainer_menu {z-index: 1;}(or any other
convenient value, depending on other elements not currently showed). - For the same reason, if the window width is smaller than the fixed
<p>children, their content becomes cropped.
So you had better using a totally different technique, such as settingcontainer_menupostion to fixed, with a left margin equal tocontainer_menuwidth, and using percentage forcontainer_mainwidth
Here is an example using the above technique:
body {
font-size: 16px;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
height: 100%;
position: relative;
}
/*Contenedor de la barra de navegacion: Columna*/
.container_menu {
height: 100%;
width: 18rem;
/*display: inline-block;*/
position: fixed;
background-color: gray;
}
/*Barra de navelación: Elemento <ul>*/
.container_menu .menu {
width: 100%;
padding: 0;
}
.container_menu ul {
list-style-type: none;
}
.container_menu .menu li a{
color: white;
display: block;
padding: 1rem 1.5rem;
background-color: gray;
}
.container_menu .menu li a:hover {
color: white;
background-color: black;
}
.container_main {
height: 100%;
margin-left: 18rem;
background-color: black;
position: fixed;
overflow-y: scroll;
}
p {
color: white;
background-color: blue;
width: 60%;
border: .7rem solid white;;
padding: 5rem;
margin: 10rem auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300i,400" rel="stylesheet">
<title>MDN - Mockup</title>
</head>
<body class="wrapper">
<nav class="container_menu">
<ul class="menu">
<li><a href="#"><i class="fa fa-pencil"></i>Teaching Activities</a></li>
<li><a href="#">Web Literacy</a></li>
<li><a href="#">Leadership Opportunities</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Comunity</a></li>
</ul>
</nav>
<main class="container_main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
<<footer></footer>
</body>
</html>answered Nov 24 '16 at 0:21
cFreed
2,463719
add a comment |
up vote
0
down vote
up vote
0
down vote
I have trouble to realize what were your initial whishes, since the current choices lead to some inconveniences (as it already appears in the reduced "snippet box").
Here is what I can|can't understand:
- You want to keep menu always visible and located at the same place regardless how user scrolls.
So usingcontainer_menu {position: fixed;}is ok. - You want to have main container occuping the rightmost place, in front of
container_menuand starting at the top of the window.
So usingcontainer_main {float: right;}is ok. - But why did you also set its postion to relative? Without adding some of
top|left|right|bottomproperties it changes nothing to its own location. In the other hand, it might be useful to constraint its<p>childs if they had for examplefixedposition but they don't.
So usingcontainer_main {position: relative;}is useless. - Since you set fixed
widthvalues forcontainer_mainand its<p>children, depending on the window width it may result in a (likely) unwanted layout: as soon as the window is small enough,container_mainpartially or totall overwritescontainer_menu.
So regarding only this point (but see also below) you should addcontainer_menu {z-index: 1;}(or any other
convenient value, depending on other elements not currently showed). - For the same reason, if the window width is smaller than the fixed
<p>children, their content becomes cropped.
So you had better using a totally different technique, such as settingcontainer_menupostion to fixed, with a left margin equal tocontainer_menuwidth, and using percentage forcontainer_mainwidth
Here is an example using the above technique:
body {
font-size: 16px;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
height: 100%;
position: relative;
}
/*Contenedor de la barra de navegacion: Columna*/
.container_menu {
height: 100%;
width: 18rem;
/*display: inline-block;*/
position: fixed;
background-color: gray;
}
/*Barra de navelación: Elemento <ul>*/
.container_menu .menu {
width: 100%;
padding: 0;
}
.container_menu ul {
list-style-type: none;
}
.container_menu .menu li a{
color: white;
display: block;
padding: 1rem 1.5rem;
background-color: gray;
}
.container_menu .menu li a:hover {
color: white;
background-color: black;
}
.container_main {
height: 100%;
margin-left: 18rem;
background-color: black;
position: fixed;
overflow-y: scroll;
}
p {
color: white;
background-color: blue;
width: 60%;
border: .7rem solid white;;
padding: 5rem;
margin: 10rem auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300i,400" rel="stylesheet">
<title>MDN - Mockup</title>
</head>
<body class="wrapper">
<nav class="container_menu">
<ul class="menu">
<li><a href="#"><i class="fa fa-pencil"></i>Teaching Activities</a></li>
<li><a href="#">Web Literacy</a></li>
<li><a href="#">Leadership Opportunities</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Comunity</a></li>
</ul>
</nav>
<main class="container_main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
<<footer></footer>
</body>
</html>answered Nov 24 '16 at 0:21
cFreed
2,463719
I have trouble to realize what were your initial whishes, since the current choices lead to some inconveniences (as it already appears in the reduced "snippet box").
Here is what I can|can't understand:
- You want to keep menu always visible and located at the same place regardless how user scrolls.
So usingcontainer_menu {position: fixed;}is ok. - You want to have main container occuping the rightmost place, in front of
container_menuand starting at the top of the window.
So usingcontainer_main {float: right;}is ok. - But why did you also set its postion to relative? Without adding some of
top|left|right|bottomproperties it changes nothing to its own location. In the other hand, it might be useful to constraint its<p>childs if they had for examplefixedposition but they don't.
So usingcontainer_main {position: relative;}is useless. - Since you set fixed
widthvalues forcontainer_mainand its<p>children, depending on the window width it may result in a (likely) unwanted layout: as soon as the window is small enough,container_mainpartially or totall overwritescontainer_menu.
So regarding only this point (but see also below) you should addcontainer_menu {z-index: 1;}(or any other
convenient value, depending on other elements not currently showed). - For the same reason, if the window width is smaller than the fixed
<p>children, their content becomes cropped.
So you had better using a totally different technique, such as settingcontainer_menupostion to fixed, with a left margin equal tocontainer_menuwidth, and using percentage forcontainer_mainwidth
Here is an example using the above technique:
body {
font-size: 16px;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
height: 100%;
position: relative;
}
/*Contenedor de la barra de navegacion: Columna*/
.container_menu {
height: 100%;
width: 18rem;
/*display: inline-block;*/
position: fixed;
background-color: gray;
}
/*Barra de navelación: Elemento <ul>*/
.container_menu .menu {
width: 100%;
padding: 0;
}
.container_menu ul {
list-style-type: none;
}
.container_menu .menu li a{
color: white;
display: block;
padding: 1rem 1.5rem;
background-color: gray;
}
.container_menu .menu li a:hover {
color: white;
background-color: black;
}
.container_main {
height: 100%;
margin-left: 18rem;
background-color: black;
position: fixed;
overflow-y: scroll;
}
p {
color: white;
background-color: blue;
width: 60%;
border: .7rem solid white;;
padding: 5rem;
margin: 10rem auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300i,400" rel="stylesheet">
<title>MDN - Mockup</title>
</head>
<body class="wrapper">
<nav class="container_menu">
<ul class="menu">
<li><a href="#"><i class="fa fa-pencil"></i>Teaching Activities</a></li>
<li><a href="#">Web Literacy</a></li>
<li><a href="#">Leadership Opportunities</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Comunity</a></li>
</ul>
</nav>
<main class="container_main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
<<footer></footer>
</body>
</html>body {
font-size: 16px;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
height: 100%;
position: relative;
}
/*Contenedor de la barra de navegacion: Columna*/
.container_menu {
height: 100%;
width: 18rem;
/*display: inline-block;*/
position: fixed;
background-color: gray;
}
/*Barra de navelación: Elemento <ul>*/
.container_menu .menu {
width: 100%;
padding: 0;
}
.container_menu ul {
list-style-type: none;
}
.container_menu .menu li a{
color: white;
display: block;
padding: 1rem 1.5rem;
background-color: gray;
}
.container_menu .menu li a:hover {
color: white;
background-color: black;
}
.container_main {
height: 100%;
margin-left: 18rem;
background-color: black;
position: fixed;
overflow-y: scroll;
}
p {
color: white;
background-color: blue;
width: 60%;
border: .7rem solid white;;
padding: 5rem;
margin: 10rem auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300i,400" rel="stylesheet">
<title>MDN - Mockup</title>
</head>
<body class="wrapper">
<nav class="container_menu">
<ul class="menu">
<li><a href="#"><i class="fa fa-pencil"></i>Teaching Activities</a></li>
<li><a href="#">Web Literacy</a></li>
<li><a href="#">Leadership Opportunities</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Comunity</a></li>
</ul>
</nav>
<main class="container_main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
<<footer></footer>
</body>
</html>body {
font-size: 16px;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
height: 100%;
position: relative;
}
/*Contenedor de la barra de navegacion: Columna*/
.container_menu {
height: 100%;
width: 18rem;
/*display: inline-block;*/
position: fixed;
background-color: gray;
}
/*Barra de navelación: Elemento <ul>*/
.container_menu .menu {
width: 100%;
padding: 0;
}
.container_menu ul {
list-style-type: none;
}
.container_menu .menu li a{
color: white;
display: block;
padding: 1rem 1.5rem;
background-color: gray;
}
.container_menu .menu li a:hover {
color: white;
background-color: black;
}
.container_main {
height: 100%;
margin-left: 18rem;
background-color: black;
position: fixed;
overflow-y: scroll;
}
p {
color: white;
background-color: blue;
width: 60%;
border: .7rem solid white;;
padding: 5rem;
margin: 10rem auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300i,400" rel="stylesheet">
<title>MDN - Mockup</title>
</head>
<body class="wrapper">
<nav class="container_menu">
<ul class="menu">
<li><a href="#"><i class="fa fa-pencil"></i>Teaching Activities</a></li>
<li><a href="#">Web Literacy</a></li>
<li><a href="#">Leadership Opportunities</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Comunity</a></li>
</ul>
</nav>
<main class="container_main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
<<footer></footer>
</body>
</html>answered Nov 24 '16 at 0:21
cFreed
2,463719
answered Nov 24 '16 at 0:21
cFreed
2,463719
answered Nov 24 '16 at 0:21
cFreed
2,463719
answered Nov 24 '16 at 0:21
cFreed
2,463719
2,463719
add a comment |
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f147920%2fpositioning-a-container-next-to-its-menu%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
