Sorry for the wording, i'm not sure exactly how to phrase it.
I have a header and a container which contains a sidenav and button to toggle it. I am trying to skew the header while keeping the container normal by skewing in the opposite direction. However doing this causes the sidenav to lose it's height:100% and it doesn't stick to the left.
How can i skew the background without affecting the sidenave?
Here is the fiddle and code
https://jsfiddle.net/q0ddzw4v/
HTML
<body id="body">
<header class="header">
<div class="header__container">
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
</div>
</header>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
CSS
body {
font-family: sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover,
.offcanvas a:focus {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
padding: 16px;
}
.header {
width: 100%;
height: 100vh;
background-color: #C18D8D;
transform: skewY(-10deg);
}
.header__container {
width: 80%;
max-width: 71.25rem;
margin: auto;
display: flex;
flex-direction: column;
height: 100%;
transform: skewY(10deg);
}
Instead of skewing the .header container, add a pseduo-element and skew it:
body {
font-family: "Lato", sans-serif;
transition: margin-left 0.5s;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover,
.offcanvas a:focus {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
.header {
position: relative;
width: 100%;
height: 100vh;
}
.header::before {
display: block;
position: absolute;
width: 100%;
height: 100%;
background-color: #C18D8D;
transform: skewY(-10deg);
content: '';
}
.header__container {
position: relative;
z-index: 0;
width: 80%;
max-width: 71.25rem;
margin: auto;
display: flex;
flex-direction: column;
height: 100%;
}
<header class="header">
<div class="header__container">
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
</div>
</header>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
// document.getElementById("body").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
// document.getElementById("body").style.marginLeft = "0";
}
</script>
Related
I have a section where it is to equal columns full width across. if you look a the 2nd column where it says content here if i do 100% on the jscroll-pane it shows horizontal bars, if i give it 98% it works properly but is not full width of the column. not sure why it adds horizontal bars to 100% but not 98%. I am not sure if foundation is causing my issue or not but if i take it out of the column and put in a row the 100% works fine just not in a large-6
html
<section id="component">
<div class="row expanded collapse">
<div class="large-6 column">
<img src="images/image.png">
</div>
<div class="large-6 column">
<div class="jscroll-pane">
Content Here
</div>
</div>
</div>
</section>
css
.jscroll-pane {
display: block;
width: 100% !important;
height: 400px;
max-height: 400px;
overflow: auto;
background-color: #fff;
}
#component {
padding: 0px;
background-color: #fff;
}
jscroll external css file
.jspContainer{
overflow:hidden;
position:relative;
height:100% !important;
width: 100% !important;
}
.jspPane{
position:absolute;
width: 100%!important;
}
.jspVerticalBar
{
position: absolute;
top: 0;
right: 0;
width: 16px;
height: 100%;
background: red;
}
.jspHorizontalBar
{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 16px;
background: red;
}
.jspCap
{
display: none;
}
.jspHorizontalBar .jspCap
{
float: left;
}
.jspTrack
{
background: #d8d8d8;
position: relative;
}
.jspDrag
{
background: #000;
position: relative;
top: 0;
left: 0;
cursor: pointer;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
float: left;
height: 100%;
}
.jspArrow
{
background: #50506d;
text-indent: -20000px;
display: block;
cursor: pointer;
padding: 0;
margin: 0;
}
.jspArrow.jspDisabled
{
cursor: default;
background: #80808d;
}
.jspVerticalBar .jspArrow
{
height: 16px;
}
.jspHorizontalBar .jspArrow
{
width: 16px;
float: left;
height: 100%;
}
.jspVerticalBar .jspArrow:focus
{
outline: none;
}
.jspCorner
{
background: #eeeef4;
float: left;
height: 100%;
}
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
margin: 0 -3px 0 0;
}
Try this, Remove the display block and change overflow: auto to hidden; I believe this should help you.
.jscroll-pane {
width: 100% !important;
height: 400px;
max-height: 400px;
overflow: hidden;
background-color: #fff;
}
I have the HTML and CSS below. When I hover the image it's opacity goes to zero and a background colour appears while the text goes from display:none to block. But why is there flickering when hovering the text? I have tried setting backface-visibility:hidden on all elements but it does not remove the flicker.
It happens in current Firefox & Chrome and IE11.
Here is codepen demo of the problem
<div class="project-card">
<img src="http://s13.postimg.org/tiwekrks7/dummy_small_1.jpg" height="250" width="380">
<div class="project-caption">
<div class="pc-name">Absolut Vodka</div>
<div class="pc-type">Bottle</div>
<div class="pc-task">Fancy text</div>
</div>
</div>
.project-card {
position: relative;
display: inline-block;
text-align: center;
max-width: 32%;
background-color: #0a3837;
}
.project-card p,
.project-card a,
.project-card img {
margin: 0;
}
.project-card a {
max-width: 100%;
line-height: 0;
}
.project-card a:hover {
opacity: 0.1;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.project-card a:hover + .project-caption {
display: block;
}
.project-caption {
display: none;
color: white;
font-size: 0.9rem;
padding: 0 3rem;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.pc-name {
text-transform: uppercase;
padding-bottom: 5px;
margin-bottom: 5px;
border-bottom: 2px solid white;
}
.pc-type,
.pc-task {
font-style: italic;
}
Here a solution based on what Zeta said :
HTML
<div class="project-card">
<img src="http://s13.postimg.org/tiwekrks7/dummy_small_1.jpg" height="250" width="380">
<div class="project-caption">
<div class="pc-name">Absolut Vodka</div>
<div class="pc-type">Bottle</div>
<div class="pc-task">Fancy text</div>
</div>
</div>
CSS
.project-card {
position: relative;
display: inline-block;
text-align: center;
max-width: 32%;
background-color: #0a3837;
}
.project-card p,
.project-card a,
.project-card img {
margin: 0;
}
.project-card a {
max-width: 100%;
line-height: 0;
}
.project-card:hover > a{
opacity: 0.1;
}
.project-card:hover > a + .project-caption {
display: block;
}
.project-caption {
display: none;
color: white;
font-size: 0.9rem;
padding: 0 3rem;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.pc-name {
text-transform: uppercase;
padding-bottom: 5px;
margin-bottom: 5px;
border-bottom: 2px solid white;
}
.pc-type,
.pc-task {
font-style: italic;
}
And the fiddle : https://jsfiddle.net/rf09bsse/
I am trying to create a modal with a fixed header. This was all working fine but we have since added a custom scroll bar in webkit browsers using ::-webkit-scrollbar. When we did this it causes the fixed header to be wider then the modal by the width of the custom scroll.
** edit: this is only an issue when resizing the window/when min-width kicks in **
My understanding is the fixed header is calculating its max width of 90% based on the whole window and the modal is calculating 90% based on the available space not including the scrollbar.
There are two css ways of fixing this that I can think of.
1) figure out if I am just being silly and there is a way of making a fixed element depend on the size of the relative parent.
2) if the body or the parent div of the modal has the pseudo selector add styles.
Sadly the following does not work:
div::-webkit-scrollbar ._common-modal.is-open, body::-webkit-scrollbar ._common-modal.is-open{
width:calc(100% - $scrollbarwidth );
}
Any thoughts?
css :
.modal-overlay {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.2);
z-index: 100;
}
div::-webkit-scrollbar ._common-modal.is-open, body::-webkit-scrollbar ._common-modal.is-open {
display: none;
}
._common-modal.is-open {
bottom: 0;
left: 0;
outline: 0;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
position: absolute;
right: 0;
top: 0;
padding: 20px 0;
text-align: center;
z-index: 101;
}
._common-modal.is-open.header-detached .modal-header {
position: fixed;
top: -1px;
width: inherit;
max-width: 90%;
}
._common-modal.is-open.header-detached .modal-header:after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
right: 0;
height: 3px;
background: rgba(85, 85, 85, 0.05);
}
._common-modal.is-open.header-detached .modal-content {
margin-top: 50px;
}
._common-modal.is-open:before {
content: " ";
display: inline-block;
height: 100%;
vertical-align: middle;
}
._common-modal.is-open .wkModal {
text-align: left;
position: relative;
max-width: 90%;
width: 500px;
z-index: 2;
background: #ffffff;
border: 1px solid grey;
display: inline-block;
vertical-align: middle;
}
._common-modal.is-open .modal-header {
border-bottom: 1px solid grey;
padding: 0 15px;
line-height: 51px;
background-color: #fff;
z-index: 2;
}
._common-modal.is-open .modal-footer {
padding: 0 15px;
line-height: 50px;
}
._common-modal.is-open .modal-title {
font-size: 20px;
text-align: center;
font-weight: 300;
width: 80%;
margin: 0 auto;
}
._common-modal.is-open .modal-close {
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 50px;
display: block;
background: url(../img/blue_small-x.svg) no-repeat center center;
}
._common-modal.is-open .modal-content {
padding: 10px 15px;
}
._common-modal.is-open .modal-content p {
text-align: center;
}
html:
<div class="_common-modal is-open">
<div class="wkModal">
<div class="modal-header" >
<div class="modal-title">
<span >Large Modal Custom</span>
</div><a class="modal-close"
></a>
</div>
<div class="modal-content" >
<h1 Test Modal Content</h1>
<div>
**content**
</div>
</div>
<div class="modal-footer"></div>
</div>
</div>
Here is a link to my problem http://jsfiddle.net/xb3qkwpp/3/a
When you hover over the green area it starts to flicker when I move the mouse. I am thinking it is z-index but I have set the z-index for the class and ids and it didnt work or maybe I am doing it incorrectly.
html:
<div id="first_area_max" class="first_area">
<div class="first_area_wrapper">
<h2>
FIRST
</h2>
<h1>
foo
</h1>
<p class="tk-proxima-nova">
“I started out in concrete whenI was 18 years old and havebeen at this business for almost20 years. Our team isprofessional, knowledgeable,and will go full throttle everyday for our clients.”
</p>
</div>
</div>
<div id="second_area_max" class="second_area">
<div class="second_area_wrapper">
<h2>
SECOND
</h2>
<h1>
foo
</h1>
<p class="tk-proxima-nova">
“I started out in concrete whenI was 18 years old and havebeen at this business for almost20 years. Our team isprofessional, knowledgeable,and will go full throttle everyday for our clients.”
</p>
</div>
</div>
<div id="third_area_max" class="third_area">
<div class="third_area_wrapper">
<h2>
THIRD
</h2>
<h1>
foo
</h1>
<p class="tk-proxima-nova">
“I started out in concrete whenI was 18 years old and havebeen at this business for almost20 years. Our team isprofessional, knowledgeable,and will go full throttle everyday for our clients.”
</p>
</div>
css:
html, body {
margin: 0 auto;
background-color: black; }
h1, h2, h3 {
font-weight: normal; }
a {
text-decoration: none;
color: inherit; }
ul {
list-style-type: none;
padding: 0; }
.no-padding {
padding: 0; }
.no-margin {
margin: 0; }
.clear {
clear: both; }
.first_boss {
background: blue;
opacity: 0.7;
}
.second_boss {
background: red;
opacity: 0.7;
}
.third_boss {
background: green;
opacity: 0.7;
}
.first_page, .second_page, .third_page, .fifth_page {
background-size: cover;
background-repeat: no-repeat;
height: 800px;
max-width: 1300px; }
.first_page, .second_page, .third_page, .fifth_page {
min-width: 1000px;
background-position: center center;
margin: 0 auto; }
.fifth_page {
background-image: image-url("fifth_page.jpg");
z-index: -1;
z-index: -1; }
.fifth_page h1 {
margin-top: 0;
font-size: 40px; }
.fifth_page h1, .fifth_page h2 {
font-family: 'mohaveregular'; }
.fifth_page p {
width: 230px;
line-height: 2em;
float: right; }
.first_area, .second_area, .third_area {
color: white;
padding: 50px;
width: 500px;
height: 700px;
text-align: right;
position: relative;
top: 0px;
float: right;
background-image: image-url("owner_bg.png"); }
.first_area p, .second_area p, .third_area p {
width: 230px;
line-height: 2em;
float: right; }
#first_area_max, #second_area_max, #third_area_max {
margin-right: -850px;
z-index: 1; }
#first_mouse:hover ~ #first_area_max, #second_mouse:hover ~ #second_area_max, #third_mouse:hover ~ #third_area_max {
right: 1000px;
width: 1px;
z-index: 1;
display: block;
overflow: visible; }
.first_boss, .second_boss, .third_boss {
float: left;
height: 800px;
width: 33%;
z-index: -2; }
.first_area_wrapper, .second_area_wrapper, .third_area_wrapper {
margin-right: 70px; }
#third_area_max {
z-index: 1000; }
.text-area {
padding: 20px;
background-repeat: no-repeat;
color: white;
line-height: 1.4em;
text-transform: uppercase; }
.clear {
clear: both; }
You need to hover on the div you put on top of it as well. Because of the appearing div you lose focus on the first one, causing your hover state to switch rapidly.
.div1 {
display: block;
position: absolute;
width: 200px;
height: 200px;
background: red;
}
.div2 {
display: none;
position: absolute;
width: 200px;
height: 200px;
background: blue;
}
.div1:hover ~ .div2,
.div2:hover {
display: block;
}
<div class="div1"></div>
<div class="div2"></div>
I am a novice in CSS and I have not yet solved what I am trying to achieve.
I want the items of a horizontal menu to be centered regardless of the monitor resolution. Here is my code:
The HTML semantic:
<body>
<div class="inicio_m"></div>
<div id="menu">
<div id="cab_menu" class="clearfix">
<div class="conteudo_menu clearfix">
Item 1
Item 2
Item 3
Item 4
</div>
</div>
</div>
</body>
This is the CSS format:
html, body {
height: 100%;
width: 100%;
}
#menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
background: #000000;
}
#cab_menu {
width: 100%;
position: relative;
}
#cab_menu a {
padding: 20px 10px;
float: left;
color: #FFFF40;
}
.clearfix { display: block; }
.conteudo_menu {
width: 100%;
margin: 0 auto;
}
I posted on Fiddle for a more convenient check:
http://jsfiddle.net/nQXd7/
Thanks in advance
Remove the floats and use display:inline-block instead. Then add text-align:center to the wrapping element.
JSFiddle
CSS
html, body {
height: 100%;
width: 100%;
}
#menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
background: #000000;
}
#cab_menu {
width: 100%;
position: relative;
}
#cab_menu a {
font-size: 12px;
font-weight: bold;
padding: 20px 10px;
display: inline-block;
color: #FFFF40;
}
.clearfix {
display: block;
}
.conteudo_menu {
width: 100%;
margin: 0 auto;
text-align: center;
}
Please remove the unwanted codes in css, try this one in order to make the menus just simply centered.
html, body {
height: 100%;
width: 100%;
}
#menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
background: #000000;
}
.conteudo_menu {
text-align: center;
}
#cab_menu a {
padding: 20px 10px;
color: #FFFF40;
display: inline-block;
}