The mobile application has a page that shows a room with a few fix features and several that can be conditionally displayed. The display (portrait mode only) is large enough that scrolling is not required.
Now, I want to have a similar display except that there are several row of controls that affect which items are displayed. The number of controls will vary. All of the images (*.svg) are 360 x 242 pixels.
How can I make all of the images overlap, even when scrolling?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Scroll Room</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="merged_mobile.min.css" media="screen">
</head>
<body>
<div class="content_view">
<!-- Channel Mapping -->
<div class="page">
<div class="page_name">
<p>Room View</p>
</div>
<div class="ul_wrapper">
<ul>
<li>
<button id="height_1" class="nav-side-menu-item">
<span>Option 1</span>
<img src="arrow.png" />
<span></span>
</button>
</li>
<li>
<button id="height_2" class="nav-side-menu-item">
<span>Option 2</span>
<img src="arrow.png" />
<span></span>
</button>
</li>
<li>
<div class="nav-side-menu-item-divider">Divider</div>
</li>
<li>
<button id="option_a" class="nav-side-menu-item">
<span>Alpha</span>
<img src="arrow.png" />
<span></span>
</button>
</li>
<li>
<button id="option_b" class="nav-side-menu-item">
<span>Beta</span>
<img src="arrow.png" />
<span></span>
</button>
</li>
<li>
<div class="nav-side-menu-item-divider">Room Diagram</div>
</li>
<li>
<div class="moving_room">
<img class="room_base_img" src="background.svg" alt="room background">
<img class="room_diagram_img" src="walls_transparent.svg" alt="transparent walls">
<img class="room_diagram_img" src="table.svg" alt="table">
<img class="room_diagram_img" src="couch.svg" alt="couch">
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
merged_mobile.min.css
:root{
--row-height: 67px;
--highlight-color: #077bff;
--tertiary-background-color: #404040;
--primary-font-color: white;
--secondary-font-color: #ccc;
--header-color: #fff;
}
/* Thin */
#font-face {
font-family: "SF Display Thin";
font-display: block;
src: url("../fonts/SF_Pro_Display_Thin.woff2");
}
/* Regular */
#font-face {
font-family: "SF Display Regular";
font-display: block;
src: url("../fonts/SF_Pro_Display_Regular.woff2");
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
min-width: 300px;
}
body{
font-family: 'SF Display Regular', sans-serif;
height: 100%;
background-color: black;
color: white;
padding: 0;
margin: 0;
caret-color: orange;
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none;
}
p {
margin: 0;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
border: none;
outline-style: none;
}
li {
padding: 0;
margin: 0;
}
button {
height: 36px;
width: 100%;
cursor: pointer;
padding: 0;
margin: 0;
font-weight: 200;
}
::-webkit-scrollbar-track
{
background-color: #404040;
}
::-webkit-scrollbar
{
width: 6px;
}
::-webkit-scrollbar-thumb
{
background: dimgray;
}
.content_view {
overflow-x: hidden;
height: 100%;
}
#room_diagram_button{
background-color: red;
}
#room_diagram_button img{
width: 25px;
float: right;
margin-top: 22px;
padding-right: 10px;
}
.room_diagram {
position: relative;
}
.room_base_img {
height: 290px;
position: relative;
width: 100%;
left: 0;
}
.room_diagram_img {
height: 290px;
position: absolute;
width: 100%;
left: 0;
}
.room_diagram_img.speaker {
display: none;
}
.moving_room {
height: 290px;
/*position: absolute;*/
width: 100%;
/*left: 0;*/
}
.nav-side-menu-item {
color: var(--primary-font-color);
font-size: 20px;
height: var(--row-height);
background-color: transparent;
border: none;
}
.nav-side-menu-item span:first-child{
float: left;
height: 100%;
white-space: nowrap;
width: calc(100% - 150px);
text-align: left;
margin-left: 15px;
overflow: hidden;
text-overflow: ellipsis;
line-height: var(--row-height);
}
.nav-side-menu-item span:nth-child(2), .nav-side-menu-item span:nth-child(3) {
font-size: 14px;
padding-right: 10px;
float:right;
width: 90px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
background-color: transparent;
text-align: right;
height: var(--row-height);
line-height: var(--row-height);
}
.nav-side-menu-item img{
width: 22px;
height: 22px;
float: right;
margin-top: 22px;
padding-right: 10px;
}
.nav-side-menu-item-divider {
text-decoration: none;
color: var(--primary-font-color);
font-size: 20px;
text-align: center;
line-height: normal;
background-color: dimgray;
cursor: auto;
padding-top: 5px;
padding-bottom: 5px;
}
.page {
width: 100%;
height: 100%;
position: absolute;
}
.page_name{
position: relative;
background: #404040;
height: 50px;
}
.page_name p{
font-size: 24px;
line-height:50px;
height: 50px;
white-space: nowrap;
text-align: center;
min-width: 320px;
}
.back_button img{
width: 30px;
height: 30px;
}
.back_button{
height: 50px;
width: 50px;
position: absolute;
border: none;
outline-style: none;
background-color: var(--header-color);
}
.page_contents{
padding: 15px;
}
.ul_wrapper {
height: -moz-calc(100% - 50px);
height: -webkit-calc(100% - 50px);
height: calc(100% - 50px);
display: block;
overflow: auto;
}
.ul_wrapper li {
line-height: 0;
border-bottom: 1px white solid;
}
I added id attributes so that I could manipulate the controls with jQuery.
<li>
<div id="moving_room">
<img class="room_base_img" id="roombg" src="background.svg" alt="room background">
<img class="room_moveable_img" id="roomwalls" src="walls_transparent.svg" alt="transparent walls">
<img class="room_moveable_img" id="roomt" src="table.svg" alt="table">
<img class="room_moveable_img" id="roomc" src="couch.svg" alt="couch">
</div>
</li>
And some new styles.
.room_base_img {
position: relative;
width: 100%;
height: auto;
}
.room_moveable_img {
height: auto;
position: relative;
width: 100%;
}
I determined the height of the top image and applied it to the images below it.
var imght = $("#roombg").height();
$("#roomwalls").attr("style", "top: _px".stuffus(0 - imght));
$("#roomt").attr("style", "top: _px".stuffus(0 - 2 * imght));
$("#roomc").attr("style", "top: _px".stuffus(0 - 3 * imght));
The last image had to be scrolled 6000px but it works.
Related
1 2 I am trying to make the Google Search Page in HTML & CSS. However, when I try to center the Google Logo, the image re-adjusts itself when the device width is changed. I've been stuck in this section for quite a while now, and cannot seem to find any answers to my inquiry. Some assistance would be appreciated.
body {
width: 100%;
max-width: 100%;
background-color: #202124;
overflow: hidden;
}
.navbar {
display: flex;
float: right;
position: relative;
word-spacing: 11px;
padding-top: 13px;
padding-right: 129px;
}
.navbartxt a {
text-decoration: none;
color: white;
font-family: arial, sans-serif;
font-size: 13px;
}
.navbartxt a:hover {
text-decoration: underline;
}
.dots {
width: 16px;
position: absolute;
margin-left: 123px;
margin-top: 1px;
}
.pfp {
position: absolute;
border-radius: 100%;
margin-top: -7px;
margin-left: 163px;
}
.searchbox {
display: flex;
position: absolute;
}
.searchsections {
width: 100%;
max-width: 100%;
display: flex;
position: relative;
}
.Google {
position: absolute;
margin-top: 72px;
margin-left: 240px;
}
<nav>
<div class="navbar">
<div class="navbartxt">
Gmail
Images
</div>
<img class="dots" src="/CSS/CSS Images/9 dots.png" />
<img class="pfp" src="/CSS/CSS Images/MyPfpGoogle.png" />
</div>
</nav>
<section class="searchsections">
<div class="Google">
<img src="/CSS/CSS Images/Google Logo.png" />
</div>
</section>
Just replace your .Google class with this :-
.Google {
display: flex;
justify-content: center; /* for horizontal center */
align-items: center; /* For Vertical Center */
}
.Google > img {
display: block;
}
How it works learn Here
I'm trying to altar two buttons (Easy, Hard) on a web app I'm building. I am trying to alter them to remove their borders, and when a button is selected, I want to background to flow up into the header as a visual indication for being selected.
Note: I am linking Bootstrap 4 at the moment.
Current Visual:
Desired Visual:
body {
background-color: #232323;
}
.header {
text-align: center;
color: white;
padding: 1.5rem;
background-color: #66b0c4;
}
.header h1 {
margin: 0;
}
.square {
width: 30%;
background: purple;
padding-bottom: 30%;
float: left;
margin: 1.66%;
}
#container {
max-width: 600px;
margin: 0 auto;
}
#stripe {
background-color: white ;
height: 30px;
text-align: center;
color: black;
}
.selected {
background:#66b0c4;
border: none;
}
<div class="header">
<h1>The Great <br><span id="colorDisplay">RGB</span><be>
Color Game</h1>
</div>
<div id="stripe">
<button id="reset">New Colors</button>
<span id="message"></span>
<button id="easyBtn">Easy</button>
<button id="hardBtn" class="selected">Hard</button>
</div>
I hope this can help you.
body {
background-color: #232323;
}
.header {
text-align: center;
color: white;
padding: 1.5rem;
background-color: #66b0c4;
}
.header h1 {
margin: 0;
}
.square {
width: 30%;
background: purple;
padding-bottom: 30%;
float: left;
margin: 1.66%;
}
#container {
max-width: 600px;
margin: 0 auto;
}
#stripe {
background-color: white ;
height: 30px;
text-align: center;
color: black;
padding-top: 5px;
}
.selected {
background:#66b0c4;
border: 0;
padding: 5px;
position: relative;
}
.selected::before {
position: absolute;
content: '';
top: -10px;
left: 0;
width: 100%;
background-color: #66b0c4;
height: 10px;
}
<div class="header">
<h1>The Great <br><span id="colorDisplay">RGB</span><be>
Color Game</h1>
</div>
<div id="stripe">
<button id="reset">New Colors</button>
<span id="message"></span>
<button id="easyBtn">Easy</button>
<button id="hardBtn" class="selected">Hard</button>
</div>
Solved by adjusting the height of background on the selected class. Also solved the selection issue with
*:focus {
outline: 0 !important;
}
CSS Now:
.selected {
background:#66b0c4;
border: none;
height: 30px;
}
*:focus {
outline: 0 !important;
}
I'm trying to recreate this
My current code is this
The issue is that I want the balance div to stretch as the balance gets bigger, as currently it exceeds its bounds and is shifted underneath, other small issues about appearance are present too!
</style><style type="text/less">
#HeaderHeight: 150px;
#HeaderMargin: #HeaderHeight / 4;
#Color: #ff003c;
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
div.header {
width: 100%;
height: #HeaderHeight;
background: #333;
div.profile-right {
float: right;
img.avatar {
float: right;
margin: #HeaderMargin #HeaderMargin #HeaderMargin 10px;
height: #HeaderHeight / 2;
width: #HeaderHeight / 2;
border-radius: 100%;
}
div.data {
float: right;
display: table;
height: #HeaderHeight;
color: #FFF;
div.container {
display: table-cell;
vertical-align: middle;
span.username {
font-size: 1.2em;
display: block;
}
div.info {
width: 100%;
font-size: 1.2em;
display: block;
i.sign.out.icon {
margin: 0;
font-size: 1.2em;
line-height: 1em;
float: right;
width: 15%;
}
div.balance {
border-width: 10px;
font-size: 1.2em;
border: 2px #Color solid;
border-radius: 10px;
width: 75%;
span.funds {
font-size: 1em;
text-align: left;
margin-left: 4px;
}
i.add.icon {
width: initial !important;
height: initial !important;
font-size: 1em;
float: right;
margin: 1px 5px;
color: #000 !important;
background-color: #Color !important;
padding: 1px !important;
}
}
}
}
}
}
}
div.page-content {
width: 100%;
height: calc(~"100%" - #HeaderHeight);
background: black;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<div class="header">
<div class="profile-right">
<img src="http://placehold.it/184x184" class="avatar">
<div class="data">
<div class="container">
<span class="username">Username</span>
<div class="info">
<i class="sign out icon"></i>
<div class="balance">
<span class="funds">$<span class="value">4.20</span></span>
<i class="circular inverted add icon"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page-content"></div>
I think I have managed to achieve what you want using display:table and display:table-cell. The plus icon is set to a fixed width but if the value gets larger it will expand the div.
I have also removed some of the floats and switched them to display:inline-block so they can be aligned vertically. I have changed the HTML very slightly by adding some additional wrappers.
You might want to implement the changes in to your main stylesheet because currently I am just overriding your styles at the bottom of the stylesheet.
https://codepen.io/anon/pen/jwyXMM
You can use display:inline-block; so that your content fits properly in the balance div.
</style><style type="text/less">
#HeaderHeight: 150px;
#HeaderMargin: #HeaderHeight / 4;
#Color: #ff003c;
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
div.header {
width: 100%;
height: #HeaderHeight;
background: #333;
div.profile-right {
float: right;
img.avatar {
float: right;
margin: #HeaderMargin #HeaderMargin #HeaderMargin 10px;
height: #HeaderHeight / 2;
width: #HeaderHeight / 2;
border-radius: 100%;
}
div.data {
float: right;
display: table;
height: #HeaderHeight;
color: #FFF;
div.container {
display: table-cell;
vertical-align: middle;
width:200px;
span.username {
font-size: 1.2em;
display: block;
}
div.info {
width: 100%;
font-size: 1.2em;
display: inline-block;
i.sign.out.icon {
margin: 0;
font-size: 1.2em;
line-height: 1em;
float: right;
width: 15%;
}
div.balance {
border-width: 10px;
font-size: 1.2em;
border: 2px #Color solid;
border-radius: 10px;
width: 100%;
display:inline-block;
span.value{
font-size:1em;
width:70%;
}
span.funds {
font-size: 1em;
text-align: left;
margin-left: 4px;
}
i.add.icon {
width: 25% !important;
height: initial !important;
font-size: 1em;
float:right;
margin: 1px 5px;
color: #000 !important;
background-color: #Color !important;
padding: 1px !important;
}
}
}
}
}
}
}
div.page-content {
width: 100%;
height: calc(~"100%" - #HeaderHeight);
background: black;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<div class="header">
<div class="profile-right">
<img src="http://placehold.it/184x184" class="avatar">
<div class="data">
<div class="container">
<span class="username">Username</span>
<div class="info">
<div class="balance">
<i class="sign out icon"></i>
<span class="funds">$<span class="value">5333.20</span></span>
<i class="circular inverted add icon"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page-content"></div>
I have also moved (i.sign.out.icon) sign out icon within the balance div and made width of balance div to 100% so that everything stays on same line and fits properly.
The following code is part of a custom 404 page I am planning on using on a website of mine. However there is a major problem when I add the line of code overflow-y: auto;
The code below has the output which I expected it to. However when it the code inside the div reaches more than 75vh the overflow is not visible.
* {
margin: 0;
padding: 0;
}
.main {
min-height: 100vh;
font-size: 1em;
overflow-Y: hidden;
}
.center {
float: left;
position: relative;
left: 50%;
}
.wrap {
width: 100%;
float: left;
position: relative;
left: -50%;
}
.load_extra {
display: block;
position: fixed;
z-index: 11;
bottom: 15px;
}
.prep {
align: center;
background: #00eaff;
outline: none;
padding: 8px;
color: white;
border-color: white;
border-style: dotted;
border-width: 3px;
border-radius:50%;
font-size: 1.375em;
}
.extra {
display: block;
position: fixed;
bottom: 10px;
max-height: 75vh;
width: 80vw;
z-index: 10;
}
pre {
font-family: monospace, monospace;
font-size: 0.85em;
display: block;
overflow-y: auto;
word-break: break-all;
white-space:normal;
padding: 10px;
margin: 0 0 10px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
max-height: 50vh;
}
<body class="main">
<div class="center load_extra">
<div class="wrap">
<button id="extra" class="prep">Button</button>
</div>
</div>
<div id="infoCont" class="center extra">
<div class="wrap">
<h1>Extra Information</h1>
<pre>Some URL</pre>
<p>The requested URL shown above could not be found on the server</p>
<hr>
</div>
</div>
</body>
In order to fix this problem I added the line overflow-y: auto; in .extra class. This is what caused a problem. When you run the code below half of the output is "missing". I am unsure of why this is occuring.
* {
margin: 0;
padding: 0;
}
.main {
min-height: 100vh;
font-size: 1em;
overflow-Y: hidden;
}
.center {
float: left;
position: relative;
left: 50%;
}
.wrap {
width: 100%;
float: left;
position: relative;
left: -50%;
}
.load_extra {
display: block;
position: fixed;
z-index: 11;
bottom: 15px;
}
.prep {
align: center;
background: #00eaff;
outline: none;
padding: 8px;
color: white;
border-color: white;
border-style: dotted;
border-width: 3px;
border-radius:50%;
font-size: 1.375em;
}
.extra {
display: block;
position: fixed;
bottom: 10px;
max-height: 75vh;
width: 80vw;
z-index: 10;
overflow-y: auto;
}
pre {
font-family: monospace, monospace;
font-size: 0.85em;
display: block;
overflow-y: auto;
word-break: break-all;
white-space:normal;
padding: 10px;
margin: 0 0 10px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
max-height: 50vh;
}
<body class="main">
<div class="center load_extra">
<div class="wrap">
<button id="extra" class="prep">Button</button>
</div>
</div>
<div id="infoCont" class="center extra">
<div class="wrap">
<h1>Extra Information</h1>
<pre>Some URL</pre>
<p>The requested URL shown above could not be found on the server</p>
<hr>
</div>
</div>
</body>
I would appreciate any help in fixing this problem.
Half of the output goes "missing" due to the left positions defined in center and wrap classes.
center class will position your container starting from 50% and then, the inner container (wrap) gets repositioned again with -50%. Since the overflow is applied on the parent div, half of the content is no longer visible.
One solution might be to move overflow-y: auto; to wrap class.
Another is to choose another way to center infoCont div.
<div id="infoCont" class="extra">
<h1>Extra Information</h1>
<pre>Some URL</pre>
<p>The requested URL shown above could not be found on the server</p>
<hr>
</div>
.extra {
display: block;
position: fixed;
bottom: 10px;
max-height: 75vh;
width: 80vw;
z-index: 10;
overflow-y: auto;
margin: 0 auto; /* set margin to auto */
left: 0; /* set also left and right because position is fixed */
right: 0;
}
See working example.
here is the link to the site ( http://pavilioncreative.com/ ) hit refresh if you don't see a fullscreen gif as the background.
Im trying to get the red box to be alway centre no matter what size the screen is at. The problem is that the side menu has a position of fixed so the main content div is stretching fully 100% across the screen, under the side menu.
I think I might be going about it all wrong ?
<html lang="en">
<head>
<title>FirstPage</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/reset.css" >
<link rel="stylesheet" href="css/text.css" >
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>
<body>
<div class="wraper">
<ul>
<li class="menu" >
<div class="menu_tab_wrap">
<div class="menu_tab">
<div class="menu_off_wrap">
<div class="menu_off">
<div class="barOne"></div>
<div class="spacer"></div>
<div class="barTwo"></div>
<div class="spacer"></div>
<div class="barThree"></div>
</div>
</div>
</div>
</div>
<div class="menu_tab_wrap_on">
<div class="menu_tab_on">
<div class="menu_on_wrap">
<div class="menu_on">
<div class="cross"></div>
</div>
</div>
</div>
</div>
<div class="logo_wrap">
<div class="logo">
<img src="img/logo.svg">
</div>
</div>
</li>
<section id="menu_out">
<div class="menu_inner_wrap">
<div class="menu_list">
<ul class="menu_ul">
<li class="menu_li"> Home </li>
<span class="in_lable">Back to the home page</span>
<li class="menu_li"> About </li>
<span class="in_lable">Find out more about me</span>
<li class="menu_li"> Portfolio </li>
<span class="in_lable">Take a look at my past work</span>
<li class="menu_li"> Contact Me </li>
<span class="in_lable">Get in contact with me</span>
</ul>
</div>
</div>
</section>
<li class="content">
<div class="content_wrap">
<h1>test</h1>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function () {
var hoverIn = false; //You need this counter to detect whether animate occurs.
$(".menu_tab").hover(function() {
if (hoverIn)return; //if the hover is activated, it stops the function
//I also took the liberty to help you add stop to prevent multiple hover. Feel free to implement that else where
$(".barOne").stop(true, true).animate({
"bottom": "+=5px"
}, "fast");
$(".barThree").stop(true, true).animate({
"top": "+=5px"
}, "fast");
hoverIn = true;
}, function() {
if (!hoverIn)return; //if the hover is deactivated, it stops this function
$(".barOne").stop(true, true).animate({
"bottom": "-=5px"
}, 300);
$(".barThree").stop(true, true).animate({
"top": "-=5px"
}, 300);
hoverIn = false;
});
});
$(document).ready(function () {
if($(window).width() > 700) {
$(".menu_tab").click(function(){
$("#menu_out").animate({"width": "30em"}, "slow");
$(".menu_tab_wrap_on").stop().fadeIn();
$(".menu_list").stop().delay( 400 ).fadeIn('slow');
});
}else{
$(".menu_tab").click(function(){
$("#menu_out").animate({"width": "100%"}, "slow");
$(".menu_tab_wrap_on").stop().fadeIn();
$(".menu_list").stop().delay( 400 ).fadeIn('slow');
});
}
});
$(document).ready(function () {
$(".menu_tab_wrap_on").click(function(){
$(".menu_tab_wrap_on").stop().hide('fast');
$("#menu_out").animate({"width": "0em"}, "slow");
$(".menu_list").stop().hide();
});
});
</script>
</body>
</html>
html{
-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape */
}
.wraper{
width: 100%;
margin: auto;
padding: 0;
}
.wraper ul{
width: 100%;
margin: 0 auto;
padding: 0;
}
.wraper ul li{
padding: 0;
margin: 0 auto;
display: inline-block;
}
.wraper ul .menu{
width: 7%;
min-width: 7em;
max-width: 7em;
background: black;
height: 100%;
position: fixed;
z-index: 20;
float: left;
}
.wraper ul .content{
background-color: blue;
width: 93%;
height: 70em;
float: right;
}
.wraper ul .content .content_wrap{
width: 80%;
margin: auto;
text-align: center;
border: red solid 1px;
}
.menu .menu_tab_wrap{
position: relative;
}
.menu .menu_tab{
width: 100%;
background-color: #232323;
height: 6em;
display: table;
position: absolute;
width: 100%;
cursor: pointer;
}
.menu .menu_tab .menu_off_wrap {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.menu .menu_tab .menu_off_wrap .menu_off{
margin-left: auto;
margin-right: auto;
position: relative;
}
.menu .menu_tab .menu_off_wrap .menu_off .barOne,.barTwo,.barThree{
width: 3em;
padding: 2px;
background-color: white;
margin: auto;
position: relative;
}
.menu .menu_tab .menu_off_wrap .menu_off .spacer{
width: 5em;
height: 5px;
}
.menu .menu_tab_wrap_on{
position: relative;
display: none;
}
.menu .menu_tab_wrap_on .menu_tab_on{
width: 100%;
background-color: white;
height: 6em;
display: table;
position: absolute;
width: 100%;
cursor: pointer;
}
.menu .menu_tab_wrap_on .menu_tab_on .menu_on_wrap {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.menu .menu_tab_on .menu_on_wrap .menu_on{
margin-left: auto;
margin-right: auto;
position: relative;
text-align: center;
}
.menu .menu_tab_on .menu_on_wrap .menu_on .cross{
width: 3em;
height: 3em;
color: #232323;
margin: auto;
position: relative;
}
.cross:before, .cross:after {
position: absolute;
content: ' ';
height: 3em;
width: 4px;
background-color: #333;
}
.cross:before {
transform: rotate(45deg);
}
.cross:after {
transform: rotate(-45deg);
}
.menu .logo_wrap{
width: 100%;
text-align: center;
}
.menu .logo_wrap .logo{
width: 7em;
margin: auto;
position:absolute;
bottom:0;
padding-bottom: 2em;
}
.menu .logo_wrap .logo img{
width: 70%;
height: auto;
}
#menu_out{
background-color: #232323;
height: 100%;
width: 0em;
position: fixed;
z-index: -1;
overflow-y:scroll;
overflow-x:hidden;
border-right: 0.5em black solid;
z-index: 10;
}
#menu_out .menu_inner_wrap{
position: relative;
}
#menu_out .menu_list{
width: 70%;
height: auto;
margin: auto;
padding-top: 5em;
padding-bottom: 0em;
display: none;
position: relative;
}
#menu_out .menu_list .menu_ul{
padding: 0;
margin: 0 auto;
width: 100%;
padding-left: 4em;
padding-bottom: 2em;
}
#menu_out .menu_list .menu_ul .menu_li{
display: block;
padding: 0;
margin: 0 auto;
}
#menu_out .menu_list .menu_ul .menu_li a{
font-size: 40px;
color: white;
text-decoration: none;
font-family: 'Lora', serif;
font-weight: 700;
opacity: 0.8;
}
#menu_out .menu_list .menu_ul .menu_li a:hover{
opacity: 1;
}
#menu_out .menu_list .menu_ul .in_lable{
font-size: 15px;
color: #80E577;
font-weight: 100;
font-family: 'Open Sans', sans-serif;
position: relative;
bottom: 10px;;
}
#menu_out .menu_inner_wrap .footer{
width: 100%;
margin: auto;
position:absolute;
bottom:0;
height: 10em;
}
#media only screen and (max-width: 800px) {
.wraper ul .content{
background-color: blue;
width: 90%;
height: 70em;
float: right;
}
}
#media only screen and (max-width: 700px) {
.wraper ul .content{
background-color: blue;
width: 100%;
height: 70em;
float: none;
}
.wraper ul .menu{
width: 100%;
min-width: none;
max-width: none;
height: 5em;
}
.menu .menu_tab{
height: 100%;
display: table;
position: absolute;
width: 6em;
cursor: pointer;
right: 0;
}
.menu .logo_wrap{
width: 100%;
text-align: center;
}
.menu .logo_wrap .logo{
width: 7em;
margin: auto;
position:absolute;
bottom:0;
padding-top: 1em;
padding-bottom: 1em;
}
.menu .menu_tab_wrap_on .menu_tab_on{
width: 6em;
height: 100%;
right: 0;
}
#menu_out .menu_list{
width: 100%;
height: auto;
margin: auto;
padding-top: 8em;
text-align: center;
}
#menu_out .menu_list .menu_ul{
padding: 0;
margin: 0 auto;
width: 100%;
padding-left: 0em;
text-align: center;
}
#menu_out .menu_list .menu_ul .menu_li a{
font-size: 35px;
color: white;
text-decoration: none;
font-family: 'Lora', serif;
font-weight: 700;
}
#menu_out .menu_list .menu_ul .menu_li a .in_lable{
font-size: 10px;
color: #80E577;
font-family: 'Open Sans', sans-serif;
font-weight: 100;
}
#menu_out{
width: 0;
border-right: none;
}
}
Looking at your CSS, I see this:
#content_wrap .content {
max-width: 1050px;
width: 80%;
margin: auto;
height: 700em;
border: red solid 1px;
margin-right: 7%;
margin-left: 13%;
}
If you remove margin left and margin right, does it accomplish what you're after?
Example:
#content_wrap .content {
max-width: 1050px;
width: 80%;
margin: auto;
height: 700em;
border: red solid 1px;
}
(When you remove margin-left and margin-right, margin: auto will then apply auto to margin top, right, bottom, and left.)
UPDATE 2/25/2016:
After following the steps above, you're most of the way there. However, if you want the content to change it's position (or re-center itself) as the menu expands out from the left side, it'll require a little more CSS and some JavaScript to add and remove a class. Note: The above CSS changes are necessary for this to work.
#content_wrap{
//This should be the exact same with as the menu when it's not expanded out
padding-left: 7em;
//Set this to the same amount of time it takes for the menu to expand
//This will animate the effect using CSS
transition: 0.5s;
}
#content_wrap.menu_showing {
//This should be the exact same with as the menu when it's expanded out
padding-left: 30em
}
Now just toggle that class on and off with JavaScript as you click the "Expand Menu" icon. Here's an example using jQuery:
$(".menu_tab").click(function(){
$("#content_wrap").toggleClass("menu_showing");
});