Example: https://gyazo.com/8d717ee1a21ed49033deece5a105239d (Photoshop).
Black = Slider, Grey = Image, White = Textarea with changeable background color.
I also want to make this responsive to phone devices and such, but that doesn't work either, if I just take an image that is half's the page widht and a height.
I am trying to align an image to the left and the text exactly in a container next to it with the background of the text changeable. I tried using the properties left: ; Right: ;, margins and paddings but that doesn't work.
The image and text should be underneath the div called A3L_Slogan and A3L_Catchphrase. I hope anyone can point me out in the good direction.
Below you can find a JS fiddle without any of that code in it
body {
width: 100%;
margin: 0;
font-family: 'open sans', sans-serif;
zoom: 1;
overflow-x: hidden;
}
header {
padding: 20px 0;
background-color: #ffffff;
box-shadow: 0 4px 6px rgba(0,0,0,.2);
}
.container {
padding: 0 20px;
margin: 0 auto;
}
.logo-box {
float: left;
margin-right: 20px;
}
.logo-box a {
outline: none;
display: block;
}
.logo-box img {display: block;}
nav {
overflow: hidden;
}
ul {
list-style: none;
margin: 0;
padding: 0px 10px 0px 0px;
float: right;
}
nav li {
display: inline-block;
margin-left: 25px;
height: 70px;
line-height: 70px;
transition: .5s linear;
}
nav a {
text-decoration: none;
display: block;
position: relative;
color: #868686;
text-transform: uppercase;
}
nav a:after {
content: "";
width: 0;
height: 2px;
position: absolute;
left: 0;
bottom: 15px;
background: #868686;
transition: width .5s linear;
}
nav a:hover:after {width: 100%;}
#media screen and (max-width: 660px) {
header {text-align: center;}
.logo-box {
float: none;
display: inline-block;
margin: 0 0 16px 0;
}
ul {float: none;}
nav li:first-of-type {margin-left: 0;}
}
#media screen and (max-width: 550px) {
nav {overflow: visible;}
nav li {
display: block;
margin: 0;
height: 40px;
line-height: 40px;
}
nav li:hover {background: rgba(0,0,0,.1);}
nav a:after {content: none;}
}
.A3L_Slogan, .slideshow{
position: relative;
}
.slideshow{
height: 600px;
}
.fadein img {
width: 100%;
position: absolute;
max-height: 600px;
left:0;
top:0;
}
.A3L_Slogan {
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
}
.slogan_title {
font-size: 46px;
font-weight: 700;
padding: 15px;
text-transform: uppercase;
}
.slogan_catchphrase {
font-size: 30px;
font-weight: 500;
text-transform: uppercase;
}
#media only screen and (max-width: 640px) {
.slideshow{
height: 300px;
}
.fadein img {
width: 100%;
position: absolute;
max-height: 300px;
left:0;
top:0;
}
}
#media only screen and (max-width: 600px) {
.slideshow{
height: 200px;
}
.fadein img {
width: 100%;
position: absolute;
max-height: 200px;
left:0;
top:0;
}
}
#media only screen and (max-width: 480px) {
.logo {
max-width: 270px;
}
}
}
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function () {
$('.fadein img:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
}, 4000);
});
</script>
</head>
<body>
<header>
<div class="container">
<div class="logo-box">
<a href="/">
<img class="logo" src="images/logo.png">
</a>
</div>
<nav>
<ul>
<li>Forums</li>
<li>Rules</li>
<li>Monetization</li>
<li>Sign-up</li>
<li>Staff</li>
</ul>
</nav>
</div>
</header>
<div class="slideshow">
<div class="fadein">
<img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-159465.jpg" alt="">
<img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-160434.png" alt="">
<img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-150988.jpg" alt="">
</div>
</div>
<div class="A3L_Slogan">
<div class="slogan_title">
Hardcore Roleplay Community
</div>
<div class="slogan_catchphrase">
The next level roleplay experience
</div>
</div>
</body>
</html>
Put your image and text in a container such as:
<div class="container-row">
<div class="hero-image">
<img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-159465.jpg" alt="">
</div>
<div class="A3L_Slogan">
<div class="slogan_title">
Hardcore Roleplay Community
</div>
<div class="slogan_catchphrase">
The next level roleplay experience
</div>
</div>
</div>
and you can use flexbox to align the items
.container-row{
display: flex;
}
.container-row .hero-image{
flex: 1;
}
.container-row .A3L_Slogan {
flex: 2;
}
Related
The aim of the code is that the background of the inner text div is of full height of the available body height (Without the need to scroll down) .
The code works for laptop screen and for ipad dimensions (In chrome developer tools) .
The problem is with cellphones . The background height doesn't reach to the bottom of the page and just instead the default height of the image .
The used code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Beginning of global variables*/
:root {
--main-color: #11cab7;
}
/* End of global variables */
/* Beginning of Global rules */
* {
box-sizing: border-box;
}
body {
font-family: 'Work Sans', sans-serif;
}
.container {
width: 600px;
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
/*.Small.*/
#media (min-width: 768px) {
.container {
width: 750px;
}
}
/* Medium.*/
#media (min-width: 992px) {
.container {
width: 970px;
}
}
/* Large */
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
/* End of global rules */
/* Begin of header styling */
.header {
padding: 20px;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
width: 100px;
height: 40px;
}
.links {
position: relative;
}
.header .links .icon {
width: 30px;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
cursor: pointer;
}
.header .links .icon span {
background-color: #333;
height: 2px;
margin-bottom: 5px;
}
.header .links .icon span:first-child {
width: 100%;
}
.header .links .icon span:nth-child(2) {
width: 60%;
transition: .3s linear;
}
.header .links .icon span:last-child {
width: 100%;
}
.header .links .icon:hover span:nth-child(2){
width: 100%;
}
.header .container ul {
list-style-type: none;
display: block;
position: absolute;
background-color: #f6f6f6;
min-width: 200px;
padding: 0;
right: 0;
display: none;
}
.header .container ul::before {
content: "";
border-width: 10px;
border-style: solid;
border-color: transparent transparent #f6f6f6 transparent;
position: absolute;
right: 5px;
top: -20px;
}
.header .container ul li {
display: block;
padding: 15px;
transition: .2s;
}
.header .container ul li:hover {
padding-left: 25px;
}
.header .container ul li a {
text-decoration: none;
color: #333;
}
.header .container ul li:not(:last-child) {
border-bottom: 1px solid #ddd;
}
.header .container .links:hover ul {
display: block;
transition: 0.1s;
z-index: 1;
}
/* End of header styling */
/* Beginning of landing section */
.landing {
background-image: url(https://elzerowebschool.github.io/HTML_And_CSS_Template_One/images/landing.jpg);
background-size: cover;
min-width: 620px;
height: calc(100vh - 80px);
position: relative;
}
.landing .intro-text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 320px;
max-width: 100%;
}
.landing .intro-text h1 {
margin: 0;
font-size: 50px;
color: var(--main-color);
}
.landing .intro-text p {
font-size: 19px;
line-height: 1.8;
}
/* End of landing section */
</style>
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght#200;400;500;600;700;800&display=swap" rel="stylesheet">
</head>
<body>
<!-- The use of the container is that our text not start from
the beginning of the webpage as it is visually not good -->
<!-- Beginning of header -->
<div class="header">
<div class="container">
<img class="logo" src="https://elzerowebschool.github.io/HTML_And_CSS_Template_One/images/logo.png" alt="logo image" >
<div class="links">
<span class="icon">
<span></span>
<span></span>
<span></span>
</span>
<ul>
<li>
Services
</li>
<li>
Portfolio
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
<!-- End of header -->
<!-- Beginning of sections -->
<div class="landing">
<div class="intro-text">
<h1>Hello there</h1>
<p>We are Leon - Super creative and minimal agency
Web Template
</p>
</div>
</div>
<!-- End of sections -->
</body>
</html>
I would be thankful for the solution that uses pure CSS
I think this happens because of overflowing
you need to set overflow-x on html and body hidden like:
body, html{
overflow-x: hidden;
}
this will break your navbar, but you can add this to fix it:
.header .container{
width:100%;
}
and finally, for the text remove the max-with:620px to make it more responsive.
Hope it will help you.
Im creating a responsive website so that when the website is used as a mobile they can check the box which will display a drop down menu of the navbar. This is currently working except when the box is clicked the drop down nav bar goes behind my banner content. Does anyone know why this is? Very stuck currently.
HTML CODE:
<div class = "wrapper">
<header>
<div class = "header">
<h2 class = "logo">Haukai Restaurant</h2>
<input type = "checkbox" id = "chk">
<label for = "chk" class = "show-menu-btn">
<i class = "fas fa-ellipsis-h"></i>
</label>
<ul class = "menu-nav">
Home
Menu
Reservations
Hours
Contact
<label for = "chk" class = "hide-menu-btn">
<i class = "fas fa-times"></i>
</label>
</ul>
<section class="banner">
<div class="img-container">
<div class="inner-container">
<h1>Haukai Restaurant</h1>
<h2>Bringing Maori culture and kai to you</h2>
<a class="btn" href="menu.html">Menu</a>
<a class="btn" href="reservations.html">Reservations</a>
<a class="btn" href="privacy.html">Privacy</a>
<div class = "about-us">
<br> <br> <br> <br> <br>
<div class = "about-us-content">
<h2>About us</h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
</p>
</div>
</div>
</div>
</div>
</section>
</div>
</body>
CSS CODE:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
/* Home Page */
body {
background: #000;
min-height: 200vh;
position: relative;
}
.wrapper {
width: 100%;
}
/* Header */
.header {
height: 100px;
background: #000;
padding: 0 20px;
color: #fff;
}
.logo {
line-height: 100px;
float: left;
text-transform: uppercase;
}
.menu-nav {
float: right;
line-height: 100px;
}
.menu-nav a {
color: #fff;
text-transform: uppercase;
text-decoration: none;
padding: 0 10px;
transition: 0.4s;
}
.show-menu-btn,
.hide-menu-btn {
transition: 0.4s;
font-size: 30px;
cursor: pointer;
display: none;
}
.show-menu-btn {
float: right;
}
.show-menu-btn i {
line-height: 100px;
}
.menu a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover {
color: #feca1d;
}
#chk {
position: absolute;
visibility: hidden;
z-index: -1111;
}
.menu-content {
padding: 0 20px;
}
.banner {
position: relative;
width: 100%;
height: 100vh;
background: url(insiderest.jpg);
background-size: cover;
}
#media screen and (max-width: 600px) {
.show-menu-btn,
.hide-menu-btn {
display: block;
}
.menu-nav {
position: fixed;
width: 100%;
height: 100vh;
background: #333;
right: -100%;
top: 0;
text-align: center;
padding: 80px 0;
line-height: normal;
transition: 0.7s;
}
.menu-nav a {
display: block;
padding: 20px;
}
.hide-menu-btn {
position: absolute;
top: 40px;
right: 40px;
}
#chk:checked ~ .menu-nav {
right: 0;
}
}
Your using media queries. You have one .menu-nav above the query and one inside of the media query #media screen and (max-width: 600px) {
z-indexes are only counted if the position is fixed, relative, absolute, sticky, etc. The first css class will dismiss the z-index because it has no position property. Replacing the float with position relative could work.
.menu-nav {
float: right;
line-height: 100px;
}
or, alternatively it should work to add the z-index to the media query .menu-nav class.
#media screen and (max-width: 600px) {
.menu-nav {
position: fixed;
z-index:2;
width: 100%;
height: 100vh;
background: #333;
right: -100%;
top: 0;
text-align: center;
padding: 80px 0;
line-height: normal;
transition: 0.7s;
}
}
I think it will work.
.menu-nav {
z-index: 1000;
}
I have been working on a responsive web design, after adding CSS to make a link stay centered on a an image the webpage now displays any new html behind the image. I want to be able to add more things on my webpage but any new html I write disappears.
Link to JSFIDDLEhttps://jsfiddle.net/R4bbit2k17/7yuL4y1p/1/#&togetherjs=MEzytpw3kf`
Because your .banner-inner is using position: absolute in conjunction with taking up 100% of the width and height, you'll need to set a position other than static for your text element(s), along with giving them a z-index greater than the default of 0:
p {
background: red; /* Purely to highlight the text */
position: relative;
z-index: 1;
}
This causes your text to appear on top of your image, and can be seen in the following:
body {
font-family: helvetica;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
header {
background: black;
color: white;
padding-top: 20px;
min-height: 45px;
}
header a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header ul {
margin: 0;
padding: 0;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header nav {
float: right;
margin-top: 5px;
}
#media only screen and (max-width:1000px) {
.centered {
font-size: 12pt!important;
}
}
#media only screen and (max-width:800px) {
.centered {
font-size: 11pt!important;
}
}
#media only screen and (max-width:600px) {
.centered {
font-size: 10pt!important;
}
}
#media only screen and (max-width:400px) {
.centered {
font-size: 9pt!important;
}
}
#media only screen and (max-width:200px) {
.centered {
font-size: 8pt!important;
}
}
.banner-inner {
width: 100%;
height: 100%;
position: absolute;
text-align: center;
color: white;
}
.centered {
position: absolute;
margin-left: auto;
margin-right: auto;
width: 100%;
height: auto;
margin-top: 20%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 12pt;
}
.img {
width: 100%;
height: auto;
float: left;
}
p {
background: red;
position: relative;
z-index: 1;
}
<body>
<header>
<div id="header-inner">
<nav>
<ul>
<li>Home</li>
<li>Courses</li>
<li>About</li>
</ul>
</nav>
</div>
</header>
<section class="section-1">
<div class="banner-inner">
<img class="img" alt="" src="https://d2mt0dng9y3p4j.cloudfront.net/newandimproved/wp-content/uploads/2016/12/shop-with-a-sheriff-mockup.jpg">
<div class="centered">Start Learning</div>
</div>
</section>
<p>ANY HTML ADDED APPEARS BEHIND THE IMAGE AND I CANNOT FIGURE OUT HOW TO CHANGE IT TO APPEAR BENEATH THE IMAGE AS IT WOULD WITH A FRESH HTML PAGE</p>
</body>
Hope this helps!
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");
});
I found a really interesting article on how to VAlign elements inside a Header. The thing is I need a fixed header with a 100% height (so i can make the VAlign work properly). Since the Header is out of the document flow the 100% Height is making the header take whe whole viewport height. Is there any way to make this method work using a fixed header with a 100% height but avoiding the header to take the 100% height of the viewport ?
here's the code and a codepen link :
CodePen Example
#banner {
background: #3677ae;
border: 1px solid orange;
height: 100%;
left: 0;
overflow: hidden;
padding: 0 2%;
position: fixed;
text-align: justify;
right: 0;
top: 0;
z-index: 100;
}
#banner:after {
content: '';
display: inline-block;
width: 100%;
}
#banner #logo,
#banner nav.navAplicacio {
display: inline-block;
}
#banner #logo h1 {
line-height: normal;
height: 100%;
padding: 0;
}
#banner #logo h1:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
#banner #logo h1 img {
height: 13px;
padding: 0;
margin: 0;
vertical-align: inherit;
width: 77px;
}
#banner .navAplicacio {
line-height: normal;
}
#banner .navAplicacio ul {
margin: 0;
padding: 0;
}
#banner .navAplicacio ul li {
list-style: none;
line-height: normal;
display: inline-block;
padding: 0 0 0 11px;
}
#banner .navAplicacio ul li:first-child {
padding-left: 0;
}
#banner .navAplicacio ul li a {
color: #fff;
}
<header id="banner" role="banner">
<div id="logo">
<h1 class="site-title">
<img alt="${logo_description}" height="13px" src="${images_folder}/EACAT.png" width="77px" />
</h1>
</div>
<nav class="navAplicacio">
<ul>
<li>Bloc
</li>
<li>Suport
</li>
<li>Surt
</li>
<li>Torna
</li>
<li>
<button class="btn-usuari" type="button" id="dropUsuari">Jordi Parodi <i>(Martorelles, Aj. de)</i> <span class="ico"><img src="${images_folder}/EC80017.JPG" alt="Escut Aj. de Martorelles"></span><span class="caret"></span>
</button>
</li>
</ul>
</nav>
</header>