I am a student attempting to learn how to create websites.
My header ("This Will Be The Day") appears centered, however when I change the resolution and size of the page, it doesn't stay centered relative to the content below it. Below I have the CSS and HTML content of my page.
body {
margin: 0;
padding: 0;
color: #000;
background-color: #eee;
font-size: 1em;
font-family: Helvetica, Arial, Geneva, sans-serif;
line-height: 1.3;
}
h1 {
margin: 0;
line-height: 1;
}
h2, h3, h4, h5, h6 {
width: 100%;
margin: 0 auto;
text-align: center;
}
p {
margin: 0 0 1em;
}
.container {
margin: 0;
background-color: #FFF;
}
.banner {
color: #fff;
padding: 2em;
background-color: #000;
border-bottom: 1px solid #333;
}
.nav {
float: left;
width: 20%;
margin-left: 5%;
padding-top: 2em;
padding-bottom: 2em;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 75%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
font-size: 14px;
}
.content {
float: left;
width: 50%;
padding-top: 2em;
padding-bottom: 2em;
margin: 0 0 0 10%;
}
.footer {
clear: both;
color: #fff;
background-color: #000;
padding: 2em;
text-align: right;
border-top: 1px solid #333;
}
ol {
float: left;
width: 90%;
margin: auto;
text-align: center;
}
ul {
float: left;
width: 90%;
margin: auto;
text-align: center;
padding-bottom: 1em;
}
iframe {
float: left;
align: center;
padding-left: 10%;
}
<div class="container">
<div class="banner">
<h1>RWBY Lyrics</h1>
</div>
<div class="nav">
<button class="accordion">Volume One</button>
<div class="panel">
This Will Be The Day
</div><button class="accordion">Volume Two</button>
<div class="panel">
<p>Volume Two Songs Here</p>
</div><button class="accordion">Volume Three</button>
<div class="panel">
<p>Volume Three Songs Here</p>
</div><button class="accordion">Volume Four</button>
<div class="panel">
<p>Volume Four Songs Here</p>
</div>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
<div class="content">
<h2>This Will Be The Day</h2>
<div style="margin-left: 2em">
They see you as small and helpless;
</div>
<div style="margin-left: 2em">
They see you as just a child.
</div>
<div style="margin-left: 2em">
Surprise when they find out that a warrior will soon run wild.
</div>
<div style="margin-left: 2em">
Prepare for your greatest moments;
</div>
<div style="margin-left: 2em">
Prepare for your finest hour.
</div>
<div style="margin-left: 2em">
The dream that you've always dreamed is suddenly about to flower.
</div>
<div style="margin-left: 2em">
We are lightning,
</div>
<div style="margin-left: 2em">
Straying from the thunder,
</div>
<div style="margin-left: 2em">
Miracles of ancient wonder.
</div>
<div style="margin-left: 2em">
This will be the day we've waited for.
</div>
<div style="margin-left: 2em">
This will be the day we open up the door.
</div>
<div style="margin-left: 2em">
I don't wanna hear your absolution;
</div>
<div style="margin-left: 2em">
Hope you're ready for a revolution.
</div>
<div style="margin-left: 2em">
Welcome to a world of new solutions.
</div>
<div style="margin-left: 2em">
Welcome to a world of bloody evolution.
</div>
<div style="margin-left: 2em">
In time, your heart will open minds,
</div>
<div style="margin-left: 2em">
A story will be told,
</div>
<div style="margin-left: 2em">
And victory is in a simple soul
</div>
<div style="margin-left: 2em">
Your world needs a great defender.
</div>
<div style="margin-left: 2em">
Your world's in the way of harm.
</div>
<div style="margin-left: 2em">
You want a romantic life; a fairytale that's full of charm.
</div>
<div style="margin-left: 2em">
Beware that the light is fading;
</div>
<div style="margin-left: 2em">
Beware if the dark returns.
</div>
<div style="margin-left: 2em">
This world's unforgiving; even brilliant lights will cease to burn.
</div>
<div style="margin-left: 2em">
Legends scatter.
</div>
<div style="margin-left: 2em">
Day and night will sever.
</div>
<div style="margin-left: 2em">
Hope and peace are lost forever.
</div>
<div style="margin-left: 2em">
This will be the day we've waited for...
</div>
<div style="margin-left: 2em">
We are lightning...
</div>
<div style="margin-left: 2em">
Welcome to a world of new solutions...
</div>
<div style="margin-left: 2em">
This will be the day we've waited for.
</div>
<div style="margin-left: 2em">
This will be the day we open up the door.
</div>
<div style="margin-left: 2em">
I don't wanna hear your absolution;
</div>
<div style="margin-left: 2em">
Hope you're ready for a revolution.
</div>
<div style="margin-left: 2em">
Welcome to a world of new solutions.
</div>
<div style="margin-left: 2em">
Welcome to a world of bloody evolution.
</div>
<div style="margin-left: 2em">
In time, your heart will open minds,
</div>
<div style="margin-left: 2em">
A story will be told,
</div>
<div style="margin-left: 2em">
And victory is in a simple soul
</div><iframe align="center" allowfullscreen frameborder="0" height="315" src="https://www.youtube.com/embed/Tb1_93M8SXA?rel=0&showinfo=0" width="560"></iframe>
</div>
<div class="footer">
I highly recommend taking a look at the RWBY Wiki located at rwby.wikia.com for more information.
</div>
</div>
Note that I'm using the h2 tag in order to put my header on the page, so it most likely lies in that CSS.
The problem is not with the header, it's because you're using ols and uls inappropriately -- they place an indentation on the elements inside them.
Change your html from
<h2>
This Will Be The Day
</h2>
<ol>They see you as small and helpless;</ol>
<ol>They see you as just a child.</ol>
<ul>Surprise when they find out that a warrior will soon run wild. </ul>
to
<h2>
This Will Be The Day
</h2>
<p class="poem">
They see you as small and helpless;<br>
They see you as just a child.<br>
Surprise when they find out that a warrior will soon run wild.<br>
</p>
and add this to your CSS
p.poem {
text-align: center;
}
The ul and ol are unnecessary, you can omit those. Put the whole lyrics in a paragraph p, then put <br> at the end of each line to break to new line.
If you want the heading (This Will Be The Day) h2 and the lyrics p go together when you resize the window, you should give them same style. For example:
h2 {
margin: 2em;
text-align: left;
padding: auto;
}
p {
margin: 2em;
text-align: left;
padding: auto;
}
Here's the result:
body {
margin: 0;
padding: 0;
color: #000;
background-color: #eee;
font-size: 1em;
font-family: Helvetica, Arial, Geneva, sans-serif;
line-height: 1.3;
}
h1 {
margin: 0;
line-height: 1;
}
h2, h3, h4, h5, h6 {
margin: 2em;
text-align: left;
padding: auto;
}
p {
margin: 2em;
text-align: left;
padding: auto;
}
.container {
margin: 0;
background-color: #FFF;
}
.banner {
color: #fff;
padding: 2em;
background-color: #000;
border-bottom: 1px solid #333;
}
.nav {
float: left;
width: 20%;
margin-left: 5%;
padding-top: 2em;
padding-bottom: 2em;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 75%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
font-size: 14px;
}
.content {
float: left;
width: 50%;
padding-top: 2em;
padding-bottom: 2em;
margin: 0 0 0 10%;
}
.footer {
clear: both;
color: #fff;
background-color: #000;
padding: 2em;
text-align: right;
border-top: 1px solid #333;
}
iframe {
float: middle;
margin: 2em;
text-align: center;
padding: auto;
}
}
<body>
<div class="container">
<div class="banner">
<h1>RWBY Lyrics</h1>
</div>
<div class="nav">
<button class="accordion">Volume One</button>
<div class="panel">
This Will Be The Day
</div><button class="accordion">Volume Two</button>
<div class="panel">
<p>Volume Two Songs Here</p>
</div><button class="accordion">Volume Three</button>
<div class="panel">
<p>Volume Three Songs Here</p>
</div><button class="accordion">Volume Four</button>
<div class="panel">
<p>Volume Four Songs Here</p>
</div>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
<div class="content">
<h2>This Will Be The Day</h2>
<p>
They see you as small and helpless; <br>
They see you as just a child.<br>
Surprise when they find out that a warrior will soon run wild.<br>
Prepare for your greatest moments;<br>
Prepare for your finest hour.<br>
The dream that you've always dreamed is suddenly about to flower.<br>
We are lightning,<br>
Straying from the thunder,<br>
Miracles of ancient wonder.<br>
This will be the day we've waited for.<br>
This will be the day we open up the door.<br>
I don't wanna hear your absolution;<br>
Hope you're ready for a revolution.<br>
Welcome to a world of new solutions.<br>
Welcome to a world of bloody evolution.<br>
In time, your heart will open minds,<br>
A story will be told,<br>
And victory is in a simple soul<br>
Your world needs a great defender<br>
Your world's in the way of harm.<br>
You want a romantic life; a fairytale that's full of charm.<br>
Beware that the light is fading;<br>
Beware if the dark returns.<br>
This world's unforgiving; even brilliant lights will cease to burn.<br>
Legends scatter.<br>
Day and night will sever.<br>
Hope and peace are lost forever.<br>
This will be the day we've waited for...<br>
We are lightning...<br>
Welcome to a world of new solutions...<br>
This will be the day we've waited for.<br>
This will be the day we open up the door.<br>
I don't wanna hear your absolution;<br>
Hope you're ready for a revolution.<br>
Welcome to a world of new solutions.<br>
Welcome to a world of bloody evolution.<br>
In time, your heart will open minds,<br>
A story will be told,<br>
And victory is in a simple soul
</p>
<iframe align="center" allowfullscreen frameborder="0" height="315" src="https://www.youtube.com/embed/Tb1_93M8SXA?rel=0&showinfo=0" width="560"></iframe>
</div>
<div class="footer">
I highly recommend taking a look at the RWBY Wiki located at rwby.wikia.com for more information.
</div>
</div>
</body>
Related
I added the "setHeight" function to make the smooth opening/closing of items with dynamic content work.
The essence of the function, if the item with class "active" - then the height of the content is automatic from the height of the parent block (if you look at the function in the JS code, it will be clearer how it works).
If we click on the active item and it becomes inactive - everything works correctly.
The content height becomes 0 and the content is hidden.
Now the problem is that if we click not on active item but on another one and "active" class is removed from active item and another item is added - then content height is not removed from previous active item to "0".
How can I
const accordItems = document.querySelectorAll('.accordion__item');
accordItems.forEach(item => {
const accordText = item.querySelector('.accordion__text');
const content = item.querySelector('.accordion__content');
item.addEventListener('click', () => {
const activeItem = item.classList.contains('active');
accordItems.forEach(item => {
item.classList.remove('active');
setHeight()
});
if (!activeItem) {
content.style.height = 0;
}
if (!activeItem) {
item.classList.add('active');
setHeight()
}
});
function setHeight() {
if (content.offsetHeight) {
content.style.height = 0;
} else {
content.style.height = accordText.offsetHeight + 'px';
};
};
});
#import url("https://fonts.googleapis.com/css2?family=Lora&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
body {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #1f1f1f;
background: #f2f2f2; }
html {
font-size: 62.5%; }
h5 {
margin: 0; }
p {
margin: 0; }
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: auto;
max-width: 140rem; }
.section-accordion {
display: flex;
align-items: center;
max-width: 134rem;
margin: auto; }
.accordion-image {
width: 630px;
height: 450px;
background: url("https://eternel.maitreart.com/wp-content/uploads/2021/07/creat-home-1.jpg");
background-repeat: no-repeat;
background-size: cover; }
.accordion {
width: 63rem;
height: auto;
margin-left: 8rem; }
.accordion__item {
border-top: 1px solid #a8a6a4;
overflow: hidden;
transition: height .5s;
padding-bottom: 1rem; }
.accordion__item.active {
height: auto; }
.accordion__item:last-child {
border-bottom: 1px solid #a8a6a4; }
.accordion__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 1rem 1rem 1rem;
cursor: pointer; }
.accordion__title {
font-family: 'Lora';
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
text-transform: uppercase; }
.accordion__icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 2rem;
height: 2rem;
transition: transform .5s ease; }
.accordion__icon span:first-child {
transform: rotate(90deg) translateX(1px);
width: 1.4rem;
height: .1rem;
background: currentColor; }
.accordion__icon span {
display: block;
width: 1.4rem;
height: .1rem;
background: currentColor;
cursor: pointer; }
.accordion__content {
font-family: 'Roboto', sans-serif;
font-size: 1.6rem;
line-height: 1.62;
font-weight: 400;
padding: 0 1rem 0 1rem;
height: 0;
overflow: hidden;
transition: height .5s; }
.accordion__item.active > .accordion__header .accordion__icon {
transform: rotate(45deg); }
.accordion__item.active > .accordion__content {
margin-bottom: 1.2rem;
height: auto; }
<div class="container">
<section class="section-accordion">
<div class="accordion-image"></div>
<div class="accordion">
<div class="accordion__item active">
<div class="accordion__header">
<h5 class="accordion__title">Visual direction</h5>
<div class="accordion__icon">
<span></span>
<span></span>
</div>
</div>
<div class="accordion__content">
<p class="accordion__text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__header">
<h5 class="accordion__title">Event production</h5>
<div class="accordion__icon">
<span></span>
<span></span>
</div>
</div>
<div class="accordion__content">
<p class="accordion__text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__header">
<h5 class="accordion__title">Brand creation</h5>
<div class="accordion__icon">
<span></span>
<span></span>
</div>
</div>
<div class="accordion__content">
<p class="accordion__text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__header">
<h5 class="accordion__title">Design concept</h5>
<div class="accordion__icon">
<span></span>
<span></span>
</div>
</div>
<div class="accordion__content">
<p class="accordion__text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
</div>
</div>
</section>
</div>
solve this problem?
I modified your Javsacript a bit to achieve it, your problem is your content always refers to the current item which is not the previous active item. We need pass item param to that function to refer to a correct item.
The key changes are under setHeight function
function setHeight(item, isActive) {
const content = item.querySelector('.accordion__content');
if (!isActive) {
content.style.height = 0;
} else {
content.style.height = accordText.offsetHeight + 'px';
};
};
const accordItems = document.querySelectorAll('.accordion__item');
accordItems.forEach(item => {
const accordText = item.querySelector('.accordion__text');
item.addEventListener('click', () => {
const activeItem = item.classList.contains('active');
accordItems.forEach(item => {
item.classList.remove('active');
setHeight(item, false)
});
if (!activeItem) {
item.classList.add('active');
setHeight(item, true)
}
});
function setHeight(item, isActive) {
const content = item.querySelector('.accordion__content');
if (!isActive) {
content.style.height = 0;
} else {
content.style.height = accordText.offsetHeight + 'px';
};
};
});
#import url("https://fonts.googleapis.com/css2?family=Lora&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
body {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #1f1f1f;
background: #f2f2f2; }
html {
font-size: 62.5%; }
h5 {
margin: 0; }
p {
margin: 0; }
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: auto;
max-width: 140rem; }
.section-accordion {
display: flex;
align-items: center;
max-width: 134rem;
margin: auto; }
.accordion-image {
width: 630px;
height: 450px;
background: url("https://eternel.maitreart.com/wp-content/uploads/2021/07/creat-home-1.jpg");
background-repeat: no-repeat;
background-size: cover; }
.accordion {
width: 63rem;
height: auto;
margin-left: 8rem; }
.accordion__item {
border-top: 1px solid #a8a6a4;
overflow: hidden;
transition: height .5s;
padding-bottom: 1rem; }
.accordion__item.active {
height: auto; }
.accordion__item:last-child {
border-bottom: 1px solid #a8a6a4; }
.accordion__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 1rem 1rem 1rem;
cursor: pointer; }
.accordion__title {
font-family: 'Lora';
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
text-transform: uppercase; }
.accordion__icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 2rem;
height: 2rem;
transition: transform .5s ease; }
.accordion__icon span:first-child {
transform: rotate(90deg) translateX(1px);
width: 1.4rem;
height: .1rem;
background: currentColor; }
.accordion__icon span {
display: block;
width: 1.4rem;
height: .1rem;
background: currentColor;
cursor: pointer; }
.accordion__content {
font-family: 'Roboto', sans-serif;
font-size: 1.6rem;
line-height: 1.62;
font-weight: 400;
padding: 0 1rem 0 1rem;
height: 0;
overflow: hidden;
transition: height .5s; }
.accordion__item.active > .accordion__header .accordion__icon {
transform: rotate(45deg); }
.accordion__item.active > .accordion__content {
margin-bottom: 1.2rem;
height: auto; }
<div class="container">
<section class="section-accordion">
<div class="accordion-image"></div>
<div class="accordion">
<div class="accordion__item active">
<div class="accordion__header">
<h5 class="accordion__title">Visual direction</h5>
<div class="accordion__icon">
<span></span>
<span></span>
</div>
</div>
<div class="accordion__content">
<p class="accordion__text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__header">
<h5 class="accordion__title">Event production</h5>
<div class="accordion__icon">
<span></span>
<span></span>
</div>
</div>
<div class="accordion__content">
<p class="accordion__text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__header">
<h5 class="accordion__title">Brand creation</h5>
<div class="accordion__icon">
<span></span>
<span></span>
</div>
</div>
<div class="accordion__content">
<p class="accordion__text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__header">
<h5 class="accordion__title">Design concept</h5>
<div class="accordion__icon">
<span></span>
<span></span>
</div>
</div>
<div class="accordion__content">
<p class="accordion__text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
</div>
</div>
</section>
</div>
I am new to coding and web design. Right now, I am constructing a portfolio website which showcases the other websites I've created. I am trying to create a layout where my Divs on the site are in two columns (under 'my work'). I am trying to figure out what to use but I'm unsure if I'm being honest. I've played around with display flex and display grid but I did not get the result I wanted. Here is my below... I will also link another persons' site to give you a visual of what I'm trying to achieve. Any help or tips would be greatly appreciated... Thank you!
Also, I will include my code.
My page and work so far
What I'm trying to create
* {
margin: 0;
box-sizing: border-box;
}
h1 {
text-align: center;
padding-top: 370px;
padding-bottom: 370px;
background-color: rgb(38,61,66);
color: white;
font-family: 'Courier New', monospace;
font-weight: normal;
}
h2 {
text-align: center;
padding-top: 100px;
padding-bottom: 30px;
font-family: 'Courier New', monospace;
font-weight: normal;
}
.main-body {
background-color: rgb(244,132,95);
width: 100%;
overflow-x: hidden;
}
.main-body2 {
padding-top: 150px;
padding-bottom: 150px;
float: left;
width: 25%;
}
#tribute {
width: 100%;
}
#product {
width: 100%;
}
#survey {
width: 100%;
}
#technical {
width: 100%;
}
.work {
border: 1px solid #ccc;
}
.work:hover {
border: 1px solid rgb(38,61,66);
}
.desc {
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
font-family: 'Courier New', monospace;
font-weight: normal;
}
</div><!DOCTYPE html>
<html>
<head>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<h1>Welcome To My Portfolio</h1>
<main>
<div class="main-body">
<h2>Some of my work</h2>
<div class="main-body2">
<div class="work">
<a target="_blank" href="https://codepen.io/dechirila19/full/poEOXVz">
<img src="https://lh3.googleusercontent.com/P8cbTC4Y-l-4nwkjTh3S67d5qHCvRMX7XyE6cXAsbTg4IX1AvB9-xEHexWDOK1q5YidvZtxXLo4TzjqLd3n21kJM8j_3xr_a5aZM3UyX3GrCg_0C--3zujKK-AL7TEyJxbmyJaRv16NvcTR6-B1y-P03TcvNtp11zB3tHYEtvf5TrwZJtInwwE0l_BkhUR-0OKuQO4O2RZZY0zeoo0Mrq7fd4i5rjf3HWb0yJ4WAC3TQP8w1vW0XdarfZZeBtfvnZny9BAEfYqIoUw9Rp9hcXp5Se4zkRs4TaJmJmRwOiWb44RjvNCJ4-oYTGfJZ9R2vL21eUEO28G0TexVTkhHxeB4c4APGteu-iNAB6jx-xUZa37WATiDPylYTtUS4vBU5tbFgvxu9Lvfb4mwVJN8gG6CzuKHou80TJS0yEgxQI6tOZrunP1DtIOAKgXgbGtGqLe6bK8YxYc5yYBH9a5mbp3eA2k50Rrh3Uh7YXpl02GmaPI05fak2wGJ0o0lyWgo0rNd6H0w3bpC91Anqvv_hTVnI1drISA5n8bCfY1m8UNM827qozZQh9Q7CUXOjf_Vkh2NunlyGiKtksT94gtCk59_HfDeBiNb-FPFlKjcRnxS9OyGAQdHFGWgrs5i40KOUKqsEyxY-2zujyECMZidTp4Vvi7mRRsiUMVPAdEkWyLO462xkFUiYVN5_hKOXlQ=s571-no?authuser=0" alt="Tribute Page" id="tribute">
</a>
<div class="desc">Tribute Page</div>
</div>
</div>
<div class="main-body2">
<div class="work">
<a target="_blank" href="https://codepen.io/dechirila19/full/VwKgmBg">
<img src="https://lh3.googleusercontent.com/IJaG-M-uOIMWYyrEv1yOZRtlRmTV8diJY-d6DmFxyVJt2BE2-iXsRwFH1G21cOJgDBJCbjAZdvEG01gOTixgkZGmxaRbdlRqvaaVUI0wggikKtB8sGXa6irKIe3B3VB2apWyNghvYGEC0IoCCJgCskOP9x1Bs6wJAUSPONZa1maJrkOBYL_T3PPlfj5Jym_mj9hiuCAKYTMM_rV3ErLk94DJk3bSj2_ppQfo0meoZ_abrk7M81bB171SdDEKQ-q4MKf5SNQkZpZ4Xt-DWYINMbKe6ify9a_9jnAytdJxtcsDGzymzCAfTsW9Oo1QKuRVcp_fZmlKuL8ddJ2TPoYjW4UgwdU6Zt2Qya4Q2NvWcjUSsuScgChbtrqPFUDRuKAwkKD3YAdjAozXQxgGWHqKIR9Uvfd50NYGJRspzXm9t4HNmTHnknO3Alq80HUPVvXuxM3v6rtbfmj8k5__o5YXh7yAUBhO2WYRJxx3255laQXIPxXzXt9013nUp35bKsHGHxL56m6fdADPtxAm1grkEcICHlIoOyNayX2c34pMpXwaJFajEODZ4Le7ng0K7_ORv0CnfFM4Z4tEuw5B1DSK17UpPsRn2NFjPLSkI9BqCA-7ZL_DSlYZYwba7A4PyDbIXHstNzHjKuFPhmb3seCfVYkzMj4mOeGGzHwtL-P9ABTK9ImvZ4l4ILFgGMomXw=w567-h568-no?authuser=0" id="survey">
</a>
<div class="desc">Survey Form</div>
</div>
</div>
<div class="main-body2">
<div class="work">
<a target="_blank" href="https://codepen.io/dechirila19/full/oNzrYQZ">
<img src="https://lh3.googleusercontent.com/QkjpqBlrvlMgUdoK6qSnXAcaqSFAdsZEDwrEsl96CGa-QXQrSUOiuf87cQlnYw6ciaelPWkk6hffKoyys4rcWb24DzGId2g2mHUFE52N0toZ6RzIQlXogtYDyWk2YVdnKshfyU_uEmIZJXED_qQ-M4bJ-l22us9yhDOSOSprhEp1oQoB4tICP-d8VPetANQihYa018aa87ixwKu9IA1vRgeS1QEPNcs9MXl0mPaEYx7br_jZuT-DJ2Ae_revIXieopvH_s7Iw-p9kEbb0OzB8lbqThiwCXmDaF6RcfhEDhI_A-sRlnscG6sqCOMn2bPGkNoWbKLkd3KpFnknwFwGpyMX-E3Q4jiBAcbaiROV70WlzkkypOSRwHAZuwWDRwf9qlnAOx-hJ46kMryfuH4ONqh6pe2UMe5lzaEnBaKMYpFuzupAelufIxl2maSraO7LFVEhixhAPJF7ldSMbaFNhXjNEk93DnvxOQuTqLAsWYCBfmFxVCFzWF2hfOHmK2YW7kTI4wTdt66QaI_fbfKeBrKOdAQ3qozVbnpBWymdgXc0rPmn2NrJFoLt327yX0XlIhOdvN-u31koYN3ThSUmJpKI15Pid8ScF7JifzAat4mEJQxk_bDZvCSTQnTCYQQagTVOHfixcQZ-OHfUp5korzvdg4L9sjLVK66meA19KXNNeWDYc3iadl1LscknFQ=w572-h571-no?authuser=0" id="product">
</a>
<div class="desc">Product Landing Page</div>
</div>
</div>
<div class="main-body2">
<div class="work">
<a target="_blank" href="https://codepen.io/dechirila19/full/RworweN"><img src="https://lh3.googleusercontent.com/_K_RWpOCQKs5GZYhQkoupmelGzWqrZmhnOJ9zcRpSMZfDDGF8Z9x6KzCA-DpZdYKoh-sXB4B8wjzGXKiOseSkreQwa-rLboJmonxq1Ea2OdNYTIx5Ztdx4ZdHBliSKlEVPDej1yp1VqT80FYpcpao4TOpaS2doyBPFHg-KSkHID-Rr1tPHc8waaA44DiCvDpFI8zbT2E1qP9KprXOl5Zl9oKyOFOTr102ZqWvnWi4PnxgsnNSwQ34qDvYJmVX1C1XdcC1Yf7GNHbNjJ_Elh612G3tC2Ool7ynQ9TWnttk5T9Ah0HKks1BctQolk8NFHNnOKXAu0i2qVrz7Bq7GbYMH2h96v_btud-dGaV05E8rKQ2bMDLIhZeSq4cTPyBvhkHru5L0FgRUNuajR45suoZgbNVtkllKv5PM7pKfXbpgxDtTikii6-y6OhpoAZC3sFkyX0tWQP93PbJIJdXBPLjE1zoUNgxLqE0J2TDmU0mTYl1QcumbP2_C1biY9Q4fRj6MYgwiULgcsgb1EICpUVnsPIRVlc_jeMa81zTfoF-GJ_cIChtE0jTQt6IrDWjW55FU8rICtOUyRRyVhfy81_tkXdObtmzlJ8w9ZJL7RCXjbeCbl4YW0lTBoEqygUZJwRDAYuJTBOm4FWJIBIhC__lI1OKrVEwelyWyugOPVjSiyEt_IXk-V78vb2KkiJ7g=w570-h571-no?authuser=0" id="technical">
</a>
<div class="desc">Technical Documentation Page</div>
</div>
</div>
</div>
</main>
</body>
</html>
use display : flex :
warp the four divs in a big div with class flex-main.
and this is the css:(only the parts with changes)
.main-body {
background-color: rgb(244,132,95);
width: 100%;
}
.flex-main{
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
justify-content: center;
}
.main-body2 {
padding-top: 150px;
padding-bottom: 150px;
float: left;
width: 35%;
margin-right: auto;
margin-left: auto;
}
that would work as you want.good luck!
I got 6 divs of which they each have an image and a button (javascript). When I click on a button of one of the divs, another div will show on the exact same place of the button of the div you clicked. When I click on all buttons separate, there is no problem. But when I click by example 'auto 2' and 'auto 3', 'auto 3" will show on the right side of the screen, not on the place where it will show when you click on the button separate. I got also this problem with 'auto 4,5 and 6. I dont got this problem with the first div 'auto 1' because its has an absolute position. When I used an absolute position on the other divs i couldnt position them properly. I think the problem has to do something with the fact that a div has a block display and that by example 'auto 2' pushes 'auto 3" to the side because it is wider than it looks.
PS. srry for my bad english and I used and internal javascript with tags because an external document like .js doesnt work for me for some reason
Thanks in advance!
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
background-color: #234aa6;
}
.auto{
padding-top: 4em;
color: white;
text-align: center;
font-family: helvetica;
float: left;
width: 33.33%;
}
.auto h1{
font-size: 40px;
}
.auto img{
width: 90%;
height: auto;
padding-top: 1em;
}
.auto button{
background-color: darkblue;
color: white;
padding: 20px;
font-family: helvetica;
font-size: 20px;
text-transform: uppercase;
border: none;
border-radius: 10px;
cursor: pointer;
margin-top: 10px;
}
.auto button:hover{
transition: 0.4s;
background-color: #011b57;
}
.container {
text-align: center;
}
.auto:nth-of-type(3n+1) {
clear:left;
}
.wrapper input{
padding: 20px 100px 20px 100px;
text-align: center;
margin-top: 10em;
background-color: white;
border: none;
}
.select1{
padding-top: 3.8em;
color: white;
text-align: center;
font-family: helvetica;
float: left;
width: 33.33%;
position: absolute;
display: none;
}
.select1 h1{
font-size: 40px;
}
.bg{
width: 570.83px;
height: 325px;
background-color: darkblue;
text-align: center;
margin: auto;
margin-top: 0.5em;
font-family: helvetica;
font-size: 2.5em;
padding-top: 3.5em;
}
.select2{
padding-top: 3.8em;
color: white;
text-align: center;
font-family: helvetica;
float: left;
width: 33.33%;
position: relative;
left: 39.5em;
bottom: 65.5em;
}
.select2 h1{
font-size: 40px;
}
.select3{
padding-top: 3.8em;
color: white;
text-align: center;
font-family: helvetica;
float: left;
width: 33.33%;
position: relative;
left: 79em;
bottom: 65.5em;
}
.select3 h1{
font-size: 40px;
}
.select4{
padding-top: 3.8em;
color: white;
text-align: center;
font-family: helvetica;
float: left;
width: 33.33%;
position: relative;
left: 0.25em;
bottom: 32.9em;
}
.select4 h1{
font-size: 40px;
}
.select5{
padding-top: 3.8em;
color: white;
text-align: center;
font-family: helvetica;
float: left;
width: 33.33%;
position: relative;
left: 39.5em;
bottom: 32.9em;
}
.select5 h1{
font-size: 40px;
}
.select6{
padding-top: 3.8em;
color: white;
text-align: center;
font-family: helvetica;
float: left;
width: 33.33%;
position: relative;
left: 79em;
bottom: 32.9em;
}
.select6 h1{
font-size: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>Sleutelkast</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div class="autolijst">
<div class="auto">
<h1>Auto 1</h1>
<img src="https://topgear.nl/app/uploads/2019/07/bmw-x6-m-2019.jpg">
<div class="container">
<button id="button1">SELECTEER</button>
</div>
</div>
<div class="auto" id="auto">
<h1>Auto 2</h1>
<img src="https://topgear.nl/app/uploads/2019/07/bmw-x6-m-2019.jpg">
<div class="container">
<button id="button2">SELECTEER</button>
</div>
</div>
<div class="auto" id="auto">
<h1>Auto 3</h1>
<img src="https://topgear.nl/app/uploads/2019/07/bmw-x6-m-2019.jpg">
<div class="container">
<button id="button3">SELECTEER</button>
</div>
</div>
<div class="auto" id="auto">
<h1>Auto 4</h1>
<img src="https://topgear.nl/app/uploads/2019/07/bmw-x6-m-2019.jpg">
<div class="container">
<button id="button4">SELECTEER</button>
</div>
</div>
<div class="auto" id="auto">
<h1>Auto 5</h1>
<img src="https://topgear.nl/app/uploads/2019/07/bmw-x6-m-2019.jpg">
<div class="container">
<button id="button5">SELECTEER</button>
</div>
</div>
<div class="auto" id="auto">
<h1>Auto 6</h1>
<img src="https://topgear.nl/app/uploads/2019/07/bmw-x6-m-2019.jpg">
<div class="container">
<button id="button6">SELECTEER</button>
</div>
</div>
</div>
<div class="selectlijst">
<div class="select1" id="select1">
<h1>Auto 1</h1>
<div class="bg" id="bg">
Sleutel 1
</div>
</div>
<div class="select2" id="select2">
<h1>Auto 2</h1>
<div class="bg" id="bg">
Sleutel 2
</div>
</div>
<div class="select3" id="select3">
<h1>Auto 3</h1>
<div class="bg" id="bg">
Sleutel 3
</div>
</div>
<div class="select4" id="select4">
<h1>Auto 4</h1>
<div class="bg" id="bg">
Sleutel 4
</div>
</div>
<div class="select5" id="select5">
<h1>Auto 5</h1>
<div class="bg" id="bg">
Sleutel 5
</div>
</div>
<div class="select6" id="select6">
<h1>Auto 6</h1>
<div class="bg" id="bg">
Sleutel 6
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$(".select1").hide();
$("#button1").click(function(){
if($(".select1").is(':visible')){
$(".select1").slideUp(100);
}
else
{
$(".select1").slideDown(100);
}
});
});
$(document).ready(function(){
$(".select2").hide();
$("#button2").click(function(){
if($(".select2").is(':visible')){
$(".select2").slideUp(100);
}
else
{
$(".select2").slideDown(100);
}
});
});
$(document).ready(function(){
$(".select3").hide();
$("#button3").click(function(){
if($(".select3").is(':visible')){
$(".select3").slideUp(100);
}
else
{
$(".select3").slideDown(100);
}
});
});
$(document).ready(function(){
$(".select4").hide();
$("#button4").click(function(){
if($(".select4").is(':visible')){
$(".select4").slideUp(100);
}
else
{
$(".select4").slideDown(100);
}
});
});
$(document).ready(function(){
$(".select5").hide();
$("#button5").click(function(){
if($(".select5").is(':visible')){
$(".select5").slideUp(100);
}
else
{
$(".select5").slideDown(100);
}
});
});
$(document).ready(function(){
$(".select6").hide();
$("#button6").click(function(){
if($(".select6").is(':visible')){
$(".select6").slideUp(100);
}
else
{
$(".select6").slideDown(100);
}
});
});
</script>
</html>
I'm having a small issue getting a toggle to work in a particle way, for all I know it can't be done using a toggle which is why I'm writing on here to see if someone can show me the best method. So at the moment I have 3 divs all of which have onclick events, and each have a toggle css class. What I'm trying to achieve is when one is clicked if the others are active they return back to the previous class.
function orgClick(clicked_id) {
var id = (clicked_id);
document.getElementById(id).classList.toggle('org_container_active');
}
.org_container {
width: 20%;
margin-left: 6.25%;
margin-right: 6.25%;
margin-top: 15px;
border: 2px solid #e1dfe1;
border-radius: 15px;
display: inline-block;
}
.org_container_active {
width: 20%;
margin-left: 6.25%;
margin-right: 6.25%;
margin-top: 15px;
border: 2px solid #2bbe43;
border-radius: 15px;
display: inline-block;
}
.org_name {
background-color: #f5f0f5;
border-bottom: 2px solid #e1dfe1;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
text-align: center;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
}
.org_logo {
padding-top: 10px;
margin: auto;
width: 100px;
}
.org_info {
padding: 5px 10px 10px 5px;
}
<div class="org_container" id="org1" onclick="orgClick(this.id);">
<div class="org_name">
<p align="center">Org 1</p>
</div>
<div class="org_logo">
<img src="http://server3.sulmaxcp.com/logo_unavailable.svg" width="100px" height="100px" ondragstart="return false;">
</div>
<div class="org_info">
<p></p>
</div>
</div>
<div class="org_container" id="org2" onclick="orgClick(this.id);">
<div class="org_name">
<p align="center">Org 2</p>
</div>
<div class="org_logo">
<img src="http://server3.sulmaxcp.com/logo_unavailable.svg" width="100px" height="100px" ondragstart="return false;">
</div>
<div class="org_info">
<p></p>
</div>
</div>
<div class="org_container" id="org3" onclick="orgClick(this.id);">
<div class="org_name">
<p align="center">Org 3</p>
</div>
<div class="org_logo">
<img src="http://server3.sulmaxcp.com/logo_unavailable.svg" width="100px" height="100px" class="noselect">
</div>
<div class="org_info">
<p></p>
</div>
</div>
document.querySelectorAll() lets you search for all elements that match a CSS selector. You can use it to deactivate all active containers:
for (let div of document.querySelectorAll('.org_container_active')) {
div.classList.remove('org_container_active');
}
There is a faq on my website for a school project created with Javascript animations.
The problem is:
1; The background moves when 2 or more faqs are opened.
2; There is a white space beneath the background.
The faq on my website (click for the image)
The javascript
var main = function() {
$('.article').click(function() {
$('.article').removeClass('current');
$('.description').hide();
$(this).addClass('current');
$(this).children('.description').show();
});
$(document).keypress(function(event) {
if(event.which === 111) {
$('.current').children('.description').toggle();
}
else if(event.which === 110) {
var currentArticle = $('.current');
var nextArticle = currentArticle.next();
currentArticle.removeClass('current');
nextArticle.addClass('current');
}
});
};
$(document).ready(main);
The Css
Body {
background: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png');
}
.articles_title {
color:white;
font-size: 250%;
position: fixed;
top: 30px;
right: 50%;
}
p {
margin: 0;
}
.row {
margin: 0;
}
.articles {
margin-top: 16px;
margin-bottom: 16px;
}
.article {
color: #222;
background: rgba(255,255,255,.9);
border-spacing: 2px;
border-color: gray;
font-family: arial,sans-serif;
border-bottom: 1px #e5e5e5 solid;
}
.current .item {
background: rgba(206,220,206,.9);
}
.item {
cursor: pointer;
padding-top: 7px;
padding-bottom: 7px;
}
.item .source {
margin-left: 16px;
}
.item .title {
font-weight: bold;
}
.item .pubdate {
margin-right: 16px;
}
.item .pubdate {
text-align: right;
}
.description {
display: none;
padding-top: 10px;
padding-bottom: 10px;
}
.description h1 {
margin-top: 0px;
font-size: 16px;
}
/* the index.php css */
body {
left: 0;
margin: 0;
overflow: hidden;
position: relative;
}
/* Initial menu */
.menu {
background: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top;
left: -285px; /* start off behind the scenes */
height: 100%;
position: fixed;
width: 285px;
}
/* Basic styling */
.jumbotron {
background-image: url('http://i.imgur.com/JvdPG8h.png?1');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #636366;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
.icon-menu {
color: #fff;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
padding-bottom: 25px;
padding-left: 25px;
padding-top: 25px;
text-decoration: none;
text-transform: uppercase;
}
.icon-menu i {
margin-right: 5px;
}
The index.php in the faq.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles/faq.css">
</head>
<body>
<div class="articles container">
<div class="article current">
<div class="item row">
<div class="col-xs-3">
<p class="source">FLIGHT</p>
</div>
<div class="col-xs-6">
<p class="title">Embraer adds third Legacy 500 prototype to flight test campaign</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 23</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>Embraer adds third Legacy 500 prototype to flight test campaign</h1>
<p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
</div>
<div class="col-xs-3"> </div>
</div>
</div>
<div class="article">
<div class="item row">
<div class="col-xs-3">
<p class="source">AW Commercial Aviation</p>
</div>
<div class="col-xs-6">
<p class="title">CSeries Supplier Scramble</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 22</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>CSeries Supplier Scramble</h1>
<p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p>
</div>
<div class="col-xs-3"> </div>
</div>
</div>
<div class="article">
<div class="item row">
<div class="col-xs-3">
<p class="source">AW Commercial Aviation</p>
</div>
<div class="col-xs-6">
<p class="title">CSeries Supplier Scramble</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 22</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>CSeries Supplier Scramble</h1>
<p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production
</div>
<div class="col-xs-3"> </div>
</div>
</div>
<div class="article">
<div class="item row">
<div class="col-xs-3">
<p class="source">AW Commercial Aviation</p>
</div>
<div class="col-xs-6">
<p class="title">CSeries Supplier Scramble</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 22</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>CSeries Supplier Scramble</h1>
<p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/faq.js"></script>
</body>
</html>
I jsfiddle your question http://jsfiddle.net/wz7eojqp/
I couldn't find the problems you described.
but I think that regarding the white space in the bottom of your page the problem is default browser margin. try to body{margin: 0;} or even better reset code.
http://meyerweb.com/eric/tools/css/reset/
Please close all (!) your html tags. It will fix many problems.
I've created a jsfiddle: http://jsfiddle.net/7ypk522y/
I have deleted your css class .jumbotron because you don't use it and changed it with the following lines. I hope this fixes your problem.
body {
background: url("http://i.imgur.com/JvdPG8h.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
padding: 20px;
}