I have a carousel created with only CSS, but I have identified some difficulties. All images are in the 4:3 aspect ratio and may have a maximum of 640x480 px (that is, they can be smaller than this value), so:
I can not center the next and previous arrows;
The arrows can not be "floating" on the screen (if the next image is
smaller than the previous one, the arrows should not change
position);
I do not know how to set the size of the carousel according to the
largest image currently used.
The code:
html {
font-size: 10px;
}
body {
padding: 2rem;
background: #F8F8F8;
font-size: 16px;
}
.wrap {
max-width: 70rem;
margin: auto;
padding: 2rem;
background: #FFF;
}
.carousel {
position: relative;
display: -webkit-box;
display: flex;
max-width: 64rem;
min-height: 40rem;
margin: auto;
background: red;
-webkit-box-pack: center;
justify-content: center;
}
.group {
display: -webkit-box;
display: flex;
background: blue;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
align-items: center;
}
.group input {
position: absolute;
top: -100%;
left: -100%;
display: none;
}
.group input ~ .content {
/* tentar fixar tamanho aqui */
display: none;
-webkit-box-ordinal-group: 3;
order: 2;
}
div.group input:checked ~ div.content {
display: block;
}
div.group input:checked ~ label.previous,
div.group input:checked ~ label.next {
display: block;
}
div.group label {
top: 50%;
display: none;
width: 50px;
height: 50px;
border: solid 1px black;
background-color: #69C;
transform: translateY(-50%);
}
img {
width: 100%;
height: 100%;
}
label {
margin: 125px 0 0 0;
font-size: 4em;
}
label.previous {
padding: 0 0 30px 5px;
-webkit-box-ordinal-group: 2;
order: 1;
}
label.next {
padding: 0 5px 25px 0;
text-align: right;
-webkit-box-ordinal-group: 4;
order: 3;
}
<!DOCTYPE html>
<html>
<head>
<title>Teste 3</title>
<link rel="stylesheet" type="text/css" href="teste3.css">
<meta charset="utf-8">
</head>
<body>
<div class="wrap">
<div class="carousel">
<div class="group">
<input type="radio" name="test" id="0" value="0">
<label for="4" class="previous"><</label>
<label for="1" class="next">></label>
<div class="content">
<img src="https://www.oneperiodic.com/products/photobatch/tutorials/img/scale_original.png" width="200" height="286">
</div>
</div>
<div class="group">
<input type="radio" name="test" id="1" value="1">
<label for="0" class="previous"><</label>
<label for="2" class="next">></label>
<div class="content">
<img src="https://www.ausmedia.com.au/Mmedia/4TO3.gif" width="200" height="139">
</div>
</div>
<div class="group">
<input type="radio" name="test" id="2" value="2">
<label for="1" class="previous"><</label>
<label for="3" class="next">></label>
<div class="content">
<img src="http://www.cegepsherbrooke.qc.ca/~cpi/images/photo_4-3.jpg" width="140" height="200">
</div>
</div>
<div class="group">
<input type="radio" name="test" id="3" value="3" checked="">
<label for="2" class="previous"><</label>
<label for="4" class="next">></label>
<div class="content">
<img src="http://www.projectorcentral.com/images/articles/4-3%20Bristlecone%20Pines.jpg" width="200" height="287">
</div>
</div>
<div class="group">
<input type="radio" name="test" id="4" value="4">
<label for="3" class="previous"><</label>
<label for="0" class="next">></label>
<div class="content">
<img src="http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-for-monitor-4-3-almost-square-awesome/wallpaper-for-monitor-4-3-almost-square-awesome-951.jpg" width="96" height="139">
</div>
</div>
</div>
</div>
</body>
</html>
Can anyone help me find a solution or at least a balance in the measurements?
From what I understood,
You did not add
position: absolute to labels.
changed top to 18% to have them in center.
prev with left:0;
next with right:0;
This will set your labels as per the carousel, as it has the position relative.
html{
font-size: 10px;
}
body {
padding: 2rem;
background: #F8F8F8;
font-size: 16px;
}
.wrap {
max-width: 70rem;
margin: auto;
padding: 2rem;
background: #FFF;
}
.carousel {
position: relative;
display: -webkit-box;
display: flex;
max-width: 64rem;
min-height: 40rem;
margin: auto;
background: red;
-webkit-box-pack: center;
justify-content: center;
}
.group {
display: -webkit-box;
display: flex;
background: blue;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
align-items: center;
}
.group input {
position: absolute;
top: -100%;
left: -100%;
display: none;
}
.group input ~ .content {
/* tentar fixar tamanho aqui */
display: none;
-webkit-box-ordinal-group: 3;
order: 2;
}
div.group input:checked ~ div.content {
display: block;
}
div.group input:checked ~ label.previous,
div.group input:checked ~ label.next {
display: block;
}
div.group label {
position:absolute;
top: 18%;
display: none;
width: 50px;
height: 50px;
border: solid 1px black;
background-color: #69C;
transform: translateY(-50%);
}
img {
width: 100%;
height: 100%;
}
label {
margin: 125px 0 0 0;
font-size: 4em;
}
label.previous {
padding: 0 0 30px 5px;
-webkit-box-ordinal-group: 2;
order: 1;
left:0;
}
label.next {
padding: 0 5px 25px 0;
text-align: right;
-webkit-box-ordinal-group: 4;
order: 3;
right:0;
}
<!DOCTYPE html>
<html>
<head>
<title>Teste 3</title>
<link rel="stylesheet" type="text/css" href="teste3.css">
<meta charset="utf-8">
</head>
<body>
<div class="wrap">
<div class="carousel">
<div class="group">
<input type="radio" name="test" id="0" value="0">
<label for="4" class="previous"><</label>
<label for="1" class="next">></label>
<div class="content">
<img src="https://www.oneperiodic.com/products/photobatch/tutorials/img/scale_original.png" width="200" height="286">
</div>
</div>
<div class="group">
<input type="radio" name="test" id="1" value="1">
<label for="0" class="previous"><</label>
<label for="2" class="next">></label>
<div class="content">
<img src="https://www.ausmedia.com.au/Mmedia/4TO3.gif" width="200" height="139">
</div>
</div>
<div class="group">
<input type="radio" name="test" id="2" value="2">
<label for="1" class="previous"><</label>
<label for="3" class="next">></label>
<div class="content">
<img src="http://www.cegepsherbrooke.qc.ca/~cpi/images/photo_4-3.jpg" width="140" height="200">
</div>
</div>
<div class="group">
<input type="radio" name="test" id="3" value="3" checked="">
<label for="2" class="previous"><</label>
<label for="4" class="next">></label>
<div class="content">
<img src="http://www.projectorcentral.com/images/articles/4-3%20Bristlecone%20Pines.jpg" width="200" height="287">
</div>
</div>
<div class="group">
<input type="radio" name="test" id="4" value="4">
<label for="3" class="previous"><</label>
<label for="0" class="next">></label>
<div class="content">
<img src="http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-for-monitor-4-3-almost-square-awesome/wallpaper-for-monitor-4-3-almost-square-awesome-951.jpg" width="96" height="139">
</div>
</div>
</div>
</div>
</body>
</html>
Couple issues with your code Bianca. First off when we write HTML, it's best to leave out width and height properties within the actual html. The reason for this is that the browser will consider anything in your html as more important than external css files. We call this inline-styling or inline-styles when CSS is written directly into HTML. (Here's a good explanation of the hierarchy of CSS: Inline <style> tags vs. inline css properties )
Secondly, I updated your code, and included a max-width property to the content div, wherein your images are wrapped (the controlling css). So you can set that max-width to whatever you need, and it happens to work in this case.
Here's a Codepen: http://codepen.io/0rfila/pen/JbKrwj
And your updated code:
CSS:
html {
font-size: 10px;
}
body {
padding: 2rem;
background: #F8F8F8;
font-size: 16px;
}
.wrap {
max-width: 70rem;
margin: auto;
padding: 2rem;
background: #FFF;
}
.carousel {
position: relative;
display: -webkit-box;
display: flex;
max-width: 64rem;
min-height: 40rem;
margin: auto;
background: red;
-webkit-box-pack: center;
justify-content: center;
}
.group {
display: -webkit-box;
display: flex;
position: relative;
background: blue;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
align-items: center;
}
.group input {
position: absolute;
top: -100%;
left: -100%;
display: none;
}
.group input ~ .content {
/* tentar fixar tamanho aqui */
display: none;
-webkit-box-ordinal-group: 3;
order: 2;
}
div.group input:checked ~ div.content {
display: block;
}
div.group input:checked ~ label.previous,
div.group input:checked ~ label.next {
display: block;
}
div.group label {
top: 50%;
display: none;
width: 50px;
height: 50px;
border: solid 1px black;
background-color: #69C;
transform: translateY(-50%);
}
img {
width: 100%;
height: 100%;
}
label {
margin: 125px 0 0 0;
font-size: 4em;
}
label.previous {
padding: 0 0 30px 5px;
-webkit-box-ordinal-group: 2;
order: 1;
}
label.next {
padding: 0 5px 25px 0;
text-align: right;
-webkit-box-ordinal-group: 4;
order: 3;
}
.content {
max-width: 400px;
}
HTML:
<!DOCTYPE html>
<head>
<title>Teste 3</title>
<link rel="stylesheet" type="text/css" href="teste3.css">
<meta charset="utf-8">
</head>
<body>
<div class="wrap">
<div class="carousel">
<div class="group">
<input type="radio" name="test" id="0" value="0">
<label for="4" class="previous"><</label>
<label for="1" class="next">></label>
<div class="content">
<img src="https://www.oneperiodic.com/products/photobatch/tutorials/img/scale_original.png">
</div>
</div>
<div class="group">
<input type="radio" name="test" id="1" value="1">
<label for="0" class="previous"><</label>
<label for="2" class="next">></label>
<div class="content">
<img src="https://www.ausmedia.com.au/Mmedia/4TO3.gif">
</div>
</div>
<div class="group">
<input type="radio" name="test" id="2" value="2">
<label for="1" class="previous"><</label>
<label for="3" class="next">></label>
<div class="content">
<img src="http://www.cegepsherbrooke.qc.ca/~cpi/images/photo_4-3.jpg">
</div>
</div>
<div class="group">
<input type="radio" name="test" id="3" value="3" checked="">
<label for="2" class="previous"><</label>
<label for="4" class="next">></label>
<div class="content">
<img src="http://www.projectorcentral.com/images/articles/4-3%20Bristlecone%20Pines.jpg">
</div>
</div>
<div class="group">
<input type="radio" name="test" id="4" value="4">
<label for="3" class="previous"><</label>
<label for="0" class="next">></label>
<div class="content">
<img src="http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-for-monitor-4-3-almost-square-awesome/wallpaper-for-monitor-4-3-almost-square-awesome-951.jpg">
</div>
</div>
</div>
</div>
</body>
</html>
Related
My teacher demand to modify my CSS and HTML to support mobile view if it is necessary. I have to follow as below:
If the page is viewed on mobile:
o The viewport should be set to zoom-level 100%, and the width should be the
device-width
• If the device screen size is less than 700px wide:
o The width of the page content should be 95% instead of 700px
• If the device screen size is less than 500px wide:
o The yellow circles in the page header should not appear( it is the "MERN" displayed in the right top corner)
I don't know how to code it. Thank you so much
body {
font-family: "Proxima Nova", Arial, Helvetica, sans-serif;
font-size: 18px;
color: #222222;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
}
header {
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
width: 700px;
height: 80px;
}
#coursename {
font-family: Helvetica, sans-serif;
font-size: 32px;
font-weight: bold;
color: #ee3322;
}
header span {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: row;
}
#MRN {
height: 50px;
display: flex;
justify-content: space-around;
flex-direction: row;
align-items: center;
}
#MRN span {
background-color: #ffee00;
border-radius: 100%;
height: 50px;
width: 50px;
margin: 3px;
text-align: center;
transform: rotate(-30deg);
font-weight: bold;
}
#MRN div {
background-color: #ffee00;
border-radius: 100%;
width: 50px;
height: 50px;
text-align: center;
transform: rotate(-30deg);
padding: 10px;
}
article {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#quiz-name {
background-image: url(../starter_pack/images/background.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: middle;
width: 700px;
height: 425px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h1 {
background-color: rgba(255, 255, 255, 0.9);
font-family: Pangolin, "Trebuchet MS", cursive;
font-size: 60px;
color: black;
padding: 10px;
max-width: 75%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
#author {
font-size: 14px;
text-align: center;
margin-top: 18px;
}
#introduction {
width: 700px;
}
#introduction h2,
#introduction p {
margin: 18px 0 18px 0;
}
#startquiz,
#tryagain {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid #f1f1f1;
background-color: #f1f1f1;
padding: 18px;
}
button {
border: none;
color: white;
background-color: #2196f3;
padding: 18px;
}
button:hover {
background-color: #0d8bf2;
}
#attempt-quiz,
#review-quiz {
width: 700px;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
}
#attempt-quiz p,
#review-quiz p {
margin: 30px 0 30px 0;
}
form {
cursor: pointer;
width: 700px;
margin: 30px 0 30px 0;
}
.option,
.review-answer {
border-top: 1px solid white;
border-bottom: 1px solid white;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
width: auto;
padding: 15px;
background-color: #f1f1f1;
position: relative;
}
.option:hover {
background-color: #ddd;
}
label {
margin-left: 15px;
}
.correct {
position: absolute;
right: 0;
margin: 10px;
background-color: rgba(0, 0, 0, 0.2);
padding: 3px;
color: white;
}
.incorrect {
position: absolute;
right: 0;
margin: 10px;
background-color: rgba(0, 0, 0, 0.2);
padding: 3px;
color: white;
}
#submit {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 18px;
border: 1px solid #f1f1f1;
background-color: #f1f1f1;
padding: 18px;
}
#submit button {
border: none;
color: white;
background-color: #4caf50;
padding: 18px;
}
#submit button:hover {
background-color: #46a049;
}
.hidden {
display: none;
}
#tryagain {
background-color: #f1f1f1;
border: 1px solid #dcdcdc;
}
#tryagain h3 {
font-size: 24px;
font-weight: lighter;
}
.option {
position: relative;
padding: 0;
}
.option input[type="radio"] {
position: absolute;
left: 10px;
top: 15px;
}
.option label {
flex-grow: 1;
padding: 15px 40px;
margin: 0;
}
.option input[type="radio"]:checked+label {
background: #ddd;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML Quiz</title>
<link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" />
<link href="https://fonts.googleapis.com/css?family=Pangolin:400,700|Proxima+Nova" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer="true"></script>
</head>
<body>
<header>
<p id="coursename"><strong> WPR </strong> </p>
<div id="MRN">
<span>M</span>
<span>E</span>
<span>R</span>
<span>N</span>
</div>
</header>
<article>
<section id="quiz-name">
<h1 id="hello">HTML Quiz</h1> <br>
</section>
<p id="author"> By Minh Duc Nguyen </p>
<section id="introduction">
<h2> The Test </h2>
<p>The test contains 10 questions and there is no time limit.</p>
<p>The test is not official, it's just a nice way to see how much you know, or don't know, about HTML.</p>
<h2>Count Your Score</h2>
<p>
You will get 1 point for each correct answer. At the end of the Quiz, your total score will be displayed. Maximum score is 10 points.
</p>
<div id="startquiz">
<h2>Start the quiz</h2>
<p> Good luck!</p>
<button name="button" type="button">Start the HTML quiz ❯ </button>
</div>
</section>
<section id="attempt-quiz">
<div id="quiz">
<p><strong> Question 1 of 10</strong></p>
<p>Question 1</p>
<form name="ques01" id='ques01'>
<div class="option">
<input type="radio" name="question1" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question1" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question1" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question1" value="option 4">
<label>option 4</label><br>
</div>
</form>
<p><strong> Question 2 of 10</strong></p>
<p>Question 2</p>
<form name="ques02" id='ques02'>
<div class="option">
<input type="radio" name="question2" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question2" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question2" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question2" value="option 4">
<label>option 4</label><br>
</div>
</form>
<p><strong> Question 3 of 10</strong></p>
<p>Question 3</p>
<form name="ques03" id='ques03'>
<div class="option">
<input type="radio" name="question3" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question3" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question3" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question3" value="option 4">
<label>option 4</label><br>
</div>
</form>
<p><strong> Question 4 of 10</strong></p>
<p>Question 4</p>
<form name="ques04" id='ques04'>
<div class="option">
<input type="radio" name="question4" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question4" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question4" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question4" value="option 4">
<label>option 4</label><br>
</div>
</form>
<p><strong> Question 5 of 10</strong></p>
<p>Question 5</p>
<form name="ques05" id='ques05'>
<div class="option">
<input type="radio" name="question5" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question5" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question5" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question5" value="option 4">
<label>option 4</label><br>
</div>
</form>
<p><strong> Question 6 of 10</strong></p>
<p>Question 6</p>
<form name="ques06" id='ques06'>
<div class="option">
<input type="radio" name="question6" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question6" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question6" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question6" value="option 4">
<label>option 4</label><br>
</div>
</form>
<p><strong> Question 7 of 10</strong></p>
<p>Question 7
</p>
<form name="ques07" id='ques07'>
<div class="option">
<input type="radio" name="question7" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question7" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question7" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question7" value="option 4">
<label>option 4</label><br>
</div>
</form>
<p><strong> Question 8 of 10</strong></p>
<p>Question 8</p>
<form name="ques08" id='ques08'>
<div class="option">
<input type="radio" name="question8" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question8" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question8" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question8" value="option 4">
<label>option 4</label><br>
</div>
</form>
<p><strong> Question 9 of 10</strong></p>
<p>Question 9</p>
<form name="ques09" id='ques09'>
<div class="option">
<input type="radio" name="question9" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question9" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question9" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question9" value="option 4">
<label>option 4</label><br>
</div>
</form>
<p><strong> Question 10 of 10</strong></p>
<p>Question 10</p>
<form name="ques10" id='ques10'>
<div class="option">
<input type="radio" name="question10" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question10" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question10" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question10" value="option 4">
<label>option 4</label><br>
</div>
</form>
<div id="submit">
<button type="submit" value="submit" onclick="totalscore()">Submit your answer</button>
</div>
</form>
</div>
</section>
</article>
</body>
</html>
You should use CSS media queries. These is the updated CSS file.
body {
font-family: "Proxima Nova", Arial, Helvetica, sans-serif;
font-size: 18px;
color: #222222;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
width:100%
}
header {
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
width: 700px;
height: 80px;
}
#coursename {
font-family: Helvetica, sans-serif;
font-size: 32px;
font-weight: bold;
color: #ee3322;
}
header span {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: row;
}
#MRN {
height: 50px;
display: flex;
justify-content: space-around;
flex-direction: row;
align-items: center;
}
#MRN span {
background-color: #ffee00;
border-radius: 100%;
height: 50px;
width: 50px;
margin: 3px;
text-align: center;
transform: rotate(-30deg);
font-weight: bold;
}
#media all and (max-width :500px){
#MRN span{
display:none;
}
}
#MRN div {
background-color: #ffee00;
border-radius: 100%;
width: 50px;
height: 50px;
text-align: center;
transform: rotate(-30deg);
padding: 10px;
}
article {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#quiz-name {
background-image: url(../starter_pack/images/background.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: middle;
width: 700px;
height: 425px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h1 {
background-color: rgba(255, 255, 255, 0.9);
font-family: Pangolin, "Trebuchet MS", cursive;
font-size: 60px;
color: black;
padding: 10px;
max-width: 75%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
#author {
font-size: 14px;
text-align: center;
margin-top: 18px;
}
#introduction {
width: 700px;
}
#introduction h2,
#introduction p {
margin: 18px 0 18px 0;
}
#startquiz,
#tryagain {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid #f1f1f1;
background-color: #f1f1f1;
padding: 18px;
}
button {
border: none;
color: white;
background-color: #2196f3;
padding: 18px;
}
button:hover {
background-color: #0d8bf2;
}
#attempt-quiz,
#review-quiz {
width: 700px;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
}
#attempt-quiz p,
#review-quiz p {
margin: 30px 0 30px 0;
}
form {
cursor: pointer;
width: 700px;
margin: 30px 0 30px 0;
}
.option,
.review-answer {
border-top: 1px solid white;
border-bottom: 1px solid white;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
width: auto;
padding: 15px;
background-color: #f1f1f1;
position: relative;
}
.option:hover {
background-color: #ddd;
}
label {
margin-left: 15px;
}
.correct {
position: absolute;
right: 0;
margin: 10px;
background-color: rgba(0, 0, 0, 0.2);
padding: 3px;
color: white;
}
.incorrect {
position: absolute;
right: 0;
margin: 10px;
background-color: rgba(0, 0, 0, 0.2);
padding: 3px;
color: white;
}
#submit {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 18px;
border: 1px solid #f1f1f1;
background-color: #f1f1f1;
padding: 18px;
}
#submit button {
border: none;
color: white;
background-color: #4caf50;
padding: 18px;
}
#submit button:hover {
background-color: #46a049;
}
.hidden {
display: none;
}
#tryagain {
background-color: #f1f1f1;
border: 1px solid #dcdcdc;
}
#tryagain h3 {
font-size: 24px;
font-weight: lighter;
}
.option {
position: relative;
padding: 0;
}
.option input[type="radio"] {
position: absolute;
left: 10px;
top: 15px;
}
.option label {
flex-grow: 1;
padding: 15px 40px;
margin: 0;
}
.option input[type="radio"]:checked+label {
background: #ddd;
}
#media all and (max-width:700px){
header, form, #attempt-quiz, #review-quiz, #url, #introduction, header{
width:95% !important;
font-size:1rem;
}
}
How can I make these radio buttons responsive? I'm not sure what I'm doing wrong. I'd like to be able to click the grid item each option is in and have it behave like a radio button, but I'm not sure what I'm missing. Any recommendations for streamlining this code would also be extremely helpful. Thanks!
body {
font-family: Arial, Helvetica;
font-size: 3vh;
background-color: #b0b0b0;
}
.wrapper {
width: 50%;
margin-left: 25%;
margin-right: 25%;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-gap: 20px;
grid-auto-rows: 100px;
justify-content: center;
background-color: ;
}
.item {
border-radius: 50px;
color: white;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.item input {
opacity: 0;
position: absolute;
/*this makes it not interfere with the text location*/
}
.item:nth-child(odd) {
background: gray;
}
.item:nth-child(odd):hover {
background: limegreen;
cursor: pointer;
}
.item:nth-child(odd):label {}
.wrapper h2 {
grid-row: 1;
grid-column: 1/-1;
}
<div id="trialDiv" style="font-size: 13pt;">
<div id="TrialQuestions">
<div id="Questions" class="wrapper">
<h2 style="text-align:center"><i>What emotion was the face expressing? </i></h2>
<div id="gap" class="item"></div>
<div id="HappyButton" class="item">
<label>
<p><input class="responseButton" id="emotion_1" name="emotion" onclick = "GrabEmotionClickTime()" type="radio" value="1" /> Happiness</p>
</label>
</div>
<div id="gap" class="item"></div>
<div id="AngryButton" class="item">
<label>
<p><input class="responseButton" id="emotion_2" name="emotion" onclick = "GrabEmotionClickTime()"type="radio" value="2" /> Anger</p>
</label>
</div>
<div id="gap" class="item"></div>
<div id="FearButton" class="item">
<label>
<p><input class="responseButton" id="emotion_4" name="emotion" onclick = "GrabEmotionClickTime()"type="radio" value="3" /> Fear</p>
</label>
</div>
<div id="gap" class="item"></div>
<div id="NeutralButton" class="item">
<label>
<p><input class="responseButton" id="emotion_4" name="emotion" onclick = "GrabEmotionClickTime()"type="radio" value="4" /> Neutral</p>
</label>
</div>
</div>
</div>
</div>
Without doing all the work for you, your arrangement of elements is incorrect. Here is a simple example:
https://codepen.io/seanstopnik/pen/8a2ca693e9fe1f1334b921a6d75dbe99
/* For demo only */
body {
font-family: sans-serif;
padding: 40px;
}
/* Emotion button */
.emotion-button {
position: relative;
margin: 20px; /* For demo only */
}
.emotion-button__input {
position: absolute;
left: -9999px;
}
.emotion-button__label {
display: inline-block;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
border-radius: 50%;
background-color: #ccc;
cursor: pointer;
transition: all 0.15s ease-in-out;
}
.emotion-button__input:checked ~ .emotion-button__label {
color: #fff;
background-color: green;
}
<div class="emotion-button">
<input id="r1" class="emotion-button__input" type="radio" name="emotion"/>
<label for="r1" class="emotion-button__label">Happiness</label>
</div>
<div class="emotion-button">
<input id="r2" class="emotion-button__input" type="radio" name="emotion"/>
<label for="r2" class="emotion-button__label">Anger</label>
</div>
Same idea as #SeanStopnik, did all the work for you:
body {
font-family: Arial, Helvetica;
font-size: 13pt;
background-color: #b0b0b0;
}
#Questions h2 {
font-style: italic;
}
.wrapper {
width: 50%;
margin-left: 25%;
margin-right: 25%;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-gap: 20px;
grid-auto-rows: 100px;
justify-content: center;
background-color: ;
}
.item label {
display: block;
border-radius: 50%;
color: white;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
height: 80px;
background: gray;
}
.item label:hover {
background: lime;
}
.item input {
display: none;
}
.item input:checked + label {
background: blue;
}
.wrapper h2 {
grid-row: 1;
grid-column: 1/-1;
}
<div id="trialDiv">
<div id="TrialQuestions">
<div id="Questions" class="wrapper">
<h2 style="text-align:center">What emotion was the face expressing?</h2>
<div class="gap"></div>
<div id="HappyButton" class="item">
<input class="responseButton" id="emotion_1" name="emotion" type="radio" value="1" />
<label for="emotion_1">Happiness</label>
</div>
<div class="gap"></div>
<div id="AngryButton" class="item">
<input class="responseButton" id="emotion_2" name="emotion" type="radio" value="2" />
<label for="emotion_2">Anger</label>
</div>
<div class="gap"></div>
<div id="FearButton" class="item">
<input class="responseButton" id="emotion_3" name="emotion" type="radio" value="3" />
<label for="emotion_3">Fear</label>
</div>
<div class="gap"></div>
<div id="NeutralButton" class="item">
<input class="responseButton" id="emotion_4" name="emotion" type="radio" value="4" />
<label for="emotion_4">Neutral</label>
</div>
</div>
</div>
</div>
Explanation:
radio inputs are made invisible
they are placed right before their labels
labels are associated with them using for="id" attribute, so that clicking the label will check the radio button
I'm using the CSS pseudoclass :checked to target checked radio for styling
the CSS operator + allows to target the label right after the checked radio
Also:
you shouldn't have javascript event handlers in your HTML. Better use addEventListener from javascript for that. Your onclick made the click fail.
you shouldn't repeat ids in html
you shouldn't style your fonts inline
you shouldn't use <i> to make your titles italic. You should use CSS for that
Use font-style: italic; for the h2 element, nowdays <i> is used to insert icons
You can the id value only once in your HTML! Can't give more than one element the same id.
By clicking on the label we check the input, so we hide the input and style the label : width + height = 100%
We give all the inputs the same name to prevent checking more than one input[radio].
AddEventListener for all the inputs to toggle the class active on each one item (depends on which is the checked one).
Print to the console the id of the input that is checked.
var inputs = document.querySelectorAll('.item label');
for (let i = 0; i < inputs.length; i++){
inputs[i].addEventListener('click', (e) => {
checkEmotion(inputs[i], e);
});
}
function checkEmotion(input, e){
for(let i = 0; i < inputs.length; i++){
inputs[i].parentElement.classList.remove('active');
}
e.target.parentElement.classList.add('active');
console.log(input.nextElementSibling.getAttribute("id"));
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica;
background-color: #b0b0b0;
}
h2 {
margin: 20px 0;
font-style: italic;
}
.wrapper {
display: flex;
justify-content: center;
}
.item {
border-radius: 50px;
color: white;
display: flex;
align-items: center;
justify-content: center;
width: 90px;
height: 90px;
margin: 0 10px;
background: gray;
position: relative;
overflow: hidden;
transition: all 0.2s;
}
.item.active {
background: #121212;
}
.item input {
opacity: 0;
display: absolute;
height: 0;
width: 0;
}
.item label {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.item:hover {
background: limegreen;
}
<h2 style="text-align:center">What emotion was the face expressing?</h2>
<div class="wrapper">
<div class="item">
<label for="emotion-happy">Happy</label>
<input type="radio" id="emotion-happy" name="emotion">
</div>
<div class="item">
<label for="emotion-sad">Sad</label>
<input type="radio" id="emotion-sad" name="emotion">
</div>
<div class="item">
<label for="emotion-angry">Angry</label>
<input type="radio" id="emotion-angry" name="emotion">
</div>
<div class="item">
<label for="emotion-confused">Confused</label>
<input type="radio" id="emotion-confused" name="emotion">
</div>
</div>
I'm Having trouble with my radio buttons, I don't want them to entirely fill the circle. Any word of advice. Here is link to what is happening on Codepen.
https://codepen.io/winterlion/pen/LYYJwZP
.item .text {
position: absolute;
display: inline-block;
cursor: pointer;
}
.item .text:before {
content: '';
display: inline-block;
vertical-align: text-bottom;
width: 18px;
height: 18px;
margin-right: 5px;
border-radius: 50%;
border: 2px solid #235b96;
outline: none;
box-shadow: 0 0 5px 0px gray inset;
}
.item input[type="radio"] {
display: none;
}
.item input[type="radio"]:checked+label .text:before {
content: '';
color: #235b96;
background-color: #479623;
}
<div class="item">
<input type="radio" id="r1" name="group1" value="trial1" />
<label for="r1" class="wrapper">
<span class="background"></span>
<h1 class="rp-text">Radio Buttons</h1>
<hr class="split-hr">
<br>
<span class="text"></span>
</label>
</div>
<div class="item">
<input type="radio" id="r2" name="group1" value="trial2" />
<label for="r2" class="wrapper">
<span class="background"></span>
<h1 class="rp-text">Buttons</h1>
<span class="text"></span>
</label>
</div>
If I understood your question right, you just want to move styles related to a green dot to an ::after pseudo element that must be a bit smaller than ::before.
.item .text {
position: absolute;
display: inline-block;
cursor: pointer;
}
.item .text::before,
.item .text::after {
content: '';
display: inline-block;
margin-right: 5px;
border-radius: 50%;
}
.item .text::before {
width: 18px;
height: 18px;
border: 2px solid #235b96;
box-shadow: 0 0 5px 0px gray inset;
}
.item input[type="radio"]:checked + label .text::after {
width: 12px;
height: 12px;
position: absolute;
left: 5px;
top: 5px;
}
.item input[type="radio"] {
display: none;
}
.item input[type="radio"]:checked + label .text:after {
color: #235b96;
background-color: #479623;
}
<div class="item">
<input type="radio" id="r1" name="group1" value="trial1" />
<label for="r1" class="wrapper">
<span class="background"></span>
<h1 class="rp-text">Radio Buttons</h1>
<hr class="split-hr">
<br>
<span class="text"></span>
</label>
</div>
<div class="item">
<input type="radio" id="r2" name="group1" value="trial2" />
<label for="r2" class="wrapper">
<span class="background"></span>
<h1 class="rp-text">Buttons</h1>
<span class="text"></span>
</label>
</div>
I am coding a simple landing page. In theory, each div you code will show below the previous one and so forth.
I made a little navbar and then expected the slider to appear below it. Then, I wanted to add an image below the slider (the one with brands' logos). Problem is, the image appears below the navbar. I am guessing there is something with the position of the slider but I can't figure out what it is.
I'd rather not use position: absolute or position: relative to position all my elements, so I am here to understand what the problem might be.
html {
font-family: "Arial", Helvetica, sans-serif;
}
/*---navigation--*/
.top-nav {
height: 105px;
display: flex;
align-items: center;
}
ul.main-nav {
display: flex;
align-items: center;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
height: 40px;
}
ul.main-nav li {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 15px;
font-weight: 700;
color: #FCAF17;
}
ul.main-nav li:hover {
cursor: pointer;
color: #FFFFFF;
}
/* main slider */
.slider {
width: 100%;
height: 100%;
left: 0;
top: 25%;
opacity: 1;
z-index: 0;
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
flex-flow: row wrap;
-webkit-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
align-content: center;
-webkit-transition: -webkit-transform 1600ms;
transition: -webkit-transform 1600ms, transform 1600ms;
-webkit-transform: scale(1);
transform: scale(1);
}
/* image slider position */
.slide1 {
position: absolute;
left: 0;
}
.slide2 {
position: absolute;
left: 100%;
}
.slide3 {
position: absolute;
left: 200%;
}
/* slider pagination */
.slider-pagination {
position: absolute;
bottom: 20px;
width: 100%;
left: 0;
text-align: center;
z-index: 1000;
}
.slider-pagination label {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
background: rgba(255, 255, 255, 0.2);
margin: 0 2px;
border: solid 1px rgba(255, 255, 255, 0.4);
cursor: pointer;
}
/* slider control */
input {
visibility: hidden;
}
.slide-radio1:checked~.slider {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.slide-radio2:checked~.slider {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.slide-radio3:checked~.slider {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
/*----------slider end----------------*/
.box {
background-color: blue;
}
<!--navigation-->
<div class="top-nav">
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/logo.jpg"></img>
</div>
<ul class="main-nav">
<li>HOMBRE</li>
<li>MUJER</li>
<li>NIÑOS</li>
<li>Carrito</li>
</ul>
<!--image slider-->
<div class="css-slider-wrapper">
<input type="radio" name="slider" class="slide-radio1" checked id="slider_1">
<input type="radio" name="slider" class="slide-radio2" id="slider_2">
<input type="radio" name="slider" class="slide-radio3" id="slider_3">
<div class="slider-pagination">
<label for="slider_1" class="page1"></label>
<label for="slider_2" class="page2"></label>
<label for="slider_3" class="page3"></label>
</div>
<div class="slider slide1">
<div>
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/racing-980x400.jpg">
</div>
</div>
<div class="slider slide2">
<div>
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/evoACCURACY_980x400px.jpg">
</div>
</div>
<div class="slider slide3">
<div>
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/racing-980x400.jpg">
</div>
</div>
</div>
<div class="brands">
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/marcas.jpg">
</div>
Live demo
first thing you can add Position : relative and second add height to div like i added <div class="demo" style="opacity:0;"> <img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/racing-980x400.jpg"> </div>
<div class="css-slider-wrapper">
<div class="demo" style="opacity:0;"> <img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/racing-980x400.jpg"> </div>
<input name="slider" class="slide-radio1" checked="" id="slider_1" type="radio">
<input name="slider" class="slide-radio2" id="slider_2" type="radio">
<input name="slider" class="slide-radio3" id="slider_3" type="radio">
<div class="slider-pagination">
<label for="slider_1" class="page1"></label>
<label for="slider_2" class="page2"></label>
<label for="slider_3" class="page3"></label>
</div>
<div class="slider slide1">
<div>
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/racing-980x400.jpg">
</div>
</div>
<div class="slider slide2">
<div>
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/evoACCURACY_980x400px.jpg">
</div>
</div>
<div class="slider slide3">
<div>
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/racing-980x400.jpg">
</div>
</div>
</div>
use style :
.css-slider-wrapper {
position: relative;
}
.slide1 {
left: 0;
}
try it i thing it's work other give me Demo line https://jsfiddle.net/
I'm trying to implement a Likert scale UI. I want to have the green line go behind the radio buttons. I tried changing the z-index but no luck...
#container {
text-align: justify;
background-color: #ff5050;
position: relative;
}
.line {
width: 100%;
height: 2px;
background-color: green;
position: absolute;
top: 5px;
z-index: 0;
}
input[type=radio] {
display: block;
margin: auto;
z-index: 1;
}
.box {
width: 60px;
vertical-align: top;
display: inline-block;
text-align: center;
}
.stretch {
width: 100%;
display: inline-block;
}
<div id="container">
<div class="box">
<input type="radio" name="radio"/>
<label>A</label>
</div>
<div class="box">
<input type="radio" name="radio"/>
<label>B</label>
</div>
<div class="box">
<input type="radio" name="radio"/>
<label>C</label>
</div>
<div class="box">
<input type="radio" name="radio"/>
<label>D</label>
</div>
<div class="box">
<input type="radio" name="radio"/>
<label>E</label>
</div>
<div class="box">
<input type="radio" name="radio"/>
<label>F</label>
</div>
<div class="line"></div>
<span class="stretch"></span>
</div>
z-index will only work along with position.
Adding position to your input[type=radio] will meet your requirement.
#container {
text-align: justify;
background-color: #ff5050;
position: relative;
}
.line {
width: 100%;
height: 2px;
background-color: green;
position: absolute;
top: 5px;
z-index: 0;
}
input[type=radio] {
position:relative;
display: block;
margin: auto;
z-index: 1;
}
.box {
width: 60px;
vertical-align: top;
display: inline-block;
text-align: center;
}
.stretch {
width: 100%;
display: inline-block;
}
<div id="container">
<div class="box">
<input type="radio" name="radio"/>
<label>A</label>
</div>
<div class="box">
<input type="radio" name="radio"/>
<label>B</label>
</div>
<div class="box">
<input type="radio" name="radio"/>
<label>C</label>
</div>
<div class="box">
<input type="radio" name="radio"/>
<label>D</label>
</div>
<div class="box">
<input type="radio" name="radio"/>
<label>E</label>
</div>
<div class="box">
<input type="radio" name="radio"/>
<label>F</label>
</div>
<div class="line"></div>
<span class="stretch"></span>
</div>
Note that z-index will only apply to elements that have a position. As such, your input elements have no z-index applied to them, and resort to the default value of 0.
It gets a little complicated with hierarchy, and .box is a sibling of .line. As such, all of your .box elements are of equal z-index to your line.
To have the line behind the notes, you'll want to use a value of -1 for .line. Note that this will actually place the .line behind container, because that also defaults to 0. As such, you'll additionally want to set a value of -1 on #container.
Ultimately, you just need to ensure four things:
That .line has a z-index equal to or greater than #container
That .box has a higher z-index than .line
That input has a z-index equal to or greater than .box
That all elements with z-index also have a position
This can be seen in the following, which only sets a -1 z-index on #container and .line:
#container {
text-align: justify;
background-color: #ff5050;
position: relative;
z-index: -1;
}
.line {
width: 100%;
height: 2px;
background-color: green;
position: absolute;
top: 5px;
z-index: -1;
}
input[type=radio] {
display: block;
margin: auto;
}
.box {
width: 60px;
vertical-align: top;
display: inline-block;
text-align: center;
}
.stretch {
width: 100%;
display: inline-block;
}
<div id="container">
<div class="box">
<input type="radio" name="radio" />
<label>A</label>
</div>
<div class="box">
<input type="radio" name="radio" />
<label>B</label>
</div>
<div class="box">
<input type="radio" name="radio" />
<label>C</label>
</div>
<div class="box">
<input type="radio" name="radio" />
<label>D</label>
</div>
<div class="box">
<input type="radio" name="radio" />
<label>E</label>
</div>
<div class="box">
<input type="radio" name="radio" />
<label>F</label>
</div>
<div class="line"></div>
<span class="stretch"></span>
</div>
Hope this helps! :)