I have created a simple website using HTML and CSS. Everything is working as it should, except for a scrollbar inside a textbox. The strange thing is that I have tested the CSS and HTML code for this box on a another website and it seemed to work perfectly fine.
See Below:
HTML:
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/temp.css">
<title>Informatica Website - Projects</title>
</head>
<body>
<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus
congue tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat,
vel tempor et, elementum at tortor. Praesent ac libero at arcu
eleifend mollis ut eget sapien. Duis placerat suscipit eros, eu
tempor tellus facilisis a. Vivamus vulputate enim felis, a euismod
diam elementumnon. Duis efficitur ac elit non placerat. Integer
porta viverra nunc,sed semper ipsum. Nam laoreet libero lacus.
</div>
</body>
</html>
CSS:
.content {
border: 1px dashed gray;
padding: .5em;
white-space: pre-wrap;
height: 5em;
overflow-y: scroll;
}
.content::-webkit-scrollbar {
display: none;
}
But when the same code is used in the following website it doesn't seem to work. It does show the text and the box, but the hidden scrollbar doesn't work. I have tried moving my in z-space, but that had little effect. I have looked everywhere to find a solution, but I haven't had any luck so far.
HTML
<!DOCTYPE html>
<html class="ng-app">
<head>
<meta charset="UTF-8">
<title>Website Name</title>
<link rel='stylesheet prefetch'href='https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css'>
<link rel='stylesheet prefetch'href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div ng-controller="HomeCtrl">
<div class="toggle_menu" ng-click="menu_open = !menu_open" ng-init="menu_open = false"><i class="fa fa-bars"></i></div>
<div class="main" ng-class="{'has_menu_open': menu_open == true}" ng-init="menu_index = 1">
<!--HOME PAGE-->
<div class="bg bg1" ng-class="{'visible': menu_index == 1}">
</div>
<!--ABOUT PAGE-->
<div class="bg bg2" ng-class="{'visible': menu_index == 2}">
<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus
congue tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat,
vel tempor et, elementum at tortor. Praesent ac libero at arcu
eleifend mollis ut eget sapien. Duis placerat suscipit eros, eu
tempor tellus facilisis a. Vivamus vulputate enim felis, a euismod
diam elementumnon. Duis efficitur ac elit non placerat. Integer
porta viverra nunc,sed semper ipsum. Nam laoreet libero lacus.
</div>
</div>
<!--PROJECTS PAGE-->
<div class="bg bg3" ng-class="{'visible': menu_index == 3}">
</div>
<!--Downloads PAGE-->
<div class="bg bg4" ng-class="{'visible': menu_index == 4}">
</div>
<!--UNIC PAGE-->
<div class="bg bg5" ng-class="{'visible': menu_index == 5}">
</div>
</div>
<div class="menu" ng-class="{'is_open': menu_open == true}">
<ul>
<li ng-click="menu_index = 1; menu_open = false;" ng-class="{'active': menu_index == 1}">Home</li>
<li ng-click="menu_index = 2; menu_open = false;" ng-class="{'active': menu_index == 2}">About</li>
<li ng-click="menu_index = 3; menu_open = false;" ng-class="{'active': menu_index == 3}">Projects</li>
<li ng-click="menu_index = 4; menu_open = false;" ng-class="{'active': menu_index == 4}">Downloads</li>
<li ng-click="menu_index = 5; menu_open = false;" ng-class="{'active': menu_index == 5}">UniC</li>
</ul>
</div>
<div class="copy" ng-class="{'is_visible': menu_open == true}">Made by "NAME HERE"<i class="fa fa-github-square"></i></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
Sorry I forgot to add my complete CSS file. The CSS file above is the one that does work when used with my HTML. I only want to hide my scrollbar, but still keep it's functionality.
CSS
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
#import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
body {
background: #111115;
font-family: "Open Sans", sans-serif;
-webkit-perspective: 600px;
-moz-perspective: 600px;
perspective: 600px; }
.toggle_menu {
background: rgba(255, 255, 255, 0.2);
z-index: 99999;
position: absolute;
top: 50px;
right: 50px;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer; }
.toggle_menu:active {
background: rgba(255, 255, 255, 0.3);
-webkit-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
transition: all .25s ease-in-out; }
.toggle_menu i {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
font-size: 22px; }
.main {
position: relative;
z-index: 1;
width: 100vw;
height: 100vh;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out; }
.main.has_menu_open {
-webkit-transform: rotateX(-4deg) translate3D(0px, 0px, -100px) scale(.9);
-moz-transform: rotateX(-4deg) translate3D(0px, 0px, -100px) scale(.9);
-ms-transform: rotateX(-4deg) translate3D(0px, 0px, -100px) scale(.9);
-o-transform: rotateX(-4deg) translate3D(0px, 0px, -100px) scale(.9);
transform: rotateX(-4deg) translate3D(0px, 0px, -100px) scale(.9); }
.main .bg {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 2;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out; }
.main .bg.visible {
opacity: 1; }
.main .bg.bg1 {
background-image: url(../images/background/home.png); }
.main .bg.bg2 {
background-image: url(../images/background/about.jpg); }
.main .bg.bg3 {
background-image: url(../images/background/unic.jpg); }
.main .bg.bg4 {
background-image: url(../images/background/projectsTwo.jpg); }
.main .bg.bg5 {
background-image: url(../images/background/projects.jpg); }
.menu {
position: fixed;
z-index: 99;
background: #292931;
bottom: 0px;
left: 10%;
right: 10%;
width: 80%;
height: 110px;
-webkit-transform: translate3D(0px, 150px, 0px) rotateX(45deg) scale(0.9);
-moz-transform: translate3D(0px, 150px, 0px) rotateX(45deg) scale(0.9);
-ms-transform: translate3D(0px, 150px, 0px) rotateX(45deg) scale(0.9);
-o-transform: translate3D(0px, 150px, 0px) rotateX(45deg) scale(0.9);
transform: translate3D(0px, 150px, 0px) rotateX(45deg) scale(0.9);
-webkit-transition: all .75s ease-in-out;
-moz-transition: all .75s ease-in-out;
transition: all .75s ease-in-out; }
.menu.is_open {
-webkit-transform: translate3D(0px, 0px, 0px) rotateX(2deg) scale(1);
-moz-transform: translate3D(0px, 0px, 0px) rotateX(2deg) scale(1);
-ms-transform: translate3D(0px, 0px, 0px) rotateX(2deg) scale(1);
-o-transform: translate3D(0px, 0px, 0px) rotateX(2deg) scale(1);
transform: translate3D(0px, 0px, 0px) rotateX(2deg) scale(1); }
.menu ul {
position: relative;
margin: 0px;
padding: 20px;
height: 70px;
width: 100%;
box-sizing: border-box;
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex; }
.menu ul li {
margin: 10px;
list-style: none;
height: 50px;
line-height: 50px;
text-align: center;
color: #eee;
font-size: 20px;
font-weight: 300;
background: rgba(238, 238, 238, 0.075);
cursor: pointer;
-webkit-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
-webkit-font-smoothing: antialiased;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1; }
.menu ul li.active {
color: palegoldenrod; }
.menu ul li:hover {
background: rgba(238, 238, 238, 0.15);
-webkit-transform: translate3D(0px, 0px, 0px) scale(1.05);
-moz-transform: translate3D(0px, 0px, 0px) scale(1.05);
-ms-transform: translate3D(0px, 0px, 0px) scale(1.05);
-o-transform: translate3D(0px, 0px, 0px) scale(1.05);
transform: translate3D(0px, 0px, 0px) scale(1.05); }
.copy {
font-family: moon;
font-weight: 100;
bottom: 10px;
letter-spacing: 4px;
font-size: 20px;
width: 100vw;
text-transform: uppercase;
text-decoration: none;
position: fixed;
width: 100%;
height: 30px;
line-height: 20px;
top: 20px;
left: 0px;
right: 0px;
z-index: 999;
text-align: center;
color: #fff;
-webkit-transform: translate3D(0px, -70px, 0px);
-moz-transform: translate3D(0px, -70px, 0px);
-ms-transform: translate3D(0px, -70px, 0px);
-o-transform: translate3D(0px, -70px, 0px);
transform: translate3D(0px, -70px, 0px);
-webkit-transition: all .75s ease-in-out;
-moz-transition: all .75s ease-in-out;
transition: all .75s ease-in-out; }
.copy a, .copy a:visited, .copy a:active {
margin-left: 10px;
color: gold; }
.copy.is_visible {
-webkit-transform: translate3D(0px, 0px, 0px);
-moz-transform: translate3D(0px, 0px, 0px);
-ms-transform: translate3D(0px, 0px, 0px);
-o-transform: translate3D(0px, 0px, 0px);
transform: translate3D(0px, 0px, 0px); }
/*---------------------------------------*/
.content {
/* These rules create an artificially confined space, so we get
a scrollbar that we can hide. They are not part of the hiding itself. */
border: 1px dashed gray;
padding: .5em;
white-space: pre-wrap;
height: 5em;
overflow-y: scroll;
}
.content::-webkit-scrollbar {
/* This is the magic bit */
display: none;
}
/*---------------------------------------*/
/*Box Info*/
/* .box div holds the bottom image */
.box {
background: white;
margin-bottom: 10px;
padding: 0 0 15px;
width: 50%;
}
/* this is the title h3 tag and contains the background
image for the title */
.box h3 {
background: white;
color: #000;
text-align: left;
font-size: 17px;
height: 35px;
line-height: 30px;
margin: 0;
padding: 0 15px;
}
/* The paragraph tag contains the side borders mark-up */
.box p {
font-family: moon;
text-align:left;
font-weight: 100;
font-size: 20px;
letter-spacing: 2px;
width: 90%;
text-decoration: none;
background: #ffffff none repeat scroll 0 0;
color: #444444;
line-height: 1.3em;
margin: 0;
padding: 15px 14px 0;
}
JS File
function HomeCtrl ($scope) {
$scope.test = "aaa"
}
Related
body {
background-color: #313449;
font-family: 'Open Sans', sans-serif;
}
#menu-toggle {
z-index: 1;
}
/* Hidden Checkbox */
#menu-toggle input {
opacity: 0;
width: 40px;
height: 40px;
z-index: 2;
/* checkbox on top */
position: absolute;
top: 0;
left: 0;
}
#menu-toggle input:checked {
transition: all 0.3s ease;
}
/* Hamburger */
#menu-toggle span {
display: block;
width: 30px;
border: #ffffff 2px solid;
margin-top: 5px;
border-radius: 2px;
transition: all 0.3s ease;
transform-origin: 0 0;
}
#menu-toggle input:checked ~ span {
/* all bars - top bar */
transform: rotate(45deg) translate(-1px, -3px);
border-color: #000000;
}
#menu-toggle input:checked ~ span:nth-child(3) {
/* middle bar */
transform: scale(0, 0);
opacity: 0;
}
#menu-toggle input ~ span:nth-child(4) {
/* bottom bar */
transform-origin: 0 100%;
}
#menu-toggle input:checked ~ span:nth-child(4) {
transform: rotate(-45deg) translate(0, 2px);
}
/* Menu Content */
#menu-toggle input:checked ~ #menu {
/* display menu */
left: 0;
}
#menu-toggle #menu {
background-color: grey;
background-color: rgba(255, 255, 255, 1);
width: 100px;
height: auto;
padding: 30px 30px;
text-align: center;
position: absolute;
top: 0;
left: -160px;
margin-top: 0;
transition: all 0.3s ease;
}
#menu-toggle li {
list-style: none;
margin: 30px 0;
}
#menu-toggle a li {
color: #000000;
text-decoration: none;
transition: color 0.3s ease;
}
#menu-toggle a li:hover {
color: red;
transition: color 0.3s ease;
}
<nav role="navigation">
<div id="menu-toggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Contact</li>
</a>
<a href="#">
<li>Sign in</li>
</a>
</ul>
</div>
</nav>
<section>
<h1>Title</h1>
<p>
Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nam commodo suscipit quam. Donec sodales sagittis magna.
<br />
<br />Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Donec vitae sapien ut libero venenatis faucibus. In hac habitasse platea dictumst.
<br />
<br />Cras ultricies mi eu turpis hendrerit fringilla. Morbi mollis tellus ac sapien. Nam commodo suscipit quam.
<br />
<br />Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Phasellus magna. Phasellus nec sem in justo pellentesque facilisis.
</p>
</section>
Hi,
I am struggling with my burger menu. It is hidden under my #menu div and I cannot find why. I tried z-index to my spans but it is not working.
What am I doing wrong here?
I also cannot understand why my 2 span and my third span are nth-child(3) and (4)? It is working like this but I cannot figure out why it's not (2) and (3).
Thanks;
add position:relative and z-index:1 to your span.
body {
background-color: #313449;
font-family: 'Open Sans', sans-serif;
}
#menu-toggle {
z-index: 1;
}
/* Hidden Checkbox */
#menu-toggle input {
opacity: 0;
width: 40px;
height: 40px;
z-index: 2;
/* checkbox on top */
position: absolute;
top: 0;
left: 0;
}
#menu-toggle input:checked {
transition: all 0.3s ease;
}
/* Hamburger */
#menu-toggle span {
display: block;
width: 30px;
border: #ffffff 2px solid;
margin-top: 5px;
border-radius: 2px;
transition: all 0.3s ease;
transform-origin: 0 0;
position:relative;
z-index:1;
}
#menu-toggle input:checked ~ span {
/* all bars - top bar */
transform: rotate(45deg) translate(-1px, -3px);
border-color: #000000;
}
#menu-toggle input:checked ~ span:nth-child(3) {
/* middle bar */
transform: scale(0, 0);
opacity: 0;
}
#menu-toggle input ~ span:nth-child(4) {
/* bottom bar */
transform-origin: 0 100%;
}
#menu-toggle input:checked ~ span:nth-child(4) {
transform: rotate(-45deg) translate(0, 2px);
}
/* Menu Content */
#menu-toggle input:checked ~ #menu {
/* display menu */
left: 0;
}
#menu-toggle #menu {
background-color: grey;
background-color: rgba(255, 255, 255, 1);
width: 100px;
height: auto;
padding: 30px 30px;
text-align: center;
position: absolute;
top: 0;
left: -160px;
margin-top: 0;
transition: all 0.3s ease;
}
#menu-toggle li {
list-style: none;
margin: 30px 0;
}
#menu-toggle a li {
color: #000000;
text-decoration: none;
transition: color 0.3s ease;
}
#menu-toggle a li:hover {
color: red;
transition: color 0.3s ease;
}
<nav role="navigation">
<div id="menu-toggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Contact</li>
</a>
<a href="#">
<li>Sign in</li>
</a>
</ul>
</div>
</nav>
<section>
<h1>Title</h1>
<p>
Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nam commodo suscipit quam. Donec sodales sagittis magna.
<br />
<br />Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Donec vitae sapien ut libero venenatis faucibus. In hac habitasse platea dictumst.
<br />
<br />Cras ultricies mi eu turpis hendrerit fringilla. Morbi mollis tellus ac sapien. Nam commodo suscipit quam.
<br />
<br />Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Phasellus magna. Phasellus nec sem in justo pellentesque facilisis.
</p>
</section>
I am trying to create a rollover effect image with CSS. The image starts with just a title overlaid, then when hovered over a text overlay appears. I am happy with how it is going so far, except the text area that comes over the top the text runs off to the right. Also you can scroll up and down, but i am assuming this is the same problem?
https://jsfiddle.net/p27sf4e1/3/
HTML
<div class="service-box">
<p class="box-title">Social Media</p>
<div class="service-overbox">
<h2 class="title">Social Media</h2>
<p class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac sodales lorem. Donec condimentum feugiat feugiat. Vestibulum blandit dolor risus, eget fringilla sem suscipit vel. In id ex ut nulla mollis suscipit nec in velit. Fusce auctor dapibus elit. Nam in justo sapien.</p>
</div>
</div>
CSS
.service-box .overtext {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
transform: translateY(40px);
-webkit-transform: translateY(40px);
}
.service-box .title {
text-align: center;
opacity: 0;
transition-delay: 0.1s;
transition-duration: 0.2s;
}
.service-box:hover .title,
.service-box:focus .title {
opacity: 1;
transform: translateY(0px);
-webkit-transform: translateY(0px);
}
.service-box .tagline {
text-align: center;
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.2s;
}
.service-box:hover .tagline,
.service-box:focus .tagline {
opacity: 1;
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
.service-overbox {
background-color: #000000;
position: relative;
color: #fff;
z-index: 2;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
width: 100%;
height: 100%;
padding: 30px;
}
.service-box:hover .service-overbox { opacity: 0.7; }
.service-box:hover .box-title { opacity: 0; }
.service-box {
cursor: pointer;
position: relative;
overflow: auto;
height: 380px;
width: 100%;
max-width: 580px!important;
background-image: url(http://www.voicecommunications.co.uk/voice-website-new/wp-content/uploads/2016/07/voice-social-media.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.box-title {
position: absolute;
top: 40%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
color: #ffffff;
font-size: 38px;
line-height: 38px;
font-family: 'Anton', sans-serif;
color: #00AAC4;
}
.tagline {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
line-height: 28px;
}
.title {
font-size: 40px!important;
font-family: 'Anton', sans-serif;
font-weight: 600;
margin-bottom: 10px;
}
Appreciate any comments that may help to solve.
Thanks
If you're not supporting IE7 and lower, try adding a box-sizing: border-box; property to your .service-overbox rule. It looks like it's the legacy box-model's handling of padding that is tripping you up.
.service-box .overtext {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
transform: translateY(40px);
-webkit-transform: translateY(40px);
}
.service-box .title {
text-align: center;
opacity: 0;
transition-delay: 0.1s;
transition-duration: 0.2s;
}
.service-box:hover .title,
.service-box:focus .title {
opacity: 1;
transform: translateY(0px);
-webkit-transform: translateY(0px);
}
.service-box .tagline {
text-align: center;
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.2s;
}
.service-box:hover .tagline,
.service-box:focus .tagline {
opacity: 1;
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
.service-overbox {
background-color: #000000;
position: relative;
color: #fff;
z-index: 2;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
width: 100%;
height: 100%;
padding: 30px;
box-sizing: border-box;
}
.service-box:hover .service-overbox {
opacity: 0.7;
}
.service-box:hover .box-title {
opacity: 0;
}
.service-box {
cursor: pointer;
position: relative;
overflow: auto;
height: 380px;
width: 100%;
max-width: 580px!important;
background-image: url(http://www.voicecommunications.co.uk/voice-website-new/wp-content/uploads/2016/07/voice-social-media.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.box-title {
position: absolute;
top: 40%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
color: #ffffff;
font-size: 38px;
line-height: 38px;
font-family: 'Anton', sans-serif;
color: blue;
}
.tagline {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
line-height: 28px;
}
.title {
font-size: 40px!important;
font-family: 'Anton', sans-serif;
font-weight: 600;
margin-bottom: 10px;
}
<div class="service-box">
<p class="box-title">Social Media</p>
<div class="service-overbox">
<h2 class="title">Social Media</h2>
<p class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac sodales lorem. Donec condimentum feugiat feugiat. Vestibulum blandit dolor risus, eget fringilla sem suscipit vel. In id ex ut nulla mollis suscipit nec in velit. Fusce auctor dapibus
elit. Nam in justo sapien.</p>
</div>
</div>
I want to use the carousel part of the HTML5 template that I found, so I put it in the website I'm doing using asp.net mvc.
It works but when I'm hovering to the right arrow, the last content of the carousel is just showing 1/4 of it.
I'm not really sure what is the cause of this, if it's the CSS. So here's the CSS code of the carousel. Help me pleeease.
/* Carousel */
.carousel {
position: relative;
overflow: hidden;
padding: 2em 0 2em 0;
margin-bottom: 0;
}
.carousel .forward, .carousel .backward {
position: absolute;
top: 50%;
width: 6em;
height: 12em;
margin-top: -6em;
cursor: pointer;
}
.carousel .forward:before, .carousel .backward:before {
content: '';
display: block;
width: 6em;
height: 6em;
border-radius: 100%;
background-color: #6e6f74;
position: absolute;
top: 50%;
margin-top: -3em;
-moz-transition: background-color 0.35s ease-in-out;
-webkit-transition: background-color 0.35s ease-in-out;
-o-transition: background-color 0.35s ease-in-out;
-ms-transition: background-color 0.35s ease-in-out;
transition: background-color 0.35s ease-in-out;
-webkit-backface-visibility: hidden;
}
.carousel .forward:after, .carousel .backward:after {
content: '';
width: 3em;
height: 3em;
position: absolute;
top: 50%;
margin: -1.5em 0 0 0;
background: url("images/arrow.svg") no-repeat center center;
}
.carousel .forward:hover:before, .carousel .backward:hover:before {
background-color: #0066cc;
}
.carousel .forward {
right: 0;
}
.carousel .forward:before {
right: -3em;
}
.carousel .forward:after {
right: -0.25em;
}
.carousel .backward {
left: 0;
}
.carousel .backward:before {
left: -3em;
}
.carousel .backward:after {
left: -0.25em;
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
}
.carousel .reel {
white-space: nowrap;
position: relative;
-webkit-overflow-scrolling: touch;
padding: 0 2em 0 2em;
}
.carousel article {
display: inline-block;
width: 18em;
background: #fff;
text-align: center;
padding: 0 1em 3em 1em;
margin: 0 2em 0 0;
white-space: normal;
opacity: 1.0;
-moz-transition: opacity 0.75s ease-in-out;
-webkit-transition: opacity 0.75s ease-in-out;
-ms-transition: opacity 0.75s ease-in-out;
transition: opacity 0.75s ease-in-out;
}
.carousel article.loading {
opacity: 0;
}
.carousel article .image {
position: relative;
left: -1em;
top: 0;
width: auto;
margin-right: -2em;
margin-bottom: 3em;
}
.carousel article p {
text-align: center;
}
/* Wide */
#media screen and (max-width: 1680px) {
/* Carousel */
.carousel {
padding: 1.5em 0 1.5em 0;
}
.carousel .reel {
padding: 0 1.5em 0 1.5em;
}
.carousel article {
width: 18em;
margin: 0 1.25em 0 0;
}
}
/* Narrower */
#media screen and (max-width: 840px) {
/* Carousel */
.carousel {
padding: 1.25em 0 1.25em 0;
}
.carousel article {
width: 18em;
margin: 0 1em 0 0;
}
}
#media screen and (max-width: 736px) {
/* Carousel */
.carousel {
padding: 0.5em 0 0.5em 0;
}
.carousel .reel {
padding: 0 0.5em 0 0.5em;
}
.carousel article {
width: 14em;
padding-bottom: 2em;
margin: 0 0.5em 0 0;
}
.carousel article .image {
margin-bottom: 2em;
}
}
And here's the .cshtml:
<!-- Carousel -->
<section class="carousel">
<div class="reel">
<article>
<header>
<h3>Pulvinar sagittis congue</h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<header>
<h3>Fermentum sagittis proin</h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<header>
<h3>Sed quis rhoncus placerat</h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<header>
<h3>Ultrices urna sit lobortis</h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<header>
<h3>Varius magnis sollicitudin</h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<header>
<h3>Pulvinar sagittis congue</h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<header>
<h3>Fermentum sagittis proin</h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<header>
<h3>Sed quis rhoncus placerat</h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<header>
<h3>Ultrices urna sit lobortis</h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<header>
<h3>Varius magnis sollicitudin</h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
</div>
</section>
I've been trying to add a dropdown menu to the header nav in a website, but the dropdown will simply not be visible outside the header element.
Here's a jsFiddle showing the problem. I've tried setting overflow to visible, but that hasn't worked so far. I'd really appreciate if someone could point me in the right direction
Code:
header {
background-color: white;
width: 100%;
overflow: visible;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
header:after {
content: "";
display: table;
clear: both;
}
header .oc {
height: 105px;
position: relative;
display: inline-block;
width: 100%;
}
.oc {
max-width: 1300px;
margin-left: auto;
margin-right: auto;
padding: 0 10px;
}
.oc:after {
content: "";
display: table;
clear: both;
}
header .nav-logo {
display: block;
left: 10px;
height: 54px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
header .nav-logo {
display: block;
left: 10px;
height: 54px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
header .main-nav {
right: 10px;
position: absolute;
top: 40%;
-webkit-transform: translateY(-40%);
-moz-transform: translateY(-40%);
-ms-transform: translateY(-40%);
-o-transform: translateY(-40%);
transform: translateY(-40%);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1000;
-webkit-transform: scale3d(1, 1, 1);
}
header .main-nav ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
header .main-nav ul li {
display: inline-block;
}
header .main-nav-item {
color: #666668;
font-weight: 200;
font-size: 21px;
margin-left: 25px;
padding: 0 0 4px 0;
position: relative;
outline: none;
transition: all 0.3s ease 0s;
}
header .main-nav-item:after {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 2px;
background: #89a959;
content: "";
opacity: 0;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: opacity 0.3s, -moz-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
transform: translateY(10px);
}
header .main-nav ul ul {
display: none;
background: #fff;
border-top: 2px solid #73973f;
padding: 0;
position: absolute;
top: 150%;
z-index: 10000;
transition: all 0.3s ease 0s;
}
header .main-nav ul ul li {
display: block;
position: relative;
padding: 15px;
transition: all 0.3s ease 0s;
}
header .main-nav ul ul li a {
color: #666;
}
header .main-nav ul ul li:hover {
background: #eee;
}
header .main-nav ul li:hover > ul {
display: block;
}
.pitch {
background-color: #f6faf0;
padding: 40px 0;
position: relative;
text-align: center;
-webkit-transition: height 1.5s ease-in-out, padding 0.5s ease-in-out;
-moz-transition: height 1.5s ease-in-out, padding 0.5s ease-in-out;
transition: height 1.5s ease-in-out, padding 0.5s ease-in-out;
}
.pitch:after {
content: "";
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: -25px;
z-index: 2;
height: 0;
width: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 25px solid #f6faee;
}
<header>
<div class="oc">
<a href="/" class="nav-logo">
<img src="http://placehold.it/300x50"
</a>
<nav class="main-nav">
<ul>
<li>About</li>
<li>Plans</li>
<li>
Contact
<ul>
<li>Request a Demo</li>
<li>Talk To Us</li>
</ul>
</li>
<li>Request a Demo</li>
<li>API</li>
<li>Login</li>
</ul>
</nav>
</div>
</header>
<div class="pitch">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec condimentum elit. Cras eget fringilla velit, id pulvinar libero. Sed venenatis, orci eu aliquet lacinia, orci eros pharetra erat, ac bibendum ex purus rhoncus erat. Sed pharetra in orci sed sollicitudin. Aliquam fringilla mollis arcu, aliquam euismod urna commodo nec. Nunc ut lorem augue. Phasellus quis nibh pretium, ultricies mauris et, tincidunt nisi. Suspendisse fermentum, libero eu pulvinar semper, massa ante tincidunt nisi, sed aliquet elit justo a purus.</p>
</div>
It is just a z-index issue. Your header dropdown menu is being "hidden" behind the .pitch content. So I updated your JSFiddle.
Just add position:relative;z-index:2; to .header and position: relative;z-index:1; to .pitch. Then your dropdown will overlay .pitch.
How can fill the gap at the bottom while using -webkit-transform:?
There is a gap when div becoming small. How can I fix this gap?
Here is the code
<div id="popUp">
<div id="trans">
<h1>hover me</h1>
</div>
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate</p>
</div>
CSS
#popUp{
height: auto;
width:400px;
background: #EEE;
}
#trans{
width:100%;
height:200px;
background: yellow;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform-origin: left top 0;
-moz-transform-origin: left top 0;
-o-transform-origin: left top 0;
-ms-transform-origin: left top 0;
transform-origin: left top 0;
}
#trans:hover{
-moz-transform: scale(.5);
-ms-transform: scale(.5);
-o-transform: scale(.5);
-webkit-transform: scale(.5);
transform: scale(.5)
}
h1{
text-align: center;
}
Demo: http://jsfiddle.net/sweetmaanu/XpJEQ/3/
I couldn't find a proper solution.
The only solution I can think of would be to remove the element from the DOM flow (set it's parent to position: relative, then absolutely position the element) and animate the padding-top of the subsequent element.
Demo: http://jsfiddle.net/XpJEQ/7/
CSS (minus vendor prefixes):
#popUp {
background: #EEE;
position: relative;
width: 400px;
max-height: 300px;
}
#trans {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200px;
background: yellow;
transition: all 0.5s;
transform-origin: left top 0;
}
#trans:hover { transform: scale(.5); }
#trans + * {
padding-top: 210px;
transition: all 0.5s;
}
#trans:hover + * { padding-top: 110px; }
h1 { text-align: center; }
HTML:
<div id="popUp">
<div id="trans">
<h1>hover me</h1>
</div>
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate</p>
</div>
CSS3 transform scale2d will not cause repositioning of elements around it. If you want the text to move, you would need to change the actual height and width of the element.
I've slightly modified your initial code as following (there is no gap between text and yellow rectangle on transform):
#popUp{
height: 300px;
width:400px;
background: #EEE;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform-origin: left top 0;
-moz-transform-origin: left top 0;
-o-transform-origin: left top 0;
-ms-transform-origin: left top 0;
transform-origin: left top 0;
}
#popUp:hover{
-moz-transform: scale(.5);
-ms-transform: scale(.5);
-o-transform: scale(.5);
-webkit-transform: scale(.5);
transform: scale(.5)
}
#trans{
width:100%;
height:200px;
background: yellow;
}
h1{
text-align: center;
}
It fits the initial requirements of eliminating that gap. If there are any additional requirements, then the code can be modified, correspondingly.