Can someone help me, I'm at my wits end. I've created a CSS3 tabbed nav set up. When the tab is clicked it should be showing the base content -- at this point it's only one line. I'm missing something and I just can't see it. I'm not looking to implement JS or Jquery this should work but it's not.
Here's the code:
.tabs
{
position: relative;
display: block;
height: 40px;
width: 600px;
margin: 75px auto;
list-style: none;
float: none;
}
.tabs input[type="radio"]
{
display: none;
}
.tabs label
{
float: left;
display: block;
position: relative;
height: 40px;
width: 160px;
display:block;
padding: 10px 20px;
font-weight: normal;
font-family: 'Lucida Sans';
font-size: 17px;
background: #f2f2f2;
line-height: 20px;
text-align: center;
cursor: pointer;
color: #bfbfbf;
box-shadow: 0.5px -2px 2px rgba(0,0,0,0.1), 0.5px -1px 2px rgba(0,0,0,0.1);
transition: all 0.1s ease-in-out;
top: 2px;
}
.tabs label:hover
{
background: rgba(255,255,255,0.5);
top:0;
}
.tab-content
{
position: absolute;
top: 100px;
left: 0;
display: none;
}
[id^=tab]:checked+label
{
background: rgba(255,255,255,0.5);
top:0;
}
[id^=tab]:checked~[id^=tab-content]
{
display: block;
}
<ul class="tabs">
<li>
<input type="radio" name="tab" id="tab1" checked />
<label for="tab1">Personal Information</label>
<div class="tab-content" id="tab1-content">Here is the content for tab 1</div>
</li>
<li>
<input type="radio" name="tab" id="tab2" />
<label for="tab2">Academic Information</label>
<div class="tab-content" id="tab2-content">Here is the content for tab 2</div>
</li>
<li>
<input type="radio" name="tab" id="tab3" />
<label for="tab3">OECTA Involvement</label>
<div class="tab-content" id="tab3-content">Here is the content for tab 3</div>
</li>
</ul>
It's only your last css selector
[id^=tab]:checked~.tab-content{
display: block;
}
[id^=tab-content] selects all elements with an attribute ID starting with tab-content which is not what you want.
Related
I would like some assistance with my accordion code,
My idea is to get something like this:
The Radio Button Method adds a hidden radio input and a label tag to each accordion tab.
The logic is straightforward:
when a user selects a tab, they essentially check the radio button associated with that tab.
when a user clicks the next tab in the accordion, the next radio button is selected, and so on.
Only one tab can be open at a time using this method.
I'd like some advice on how to incorporate this into my current accordion code.
<!doctype html>
<html>
<head>
<style>
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #6AAB95;
border-radius: 3px;
color: #FFF;
transition: ease .5s;
position: relative; /* ADDING THIS IS REQUIRED */
}
label:hover {
background: #4E8774;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #E2E5F6;
padding: 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 3px;
}
input + label + .collapse {
display: none;
}
input:checked + label + .collapse {
display: block;
}
</style>
</head>
<body>
<input type="checkbox" id="title1" />
<label for="title1">Accordion 1</label>
<div class="collapse">
<p>Your content goes here inside this division with the class "content".</p>
</div>
<input type="checkbox" id="title2" />
<label for="title2">Accordion 2</label>
<div class="collapse">
<p>Your content goes here inside this division with the class "content".</p>
</div>
</body>
</html>
No need to change the CSS (at least the part handling the accordion functionality) but you'd have to change a bit in your HTML.
To get the desired accordion effect where only one tab can be open at a time you should:
use radio buttons instead of checkboxes (input[type="radio"]).
And the important part is to give those radio buttons the same name (the attribute name must be the same for all the accordion component's radio buttons) in order to achieve the desired outcome.
Here's a a live demo:
/** nothing changed on the CSS part, see the HTML part for the required changes */
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #6AAB95;
border-radius: 3px;
color: #FFF;
transition: ease .5s;
position: relative;
/* ADDING THIS IS REQUIRED */
}
label:hover {
background: #4E8774;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked+label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #E2E5F6;
padding: 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 3px;
}
input+label+.collapse {
display: none;
}
input:checked+label+.collapse {
display: block;
}
<!-- changed "type=checkbox" to "type=radio" -->
<!-- added the same "name" attribute value for all the radio buttons -->
<input type="radio" name="radio-btn" id="title1" />
<label for="title1">Accordion 1</label>
<div class="collapse">
<p>Your content goes here inside this division with the class "content".</p>
</div>
<!-- changed "type=checkbox" to "type=radio" -->
<!-- added the same "name" attribute value for all the radio buttons -->
<input type="radio" name="radio-btn" id="title2" />
<label for="title2">Accordion 2</label>
<div class="collapse">
<p>Your content goes here inside this division with the class "content".</p>
</div>
CAUTION: Even though the radio buttons hack works as needed, there is no way you can close all the accordion items after interacting for the first time (you can have a closed accordion initially though).
I have found this example using Sass that looks exactly like what you need: https://codepen.io/alvarotrigo/pen/dyJbqpd.
The example uses radio buttons, such as <input type="radio" id="title1" name="select"/>. Because they have the same name, you can only select one at a time.
In your example, you have checkboxes like in this example at w3schools.com. Using checkboxes, you can tick any number of checkboxes at a time, therefore the current accordion behavior.
Here's a stripped-down version (converted to CSS):
input {
position: absolute;
opacity: 0;
z-index: -1;
}
.tab {
overflow: hidden;
}
.tab-label {
display: flex;
justify-content: space-between;
padding: 1em;
background: #2c3e50;
color: white;
cursor: pointer;
}
.tab-content {
max-height: 0;
padding: 0 1em;
color: #2c3e50;
background: white;
}
input:checked ~ .tab-content {
max-height: 100vh;
padding: 1em;
}
<div class="tab">
<input type="radio" id="rd1" name="rd">
<label class="tab-label" for="rd1">Item 1</label>
<div class="tab-content">Content</div>
</div>
<div class="tab">
<input type="radio" id="rd2" name="rd">
<label class="tab-label" for="rd2">Item 2</label>
<div class="tab-content">Content</div>
</div>
I have slightly changed your code and added another div with overflow: hidden:
/** nothing changed on the CSS part, see the HTML part for the required changes */
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #6AAB95;
border-radius: 3px;
color: #FFF;
transition: ease .5s;
position: relative;
/* ADDING THIS IS REQUIRED */
}
label:hover {
background: #4E8774;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked+label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #E2E5F6;
padding: 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 3px;
}
input+label+.collapse {
display: none;
}
input:checked+label+.collapse {
display: block;
}
<div class="tab">
<input type="radio" id="title1" name="select"/>
<label for="title1">Accordion 1</label>
<div class="collapse">
Your content goes here inside this division with the class "content".
</div>
</div>
<div class="tab">
<input type="radio" id="title2" name="select" />
<label for="title2">Accordion 2</label>
<div class="collapse">
Your content goes here inside this division with the class "content".
</div>
</div>
I'm designing an application wherein i want to have tabs like below
But currently i'm seeing something like below (covered by box)
I searched the web for a similar design but i didn't find anything. Could you help to achieve the same?
Update
with border-bottom: 2px solid blue; i can get the blue line below, but the highlighted box is still appearing as shown below. I want to avoid that as well.
.tabs {
position: relative;
min-height: 200px; /* This part sucks */
clear: both;
margin: 45px 0 25px;
background: white;
color: #41C0ED;
font-weight:bold;
padding: 5px;
}
.tab {
float: left;
}
.tab label {
background: #fff;
padding: 10px;
border-bottom: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
top: -29px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: -1px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border-top: 1px solid #ccc;
-webkit-transition: opacity .6s linear;
opacity: 0;
}
[type=radio]:checked ~ label {
border-bottom: 2px solid #308AC2;
z-index: 2;
padding-bottom: 4px;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
opacity: 1;
}
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
<div class="content">
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab Two</label>
<div class="content">
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab Three</label>
<div class="content">
</div>
</div>
</div>
You can use :
background-color: transparent !important;
When I try to add float left or display inline, things break. Currently, I have a max-width of 1000px for the form. What I was hoping is somehow, the first, and last name will automatically float side by side if it is wide enough. So perhaps a min-width for inputs First and Last name?
Important note: I wrote this to test out writing CSS DRY code. You notice if you change the font size, the whole project changes size, So this is important to me. Also, I do not want to use media queries.
I am aware that I may need to change my approach, and I am open to that as well. Not so much looking for an exact code answer.
form {
text-align: center;
}
form ul, form li, form input, form label {
box-sizing: border-box;
margin: 0; padding: 0;
}
form ul {
font-size: 100%;
border: 3px solid #000;
border-radius: .3em;
max-width: 1000px;
margin: 50px auto;
list-style: none;
overflow: hidden;
}
form li {
position: relative;
border-bottom: inherit;
border-bottom: 3px solid;
}
form label {
position: absolute;
border-bottom: 1px dotted;
border-bottom-color: inherit;
width: 100%;
padding: .3em .3em;
padding-bottom: .1em;;
top: 0; left: 0;
font-size: .6em;
text-transform: uppercase;
}
form input, form input:focus {
text-transform: capitalize;
text-align: inherit;
background: transparent;
border: none;
width: 100%;
font-size: 2em;
padding: .7em .1em;
padding-bottom: .2em;;
}
form input:focus {
background-color: rgba(255, 255, 0, .2);
}
form input[type="submit"] {
text-transform: uppercase;
padding-bottom: 1.8em;
font-size: .6em;
height: 1.5em;
background-color: #ddd;
}
<form action="">
<ul>
<li>
<input id="first-name" type="text" autofocus>
<label for="first-name">First Name</label>
</li>
<li>
<input id="last-name" type="text">
<label for="last-name">Last Name</label>
</li>
<li>
<input id="username" type="text">
<label for="username">Username</label>
</li>
<li>
<input type="submit" name="submit">
</li>
</ul>
</form>
Flexbox is the most modern solution to this problem. However, remember to add the necessary prefixes for some browsers. If IE9 support is necessary, see the float solution below:
HTML
<form action="">
<ul>
<li class="split">
<input id="first-name" type="text" autofocus>
<label for="first-name">First Name</label>
</li>
<li class="split">
<input id="last-name" type="text">
<label for="last-name">Last Name</label>
</li>
<li class="fill">
<input id="username" type="text">
<label for="username">Username</label>
</li>
<input type="submit" name="submit">
</ul>
</form>
CSS
form {
text-align: center;
}
form ul, form li, form input, form label {
box-sizing: border-box;
margin: 0; padding: 0;
}
form ul {
font-size: 100%;
border: 3px solid #000;
border-radius: .3em;
max-width: 1000px;
margin: 50px auto;
list-style: none;
overflow: hidden;
}
form li {
position: relative;
border-bottom: inherit;
border-bottom: 3px solid;
}
form label {
position: absolute;
border-bottom: 1px dotted;
border-bottom-color: inherit;
width: 100%;
padding: .3em .3em;
padding-bottom: .1em;;
top: 0; left: 0;
font-size: .6em;
text-transform: uppercase;
}
form input, form input:focus {
text-transform: capitalize;
text-align: inherit;
background: transparent;
border: none;
width: 100%;
font-size: 2em;
padding: .7em .1em;
padding-bottom: .2em;;
}
form input:focus {
background-color: rgba(255, 255, 0, .2);
}
form input[type="submit"] {
text-transform: uppercase;
padding-bottom: 1.8em;
font-size: .6em;
height: 1.5em;
background-color: #ddd;
}
#media only screen and (min-width: 768px) {
li {
clear: both;
}
li.split {
width: 50%;
float: left;
clear: none;
}
}
https://jsfiddle.net/qefo9eLr/
.fl-name {
display: flex;
flex-direction: row;
}
you can try to use bootstrap grid system
this way u can have the inputs into columns
bootstrap grid system
look at this fiddle:
gri system sample
<div class='row'>
<div class="col-xs-2">Hi</div>
<div class="col-xs-2">Hi</div>
in your case col-xs-6 will give you 2 columns fullwidth
Not exactly sure if this is what you're going for, but it seems to fit your criteria.
form {
text-align: center;
}
form ul,
form li,
form input,
form label {
box-sizing: border-box;
margin: 0;
padding: 0;
}
form ul {
font-size: 100%;
border: 3px solid #000;
border-radius: .3em;
max-width: 1000px;
margin: 50px auto;
list-style: none;
overflow: hidden;
}
form li {
position: relative;
border-bottom: inherit;
border-bottom: 3px solid;
}
form label {
position: absolute;
border-bottom: 1px dotted;
border-bottom-color: inherit;
width: 100%;
padding: .3em .3em;
padding-bottom: .1em;
;
top: 0;
left: 0;
font-size: .6em;
text-transform: uppercase;
}
form input,
form input:focus {
text-transform: capitalize;
}
form #fl-name {
display: inline-block;
}
form .floatMe {
float: left;
}
form .clearMe {
clear: right;
}
<form action="">
<ul>
<div class="fl-name">
<li class="floatMe">
<input id="first-name" type="text" autofocus>
<label for="first-name">First Name</label>
</li>
<li class="floatMe clearMe">
<input id="last-name" type="text">
<label for="last-name">Last Name</label>
</li>
</div>
<li>
<input id="username" type="text">
<label for="username">Username</label>
</li>
<input type="submit" name="submit">
</ul>
</form>
Here is another alternative using our old faithful floats: https://jsfiddle.net/mvpu6s5o/3/
The main difference is basically here:
form li {
width: 33.33%;
float: left;
}
form li:nth-child(3) {
float: right;
}
form li:last-child {
width: 100%;
clear: both;
}
I used a width with percentage to keep it fluid, so it'll adjust to different screen sizes. The li:nth-child(3) float the last input to the right, so we can get rid of a small gap at the end due to the 33.33% width. form li:last-child is used to clear both floats to the last input (since this too is an li).
I just change the semantic and apply flexbox. This is the result:
*, *:before, *:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
align-items: center;
/background-color: #EB6361;
display: flex;
height: 100vh;
justify-content: center;
}
form {
box-shadow: 0 0 0 8px rgba(204,204,204,.85);
border-radius: 5px;
width: 500px;
}
form header {
background-color: #1ABC9C;
}
form header p {
color: #FFF;
font-family: 'ubuntu';
font-size: 15px;
padding: 15px 10px;
text-align: center;
}
form .body {
background-color: #EEE;
padding: 15px 20px;
}
form .body .block {
border: 2px solid #333;
border-radius: 4px;
overflow: hidden;
}
form .body .block:not(first-of-type) {
margin-top: 10px;
}
form .body .block:first-of-type > .group {
width: 98%;
}
form .body .block:first-of-type {
display: flex;
}
form .body .block .group {
display: flex;
flex-flow: column-reverse nowrap;
overflow: hidden;
}
form .body .block:first-of-type .group:first-of-type {
border-right: 2px solid #333;
}
form input {
background-color: transparent;
border: none;
color: #555;
font-size: 22pt;
padding: 6px 10px;
text-align: center;
}
form input:focus, form input:focus + label {
background-color: #F7F8E0;
}
form label {
border-bottom: 1px dotted #bbb;
color: #555;
font-family: 'ubuntu';
font-size: 11px;
padding: 2px;
text-align: center;
text-transform: uppercase;
}
form footer {
overflow: hidden;
}
form footer button {
background-color: #F39C12;
color: #FFF;
cursor: pointer;
width: 100%;
border: none;
padding: 4px;
}
<form action="">
<header>
<p>Submit Query Form</p>
</header>
<section class="body">
<div class="block">
<div class="group">
<input type="text" />
<label for="">First Name</label>
</div>
<div class="group">
<input type="text" />
<label for="">Last Name</label>
</div>
</div>
<div class="block">
<div class="group">
<input type="text" />
<label for="">Username</label>
</div>
</div>
</section>
<footer>
<button>Submit query</button>
</footer>
</form>
A very simple solution is with Flexbox.
Set the parent element to display type 'flex'.
Also set up flex wrap: wrap // This way the children will wrap if needed.
The children become flex objects. Since I want them to be even, I set them both to flex grow: 1
Set the children to flex-basis as 300px. // This is almost like a minimum width. This triggers the wrap.
body {
padding: 50px;
}
.main {
background-color: #e9e9e9;
display: flex;
flex-wrap: wrap;
}
.main input {
background-color: #e9e9e9;
}
.one {
flex-grow: 1;
flex-basis: 300px
}
.two {
flex-grow: 1;
flex-basis: 300px;
}
<head>
<link rel="stylesheet" href="inline.css">
</head>
<body>
<form class="main">
<input type="text" class="one">
<input type="text" class="two">
</form>
</body>
I'm trying to make a sliding sidebar without javascript, but I have a problem with an adjacent sibling selector which is not working.
This is my code:
.sidebar {
position: fixed;
top: 100px;
right: 0px;
z-index: 0;
width: 120px;
height: 100px;
padding: 30px;
background-color: rgba(255, 255, 255, 0.00);
border-bottom: solid 1px #181918;
border-left: solid 1px #181918;
}
.sidebar ul li {
font-family: 'Zona Pro';
font-size: 18px;
margin-bottom: 16px;
-webkit-font-smoothing: antialiased;
color: rgba(24, 25, 24, 0.78);
cursor: pointer;
}
#sidebarToggler {
display: none;
}
#sidebartoggler + .sidebar {
top: 500px;
}
<div class="pageWrap">
<input type="checkbox" id="sidebarToggler" />
<div class="sidebar">
<ul>
<li>Settings</li>
<li>Log out</li>
</ul>
</div>
<div class="userNameDiv">
<label for="sidebarToggler">
Fale1994
</label>
</div>
<div class="pageContent">
#RenderBody()
</div>
</div>
Everything is working OK except the last line of CSS... I tried everything and have no more ideas.
When clicked on label, the checkbox changes checked/unchecked, and then CSS should set a sidebar attribute 'top' to 500px if checked. I also tried this with background-color, but it is also not working.
2 things you are missing:
the :checked from ckeckbox
and you have #sidebartoggler but CSS is case sensitive, so use #sidebarToggler
Snippet
.sidebar {
position: fixed;
top: 100px;
right: 0px;
z-index: 0;
width: 120px;
height: 100px;
padding: 30px;
background-color: rgba(255, 255, 255, 0.00);
border-bottom: solid 1px #181918;
border-left: solid 1px #181918;
}
.sidebar ul li {
font-family: 'Zona Pro';
font-size: 18px;
margin-bottom: 16px;
-webkit-font-smoothing: antialiased;
color: rgba(24, 25, 24, 0.78);
cursor: pointer;
}
#sidebarToggler {
display: none;
}
#sidebarToggler:checked + .sidebar {
top: 500px;
}
<div class="pageWrap">
<input type="checkbox" id="sidebarToggler" />
<div class="sidebar">
<ul>
<li>Settings</li>
<li>Log out</li>
</ul>
</div>
<div class="userNameDiv">
<label for="sidebarToggler">
Fale1994
</label>
</div>
<div class="pageContent">
#RenderBody()
</div>
</div>
#sidebartoggler:checked + .sidebar
You forgot the :checked.
I'm having a lot of problems trying to force a label tag to fill 100% of its parent's width, so that it can adjust depending on the user's window size.
For some reason, if I set the width to 100%, it just sets a seemingly-arbitrary width regardless (http://d.pr/i/uLDV).
I'm trying to change the width of these labels:
Here is the code that I'm working with.
HTML:
<div class="page-content">
<div class="lesson-title">Extend the properties of exponents to rational exponents - Lesson 1</div>
<div class="lesson-description"><span>Learning outcome for this lesson:</span> Explain how the definition of the meaning of rational exponents follows from extending the properties of integer exponents to those values, allowing for a notation for radicals in terms of rational exponents.</div>
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">What are rational exponents?</label>
<div class="content">ONE</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Solving for a fractional exponent</label>
<div class="content">
<iframe width="675" height="380" src="https://www.youtube.com/embed/6OFwfxmhtE8?modestbranding=1&iv_load_policy=3&rel=0&showinfo=0&theme=light&color=white&disablekb=1" frameborder="0"></iframe>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Example 1</label>
<div class="content">stuff</div>
</div>
<div class="tab">
<input type="radio" id="tab-4" name="tab-group-1">
<label for="tab-4">Example 2</label>
<div class="content">stuff</div>
</div>
</div>
</div>
CSS:
.page-content {
width: 95%;
min-width: 875px;
margin: 25px auto;
}
.lesson-title {
padding: 15px;
font-size: 20px;
font-weight: 100;
color: #fff;
background: #2070A2;
}
.lesson-description {
padding: 15px;
font-size: 16px;
font-weight: 100;
line-height: 22px;
color: #333;
background: #FCFCFC;
}
.lesson-description span {
font-weight: 200;
}
.tabs {
position: relative;
min-height: 380px;
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
display: block;
margin-left: 675px;
font-size: 15px;
font-weight: 100;
background: #FCFCFC;
padding: 20px;
color: #333;
border-bottom: 1px solid #fff;
}
.tab[type=radio] {
display: none;
}
.content {
position: absolute;
top: 0;
left: 0;
background: black;
right: 0;
bottom: 0;
float: left;
width: 675px;
height: 380px;
margin-bottom: 30px
}
[type=radio]:checked ~ label {
background: #1897DC;
color: #FFF;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
Jsfiddle: http://jsfiddle.net/M8XYr/
Does anyone have any ideas on how to accomplish this?
Just change the .tab class:
.tab {
float: left;
width: 100%;
}