For a small project, I need this little website that pulls data from a server via AJAX and outputs it like shown in this picture. However the problem isn't JavaScript, but pure HTML+CSS..
You can take a look at this page via jsfiddle by clicking this, or you can take a look at the quoted code that is quoted by the end of this post: http://jsfiddle.net/RdJUM/
The list is build with the following html snippet:
<div id="update">
<ul class="searchresults">
<li>
<h2>Caption</h2>
<div>
<img src="" alt="" />
<p>Text</p>
</div>
</li>
</ul>
</div>
It is formatted via CSS, but the important part is this:
#update ul li {
height: 110px;
overflow: hidden;
/* ... */
/*
-webkit-transition: height 0.3s ease-out;
-moz-transition: height 0.3s ease-out;
-o-transition: height 0.3s ease-out;
transition: height 0.3s ease-out;
*/
}
#update li:hover {
height: auto;
}
This works fine as long as you leave the transitions commented out. You hover on the article and it will scale the height to "auto" which gives exactly the height of your content and nothing more. However if you uncomment the transistions, WebKit (Chrome 30, Safari 6) do a really shaky effect that is completely unusable. For convenience this is the jsfiddle link to the uncommented version: http://jsfiddle.net/bQZ7F/
In Firefox 23 and Opera 12 this transition is deactivated, so it will behave as if the CSS part wasn't there.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Live Search</title>
<link rel="stylesheet" href="mystyle.css" />
</head>
<body>
<div id="searcharea">
<label for="search">live search</label>
<p>Enter the name or info about a speaker</p>
<input type="search" name="search" id="search" placeholder="name or info" />
</div>
<div id="update">
<ul class="searchresults">
<li>
<h2>Lorem Ipsum</h2>
<div>
<img src="http://placehold.it/80x80" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper dui sit amet erat faucibus egestas. Vivamus eget commodo ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis ac magna metus. Donec eget auctor lorem. Cras vehicula nulla quis facilisis ultrices. Duis bibendum tellus ut porta suscipit. Pellentesque vitae orci a orci tincidunt posuere at et quam. Aliquam erat volutpat. Etiam dignissim egestas arcu non lacinia. Sed placerat sagittis enim eget bibendum. Suspendisse mollis consequat libero, ut porttitor eros consequat vitae. Mauris dolor nunc, ultrices eu leo sed, ornare lacinia quam. Pellentesque convallis massa at massa egestas, vestibulum vulputate dolor dignissim. Nullam sed metus a odio convallis molestie non a nisl. Donec eleifend lacus ut suscipit cursus. Cras viverra urna at arcu lacinia, in viverra neque pharetra. Suspendisse pellentesque tortor sit amet lacus elementum gravida et non risus. In cursus turpis vitae tortor molestie congue. Phasellus laoreet sit amet neque sit amet egestas. Aliquam sagittis ac massa vitae pulvinar. Vivamus bibendum odio sed enim porta pretium. Ut varius lacinia elit ut interdum. In in pretium metus.</p>
</div>
</li>
<li>
<h2>Lorem Ipsum</h2>
<div>
<img src="http://placehold.it/80x80" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper dui sit amet erat faucibus egestas. Vivamus eget commodo ante.</p>
</div>
</li>
<li>
<h2>Lorem Ipsum</h2>
<div>
<img src="http://placehold.it/80x80" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper dui sit amet erat faucibus egestas. Vivamus eget commodo ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis ac magna metus. Donec eget auctor lorem. Cras vehicula nulla quis facilisis ultrices. Duis bibendum tellus ut porta suscipit. Pellentesque vitae orci a orci tincidunt posuere at et quam. Aliquam erat volutpat. Etiam dignissim egestas arcu non lacinia. Sed placerat sagittis enim eget bibendum. Suspendisse mollis consequat libero, ut porttitor eros consequat vitae.</p>
</div>
</li>
<li>
<h2>Caption</h2>
<div>
<img src="" alt="" />
<p>Text</p>
</div>
</li>
</ul>
</div>
</body>
</html>
CSS:
/* #override
http://localhost/~simon/tests/ajax_search/mystyle.css */
body {
background: #DAD7C7;
}
#searcharea {
margin: 0 auto;
text-align: center;
background: #BF996B;
padding: 10px;
width: 30%;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
#searcharea label {
font: bold 1.3em Arial;
text-transform: uppercase;
padding-bottom: 5px;
color: #A61C1C;
}
#searcharea p {
margin: 0;
line-height: 1em;
padding-bottom: 5px;
}
#searcharea input {
width: 80%;
text-align: center;
}
#update {
font-family: Georgia, "Times New Roman", Times, serif;
width: 70%;
margin: 0 auto;
border-top: 1px dotted #CCC;
}
#update ul {
list-style: none;
margin: 0;
padding: 0;
}
#update ul li {
width: 100%;
padding: 0 20px 20px;
background: #EEE;
height: 110px;
overflow: hidden;
border-bottom: 1px dotted #CCC;
-webkit-animation: myanim 1s;
-moz-animation: myanim 1s;
-o-animation: myanim 1s;
animation: myanim 1s;
-webkit-transition: height 0.3s ease-out;
-moz-transition: height 0.3s ease-out;
-o-transition: height 0.3s ease-out;
transition: height 0.3s ease-out;
}
#update li:hover {
background: #FFFCE5;
height: auto;
}
#update ul li div {
margin: 0;
padding: 0;
}
#update ul li div p {
margin: 0;
}
#update h2 {
margin: 0;
padding: 0;
font-size: 1.2em;
padding-bottom: 5px;
padding-top: 20px;
font-family: Arial, Helvetica, sans-serif;
color: #BF5841;
border-bottom: 1px dotted #CCC;
margin-bottom: 10px;
}
#update img {
float: left;
width: 80px;
margin-right: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#-webkit-keyframes myanim {
0% { opacity: 0.3; }
100% { opacity: 1.0; }
}
#-moz-keyframes myanim {
0% { opacity: 0.3; }
100% { opacity: 1.0; }
}
#-o-keyframes myanim {
0% { opacity: 0.3; }
100% { opacity: 1.0; }
}
#keyframes myanim {
0% { opacity: 0.3; }
100% { opacity: 1.0; }
}
Thanks for the hint, seems that it isn't possible without using JavaScript:
Set CSS to these values
#update ul li {
height: 110px;
/* ... */
}
#update li:hover {
background: #FFFCE5;
}
Principle of JavaScript code:
// Mouse-enter Event
curHeight = $(this).height();
autoHeight = $(this).css('height', 'auto').height();
$(this).height(curHeight).animate({height: autoHeight}, 1000);
// Mouse-leave Event
// same, but vice versa
You can grab the full code here: http://jsfiddle.net/9eaAq/
Related
I'm having some trouble with an Accordion Dropdown snippet on codepen.
function togglePara(n, m) {
var para = document.getElementById(m + '-para' + n);
para.classList.toggle('active');
}
function showModule(m) {
debugger;
var item = document.getElementById(m);
var other = document.getElementsByClassName('dropdown');
for (var i = 0; i < other.length; i++) {
other[i].style.display = "none";
}
item.style.display = "block";
}
* {
padding: 0;
margin: 0;
font-family: 'montserrat', sans-serif;
}
main {
background-color: salmon;
overflow: auto;
padding-top: 100px;
height: 100vh;
width: 100vw;
}
#accordion {
display: none;
}
.dropdown {
width: auto;
margin: auto;
padding: 2em;
}
section {
margin: auto;
width: 70%;
overflow: hidden;
}
a {
display: block;
width: 100%;
text-align: center;
text-decoration: none;
color: #4673AD;
background-color: #eee;
padding: 1em 0;
position: relative;
z-index: 1;
}
a:hover {
color: #eee;
background-color: #4673AD;
transition: .5s;
}
#keyframes slide {
0% {
max-height: 0
}
100% {
max-height: 300px
}
}
p {
display: none;
height: -400px;
padding: 0;
}
.active {
display: block;
background-color: #E5FB8B;
color: #444;
text-align: justify;
padding: 1em;
padding-top: 2em;
position: relative;
z-index: 0;
height: -400px;
animation: slide 1s 1s;
}
nav {
display: none;
}
nav section p {
test-align: center;
}
.buttons {
display: flex;
width: 70%;
margin: 1em auto;
}
.button {
padding: 1em;
border: 2px solid #E5FB8B;
background-color: #E5FB8B;
color: #333;
border-radius: 8px;
width: 40%;
margin: 1em;
}
a.button:hover {
border: 2px solid #4673AD;
color: #e5fb8b;
}
<main>
<div id="accordion" class="dropdown">
<section>
Read Me First
<p id="accordion-para1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
<section>
No, Read <i>Me</i> First
<p id="accordion-para2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
<section>
Just Read <i>Me</i>, Please
<p id="accordion-para3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
</div>
<nav id="menu" class="dropdown">
<section>
<a href="javascript:void(0)" onclick=togglePara(1)>Home</a></section>
<section>
Portfolio
<p id="menu-para1">Item one</p>
<p id="menu-para2">Item Two</p>
</section>
<section>
Meet The Team
<p id="menu-para3">John Doe</p>
<p id="menu-para4">Sara Faun</p>
</section>
</nav>
<div class="buttons">
Show Accordion
Show Menu
</div>
</main>
I want to animate the dropdown's expansion. I want it to start from the top of the container. Now, it starts from the end of the padding. Doesn't look nice. I've delayed the animation 1s so you can tell what I mean
Here's a link to my pen: https://codepen.io/b3u/pen/RBbeWy. Thanks in advance!
Transition instead of animation, in this case, as it is simpler.
didn't touch the animation code, just created the transition effect.
Transition on max-height will not use GPU processing so be aware of possible performance issues on mobile devices (or old computers)
function togglePara(n, m) {
var para = document.getElementById(m + '-para' + n);
para.classList.toggle('active');
}
function showModule(m) {
var item = document.getElementById(m);
var other = document.getElementsByClassName('dropdown');
for (var i = 0; i< other.length ; i++){
other[i].style.display = "none";
}
item.style.display = "block";
}
*{
padding: 0;
margin: 0;
font-family: 'montserrat', sans-serif;
}
main {
background-color: salmon;
overflow: auto;
padding-top: 100px;
height: 100vh;
width: 100vw;
}
#accordion {
display: none;
}
.dropdown {
width: auto;
margin: auto;
padding: 2em;
}
section {
margin: auto;
width: 70%;
overflow: hidden;
}
a {
display: block;
width: 100%;
text-align: center;
text-decoration: none;
color: #4673AD;
background-color: #eee;
padding: 1em 0;
position: relative;
z-index: 1;
}
a:hover {
color: #eee;
background-color: #4673AD;
transition: .5s;
}
#keyframes slide{
0% {max-height: 0}
100% {max-height: 300px}
}
p {
display: block;
max-height: 0;
overflow:hidden;
padding: 0;
transition:max-height 0.5s ease-out,padding 0.5s ease-out;
-moz-transition:max-height 0.5s ease-out,padding 0.5s ease-out;
-webkit-transition:max-height 0.5s ease-out,padding 0.5s ease-out;
background-color: #E5FB8B;
color: #444;
text-align: justify;
position: relative;
z-index: 0;
box-sizing:border-box;
}
p.active{
padding: 2em 1em 1em 1em;
max-height: 1000px;
transition:max-height 2.5s ease-out,padding 0.5s ease-out;
-moz-transition:max-height 2.5s ease-out,padding 0.5s ease-out;
-webkit-transition:max-height 2.5s ease-out,padding 0.5s ease-out;
}
nav{
display: none;
}
nav section p {
test-align: center;
}
.buttons {
display: flex;
width: 70%;
margin: 1em auto;
}
.button {
padding: 1em;
border: 2px solid #E5FB8B;
background-color: #E5FB8B;
color: #333;
border-radius: 8px;
width: 40%;
margin: 1em;
}
a.button:hover{
border: 2px solid #4673AD;
color: #e5fb8b;
}
<main>
<div id="accordion" class="dropdown">
<section>
Read Me First
<p id="accordion-para1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
<section>
No, Read <i>Me</i> First
<p id="accordion-para2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
<section>
Just Read <i>Me</i>, Please
<p id="accordion-para3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
</div>
<nav id="menu" class="dropdown">
<section>
<a href="javascript:void(0)" onclick=togglePara(1)>Home</a></section>
<section>
Portfolio
<p id="menu-para1">Item one</p>
<p id="menu-para2">Item Two</p>
</section>
<section>
Meet The Team
<p id="menu-para3">John Doe</p>
<p id="menu-para4">Sara Faun</p>
</section>
</nav>
<div class="buttons">
Show Accordion
Show Menu
</div>
</main>
Below an updated version of your code, the change was adding reset for padding at the top and bottom at the beginning of the animation. Hope this help.
All the best!
function togglePara(n, m) {
var para = document.getElementById(m + '-para' + n);
para.classList.toggle('active');
}
function showModule(m) {
debugger;
var item = document.getElementById(m);
var other = document.getElementsByClassName('dropdown');
for (var i = 0; i < other.length; i++) {
other[i].style.display = "none";
}
item.style.display = "block";
}
* {
padding: 0;
margin: 0;
font-family: 'montserrat', sans-serif;
}
main {
background-color: salmon;
overflow: auto;
padding-top: 100px;
height: 100vh;
width: 100vw;
}
#accordion {
display: none;
}
.dropdown {
width: auto;
margin: auto;
padding: 2em;
}
section {
margin: auto;
width: 70%;
overflow: hidden;
}
a {
display: block;
width: 100%;
text-align: center;
text-decoration: none;
color: #4673AD;
background-color: #eee;
padding: 1em 0;
position: relative;
z-index: 1;
}
a:hover {
color: #eee;
background-color: #4673AD;
transition: .5s;
}
#keyframes slide{
0% {max-height: 0; padding-top: 0; padding-bottom: 0}
100% {max-height: 300px}
}
p {
display: none;
height: -400px;
padding: 0;
}
.active {
display: block;
background-color: #E5FB8B;
color: #444;
text-align: justify;
padding: 1em;
padding-top: 2em;
position: relative;
z-index: 0;
height: -400px;
animation: slide 1s 1s;
}
nav {
display: none;
}
nav section p {
test-align: center;
}
.buttons {
display: flex;
width: 70%;
margin: 1em auto;
}
.button {
padding: 1em;
border: 2px solid #E5FB8B;
background-color: #E5FB8B;
color: #333;
border-radius: 8px;
width: 40%;
margin: 1em;
}
a.button:hover {
border: 2px solid #4673AD;
color: #e5fb8b;
}
<main>
<div id="accordion" class="dropdown">
<section>
Read Me First
<p id="accordion-para1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
<section>
No, Read <i>Me</i> First
<p id="accordion-para2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
<section>
Just Read <i>Me</i>, Please
<p id="accordion-para3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
</div>
<nav id="menu" class="dropdown">
<section>
<a href="javascript:void(0)" onclick=togglePara(1)>Home</a></section>
<section>
Portfolio
<p id="menu-para1">Item one</p>
<p id="menu-para2">Item Two</p>
</section>
<section>
Meet The Team
<p id="menu-para3">John Doe</p>
<p id="menu-para4">Sara Faun</p>
</section>
</nav>
<div class="buttons">
Show Accordion
Show Menu
</div>
</main>
It's ancient, but there are still some people who use InsaneJournal (an offshoot of Danga Interactive's LiveJournal), myself included.
I'm trying to add some very basic content organizers; specifically, CSS-only (InsaneJournal prevents the use of jQuery) tabs and a modal window. But I cannot get them to work. I've tested the code snippets in JSFiddle, and they work fine (I'll include the snippets below, too), which makes me think there is something in the pre-made layout I'm using which prevents the snippets from working as expected.
Can anyone offer any insight? The website is here and these are the snippets:
Modal Window:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity: 1;
pointer-events: auto;
}
.modalDialog>div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
<h1>Open Modal</h1>
<div id="openModal" class="modalDialog">
<div> X
<h2>Modal Window</h2>
<p>This is a modal window.</p>
</div>
</div>
CSS Tabs:
.tabs {
color: #333;
font-family: arial, sans-serif;
margin: auto;
font-size: 1em;
width: 80%;
}
.tabs ul.tab-nav {
display: table;
border-spacing: 2px;
list-style: none;
margin: 0;
padding: 0;
width: 100%
}
.tabs ul.tab-nav li {
display: table-cell;
}
.tabs ul.tab-nav li a {
padding: 10px;
background-color: #ccc;
color: #333;
display: block;
font-size: 1.214em;
font-weight: bold;
margin: 2px 0;
padding: 10px;
text-decoration: none;
}
.tabs ul.tab-nav li a:hover {
background-color: #ddd;
}
.tabs section article {
display: none;
padding: 0 5px 0 10px;
}
.tabs section:target article {
display: block;
}
<div class="tabs">
<h1>CSS-only Tabs (POC)</h1>
<ul class="tab-nav">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<section id="option1">
<article>
<h2>Heading 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut lacus vel eros maximus pharetra. Nullam mattis posuere eros, ac pellentesque felis lobortis id. Fusce sed varius mauris. Integer ut pulvinar metus. Vestibulum ?obortis non enim
quis pulvinar. Maecenas et pulvinar mi. Pellentesque gravida eleifend nisl vitae efficitur. Curabitur sit amet convallis elit, sit amet ultrices enim. Integer vitae erat sit amet mi viverra gravida.</p>
</article>
</section>
<section id="option2">
<article>
<h2>Heading 2</h2>
<p>Aenean eu mauris sagittis magna fringilla rhoncus. Mauris ornare felis at rutrum condimentum. Fusce in fermentum ipsum. Duis et dignissim orci, at venenatis urna. Etiam condimentum malesuada placerat. In sollicitudin justo fermentum velit facilisis
aliquam. Duis psuere, neque iaculis dignissim scelerisque, dolor orci vulputate dui, et pulvinar dui ante pharetra ipsum.</p>
</article>
</section>
<section id="option3">
<article>
<h2>Heading 3</h2>
<p>Duis lectus magna, tristique quis tristique ac, eleifend nec sapien. Quisque vel eros nec tortor efficitur malesuada. Suspendisse malesuada, erat eu posuere finibus, velit tellus placerat mauris, id pharetra nunc velit et nisi. Phasellus non diam
sapien. Ut tellus est, tristique sit amet arcu eget, egestas porta sapien. Sed maximus, turpis ut tempor imperdiet, sem nisi lobortis enim, vel ultrices elit turpis eu nisi. Morbi efficitur luctus justo, eget ultrices lorem luctus ac. Quisque
id augue risus. Cras sagittis dapibus sapien vehicula auctor. Nullam iaculis ipsum leo, sed ornare arcu placerat sit amet. Aenean aliquet dictum ligula non rhoncus. Duis lacinia, nisl sed porttitor scelerisque, ex ex viverra massa, sit amet ullamcorper
sem nulla sit amet urna.</p>
</article>
</section>
</div>
These are pasted directly from the code I'm using on my blog. As you can see, they operate (here, in Codepen, in jsFiddle, everywhere) as expected.
I do not see why (or what) would prevent these really very simple codes from operating as they ought to. Can anyone tell me what is going on here? Or point me in the right direction? Or even offer a means of circumventing what's going on here? I'll take any kind of help.
Thank you for your time, and I apologize if this is very simplistic. I'm not very advanced at all (as if that isn't obvious).
EDIT As pointed out by Mehravish Temkar, the div ids are not showing up in the page even after they've been entered. Does anyone know what is removing them from the code? And, for that matter (and just out of curiosity), why they would be removed?
I'm working on a responsive horizontal accordion that have images with text overlays. What I want to do is have the titles on each image display on the left side of each image, so that the text will be displayed without the user having to hover over it, like this:
When the user hovers over the image, I'd like it to stay on the left side, and display the description. My issue is getting the title to display on the left side. I can see that it is animated on hover; it goes from -90deg to 0.
CSS/HTML:
.accordion {
width: 100%;
max-width: 2100px;
height: 350px;
overflow: hidden;
margin: 50px auto;
}
.accordion ul {
width: 100%;
display: table;
table-layout: fixed;
margin: 0;
padding: 0;
}
.accordion ul li {
display: table-cell;
vertical-align: bottom;
position: relative;
width: 16.666%;
height: 350px;
background-repeat: no-repeat;
background-position: center center;
transition: all 500ms ease;
}
.accordion ul li div a h2 {
display: block;
overflow: auto;
-ms-transform: rotate(270deg); /* IE 9 */
-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
transform: rotate(270deg);
background-color: rgba(255,255,255,.5);
width: 100%;
}
.accordion ul li div a {
display: block;
height: 350px;
width: 100%;
position: relative;
z-index: 3;
vertical-align: bottom;
padding: 15px 20px;
box-sizing: border-box;
color: #000;
text-decoration: none;
transition: all 200ms ease;
}
.accordion ul li div a * {
opacity: 0;
margin: 0;
width: 100%;
position: relative;
z-index: 5;
overflow: fill;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
-webkit-transition: all 400ms ease;
transition: all 400ms ease;
background-color: rgba(255,255,255,.5);
padding: 5px;
}
.accordion ul li div a h2 {
text-overflow: clip;
font-size: 24px;
text-transform: uppercase;
margin-bottom: 2px;
top: 60px;
}
.accordion ul li div a p {
top: 80px;
font-size: 14px;
height: 100px;
}
.accordion ul li:nth-child(1) { background-image: url("http://placehold.it/1350x350"); }
.accordion ul li:nth-child(2) { background-image: url("http://placehold.it/1350x350"); }
.accordion ul li:nth-child(3) { background-image: url("http://placehold.it/1350x350"); }
.accordion ul li:nth-child(4) { background-image: url("http://placehold.it/1350x350"); }
.accordion ul:hover li { width: 8%; }
.accordion ul:hover li:hover { width: 60%; }
.accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.4); }
.accordion ul:hover li:hover a * {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
#media screen and (max-width: 600px) {
body { margin: 0; }
.accordion { height: auto; }
.accordion ul li,
.accordion ul li:hover,
.accordion ul:hover li,
.accordion ul:hover li:hover {
position: relative;
display: table;
table-layout: fixed;
width: 100%;
-webkit-transition: none;
transition: none;
}
}
<div class="accordion w3-center">
<ul>
<li>
<div> <a href="#">
<h2>HEADER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus, a scelerisque purus accumsan sit amet.<br>
<button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p>
</a> </div>
</li>
<li>
<div> <a href="#">
<h2>HEADER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus, a scelerisque purus accumsan sit amet.<br>
<button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p>
</a> </div>
</li>
<li>
<div> <a href="#">
<h2>HEADER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus, a scelerisque purus accumsan sit amet.<br>
<button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p>
</a> </div>
</li>
<li>
<div> <a href="#">
<h2>HEADER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus, a scelerisque purus accumsan sit amet.<br>
<button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p>
</a> </div>
</li>
</ul>
</div>
Code pen:
http://codepen.io/xxdash/pen/pPrwBw
First, let me explain the using of a universal selector which is * in CSS matches any element type. It can be implied (and therefore omitted) if it isn’t the only component of the simple selector. Below is the example shows both are equivalent:
*.module {
display: block;
}
.module {
display: block;
}
In my opinion, it is not recommended to use the Universal in CSS unless you want to reset all the elements.
I have seen your code and reviewed and found a bit complex coding for the display method in descendants. For example, you can use adjacent sibling selector for your heading element as done in my code.
.accordion ul li div + h2 {
your declaration
}
I have removed the h2 element which was a child of an anchor element which is forcing to transform with the hover case. I have wrapped the h2 element with the span element and transformed its direction to a vertical position with negative positioning from the bottom and left as when rotating element at an angle, the edge of the element also rotated leaving a gap so we need to fix that with negative/position margins.
Here is the modified code.
Hope this is what you are looking for.
.accordion {
width: 100%;
max-width: 1000px;
height: 300px;
margin: 0 auto;
}
.accordion ul {
width: 100%;
display: table;
table-layout: fixed;
margin: 0;
padding: 0;
}
.accordion ul li {
display: table-cell;
vertical-align: bottom;
position: relative;
width: 16.666%;
height: 300px;
background-repeat: no-repeat;
background-position: center center;
transition: all 500ms ease;
}
.accordion ul li div {
position: relative;
}
.accordion ul li div span {
background-color: rgba(255, 0, 0, .5);
font-size: 20px;
line-height: 34px;
font-weight: 300;
position: absolute;
display: block;
width: 300px;
height: 30px;
-webkit-transform: rotate(-90deg) translateX(-50%) translateY(-150px);
-moz-transform: rotate(-90deg) translateX(-50%) translateY(-150px);
-ms-transform: rotate(-90deg) translateX(-50%) translateY(-150px);
transform: rotate(-90deg) translateX(-50%) translateY(-150px);
left: 15px;
top: -15px;
white-space: nowrap;
z-index: 10000;
cursor: default !important;
}
.accordion h2 {
font-size: 20px;
margin: 0;
}
.accordion ul li div a {
display: block;
height: 300px;
width: 100%;
position: relative;
z-index: 3;
vertical-align: bottom;
padding: 15px 20px;
box-sizing: border-box;
color: #000;
text-decoration: none;
transition: all 200ms ease;
}
.accordion ul li div a * {
opacity: 0;
margin: 0;
width: 100%;
position: relative;
z-index: 5;
overflow: fill;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
-webkit-transition: all 400ms ease;
transition: all 400ms ease;
background-color: rgba(255, 255, 255, .5);
padding: 0px;
}
.accordion ul li div a p {
top: 0;
font-size: 14px;
}
.accordion ul li:nth-child(1) {
background-image: url("http://placehold.it/1350x350");
}
.accordion ul li:nth-child(2) {
background-image: url("http://placehold.it/1350x350");
}
.accordion ul li:nth-child(3) {
background-image: url("http://placehold.it/1350x350");
}
.accordion ul li:nth-child(4) {
background-image: url("http://placehold.it/1350x350");
}
.accordion ul:hover li {
width: 8%;
}
.accordion ul:hover li:hover {
width: 60%;
}
.accordion ul:hover li:hover a {
background: rgba(0, 0, 0, 0.4);
}
.accordion ul:hover li:hover a * {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
#media screen and (max-width: 600px) {
body {
margin: 0;
}
.accordion ul li,
.accordion ul li:hover,
.accordion ul:hover li,
.accordion ul:hover li:hover {
position: relative;
display: table;
table-layout: fixed;
width: 100%;
-webkit-transition: none;
transition: none;
}
}
<div class="accordion w3-center">
<ul>
<li>
<div><span><h2>HEADER With Longer Text</h2></span>
<a href="#">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo
libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus,
a scelerisque purus accumsan sit amet.<br>
<button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p>
</a>
</div>
</li>
<li>
<div><span><h2>HEADER with longer text</h2></span>
<a href="#">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo
libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus,
a scelerisque purus accumsan sit amet.<br>
<button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p>
</a>
</div>
</li>
<li>
<div><span><h2>HEADER</h2></span>
<a href="#">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo
libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus,
a scelerisque purus accumsan sit amet.<br>
<button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p>
</a>
</div>
</li>
<li>
<div><span><h2>HEADER</h2></span>
<a href="#">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo
libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus,
a scelerisque purus accumsan sit amet.<br>
<button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p>
</a>
</div>
</li>
</ul>
</div>
I have a div with an image.
On hover, I want to make the image bigger and to display some text next to the div.
I want to show the text once the first transition (make the image bigger) has ended.
I've tried a lot of things but did not manage to find any solution, here is my last try :
.width-12 {
width: 100%;
height: 100%;
}
.change-hover {
width: 10%;
transition: all 1s;
float: left;
}
.show-hover {
display: none;
text-align: left;
opacity: 0;
transition: opacity 0s;
}
.discover-no-hover:hover .change-hover {
width: 24%;
float: left;
}
.discover-no-hover:hover .show-hover {
display: block;
opacity: 1;
transition-delay: 1s;
}
<div class="width-12 discover-no-hover">
<div class="box small bkg-white">
<div class="feature-column medium mb-50 center hover-align">
<div class="iconcool">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Carr%C3%A9_rouge.svg"
alt="" class="img-responsive change-hover">
</div>
<div class="show-hover">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper varius elit, at efficitur lorem bibendum ac. Nulla feugiat, orci et laoreet vehicula, turpis ligula venenatis diam, bibendum porttitor odio leo ut enim. Aenean pretium tristique mattis. Maecenas ullamcorper iaculis ornare. Ut vitae luctus purus. Suspendisse tincidunt, lorem quis ultrices varius, turpis turpis pellentesque ante.
</div>
</div>
</div>
</div>
JSfiddle for those who don't like the snippet
How can I make the text appear only after the image stopped growing ? (Or after 1s, wich is the duration of the image growing)?
Thank you !
You have
.show-hover {
display: none;
text-align: left;
opacity: 0;
transition: opacity 0s; /* this*/
}
Just amend this to
transition: 0s opacity 1s;
.width-12 {
width: 100%;
height: 100%;
}
.change-hover {
width: 10%;
transition: all 1s;
float: left;
}
.show-hover {
display: block;
text-align: left;
opacity: 0;
transition: 0s opacity 1s;
}
.discover-no-hover:hover .change-hover {
width: 24%;
float: left;
}
.discover-no-hover:hover .show-hover {
display: block;
opacity: 1;
transition-delay: 1s;
}
<div class="width-12 discover-no-hover">
<div class="box small bkg-white">
<div class="feature-column medium mb-50 center hover-align">
<div class="iconcool">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Carr%C3%A9_rouge.svg" alt="" class="img-responsive change-hover">
</div>
<div class="show-hover">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper varius elit, at efficitur lorem bibendum ac. Nulla feugiat, orci et laoreet vehicula, turpis ligula venenatis diam, bibendum porttitor odio leo ut enim. Aenean pretium tristique mattis.
Maecenas ullamcorper iaculis ornare. Ut vitae luctus purus. Suspendisse tincidunt, lorem quis ultrices varius, turpis turpis pellentesque ante.
</div>
</div>
</div>
</div>
In my website, I have added fonts (in my CSS) and have tried to use them in my website, but they don't show up. I have used three fixes:
FIX 1:
body {
-webkit-animation-duration: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0.1s;
}
#-webkit-keyframes fontfix {
from { opacity: 1; }
to { opacity: 1; }
}
FIX 2:
$(‘body’)
.delay(500)
.queue(
function(next){
$(this).css(‘padding-right’, ‘1px’);
});
FIX 3:
jQuery.fn.redraw = function() {
return this.hide(0, function(){jQuery(this).show()});
};
jQuery(document).ready(function() {
jQuery('body').redraw();
});
They have all had no effect, and my website stays the same. It could be Chrome, my computer, or I might've incorrectly linked the sites, I don't know. Any help would be appreciated. Here is my code (I left out my JavaScript as it is irrelevant):
HTML
<main class="content" role="main">
<section class="section two">Ut dui diam, vulputate a gravida non, ullamcorper ac leo. Aenean pellentesque feugiat quam ac facilisis. Sed aliquam justo vel augue tincidunt facilisis. Phasellus lacinia quis sem sed aliquam. Etiam ultrices in arcu vel elementum. Maecenas scelerisque leo nec elit convallis, sagittis tincidunt purus consectetur. Cras gravida fringilla sem, in lacinia diam interdum sit amet. Nunc viverra nunc vitae diam malesuada, eu sollicitudin erat feugiat. Sed sed dapibus dui. Nullam a convallis erat, quis malesuada mi. Nunc vel malesuada elit. Proin a finibus turpis. Nullam faucibus magna sed felis fermentum iaculis. Nam et faucibus odio, vel viverra purus. Fusce pellentesque tincidunt ante, vitae tempor purus pulvinar eget. Fusce luctus orci sit amet nisi tincidunt, ut ullamcorper quam posuere. Vivamus elit massa, aliquam sed lectus non, condimentum accumsan turpis. Duis purus nibh, suscipit in lectus quis, dapibus rutrum turpis. Phasellus tristique nulla non ipsum lacinia, quis mattis quam laoreet. Vivamus sagittis, ante id sodales rutrum, odio eros commodo risus, quis consectetur lacus nunc vitae neque. Donec mauris urna, fringilla et laoreet fermentum, porttitor at nibh. Donec lorem magna, vulputate a ligula ut, tempor sollicitudin erat. Curabitur lobortis fringilla diam, a sodales nibh placerat ac. Aenean id feugiat dolor. Suspendisse potenti. Donec sed sem eu felis ullamcorper laoreet. Nunc blandit ut nibh nec condimentum. Phasellus a tincidunt ipsum. Quisque blandit congue lacus vitae venenatis. Suspendisse sit amet lobortis velit. Duis rhoncus vehicula elementum. Cras in viverra nunc. Maecenas egestas molestie mauris at placerat. Suspendisse congue faucibus est et aliquam. Nam rutrum sapien et iaculis eleifend. Donec eu tincidunt urna, quis ultrices purus. Curabitur sagittis tempus risus nec congue. Donec a felis nec dui interdum condimentum et a tortor. Quisque eget diam vitae turpis tristique imperdiet nec eget est. Sed gravida nec orci ac feugiat. Nulla et erat neque. Integer sit amet velit ornare quam rutrum tincidunt. Ut sollicitudin, nisi at porttitor maximus, nisi dui volutpat massa, non dictum diam nisi id nisi. Sed pretium ligula vitae sollicitudin bibendum. Donec viverra lorem et lectus elementum, imperdiet tempor erat cursus. Aliquam id viverra purus. In hac habitasse platea dictumst. Phasellus vel libero ac sem mollis auctor eu vitae libero. Mauris sit amet metus condimentum, consectetur tellus eget, ullamcorper orci. Donec vel arcu eros. Pellentesque vitae nulla a nisi mattis malesuada ac in dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse rhoncus tempor purus eu gravida. Pellentesque sollicitudin, elit eu cursus finibus, quam est cursus justo, at iaculis orci neque quis elit. Aliquam auctor vel leo sit amet faucibus. Maecenas neque diam, pretium sit amet nisi non, eleifend tempus elit. Pellentesque pulvinar turpis elit, in tempus ex efficitur sed. Morbi ornare elementum enim. Donec venenatis pellentesque ante, laoreet pretium leo varius in. Aliquam eu sapien vitae nibh imperdiet consectetur. Nunc ultricies venenatis nisi quis sagittis. In hac habitasse platea dictumst. Aenean malesuada placerat neque id congue. Pellentesque sagittis euismod quam, vel convallis diam. Nunc scelerisque nibh nec congue finibus. Pellentesque non lacinia nibh, id accumsan eros. Aliquam feugiat fringilla sem. Vivamus porta metus in libero cursus, et ornare elit eleifend. Phasellus venenatis pellentesque venenatis. Nullam feugiat condimentum justo, et molestie sapien varius eget. Curabitur suscipit ex vel erat luctus, consectetur aliquet enim placerat. Vivamus id vehicula dolor, nec volutpat lectus. Integer lacinia, dolor et rhoncus blandit, sapien leo fringilla risus, nec maximus libero erat eget quam. Sed sit amet magna purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</section>
<section class="section three">
<h2>Three</h2>
</section>
<section class="section four">
<h2>Four</h2>
</section>
</main> Top
<!-- Footer -->
<footer class="fixed_footer">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis ducimus nemo quo totam neque quis soluta nisi obcaecati aliquam saepe dicta adipisci blanditiis quaerat earum laboriosam accusamus nesciunt! Saepe ex maxime enim asperiores nisi. Obcaecati nostrum nobis laudantium aliquam commodi veniam magni similique ullam quis pariatur voluptatem harum id error.</p>
</div>
</footer>
</body>
CSS
/* Fonts */
#import url(http://fonts.googleapis.com/css?family=Teko:700);
#import url(http://fonts.googleapis.com/css?family=Exo:400,900);
#import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,900italic,900,700italic,700,500italic,500,400italic);
#import url(http://fonts.googleapis.com/css?family=Bitter:400,700);
#import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic);
#import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);
#import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
/* Body */
* {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif
}
/* Header */
/* Shrinking */
/* ClearFix */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
font-family: "Teko", sans-serif;
top: 30px;
*zoom: 1;
width: 100%;
height: 100px;
background: #02236a;
position: fixed;
z-index: 9999;
box-shadow: 0 4px 4px rgba(0,0,0,0.1);
}
/* Header Styles */
.small {
height: 80px;
}
.small .logo {
width: 240px;
height: 80px;
}
.nav {
width: 80%;
}
.logo {
float:left;
}
/* Transitions */
header, .logo {
-webkit-transition: all 1s;
transition: all 1s;
}
/* Navigation */
ul li {
float: left;
margin-left: 50px;
padding-top: 45px;
color: #fafafa;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
ul li:hover {
color: #ffba00;
}
/* Social Icons */
.sicf {
z-index: 9999;
position: fixed;
height: 30px;
width: 100%;
background-color: #001f4c;
}
/* Icons */
#social-icons li {
float: left;
}
.facebook, .google, .twitter, .youtube {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.facebook:hover {
background-color: #3b5998;
}
.google:hover {
background-color: #dd4b39;
}
.twitter:hover {
background-color: #00aced;
}
.youtube:hover {
background-color: #92291b;
}
/* Main Content */
*,
*:before,
*:after {
box-sizing: border-box;
font: 300 1em/1.5 'Merriweather', serif;
color: #242424;
padding: 0;
margin: 0;
}
html,
body {
background: rgb(236, 240, 241);
}
.content {
margin: auto;
margin-bottom: 350px;
/* Same height as footer */
}
/* Slider */
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
z-index: 10;
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
/* Top Button */
.cd-top {
display: inline-block;
height: 40px;
width: 40px;
position: fixed;
bottom: 40px;
right: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
/* image replacement properties */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: #3d4942 url(../IMG/cd-top-arrow.svg) no-repeat center 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
/* the button becomes visible */
visibility: visible;
opacity: 0.6;
}
.no-touch .cd-top:hover {
background-color: #e86256;
opacity: 0.6;
}
/* Footer */
.fixed_footer {
width: 100%;
height: 350px;
background: #111;
position: fixed;
left: 0;
bottom: 0;
z-index: -100;
}
.fixed_footer p {
color: #696969;
column-count: 2;
column-gap: 50px;
font-size: 1em;
font-weight: 300;
}
/* Miscellaneous */
a {
text-decoration: none;
}
li {
list-style: none;
}
/* Font Fix */
body {
-webkit-animation-delay: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-duration: 0.1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
}
#-webkit-keyframes fontfix {
from { opacity: 1; }
to { opacity: 1; }
}
/* Delete */
.section {
max-width: 100%;
height: 42em;
padding: 10px;
}
.section h2 {
color: #fff;
font-size: 6em;
font-weight: 200;
text-align: center;
padding: 2.5em 0;
}
.one {
background: #6bb6ff;
}
.two {
background: #1E90FF;
}
.three {
background: #8B4789;
}
.four {
background: #872657;
}
Also, here is a rough fiddle.
The following line (#136 in big.css) is the culprit:
font: 300 1em/1.5 'Merriweather', serif;
This overwrites the previous font declaration of "Roboto" to "Merriweather", which isn't loaded anywhere.
Also, don't forget to add a trailing semicolon to font-family: "Roboto", sans-serif.
Your browser's builtin developer tools, namely the element inspector, are your best friend when it comes to troubleshooting CSS.
In this particular case, I opened the Chrome Dev Tools element inspector by pressing CTRL+SHIFT+I, navigated to the "Elements" tab (you can also right-click a specific element) and looked through the CSS rules applied the the body element, which revealed the overwrite:
A strike-through informs you that a rule wasn't applied, possibly because it is invalid or another rule took precedence.