I'm trying to build a website with Bootstrap and i'm finding problems with the navbar. Even though i use the class 'fixed-top', it just won't stay on top as soon as i scroll down.
I think this is a problem with the relative positions of the slides that are creating the page, but i don't know how to fix it and i'm not finding anything online.
#import url(https://fonts.googleapis.com/css?family=Bree+Serif);
.nav-titolo {
float: left;
text-align: center;
}
.navbar-brand {float:none;}
#titolo {
height: 200px;
font-size: 400%;
font-family: Bree Serif;
}
html {
height: 100%;
overflow: hidden;
}
body {
margin:0;
padding:0;
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
font-family: Bree Serif;
}
h1 {
font-size: 250%
}
p {
font-size: 140%;
line-height: 150%;
color: #333;
}
.slide {
position: relative;
padding: 25vh 10%;
min-height: 100vh;
width: 100vw;
box-sizing: border-box;
box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
transform-style: inherit;
}
.back {
position: absolute;
top: 50%;
left: 35%;
width: 320px;
height: 240px;
transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
padding: 10px;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
/*
img:last-of-type {
transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}
*/
.slide:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: 0 0 8px 1px rgba(0, 0, 0, .7);
}
.title {
width: 50%;
padding: 5%;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
.slide:nth-child(2n) .title {
margin-left: 0;
margin-right: auto;
}
.slide:nth-child(2n+1) .title {
margin-left: auto;
margin-right: 0;
}
.slide, .slide:before {
background: 50% 50% / cover;
}
.header {
text-align: center;
font-size: 175%;
color: #fff;
text-shadow: 0 2px 2px #000;
}
#title {
background-image: url("https://lorempixel.com/640/480/abstract/6/");
z-index:2;
}
#title h1 {
transform: translateZ(.25px) scale(.75);
transform-origin: 50% 100%;
}
#slide1:before {
background-image: url("https://lorempixel.com/640/480/abstract/4/");
transform: translateZ(-1px) scale(2);
}
#slide2 {
background-image: url("https://lorempixel.com/640/480/abstract/3/");
z-index:2;
}
#slide3:before {
background-image: url("https://lorempixel.com/640/480/abstract/5/");
transform: translateZ(-1px) scale(2);
}
#slide4 {
background: #222;
}
.navbar{
background:#F97300;
}
.nav-link , .navbar-brand{
color: #f4f4f4;
cursor: pointer;
}
.nav-link{
margin-right: 1em !important;
}
.nav-link:hover{
background: #f4f4f4;
color: #f97300;
}
.navbar-collapse{
justify-content: flex-end;
}
.navbar-toggler{
background:#fff !important;
}
.overlay{
position: absolute;
min-height: 100%;
min-width: 100%;
left: 0;
top: 0;
background: rgba(244, 244, 244, 0.79);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index.html</title>
<link rel= "stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet prefetch" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<div class = "nav-titolo"><a class="navbar-brand" href="#">Colorizer</a></div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#slide1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#slide2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#slide3">Section 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#slide4">Section 4</a>
</li>
</ul>
</nav>
<div id="title" class="slide header">
<h1 id = "titolo"> Colorizer </h1>
</div>
</div>
<div id="slide1" class="slide">
<div class="title">
<h1>Slide 1</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
</div>
</div>
<div id="slide2" class="slide">
<div class="title">
<h1>Slide 2</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
</div>
<img class="back" src="https://lorempixel.com/640/480/abstract/6/">
<img class="back" src="https://lorempixel.com/640/480/abstract/4/">
</div>
<div id="slide3" class="slide">
<div class="title">
<h1>Slide 3</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
</div>
</div>
<div id="slide4" class="slide header">
<h1>The End</h1>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
What about :
CSS:
.navbar {
position: fixed;
top: 0;
}
With CSS, you can add the following code:
.navbar {
position: fixed;
}
to your navbar class. That will ensure that the navbar will stay at the top of the screen.
Near line 4202 of bootstrap.css it the class should be called .navbar-fixed-top.
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
Related
I have tried my best to solve the issue but it's not working. I want to make a gradient border on my website for a slideshow (similar to the one on this video). I used (:before) pseudo selector here is my HTML code:
* {
color: white;
margin: 0px 0px;
padding: 0px 0px;
box-sizing: border-box;
}
body {
background-color: #060c21;
}
/* NavBar Starts */
#mainnav {
display: flex;
justify-content: center;
padding: 15px;
background-color: black;
width: 98%;
position: static;
}
.items>a {
font-family: "Roboto Slab", serif;
text-decoration: none;
}
.items {
margin: 0 5vw 0 5vw;
padding: 1vw;
width: fit-content;
font-size: 1.3rem;
}
.items>a:hover {
color: rgb(0, 255, 242);
}
/* NavBar Ends */
/* Content Starts */
.slide-box {
position: relative;
border: 2px solid red;
height: 75vh;
width: 95%;
margin: 2% auto;
}
.slide-box:before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: white;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Practice</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#531&display=swap" rel="stylesheet" />
<!-- font-family: 'Roboto Slab', serif; -->
<link rel="stylesheet" href="Vaishnavi.css" />
</head>
<body>
<nav>
<div id="mainnav">
<div class="items">
Home
</div>
<div class="items">
About US
</div>
<div class="items">
Creations
</div>
<div class="items">
Help
</div>
</div>
</nav>
<div class="slide-box">
<h1>This is glowing box</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo voluptatibus et quasi illum inventore rem excepturi quam tenetur eius est, minima aliquam repellendus deleniti modi laudantium similique iste ipsum? Ad!
</p>
</div>
</body>
</html>
Please tell me the mistake I am making and why my z-index is not working correctly. In my view, I have written the code correctly.
Is this something that you are looking for?
You can see that I recreated the example based on this video that you have provided.
* {
color: white;
margin: 0px 0px;
padding: 0px 0px;
box-sizing: border-box;
}
body {
background-color: #060c21;
}
/* NavBar Starts */
#mainnav {
display: flex;
justify-content: center;
padding: 15px;
background-color: black;
width: 98%;
position: static;
}
.items>a {
font-family: "Roboto Slab", serif;
text-decoration: none;
}
.items {
margin: 0 5vw 0 5vw;
padding: 1vw;
width: fit-content;
font-size: 1.3rem;
}
.items>a:hover {
color: rgb(0, 255, 242);
}
/* NavBar Ends */
/* Content Starts */
.slide-box {
position: relative;
margin: 2% auto;
height: 75vh;
width: 95%;
background: linear-gradient(0deg, #000, #262626);
}
.slide-box:before {
content: '';
position: absolute;
top: -2px;
left: -2px;
background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000);
background-size: 400%;
width: calc(100% + 4px);
height: calc(100% + 4px);
z-index: -1;
animation: animate 20s linear infinite;
}
#keyframes animate {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Practice</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#531&display=swap" rel="stylesheet" />
<!-- font-family: 'Roboto Slab', serif; -->
<link rel="stylesheet" href="Vaishnavi.css" />
</head>
<body>
<nav>
<div id="mainnav">
<div class="items">
Home
</div>
<div class="items">
About US
</div>
<div class="items">
Creations
</div>
<div class="items">
Help
</div>
</div>
</nav>
<div class="slide-box">
<h1>This is glowing box</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo voluptatibus et quasi illum inventore rem excepturi quam tenetur eius est, minima aliquam repellendus deleniti modi laudantium similique iste ipsum? Ad!
</p>
</div>
</body>
</html>
What you were missing in your code to see the text was the line below:
.slide-box {
background: linear-gradient(0deg, #000, #262626);
}
The z-index worked just fine but because your background color was white and also the text color was white, you could not see the text.
Here is the code how you can achieve gradient border(code is copied from css-tricks). For more please visit here
body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
background: #222;
}
.module-border-wrap {
max-width: 250px;
padding: 1rem;
position: relative;
background: linear-gradient(to right, red, purple);
padding: 3px;
}
.module {
background: #222;
color: white;
padding: 2rem;
}
<div class="module-border-wrap">
<div class="module">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias.
</div>
</div>
I used CSS instead of Fontawesome to generate the arrows. I think it makes more sense than loading a separate icon library. However I have trouble positioning those CSS arrow to the center, when it points upwards it looks great, I think it's in the center or at least near to the center, but when it points downwards it looks like the arrow moved towards the bottom.
I would be grateful for any suggestion
"use strict";
const panelHeader = document.querySelectorAll(".panel-header");
panelHeader.forEach(item => {
item.addEventListener("click", event => {
event.preventDefault();
item.parentElement.classList.toggle("open");
const panel = item.nextElementSibling;
panel.style.height = panel.style.height ? null : panel.scrollHeight + "px";
});
});
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.accordion {
max-width: 1200px;
margin: 0 auto;
}
.accordion-container {
padding: 15px;
}
h2 {
color: #444;
font-size: 1.75rem;
position: relative;
padding: 0 0 25px 0;
margin: 15px 0 20px 0;
}
h2::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 5px;
background: #f79c31;
}
.panel-container > .panel + .panel {
margin-top: 15px;
}
.panel {
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 0.1875em;
}
.panel-header {
background: #564990;
border-color: #564990;
border-top-left-radius: 0.1875em;
border-top-right-radius: 0.1875em;
position: relative;
transition: background .25s linear;
}
.panel-header > h4 {
margin: 0;
}
.panel-header > h4 > a {
position: relative;
display: block;
color: #fff;
font-size: 1.125rem;
text-decoration: none;
padding: 15px 50px 15px 15px;
}
.panel-header:hover {
background: #443776;
}
.panel-body {
height: 0;
overflow: hidden;
transition: 0.3s height 0.2s;
}
.panel-body-container {
padding: 15px;
}
.arrow {
position: absolute;
top: 22px;
right: 10px;
font-size: 1.7rem;
border: solid #fff;
border-width: 0 4px 4px 0;
display: inline-block;
padding: 5px;
opacity: .5;
transform: rotate(-135deg);
transition: transform 0.15s linear;
}
.arrow-up {
}
.panel.open .arrow {
transform: rotate(-315deg);
transform-origin: center center;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="accordion-faq.css">
<title>Accordion FAQ</title>
</head>
<body>
<section class="accordion">
<div class="accordion-container">
<header>
<h2>FAQs</h2>
</header>
<div class="panel-container">
<div class="panel">
<div class="panel-header">
<h4>
First question?
</h4>
<div class="arrow"><div class="arrow-up"></div></div>
</div>
<div class="panel-body">
<div class="panel-body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusantium animi blanditiis corporis dicta, dolor dolores
enim facilis fuga itaque iure iusto molestiae mollitia
natus nisi pariatur praesentium quo rerum vel.
</p>
</div>
</div>
</div> <!-- .panel -->
<div class="panel">
<div class="panel-header">
<h4>
Second question?
</h4>
<div class="arrow arrow-up"></div>
</div>
<div class="panel-body">
<div class="panel-body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusantium animi blanditiis corporis dicta, dolor dolores
enim facilis fuga itaque iure iusto molestiae mollitia
natus nisi pariatur praesentium quo rerum vel.
</p>
</div>
</div>
</div> <!-- .panel -->
</div> <!-- .panel-container -->
</div> <!-- .accordion-container -->
</section>
<script src="accordion-faq.js"></script>
</body>
</html>
With the current setup you have, the best solution would be to either -
Change the top value in the animation class. You will also want to change the animate value to all so that it also animates the change in the top value without jumping.
.arrow {
...
transition: all 0.15s linear;
}
.panel.open .arrow {
transform: rotate(-315deg);
transform-origin: center center;
top: 18px;
}
You could also change the transform-origin to 100% center, however this causes the animation to spin in a weird way.
You could also look into using built-in HTML arrows and rotating them if you do not want to load a font library or an SVG icon. It may behave more how you are expecting - https://www.toptal.com/designers/htmlarrows/
First of all you can avoid using position: absolute for this type of problem where display: flex do the trick:
const panelHeader = document.querySelectorAll(".panel-header");
panelHeader.forEach(item => {
item.addEventListener("click", event => {
event.preventDefault();
item.parentElement.classList.toggle("open");
const panel = item.nextElementSibling;
panel.style.height = panel.style.height ? null : panel.scrollHeight + "px";
});
});
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.accordion {
max-width: 1200px;
margin: 0 auto;
}
.accordion-container {
padding: 15px;
}
h2 {
color: #444;
font-size: 1.75rem;
position: relative;
padding: 0 0 25px 0;
margin: 15px 0 20px 0;
}
h2::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 5px;
background: #f79c31;
}
.panel-container>.panel+.panel {
margin-top: 15px;
}
.panel {
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 0.1875em;
}
.panel-header {
display: flex; /* <- Use flexbox */
justify-content: space-between;
align-items: center;
background: #564990;
border-color: #564990;
border-top-left-radius: 0.1875em;
border-top-right-radius: 0.1875em;
position: relative;
transition: background .25s linear;
}
.panel-header>h4 {
margin: 0;
}
.panel-header>h4>a {
position: relative;
display: block;
color: #fff;
font-size: 1.125rem;
text-decoration: none;
padding: 15px 50px 15px 15px;
}
.panel-header:hover {
background: #443776;
}
.panel-body {
height: 0;
overflow: hidden;
transition: 0.3s height 0.2s;
}
.panel-body-container {
padding: 15px;
}
.arrow {
/* Don't need position absolute anymore */
margin: 10px;
font-size: 1.7rem;
border: solid #fff;
border-width: 0 4px 4px 0;
display: inline-block;
padding: 5px;
opacity: .5;
transform: rotate(-135deg);
transition: transform 0.15s linear;
}
.arrow-up {}
.panel.open .arrow {
margin-top: -5px; /* <- Remove arrow heigth (5px) to stay at the same level */
transform: rotate(-315deg);
transform-origin: center center;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="accordion-faq.css">
<title>Accordion FAQ</title>
</head>
<body>
<section class="accordion">
<div class="accordion-container">
<header>
<h2>FAQs</h2>
</header>
<div class="panel-container">
<div class="panel">
<div class="panel-header">
<h4>
First question?
</h4>
<div class="arrow">
<div class="arrow-up"></div>
</div>
</div>
<div class="panel-body">
<div class="panel-body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi blanditiis corporis dicta, dolor dolores enim facilis fuga itaque iure iusto molestiae mollitia natus nisi pariatur praesentium quo rerum vel.
</p>
</div>
</div>
</div>
<!-- .panel -->
<div class="panel">
<div class="panel-header">
<h4>
Second question?
</h4>
<div class="arrow arrow-up"></div>
</div>
<div class="panel-body">
<div class="panel-body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi blanditiis corporis dicta, dolor dolores enim facilis fuga itaque iure iusto molestiae mollitia natus nisi pariatur praesentium quo rerum vel.
</p>
</div>
</div>
</div>
<!-- .panel -->
</div>
<!-- .panel-container -->
</div>
<!-- .accordion-container -->
</section>
<script src="accordion-faq.js"></script>
</body>
</html>
Try changing your top property of the .arrow class to top: 50% so that it isn't hardcoded.
Then, add to your transform property translate(0, -50%).
Use the top propriety in CSS.
This will set the top position of the arrow when rotating it.
Here is your code:
"use strict";
const panelHeader = document.querySelectorAll(".panel-header");
panelHeader.forEach(item => {
item.addEventListener("click", event => {
event.preventDefault();
item.parentElement.classList.toggle("open");
const panel = item.nextElementSibling;
panel.style.height = panel.style.height ? null : panel.scrollHeight + "px";
});
});
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.accordion {
max-width: 1200px;
margin: 0 auto;
}
.accordion-container {
padding: 15px;
}
h2 {
color: #444;
font-size: 1.75rem;
position: relative;
padding: 0 0 25px 0;
margin: 15px 0 20px 0;
}
h2::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 5px;
background: #f79c31;
}
.panel-container > .panel + .panel {
margin-top: 15px;
}
.panel {
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 0.1875em;
}
.panel-header {
background: #564990;
border-color: #564990;
border-top-left-radius: 0.1875em;
border-top-right-radius: 0.1875em;
position: relative;
transition: background .25s linear;
}
.panel-header > h4 {
margin: 0;
}
.panel-header > h4 > a {
position: relative;
display: block;
color: #fff;
font-size: 1.125rem;
text-decoration: none;
padding: 15px 50px 15px 15px;
}
.panel-header:hover {
background: #443776;
}
.panel-body {
height: 0;
overflow: hidden;
transition: 0.3s height 0.2s;
}
.panel-body-container {
padding: 15px;
}
.arrow {
position: absolute;
top: 22px;
right: 10px;
font-size: 1.7rem;
border: solid #fff;
border-width: 0 4px 4px 0;
display: inline-block;
padding: 5px;
opacity: .5;
transform: rotate(-135deg);
transition: transform 0.15s linear;
}
.arrow-up {
}
.panel.open .arrow {
transform: rotate(-315deg);
transform-origin: center center;
top: 15px; //Do it!
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="accordion-faq.css">
<title>Accordion FAQ</title>
</head>
<body>
<section class="accordion">
<div class="accordion-container">
<header>
<h2>FAQs</h2>
</header>
<div class="panel-container">
<div class="panel">
<div class="panel-header">
<h4>
First question?
</h4>
<div class="arrow"><div class="arrow-up"></div></div>
</div>
<div class="panel-body">
<div class="panel-body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusantium animi blanditiis corporis dicta, dolor dolores
enim facilis fuga itaque iure iusto molestiae mollitia
natus nisi pariatur praesentium quo rerum vel.
</p>
</div>
</div>
</div> <!-- .panel -->
<div class="panel">
<div class="panel-header">
<h4>
Second question?
</h4>
<div class="arrow arrow-up"></div>
</div>
<div class="panel-body">
<div class="panel-body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusantium animi blanditiis corporis dicta, dolor dolores
enim facilis fuga itaque iure iusto molestiae mollitia
natus nisi pariatur praesentium quo rerum vel.
</p>
</div>
</div>
</div> <!-- .panel -->
</div> <!-- .panel-container -->
</div> <!-- .accordion-container -->
</section>
<script src="accordion-faq.js"></script>
</body>
A living demo: https://codepen.io/marchmello/pen/mdedGra
You need to use the position: absolute and top position on your .panel.open .arrow css like this :
"use strict";
const panelHeader = document.querySelectorAll(".panel-header");
panelHeader.forEach(item => {
item.addEventListener("click", event => {
event.preventDefault();
item.parentElement.classList.toggle("open");
const panel = item.nextElementSibling;
panel.style.height = panel.style.height ? null : panel.scrollHeight + "px";
});
});
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.accordion {
max-width: 1200px;
margin: 0 auto;
}
.accordion-container {
padding: 15px;
}
h2 {
color: #444;
font-size: 1.75rem;
position: relative;
padding: 0 0 25px 0;
margin: 15px 0 20px 0;
}
h2::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 5px;
background: #f79c31;
}
.panel-container > .panel + .panel {
margin-top: 15px;
}
.panel {
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 0.1875em;
}
.panel-header {
background: #564990;
border-color: #564990;
border-top-left-radius: 0.1875em;
border-top-right-radius: 0.1875em;
position: relative;
transition: background .25s linear;
}
.panel-header > h4 {
margin: 0;
}
.panel-header > h4 > a {
position: relative;
display: block;
color: #fff;
font-size: 1.125rem;
text-decoration: none;
padding: 15px 50px 15px 15px;
}
.panel-header:hover {
background: #443776;
}
.panel-body {
height: 0;
overflow: hidden;
transition: 0.3s height 0.2s;
}
.panel-body-container {
padding: 15px;
}
.arrow {
position: absolute;
top: 22px;
right: 10px;
font-size: 1.7rem;
border: solid #fff;
border-width: 0 4px 4px 0;
display: inline-block;
padding: 5px;
opacity: .5;
transform: rotate(-135deg);
transition: transform 0.15s linear;
}
.arrow-up {
}
.panel.open .arrow {
transform: rotate(-315deg);
transform-origin: center center;
position: absolute;
top: 30%;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="accordion-faq.css">
<title>Accordion FAQ</title>
</head>
<body>
<section class="accordion">
<div class="accordion-container">
<header>
<h2>FAQs</h2>
</header>
<div class="panel-container">
<div class="panel">
<div class="panel-header">
<h4>
First question?
</h4>
<div class="arrow"><div class="arrow-up"></div></div>
</div>
<div class="panel-body">
<div class="panel-body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusantium animi blanditiis corporis dicta, dolor dolores
enim facilis fuga itaque iure iusto molestiae mollitia
natus nisi pariatur praesentium quo rerum vel.
</p>
</div>
</div>
</div> <!-- .panel -->
<div class="panel">
<div class="panel-header">
<h4>
Second question?
</h4>
<div class="arrow arrow-up"></div>
</div>
<div class="panel-body">
<div class="panel-body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusantium animi blanditiis corporis dicta, dolor dolores
enim facilis fuga itaque iure iusto molestiae mollitia
natus nisi pariatur praesentium quo rerum vel.
</p>
</div>
</div>
</div> <!-- .panel -->
</div> <!-- .panel-container -->
</div> <!-- .accordion-container -->
</section>
<script src="accordion-faq.js"></script>
</body>
</html>
Reference images:
Required
Current
Bottom is my work, top is my goal or as close to as possible.
I have two questions, why won't my div go to the right side of the page?
and
I'm having trouble filling in h1 and div with colour and a boarder any help would
be appreciated
Here is my code that i've been working on, sorry im new to CSS and html still.
body {
background-image: url("bg.jpg");
}
div { background-color; #cccccc;
opacity: 0.8;
padding: 5px;
width: 200px;
height: 200px;
border: 3px ridge #cccccc;
padding: 5px
margin: 10px
position:absolute;
right: 0%;
top: 0%;
}
h1
{ background-color; #cccccc;
padding: 5px;
font-weight: bold;
font-size: 40px;
text-align: center
opacity: 0.8;
position:absolute;
left: 45%;
top: 60%;
font-family,sans-serif
width: 300px;
}
</style>
</head>
<body>
<header id="header">
<div class="h1">
<h1 style="color:DarkSlateBlue" text-align: center;>Rythm and Blues</h1>
</div>
<div>
<div class="div">
<h3 style="color:DarkSlateBlue" text-align: center> Artist Name</h3>
<p style="color:DarkSlateBlue"> Lorem ipsum dolor sit amet, suas utinam numquam mea ea, errem neglegentur eum ut. Aliquam
reformidans et mel. soleat corpora prodesset id quo. ei cibo natum delenit his.</p>
</div>
</body>
Wouldn't fit in comments. Below is some fixes to your syntax.
<style>
body {
background-image: url("bg.jpg");
}
.div {
background-color: #cccccc;
opacity: 0.8;
width: 200px;
height: 200px;
border: 3px ridge #cccccc;
padding: 5px;
margin: 10px;
position:absolute;
right: 0%;
top: 0%;
}
.h1
{ background-color: #cccccc;
font-weight: bold;
font-size: 40px;
text-align: center;
opacity: 0.8;
position:absolute;
left: 45%;
top: 60%;
font-family,sans-serif;
width: 300px;
}
</style>
</head>
<body>
<div class="h1">
<h1 style="color:DarkSlateBlue;text-align: center;">Rythm and Blues</h1>
</div>
<div class="div">
<h3 style="color:DarkSlateBlue" text-align: center> Artist Name</h3>
<p style="color:DarkSlateBlue"> Lorem ipsum dolor sit amet, suas utinam numquam mea ea, errem neglegentur eum ut. Aliquam
reformidans et mel. soleat corpora prodesset id quo. ei cibo natum delenit his.</p>
</div>
</body>
I'm having this problem with a page I'm creating.screenshot
Here is the code for the html:
<!DOCTYPE html>
<head>
<meta charset="UTF-8"/>
<title>JJ TECH</title>
<link rel="stylesheet" href="_css/estilo.css"/>
</head>
<body>
<div id="interface">
<header id="cabecalho">
<nav id="menu">
<h1>Menu Principal</h1>
<ul>
<li>Home</li>
<li>Informações</li>
<li>Contato</li>
</ul>
</nav>
</header>
<p>Lorem ipsum dolor sit amet, elit ferri facilisi has an, eos probatus perpetua maluisset ad. Minim ponderum pro ut, cu vim referrentur philosophia, ex posse causae signiferumque mei. Dico erant veniam sea et, ut elitr ponderum delicata sed. Tation euismod vix ex, usu latine omnesque no. Vel no libris maiestatis.</p>
</div>
</body>
and css:
#charset "UTF-8";
body{
font-family: Arial, sans-serif;
background: #370b44;
}
div#interface{
width: 900px;
background: #fff;
margin: -20px auto 0 auto;
padding: 20px;
}
p{
text-align: justify;
text-indent: 30px;
}
/*CONFIGURAÇÃO DO MENU*/
nav#menu h1{
display: none;
}
nav#menu ul{
background-color: rgba(0,0,0,.5);
overflow: hidden;
list-style: none;
display: block;
font-size: 13pt;
margin: 0;
padding: 0;
position: fixed;
width: 100%;
top: 0;
left: 0;
}
nav#menu li{
float: left;
/*border-right: 1px solid #555;*/
}
nav#menu li:hover:not(.active){
background: #000;
}
a{
display: block;
text-decoration: none;
color: #fff;
padding: 15px;
}
.ativo{
background: #751891;
}
How can I make my content come after my menu, not under it?
Since your navigation is position fixed, you have to push down the content using padding or margin. First set body margin to 0. Then add padding-top: 60px; to div#interface. That should be a good starter. And of course try to learn something about block elements, inline elements, floating elements and check their different behavior regarding layouting.
You need to update your css for div#interface
div#interface{
width: 900px;
background: #fff;
margin: 67px auto 0 auto;
padding-top: 20px;
}
I hope this may help:
Change it according to your requirements. Especially add style in separate file.
You need to shuffle your HTML markup and add position fixed to div#interface I suggest change its width to 100%
here is the working code:
<head>
<meta charset="UTF-8"/>
<title>JJ TECH</title>
<style>
body{
font-family: Arial, sans-serif;
background: #370b44;
}
div#interface{
width: 900px;
background: #fff;
margin: -20px auto 0 auto;
padding: 20px;
position:fixed;
top:71px;
}
p{
text-align: justify;
text-indent: 30px;
}
/*CONFIGURAÇÃO DO MENU*/
nav#menu h1{
display: none;
}
nav#menu ul{
background-color: rgba(0,0,0,.5);
overflow: hidden;
list-style: none;
display: block;
font-size: 13pt;
margin: 0;
padding: 0;
position: fixed;
width: 100%;
top: 0;
left: 0;
}
nav#menu li{
float: left;
/*border-right: 1px solid #555;*/
}
nav#menu li:hover:not(.active){
background: #000;
}
a{
display: block;
text-decoration: none;
color: #fff;
padding: 15px;
}
.ativo{
background: #751891;
}
</style>
</head>
<body>
<header id="cabecalho">
<nav id="menu">
<h1>Menu Principal</h1>
<ul>
<li>Home</li>
<li>Informações</li>
<li>Contato</li>
</ul>
</nav>
</header>
<div id="interface">
<p>Lorem ipsum dolor sit amet, elit ferri facilisi has an, eos probatus perpetua maluisset ad. Minim ponderum pro ut, cu vim referrentur philosophia, ex posse causae signiferumque mei. Dico erant veniam sea et, ut elitr ponderum delicata sed. Tation euismod vix ex, usu latine omnesque no. Vel no libris maiestatis.</p>
</div>
</body>
I've been making this website for school and I thought i'd figure out how parallax scrolling works. So i've started with the simpelest tutorial to be precise this one. After doing this I placed my navigation bar in. I remember this worked fine at the time but after working allot on the responsiveness I didn't check back and now I can't click on the links anymore.
This is my html:
<div id="group2" class="parallax_group">
<!-- <div class="parallax_layer parallax_layer-back">
background
</div> -->
<div class="parallax_layer parallax_layer-base">
<div id="nav" class="nav">
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Over ons</li>
<li>Wat leveren wij?</li>
<li>Contact</li>
<li>Demo</li>
</ul>
</div>
<div class="section group">
<div class="col span_1_of_3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam id nam, necessitatibus at odit nobis vitae, dolor sequi sunt doloremque minima, debitis. Sed debitis possimus esse soluta mollitia est culpa.</p>
</div>
<div id="middle" class="col span_1_of_3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui autem impedit, a, error accusantium soluta molestias quidem quo totam beatae eligendi sint, modi voluptatem nemo fugiat recusandae ullam consequatur nihil?</p>
</div>
<div class="col span_1_of_3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident voluptatibus, quaerat nostrum ullam distinctio praesentium! Nemo eveniet provident id, tenetur cumque natus, quas porro possimus maiores, minus amet laboriosam ea?</p>
</div>
</div>
</div>
</div>
And this is my css:
* {
padding: 0;
margin: 0;
}
body {
text-align: center;
}
h1{
display: inline-block;
font-family: 'Raleway', sans-serif;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
p{
display: inline-block;
font-family: 'Raleway', sans-serif;
color: black;
}
header {
z-index: 5;
line-height: 100vh;
}
header .parallax_layer-back {
background: url(sample.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#group2 {
z-index: 3;
}
#group2 .parallax_layer-base {
background-color: #dbdbdb;
}
.parallax {
perspective: 300px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax_layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax_layer-base {
transform: translateZ(0px);
z-index: 4;
}
.parallax_layer-back {
transform: translateZ(-300px) scale(2);
z-index: 3;
height: 150vh;
}
.parallax_layer-deep{
transform: translateZ(-600px) scale(3);
z-index: 2;
background-color: #dbdbdb;
}
.parallax_group {
position: relative;
height: 100vh;
transform-style: preserve-3d;
/*transform: translate3d(700px, 0, -800px) rotateY(30deg);*/
}
/*Columns*/
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
/* GRID OF THREE */
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 66.1%;
}
.span_1_of_3 {
width: 32.2%;
}
#middle{
border-top: 0px;
border-bottom: 0px;
border-right: 1px;
border-left: 1px;
border-style: solid;
}
/*navigation*/
.nav {
position: sticky;
top: 0px;
height: 100px;
width: 100%;
z-index: 30;
font-family: 'Raleway', sans-serif;
font-size: 20px;
background-color: #dbdbdb;
}
.nav ul {
list-style-type: none;
margin-left: 0;
padding-top: 40px;
font-size: 25px;
font-family: 'Raleway', sans-serif;
line-height: 0;
z-index: 30;
}
.nav li {
display: inline-block;
margin-left: 15px;
padding-bottom: 25px;
z-index: 30;
}
a:link {
color: #2F649B;
font-family: inherit;
}
a:visited {
color: #2F649B;
}
a:hover {
color: #6D92B9;
text-decoration: none;
}
a:active {
color: #26507C;
text-decoration: none;
}
footer {
position: sticky;
bottom: 0px;
height: 100px !important;
line-height: 100px;
width: 100%;
}
I know it's allot of code but I have no idea what it could be so i went and gone ahead and gave you everything.
edit: The other html parallax group:
<!DOCTYPE html>
<html>
<head>
<title>Squirel WebDesign</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="handheld.css" media="screen and (max-device-width: 480px), screen and (max-width: 480px)">
</head>
<body>
<div class="parallax">
<header class="parallax_group">
<div class="parallax_layer parallax_layer-base">
<h1>i'm a bloody big header preferably with a squirel</h1>
</div>
<div class="parallax_layer parallax_layer-back">
</div>
<div class="parallax_layer parallax_layer-deep">
</div>
</header>