I'm making portfolio website. After position fixed half transparent gradient animation and image the margin of images element don't work. When creating element #images i wanted to be under the text 10vh. I expected the image to be under text element. But the sample image is on the top and move the gradient down. Why and how to put the #images under the text?
https://codepen.io/abooo/pen/erQWBQ?editors=1100
*{margin:0;padding:0;}
html {
height:100%;
width:100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
div#overlay{
position:fixed;
opacity:0.5;
background: linear-gradient(224deg, #a18cd1, #fbc2eb, #fbc2eb, #a6c1ee, #f6d365, #fda085, #84fab0, #8fd3f4, #a6c0fe, #f68084, #fccb90, #d57eeb, #e0c3fc, #8ec5fc, #f093fb, #f5576c, #4facfe, #00f2fe, #43e97b, #38f9d7, #30cfd0, #330867, #667eea, #764ba2, #fddb92, #d1fdff, #00c6fb, #005bea, #b721ff, #21d4fd, #d558c8, #24d292, #09203f, #537895);
background-size: 6800% 6800%;
height:100%;
width:100%;
-webkit-animation: GardientOverlay 200 ease infinite;
-moz-animation: GardientOverlay 200 ease infinite;
-o-animation: GardientOverlay 200s ease infinite;
animation: GardientOverlay 200s ease infinite;
}
#-webkit-keyframes GardientOverlay {
0%{background-position:99% 0%}
50%{background-position:2% 100%}
100%{background-position:99% 0%}
}
#-moz-keyframes GardientOverlay {
0%{background-position:99% 0%}
50%{background-position:2% 100%}
100%{background-position:99% 0%}
}
#-o-keyframes GardientOverlay {
0%{background-position:99% 0%}
50%{background-position:2% 100%}
100%{background-position:99% 0%}
}
#keyframes GardientOverlay {
0%{background-position:99% 0%}
50%{background-position:2% 100%}
100%{background-position:99% 0%}
}
div#text{
font-size:calc(6vh + 6vw);
}
div#containerText{
padding:1vw;
opacity:0.7;
position:absolute;
top:0;
height:100vh;
background-color:white;
z-index:10;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align:center;
display:flex;
align-items: center; /* Vertical center alignment */
justify-content: center;
}
.text{
left:0;
width:100vw;
top:100vh;
position:absolute;
background-color:white;
padding:calc(1vh + 1vw);
box-sizing: border-box;
font-size:2vmax;
}
div#images{
height:100vh;
width:100vw;
}
div#images img{
width:inherit;
height:inherit;
}
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id='overlay'></div>
<div id='images'>
<img src='https://www.gstatic.com/webp/gallery/1.jpg' alt='gallery'/>
</div>
<div id='containerText'>
<div id='text'>Hi!</div>
</div>
<div class='text'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mattis quam sit amet sollicitudin. Vivamus quis ullamcorper velit. Phasellus vitae quam id libero tempus tempor in in velit. Maecenas at arcu nec felis feugiat mollis. Quisque et velit eu enim ullamcorper vestibulum eu convallis justo. Donec scelerisque purus ipsum, ut consequat enim scelerisque vitae. Aliquam dignissim massa non dolor sollicitudin, eleifend aliquam urna commodo. Pellentesque ut tristique erat. Sed non nisl ac odio consectetur tincidunt. Integer turpis sem, viverra et vulputate ut, dignissim id diam. Nullam venenatis, ante rhoncus tincidunt pulvinar, ex velit blandit nisi, ut laoreet ex odio vitae metus. Morbi arcu elit, congue a nisl vitae, euismod facilisis sapien. Donec gravida, lorem eu volutpat tristique, lectus erat pharetra justo, a aliquam massa quam tincidunt purus. Phasellus eu fringilla sapien. Quisque imperdiet magna sed sapien rutrum, quis mattis libero convallis. Vivamus non luctus leo.
</div>
</body>
</html>
Try html and css above.
Related
#div1 {
text-align: center;
font-family: serif;
animation: fadeIn 2s;
color: white;
font-style: italic;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
html {
background-color: black;
}
#poza {
border: 3px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 500px;
height: 300px;
display: block;
margin-left: auto;
margin-right: 1%;
animation: fadeIn 5s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#text {
float: left;
color: white;
position: absolute;
}
<div id="div1">
<h1 id="titlu">Titlu</h1>
</div>
<br>
<img id="poza" src="exemplu.jpg" alt="exemplu">
<p id="text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin libero nunc consequat interdum varius sit amet mattis. <br> Neque volutpat ac tincidunt vitae semper.
Amet tellus cras adipiscing enim. Id semper risus in hendrerit gravida rutrum quisque non tellus. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat <br> vivamus. Tempor id eu nisl nunc mi ipsum faucibus vitae. Eget gravida cum
sociis natoque penatibus et magnis. Eu scelerisque felis imperdiet proin. Id diam maecenas ultricies mi eget. Elementum tempus<br> egestas sed sed. Ut tortor pretium viverra suspendisse potenti nullam ac tortor.</p>
Those HTML and CSS Code shows an image to right, a centered title, and a text that I can't align. I tried something with float-left, but did not seem to work.
enter image description here
There is an image here to show you. Maybe it is because of the margins?
You will have to do changes in your #poza declaration.
#div1 {
text-align: center;
font-family: serif;
animation: fadeIn 2s;
color: white;
font-style: italic;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
html {
background-color: black;
}
#poza {
border: 3px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 500px;
height: 300px;
display:block;
margin: auto;//added this
// margin-left: auto; commented this
//margin-right: 1%; commented this
animation: fadeIn 5s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#text {
float: left;
color: white;
position: absolute;
}
<div id="div1">
<h1 id="titlu">Titlu</h1>
</div>
<br>
<img id="poza" src="data:image/jpeg;base64,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" alt="exemplu">
<p id="text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin libero nunc consequat interdum varius sit amet mattis. <br> Neque volutpat ac tincidunt vitae semper.
Amet tellus cras adipiscing enim. Id semper risus in hendrerit gravida rutrum quisque non tellus. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat <br> vivamus. Tempor id eu nisl nunc mi ipsum faucibus vitae. Eget gravida cum
sociis natoque penatibus et magnis. Eu scelerisque felis imperdiet proin. Id diam maecenas ultricies mi eget. Elementum tempus<br> egestas sed sed. Ut tortor pretium viverra suspendisse potenti nullam ac tortor.</p>
This question already has answers here:
How to overlay one div over another div
(9 answers)
Closed 2 years ago.
I've made a cool html page (with CSS, of course) that creates like a space animated background. Now, I know this might sound like a stupid question, but how do I put text on top of it?
The html is as follows:
<div class="background-container">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/moon2.png" alt="">
<div class="stars"></div>
<div class="twinkling"></div>
<div class="clouds"></div>
<div>
<h1>HEADER 1</h1>
</div>
</div>
Can I do it if I take HEADER 1 out of the div?
<h1>HEADER 1</H1> is what I'm trying to get to be shown on top of the other things (stars, twinkling, clouds, etc) but I'm not really sure how to do it.
Can anyone please help? Thanks.
Here's the full code (open in a larger window):
<!DOCTYPE html>
<style>
#keyframes move-background {
from {
-webkit-transform: translate3d(0px, 0px, 0px);
}
to {
-webkit-transform: translate3d(1000px, 0px, 0px);
}
}
#-webkit-keyframes move-background {
from {
-webkit-transform: translate3d(0px, 0px, 0px);
}
to {
-webkit-transform: translate3d(1000px, 0px, 0px);
}
}
#-moz-keyframes move-background {
from {
-webkit-transform: translate3d(0px, 0px, 0px);
}
to {
-webkit-transform: translate3d(1000px, 0px, 0px);
}
}
#-webkit-keyframes move-background {
from {
-webkit-transform: translate3d(0px, 0px, 0px);
}
to {
-webkit-transform: translate3d(1000px, 0px, 0px);
}
}
.background-container{
position: fixed;
top: 0;
left:0;
bottom: 0;
right: 0;
}
.stars {
background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png) repeat;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
z-index: 0;
}
.twinkling{
width:10000px;
height: 100%;
background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png") repeat;
background-size: 1000px 1000px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
-moz-animation:move-background 70s linear infinite;
-ms-animation:move-background 70s linear infinite;
-o-animation:move-background 70s linear infinite;
-webkit-animation:move-background 70s linear infinite;
animation:move-background 70s linear infinite;
}
.clouds{
width:10000px;
height: 100%;
background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/clouds_repeat.png") repeat;
background-size: 1000px 1000px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
z-index: 3;
-moz-animation:move-background 150s linear infinite;
-ms-animation:move-background 150s linear infinite;
-o-animation:move-background 150s linear infinite;
-webkit-animation:move-background 150s linear infinite;
animation:move-background 150s linear infinite;
}
img{
height: 70vh;
width:70vh;
position: absolute;
z-index: 3;
right: 20px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="background-container">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/moon2.png" alt="">
<div class="stars"></div>
<div class="twinkling"></div>
<div class="clouds"></div>
<div class="centered">
<h1>HEADER 1</h1>
</div>
</div>
</html>
I would use position absolute and apply a z-index to layer the h1 above the background. You can then offset the position relative to the container.
#keyframes move-background {
from {
-webkit-transform: translate3d(0px, 0px, 0px);
}
to {
-webkit-transform: translate3d(1000px, 0px, 0px);
}
}
#-webkit-keyframes move-background {
from {
-webkit-transform: translate3d(0px, 0px, 0px);
}
to {
-webkit-transform: translate3d(1000px, 0px, 0px);
}
}
#-moz-keyframes move-background {
from {
-webkit-transform: translate3d(0px, 0px, 0px);
}
to {
-webkit-transform: translate3d(1000px, 0px, 0px);
}
}
#-webkit-keyframes move-background {
from {
-webkit-transform: translate3d(0px, 0px, 0px);
}
to {
-webkit-transform: translate3d(1000px, 0px, 0px);
}
}
.background-container {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.stars {
background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png) repeat;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
z-index: 0;
}
.twinkling {
width: 10000px;
height: 100%;
background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png") repeat;
background-size: 1000px 1000px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
-moz-animation: move-background 70s linear infinite;
-ms-animation: move-background 70s linear infinite;
-o-animation: move-background 70s linear infinite;
-webkit-animation: move-background 70s linear infinite;
animation: move-background 70s linear infinite;
}
.clouds {
width: 10000px;
height: 100%;
background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/clouds_repeat.png") repeat;
background-size: 1000px 1000px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
z-index: 3;
-moz-animation: move-background 150s linear infinite;
-ms-animation: move-background 150s linear infinite;
-o-animation: move-background 150s linear infinite;
-webkit-animation: move-background 150s linear infinite;
animation: move-background 150s linear infinite;
}
img {
height: 70vh;
width: 70vh;
position: absolute;
z-index: 3;
right: 20px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.content {
position: absolute;
top: 0;
left: 0;
color: #fff;
padding: 10px;
z-index: 10;
}
<div class="background-container">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/moon2.png" alt="">
<div class="stars"></div>
<div class="twinkling"></div>
<div class="clouds"></div>
</div>
<div class="content">
<h1>HEADER 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ex leo, lobortis eget libero in, venenatis tincidunt ipsum. Nulla ultrices purus in ornare ultricies. In et faucibus justo. Nunc in tempus diam, nec facilisis eros. Quisque non quam id mi rutrum volutpat vel ac purus. Suspendisse potenti. Etiam non orci porttitor, lacinia magna eget, imperdiet ex. Pellentesque bibendum ligula vel elit tincidunt, quis aliquam nisl consequat. Pellentesque facilisis lectus ac orci commodo, ac cursus nibh mollis. Nunc turpis ipsum, laoreet sit amet odio sit amet, aliquam dignissim nisi. Suspendisse potenti.</p>
<p>Nullam at sodales urna, quis pellentesque lectus. Aenean a augue consequat, viverra libero ut, varius ex. Duis id ipsum sed risus aliquet consectetur. Aliquam facilisis nunc quis purus rutrum lobortis. Praesent mollis tincidunt quam at molestie. Nulla volutpat congue leo, at malesuada tortor ornare eget. Suspendisse porta ipsum vel enim lobortis, non aliquam tortor convallis. Aenean maximus, nibh ut sollicitudin porta, justo ipsum auctor mauris, vitae sagittis nisl lectus vel orci. In hac habitasse ictumst. Suspendisse ultricies lobortis accumsan. Nulla turpis justo, tristique sed magna et, pretium elementum ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis quam a nisl efficitur posuere.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ex leo, lobortis eget libero in, venenatis tincidunt ipsum. Nulla ultrices purus in ornare ultricies. In et faucibus justo. Nunc in tempus diam, nec facilisis eros. Quisque non quam id mi rutrum volutpat vel ac purus. Suspendisse potenti. Etiam non orci porttitor, lacinia magna eget, imperdiet ex. Pellentesque bibendum ligula vel elit tincidunt, quis aliquam nisl consequat. Pellentesque facilisis lectus ac orci commodo, ac cursus nibh mollis. Nunc turpis ipsum, laoreet sit amet odio sit amet, aliquam dignissim nisi. Suspendisse potenti.</p>
<p>Nullam at sodales urna, quis pellentesque lectus. Aenean a augue consequat, viverra libero ut, varius ex. Duis id ipsum sed risus aliquet consectetur. Aliquam facilisis nunc quis purus rutrum lobortis. Praesent mollis tincidunt quam at molestie. Nulla volutpat congue leo, at malesuada tortor ornare eget. Suspendisse porta ipsum vel enim lobortis, non aliquam tortor convallis. Aenean maximus, nibh ut sollicitudin porta, justo ipsum auctor mauris, vitae sagittis nisl lectus vel orci. In hac habitasse ictumst. Suspendisse ultricies lobortis accumsan. Nulla turpis justo, tristique sed magna et, pretium elementum ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis quam a nisl efficitur posuere.</p>
</div>
I am trying to do continuous scrolling text using pure CSS.
Here is my HTML I am trying to scroll:
<div class="marquee">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas placerat maximus massa ut dictum. Sed eu est justo. Quisque pharetra vel tellus ac porttitor. Nunc luctus sollicitudin diam non dignissim. Phasellus mollis semper libero, nec rhoncus est tristique quis. Nulla eget pharetra nunc, sed faucibus felis. Curabitur nec posuere nisl. Quisque at vestibulum velit. Pellentesque sagittis lacus ut aliquet faucibus. Ut porta purus id mi tincidunt mollis. Integer vulputate, eros malesuada viverra rutrum, magna nisl vehicula nisi, nec pellentesque augue nunc vel felis. Sed consectetur lacinia quam et auctor. Cras nec ullamcorper orci. Vivamus id felis eu mauris tempor viverra eget in mi. Nam nibh risus, tincidunt in hendrerit quis, eleifend at dui. Aenean odio odio, eleifend vel malesuada porta, dapibus nec risus.</div>
</div>
and this my CSS I got, it works, but my problem is when the text is done, its takes away to for it to start up again....is there anyway when its done it starts from the beginning so when its at the end it looks like this:
eleifend vel malesuada porta, dapibus nec risus. Lorem ipsum
dolor sit amet, consectetur adipiscing
* {
margin:0;
padding:0;
border:0;
}
#keyframes slide {
from { left: 100%;}
to { left: -100%;}
}
#-webkit-keyframes slide {
from { left: 100%;}
to { left: -100%;}
}
#marquee {
color:red;
background:#f0f0f0;
width:100%;
height:120px;
line-height:120px;
overflow:hidden;
position:relative;
}
#text {
position:absolute;
top:0;
left:0;
width:100%;
height:120px;
font-size:30px;
animation-name: slide;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-name: slide;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count: infinite;
}
I don't think this is possible in a maintainable way using just CSS. The problem is that there isn't really a way to create elements that can wrap at the box level.
You effectively want an element to be able to appear in 2 places at once: once on the left side of the screen with the remaining content to be scrolled and again on the right side of the screen with the content that has already scrolled. The only CSS thing that I know that can do this is background images in the same way that graphics textures can wrap using UV repeating settings.
Considering that, the options are to use an <svg> which, which is an image, and set it as a repeating background of an element. Then, we can animate the background position to have it scroll.
The problem is that the text is not not selectable (since it's a rasterized image) and you will have to set content within the SVG in the CSS which isn't good practice.
However, as a proof of concept, you could do it. See the snippet below:
#keyframes slide {
from {
background-position-x: 0;
}
to {
background-position-x: -100%;
}
}
.container {
width: 100%;
height: 18px;
background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='300'>\
<text x='0' y='18'>hello world foo bar fizz buzz lorem ipsum</text>\
</svg>\
");
background-repeat: repeat;
background-size: auto;
animation: 5s linear infinite slide;
}
<div class="container"></div>
Here's a solution that scales well -
Detailed explanation available on my blog.
let outer = document.querySelector("#outer");
let content = outer.querySelector('#content');
repeatContent(content, outer.offsetWidth);
let el = outer.querySelector('#loop');
el.innerHTML = el.innerHTML + el.innerHTML;
function repeatContent(el, till) {
let html = el.innerHTML;
let counter = 0; // prevents infinite loop
while (el.offsetWidth < till && counter < 100) {
el.innerHTML += html;
counter += 1;
}
}
#outer {
overflow: hidden;
}
#outer div {
display: inline-block;
}
#loop {
white-space: nowrap;
animation: loop-anim 5s linear infinite;
}
#keyframes loop-anim {
0% {
margin-left: 0;
}
100% {
margin-left: -50% /* This works because of the div between "outer" and "loop" */
}
}
<div id="outer">
<!-- This div is important! It lets us specify margin-left as percentage later on. -->
<div>
<div id="loop"><div id="content">Hello, World </div></div>
</div>
</div>
A way to do this could also be to put your text on the site as a background image element. For this you could use your text element as a background images with -moz-element.
Your html code will look something like this (the classname repetition corresponds to your "text"):
<div class="repetition">
<h3 id="repeat">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas placerat maximus massa ut dictum. Sed eu est justo. Quisque pharetra vel tellus ac porttitor. Nunc luctus sollicitudin diam non dignissim. Phasellus mollis semper libero, nec rhoncus est tristique quis. Nulla eget pharetra nunc, sed faucibus felis. Curabitur nec posuere nisl. Quisque at vestibulum velit. Pellentesque sagittis lacus ut aliquet faucibus. Ut porta purus id mi tincidunt mollis. Integer vulputate, eros malesuada viverra rutrum, magna nisl vehicula nisi, nec pellentesque augue nunc vel felis. Sed consectetur lacinia quam et auctor. Cras nec ullamcorper orci. Vivamus id felis eu mauris tempor viverra eget in mi. Nam nibh risus, tincidunt in hendrerit quis, eleifend at dui. Aenean odio odio, eleifend vel malesuada porta, dapibus nec risus.</h3>
And the necessary css would be this (you can always change the styling, but the body part is the important part here):
.repetition {
height: 0px;
overflow: hidden;
}
h3 {
text-align: center;
font-weight: 300;
font-size: 50px;
}
body {
min-height: 100vh;
background-image: -moz-element(#repeat);
background-repeat: repeat-y;
background-position: center;
}
Here is a website giving a clear example as to how this could work: Background text image repetition
when I resize my window for larger screens, the sidebar div seems to move along with the window, creating a space between the mainContent div and the sidebar Div.
Goal: I would like for both divs to stay in the middle of the website, next to each other, regardless of window size (think Facebook).
Can someone help me? Thank you.
* {
background-color: black;
}
.wrapper {
display:flex;
z-index: 0;
}
.topDiv{
background-color: rgb(255,255,255);
width:100%;
height: 100px;
position:fixed;
top:0;
left:0;
z-index: 1;
}
.Nav{
background-color: rgb(60,60,60);
width:100%;
height:50px;
position:fixed;
top:100px;
left:0;
z-index: 2;
}
.content{
background-color: rgb(255,255,255);
width:100%;
height:100%;
position:fixed;
top:150px;
left:0;
z-index:3;
}
.mainContent{
background-color: rgb(125,125,125);
position:fixed;
width:65%;
max-width: 720px;
height:100%;
left:10%;
z-index: 4;
}
.sidebar{
background-color: rgb(160,160,160);
position:fixed;
width:15%;
max-width: 240px;
height:100%;
right:10%;
z-index: 5;
}
.footer{
background-color: rgb(51, 56, 60);
position: fixed;
width: 100%;
height:75px;
bottom:0;
left:0;
z-index: 6;
}
<!DOCTYPE html>
<html>
<!-- DRAFT HOUSE INC. -->
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="topDiv">
</div>
<div class="Nav">
</div>
<div class="content">
<div class="mainContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque malesuada turpis ex, ut egestas nisi tincidunt non. Nulla auctor ullamcorper lectus, nec aliquet nulla pulvinar et. Etiam sit amet tortor metus. Morbi ut molestie quam, non vestibulum lorem. Sed lectus diam, malesuada sit amet maximus non, fermentum a justo. Proin leo neque, egestas at enim at, consequat ultricies lorem. Curabitur in nisi velit. Quisque quam tortor, blandit sed tellus ut, sollicitudin suscipit risus. Ut sit amet pretium est. Cras lobortis diam vitae varius auctor. Ut interdum felis et quam lacinia gravida.
Nulla varius fermentum leo ut porttitor. Aenean viverra commodo ante ut rutrum. Morbi sed pellentesque felis. Curabitur fringilla justo massa, porta accumsan sem mollis et. Aenean eu massa id justo semper facilisis in ac ligula. Aenean laoreet, arcu eget condimentum consequat, turpis eros dignissim erat, in vehicula dui arcu ac elit. Donec sit amet massa accumsan, viverra tellus quis, tincidunt nibh. Donec in justo at sem rhoncus blandit id sit amet ipsum.
</div>
<div class="sidebar">
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
what you could do is remove the max-width and set the width of mainContent 66% check it here.
https://jsfiddle.net/estvwpvz/
.mainContent{
background-color: rgb(125,125,125);
position:fixed;
width:66%;
height:100%;
left:10%;
z-index: 4;
}
remove max-width from both mainContent and sidebar
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.