i everyone!
I need help, I would like the tabs:
tab1 - tab2 - tab3 remained white after clicking, now in my code in hover it turns white, but then everything vanishes.
How can I do with only css, because js does not support me the system?
Any advice and help is welcome!
Thank you all!!
<style>
body {
font-family:"Open Sans";
background:white;
height:300px;
font-size:14px;
}
.tab section {
display:none;
}
.tab section:target, .tab section:last-of-type {
display:block;
}
.tab section:target~section {
display:none;
}
.L1 {
padding:17px;
border:1px solid #2c3e50;
color:white !important;
padding-left:10px;
padding-right:10px;
margin-left:-1px;
}
.L1:hover {
background-color:white;
color:black !important;
border-bottom:1px solid white;
padding:17px;
padding-left:10px;
padding-right:10px;
}
</style>
<section class="tab" style="border:none;background:#1abc9c;max-width:46.5rem;width:100%;margin:5px auto;height:51px;line-height:51px;">
<a class="L1" href="#tab1">tab1</a>
<a class="L1" href="#tab2" style="margin-left:-5px;">tab2</a>
<a class="L1" href="#tab3" style="margin-left:-5px;">tab3</a>
<section id="tab2" style="margin-top:-60px !important;padding-top:61px;">
<span >hello2</span>
</section>
<section id="tab3" style="margin-top:-60px !important;padding-top:61px;">
<span>hello3</span>
</section>
<section id="tab1" style="margin-top:-60px !important;padding-top:61px;">
<span >hello1</span>
</section>
</section>
input, .content {
display: none;
background: #1f7507;
line-height: 25px;
padding: 5px 25px;
color: #fff;
font: normal 1em/150% Sans-Serif;
min-width: 200px;
}
#one:checked ~ .one,
#two:checked ~ .two,
#three:checked ~ .three {display: block;}
label {
cursor: pointer;
background: #999;
height: 25px;
padding: 5px 10px;
display: inline-block;
text-align: center;
color: #fff;
font: normal 1em/150% Sans-Serif;
margin-right: -3px;
transition: background .25s linear;
}
label:hover, input:checked + label {background: #1f7507;}
h3, p {
text-indent: 25px;
text-align: justify;
}
<input type="radio" name="nav" id="one" checked="checked"/>
<label for="one">tab 1</label>
<input type="radio" name="nav" id="two"/>
<label for="two">tab 2</label>
<input type="radio" name="nav" id="three"/>
<label for="three">tab 3</label>
<article class="content one">
<h3>sample 1</h3>
<p>heyyy</p>
</article>
<article class="content two">
<h3>sample 2</h3>
<p>howdy</p>
</article>
<article class="content three">
<h3>sample 3</h3>
<p>hello</p>
</article>
Related
Hi i have the following code and i am trying to Color the background of the TDs inside this little Tab i created.
<body>
<nav class="nav_tabs">
<ul>
<li>
<input type="radio" name="tabs" class="rd_tabs" id="tab2">
<label for="tab1">Shutdown</label>
<div class="content">
I tried doing like this on the style sheet:
.nav_tabs #tab2 .content td
{
background: lightcyan;
}
I dont really understand what i am doing wrong but it is not working, i tried different things but nothing.
I cant post the content inside the article but it is mostly tables:
<style>
*
{
margin:0;
padding: 0;
}
body
{
font-family: Arial, Helvetica, sans-serif;
}
.nav_tabs
{
width: 600px;
height: 400px;
margin 100px auto;
background-color: #fff;
position: relative;
}
.nav_tabs ul
{
list-style: none;
}
.nav_tabs ul li
{
float: left;
}
.nav_tabs label
{
width: 100px;
padding: 25px;
background-color: #363b48;
display:block;
color: #fff;
cursor: pointer;
text-align: center;
}
.rd_tabs:checked ~ label
{
background-color: #e54e43;
}
.rd_tabs
{
display: none;
}
.content
{
border-top: 5px solid #e54e43;
background-color: #fff;
display: none;
position: absolute;
height: 320px;
width: 600px;
left: 0;
}
.content article
{
padding 10px;
}
.rd_tabs:checked ~ .content
{
display: block;
}
.nav_tabs .content td
{
background: lightcyan;
}
</style>
<body>
<nav class="nav_tabs">
<ul>
<li>
<input type="radio" name="tabs" class="rd_tabs" id="tab1"
checked>
<label for="tab1">tab1</label>
<div class="content">
<article>
</article>
</li>
<li>
<input type="radio" name="tabs" class="rd_tabs" id="tab2">
<label for="tab2">SHUTDOWN (MINIMUM CONFIGURATION)</label>
<div class="content">
<article>
</article>
</div>
</li>
<li>
<input type="radio" name="tabs" class="rd_tabs" id="tab3">
<label for="tab3">Tab3</label>
<div class="content">
<article>
</article>
</div>
</li>
</ul>
</nav>
</body>
try remove #tab2 in your css
.nav_tabs .content td
{
background: lightcyan;
}
i dont see in your html code something like that id='tab2' between your.nav_tabs and .content .
so probably that's why it doesnt work now
update
if you need change the color of tab2 for example
so you have to add id='tab2' to the <li> element
but it shouldn't be duplicate the id in inputs
I found this code on the internet which is fine but I want the section tags first then the inputs, I tried so many times to move the tabs navigation below the content without success.
section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #ddd;
}
input {
display: none;
}
input:checked+label {
color: #ff0000;
}
#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4 {
display: block;
}
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">home</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">about</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">FAQ</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">contact</label>
<section id="content1">
<p>home</p>
</section>
<section id="content2">
<p>about</p>
</section>
<section id="content3">
<p>FAQ</p>
</section>
<section id="content4">
<p>contact</p>
</section>
Any ideas how to move the navigation bar below the content
Thank you
You could try that as below, wrap the section tags by a div and then you could change the positioning of label using position:absolute,
section {
display: none;
padding: 0px 0 0;
border-bottom: 1px solid #ddd;
}
input {
display: none;
}
input:checked+label {
color: #ff0000;
}
#tab1:checked~.wr #content1{
display:block;
}
#tab2:checked~.wr #content2{
display:block;
}
#tab3:checked~.wr #content3{
display:block;
}
#tab4:checked~.wr #content4{
display:block;
}
.wr{
position:relative;
top:0;
display:block;
}
.tb1{
position:absolute;
top:80px;
display:inline-block;
}
.tb2{
position:absolute;
top:80px;
display:inline-block;
left:60px;
}
.tb3{
position:absolute;
top:80px;
display:inline-block;
left:120px;
}
.tb4{
position:absolute;
top:80px;
display:inline-block;
left:180px;
}
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1" class="tb1">home</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2" class="tb2">about</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3" class="tb3">FAQ</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4" class="tb4">contact</label>
<div class="wr">
<section id="content1">
<p>home</p>
</section>
<section id="content2">
<p>about</p>
</section>
<section id="content3">
<p>FAQ</p>
</section>
<section id="content4">
<p>contact</p>
</section>
</div>
Use Navbar technique with <div id="home">.
It will be easy.
Or you can use javascript to make it look more refined.
body {margin:0;}
.navbar {
overflow: hidden;
background-color: #fff;
position: fixed;
bottom: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.main {
padding: 16px;
margin-bottom: 30px;
height: 1500px; /* Used to enable scrolling */
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="navbar">
Home
About
</div>
<div id="home"class="main">
<h1>Home</h1>
</div>
<div id="about"class="main">
<h1>About</h1>
</div>
</body>
</html>
I have changed your code. Please try this code.
a:focus {
outline: none!important;
}
.content-wrap {
background:#eee;
padding:20px;
margin-bottom:10px;
}
.tabs-bottom > .nav-tabs{
border-bottom: 0;
}
.tabs-below > .nav-tabs {
border-bottom: 0;
}
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none;
}
.tab-content > .active,
.pill-content > .active {
display: block;
}
.tabs-bottom > .nav-tabs {
border-top: 1px solid #ddd;
}
.tabs-bottom > .nav-tabs > li {
margin-top: -1px;
margin-bottom: 0;
}
.tabs-bottom > .nav-tabs > li > a {
border-radius: 0 0 4px 4px;
}
.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
border-top-color: #ddd;
border-bottom-color: transparent;
}
.tabs-bottom > .nav-tabs > .active > a,
.tabs-bottom > .nav-tabs > .active > a:hover,
.tabs-bottom > .nav-tabs > .active > a:focus {
border-color: transparent #ddd #ddd #ddd;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12">
<!-- tabs -->
<div class="tabbable tabs-bottom">
<div class="tab-content">
<div class="tab-pane active" id="home">
<div class="content-wrap">
<h2>Home Tab</h2>
<p>test</p>
</div>
</div>
<div class="tab-pane" id="about">
<div class="content-wrap">
<h2>About Tab</h2>
<p>test</p>
</div>
</div>
<div class="tab-pane" id="services">
<div class="content-wrap">
<h2>Services Tab</h2>
<p>test</p>
</div>
</div>
<div class="tab-pane" id="contact">
<div class="content-wrap">
<h2>Contact Tab</h2>
<p>test</p>
</div>
</div>
</div>
<!-- tab content -->
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<!-- /tabs -->
</div>
</div>
</div>
you just need to use CSS display flex for reorder the content :
https://codepen.io/seltix/pen/XaLVaY
<dix id="blockcontainer" >
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">home</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">about</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">FAQ</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">contact</label>
<div class="divider"></div>
<section id="content1">
<p>home</p>
</section>
<section id="content2">
<p>about</p>
</section>
<section id="content3">
<p>FAQ</p>
</section>
<section id="content4">
<p>contact</p>
</section>
</div>
CSS :
section {
display: none;
padding: 20px;
border-bottom: 1px solid #AAA;
background :#EEE;
}
div.divider {
width:100%;
}
input {
display: none;
}
label {
padding: 10px;
}
input:checked + label {
color: #ff0000;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
display: block;
}
#blockcontainer {
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
section {
-ms-flex-order: 1;
order: 1;
}
div.divider {
-ms-flex-order: 6;
order: 6;
}
input, label {
-ms-flex-order: 12;
order: 12;
}
I am trying to get my blue headline to stay on my video when I am resizing it in browsers. Right now it is just goes a certain pixel or percentage from the top of the browser which causes it to be pushed off the video too far. I only want this to be centered in mobile for now so you'll have to resize the browser to be smaller right now.Then later I will work on tablet and desktop with media queries. But for now I'm just trying to get it to stay in one place when in a mobile media query. I hope this isn't too confusing... If anyone has any suggestions that would really help! I will include a JSfiddle since I don't think you can resize the browser in the snippets on here. I will also include a snippet here though. Thank you for your time!
JsFiddle: https://jsfiddle.net/qbau0ze4/
#headline{
text-align: center;
position: absolute;
top: 160px;
left:30%;
color:#00E3FF;
line-height:20px;
font-family: 'Orbitron', sans-serif;
word-spacing: 1px;
font-size:18px;
}
#primary .imgbox2 .change {
width:100%;
margin-left:15px;
padding-top:15px;
}
.move{
width:100%;
margin-left:15px;
padding-top:15px;
}
/*
ul.menu, ul.menu ul.sub-menu{
padding: 0;
}
ul.menu li, ul.menu ul.sub-menu li{
list-style-type:none;
display:block;
}
ul.menu li a, ul.menu li ul.sub-menu li a{
text-decoration: none;
color:#fff;
background:#666;
padding: 10px;
display:block;
margin:0;
}
ul.menu li{
position:relative;
float:left;
}
#hamburger{
width:30px;
height:25px;
}
ul.menu li ul.sub-menu {
opacity: 0;
position: absolute;
top:37px;
left:0;
width: 150px;;
margin: 0 0 0 -20px;
}
ul.menu li:hover ul.sub-menu{
opacity:1;
left:30;
transition: ease-in-out all .4s;
-moz-transition:ease-in-out all .4s;
-webkit-transition:ease-in-out all .4s;
z-index:100;
margin: 0 0 0 0px;
}
*/
/********NAV BAR**************/
ul.menu li ul.sub-menu {
opacity: 0;
position: absolute;
top:30px;
left:0;
width: 200px;
margin: 0 0 0 0px;
float:left;
}
.fa-bars{
float:left;
}
ul.menu li:hover ul.sub-menu{
opacity:1;
left:30;
transition: ease-in-out all .4s;
-moz-transition:ease-in-out all .4s;
-webkit-transition:ease-in-out all .4s;
float:left;
width:100%;
z-index:100;
margin: 0 0 0 0px;
}
nav{
padding:0px;
}
nav ul li {
}
nav ul li a {
display:block;
text-align: center;
padding: 10px;
background-color:#670809;
color:white;
text-decoration: none;
border: none;
margin: 0px;
font-size: 16px;
}
nav ul li a:hover {
background-color: #5E5757;
color: white ;
}
/*****FIGURE STAY SAME/ADJUSTABLE/VIDEO/logo******/
figure.stayssame {
width: 100%;
}
figure.adjustable {
width: 29%;
}
figure video {
width: 100%;
height: 80%;
}
.video-txt{
position: absolute;
top: 30%;
z-index: 9;
color: #FFF;
width: 100%;
text-align: center;
font-size: 40px;
}
object {
position: absolute;
left: 30%;
top: 80px;
z-index: 10;
width: 40%;
}
/*ALL CODE FROM DESKTOP*/
p{
padding: 2%;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
font-family: 'Inconsolata', monospace;
font-weight: 300;
font-size: 20px;
line-height: 1.4em;
}
.squish{
margin-right:125px;
}
.text{
padding:5px;
}
.button{
margin-bottom: 50px;
margin-right:auto;
margin-left:auto;
margin-top:auto;
}
header {
position:fixed;
z-index: 1000;
width: 100%;
top: 0px;
background-color:#670809;
height:50px;
letter-spacing:1px;
line-height: 55px;
padding:9px;
word-spacing:5px;
}
header, h1, h2{
font-family: 'Orbitron', sans-serif;
}
.space{
padding: 5px;
color:white;
}
form{
padding-left: 20%;
}
/* header tags */
h1 {
text-align: center;
color:#013397;
font-size: 40px;
padding-top:50px;
}
h2{
text-align: center;
color:#00E3FF;
font-size: 30px;
margin: 5px;
padding:20px;
}
p{
text-align: left;
}
.clearfix:after {
content:" ";
display:block;
clear:both;
}
#box{
background-color:#94DBEC ;
}
hr.style2 {
border-top: 3px double #00E3FF;
width: 300px;
}
hr.style2 {
width: 100%;
}
section{
width: 85%;
margin-left: auto;
margin-right:auto;
margin-top: 35px;
}
.adjustable{
width: 100%;
max-width:100%;
height:auto;
margin: 1 em;
}
#inner{
height: 100px;
padding:15px 0;
}
#container{
height:100%;
}
.imgbox5{
padding-right:30px;
padding-left:0px;
}
.imgbox4{
padding-right:30px;
padding-left:0px;
}
.imgbox3{
padding-right:30px;
padding-left:0px;
}
.imgbox2{
padding-right:30px;
}
.imgbox{
padding-right:30px;
padding-left:0px;
}
#firstpara{
background-color:#5E5757;
color: white;
}
#secpara{
background-color:#5E5757;
color: white;
}
#thirdpara{
background-color:#5E5757;
color: white;
}
#fourthpara{
background-color:#5E5757;
color: white;
}
#primary{
background-color:#5E5757;
color: white;
}
#enroll{
margin:0;
padding:0;
}
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
padding-bottom: 2%;
background-color:#670809;
font-family: 'Inconsolata', monospace;
/* text */
padding-left: 10px;
padding-top: 15px;
color: #ffffff;
font-size: 15px;
text-align:center;
}
a { color: white; }
a, a:active { color: white;
text-decoration:none;
}
.side{
left-margin:10px;
right-margin:10px;
}
#value{
background-color:#5E5757;
color: white;
width:90%;
margin-left: auto;
margin-right:auto;
margin-top:2%;
}
#title{
color:white;
text-align:center;
padding-top:10px;
}
img{
width: 100%;
}
.msum{
position: absolute;
bottom: 5%;
width: 100%;
display: block;
width: 200px;
height: 50px;
left: 0;
right: 0;
margin: 0 auto;
}
span{
font-size: 14px;
}
.smaller{
font-size: 16px;
}
/*NAV BAR
#import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
#import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300");
html{font-size: 62.5%; font-family: 'Open Sans', sans-serif;}
body{font-size: 1.6rem; min-height: 100vh;}
h1{font-size: 3rem; margin-bottom: 1rem;}
h2{font-size: 1.6rem;}
header{position: relative;}
main{padding: 2rem;}
/***************** NAVIGATION *************
nav ul{
display: flex;
flex-wrap: wrap;
margin: 0 auto;
background: #670809;
}
nav ul,
nav li{
flex: 1;
}
nav li:last-child{border-bottom: none;}
nav a{
text-decoration: none;
color: inherit;
display: block;
font-size: 1.8rem;
}
nav a:hover{
background: /*#adacac#555;
color: #fff;
}
nav li{
position: relative;
line-height: 50px;
color: #fff;
text-align: center;
}
nav input,
nav label{
display: none;
width: 36px;
height: 36px;
background: #555;
color: #fff;
text-align: center;
line-height: 36px;
font-size: 1.6rem;
border-radius: 4px;
}
nav label{position: absolute; top: 8px; right: 8px; transition: .4s;}
nav label:hover{cursor:pointer;}
nav label:before{
font-family: FontAwesome;
font-size: 24px;
content: "\f0c9";
text-align: center;
}
/*************** MEDIA QUERIES ***************
nav ul{
transform: translateY(0);
box-shadow: 0 0 5px rgba(0,0,0, .7);
transition: all .5s;
}
nav li{
flex: none;
width: 100%;
border-bottom: solid 1px #777;
}
nav input[type="checkbox"]:checked + ul{
transform: translateY(-100%);
width: 100%;
background: #999;
transition: all .5s;
}
nav label{display: block;}
nav input[type="checkbox"]:checked + ul li:nth-child(1){
background: #777;
color: #fff;
}
#css-toggle-menu{
float:right;
margin: 10px;
}
/*********FORMS CSS*************/
form.contact label{
display: block;
}
span{
display:block;
border: none;
color:#4B4B4B;
}
.clearfix:after {
content:" ";
display:block;
clear:both;
}
section{
width: 95%;
}
fieldset{
width: 45%;
float:left;
border:none;
}
input.checks{
width: auto;
}
.left{
width: 45%;
float:left;
}
.right{
width:45%;
float: right;
}
input{
border: none;
border-bottom: 2px solid #959595;
width: 300px;
margin:3px;
color:#6C6A6A;
padding-top:10px;
padding-bottom: 10px;
}
.bottom{
border: none;
margin:3px;
color:#6C6A6A;
padding-top:10px;
padding-bottom: 10px;
width: 300px;
}
.fa{
margin-right: 10px;
}
legend{
color:#2C2A2A;
}
.button {
display: inline-block;
padding: 15px 25px;
font-size: 14px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color:#595959;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
width: 150px;
}
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
<body>
<header>
<nav>
<ul class="menu">
<li class="active">
<a id="hamburger" href="#" ><i class="fa fa-bars fa-2x " aria-hidden="true"></i>
</a>
<ul class="sub-menu">
<li class="sub-menu">
<a class="space" href="#" >Home</a>
</li>
<li class="sub-menu">
<a class="space" href="#" >Programs</a>
</li>
<li class="sub-menu">
<a class="space" href="#" >Assignments </a>
</li>
<li class="sub-menu">
<a class="space" href="#" > Enroll</a>
</li>
<li class="sub-menu">
<a class="space" href="#" >Contact</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
<!--
<ul class="main">
<li><a class="space" href="">Home</a></li>
<li><a class="space" href="">Programs</a></li>
<li><a class="space" href="">Assignments</a></li>
<li><a class="space" href="">Enroll</a></li>
<li><a class="space" href="">Contact</a></li>
</ul> -->
<!--
<header>
<nav>
<input type="checkbox" id="css-toggle-menu" name="css-toggle-menu">
<ul class="main">
<a class="space" href="headervideo2.html">Home</a>
<a class="space" href="about.css">Programs</a>
<a class="space" href="contact.css">Assignments</a>
<a class="space" href="msum.css"> Enroll</a>
<a class="space" href="msum.css"> Contact</a>
</ul>
<label for="css-toggle-menu" id="css-toggle-menu"></label>
</nav>
-->
<div id="content">
<!--msum logo-->
<figure class="stayssame">
<video controls loop poster="placeholder.png" autoplay>
<source src="video.mp4" type="video/mp4">
<!-- <source src="movie.ogg" type="video/ogg">-->
Your browser does not support the video tag.
</video>
<h1 id="headline">Intermediate Web Design:
<br>
Fun, Insightful, Experience
</h1>
<object type="image/svg+xml" data="comweb2.svg" ></object>
</figure>
<div id="value" >
<div id="title">We Want You</div>
<p >
Intermediate Web Design is a great class to take because it is a fun learning experience that is taught through not only traditional lecture style classes, but group projects and interactive teaching. It is the class to take to learn professional standards and programs that are used in current digital offices. </p>
</div>
<div class="video-txt" ></div>
<section >
<section>
<div id="box">
<h1> GCOM 366</h1>
<section class="clearfix" id="primary">
<div class="imgbox2">
<figure class="change">
<img id="pic1" class="adjustable" src="RDesign3.jpg" alt="example web page" >
</figure>
</div>
<h2> Benefits</h2>
<p class="side">
1. Learn industry standard programs
<br>
2. Build Portfolio
<br>
3. Increase collaboration skills
<br>
4. Become more creative
<br>
5. Understand good layout
<br>
6. Feel confident in HTML/CSS
</p>
</section>
<section class="clearfix" id="firstpara">
<div class="imgbox">
<img id="pic2" class="adjustable move" src="techpic4.jpg" alt="example web page" width="300" height="300">
</div>
<h2>Overview</h2>
<p class="side">
Intermediate Web Design is a class that enhances the skills learned in intro to web design. Subjects will include web hosting, text editors such as the Atom, HTML, CSS, jQuery, Responsive Design, and UI/UX, and Forms. You will learn through lectures, demonstrations, reading assignments, and hands-on experiences. We will be working with a variety of materials, typically in a teaching presentation and assignments, with listed resources.
</p>
</section>
<section class="clearfix" id="secpara">
<div class="imgbox4">
<img id="pic3" class="adjustable float move" src="techpic1.jpg" alt="example web page" width="300" height="300" >
</div>
<h2>Student Review 1</h2><p class="side"> “Many different days before sections in the course are inspirational days. These talk about the industry standards and help to inspire students to "Create"
-Tyrion Lannister
</p>
</section>
<section class="clearfix" id="thirdpara">
<div class="imgbox3">
<img id="pic4" class="adjustable move" src="techpic2.jpg" alt="example web page" width="300" height="300" >
</div>
<h2>Student Review 2</h2>
<p class="side">
"I've struggled with coding for ages but was able to finally get a grasp on it from this class"
-Tweety Bird
</p>
</section>
<section class="clearfix" id="fourthpara">
<div class="imgbox5">
<img id="pic5" class="adjustable float move" src="techpic55" alt="example web page" width="300" height="300" >
</div>
<h2>Student Review 3</h2>
<p class="side">
“This class is up to date on the latest techniques, the instructor is willing to go the extra mile, and the class is well structured”
-Pappa Smurf
</p>
</section>
</div>
</section>
</div><!-- end of the row-->
<div class="center clearfix">
<h1>Contact</h1>
<form action="FormToEmail.php" method="POST" enctype="multipart/form-data" autocomplete="on" class="contact clearfix ">
<section class="clearfix">
<fieldset><legend>
<i class="fa fa-user" aria-hidden="true"></i>Personal Information
<hr class="style2">
</legend>
<label><span></span> <input name="first_name" type="text" value="" placeholder="First Name" autofocus required/>
</label>
<label><span>
</span><input name="last_name" type="text" value="" placeholder="Last Name" autofocus required/>
</label>
<label><span> </span><input name="date_of_birth" type="date" value="" placeholder="Date of Birth" autofocus required/>
</label>
<label><span>
</span><input type="number" name="quantity" min="1" max="6" autofocus placeholder="number of years until next degree"></label>
<label ><span></span> <input name="level_of_education" type="hidden" value="" placeholder="level of education" autofocus required/></label>
<select class="bottom" name="education_level">
<option value="High School">High School</option>
<option value="Undergraduate">Undergradute</option>
<option value="Graduate">Graduate</option>
</select>
</fieldset>
<fieldset><legend><i class="fa fa-envelope-o" aria-hidden="true"></i>
Contact Information <hr class="style2"></legend>
<label><span>
</span><input class="ghost-input" name="email" value="" type="email" placeholder="youremail#email.com" autocomplete="off" /></label>
<label><span></span><input name="phonenumber" value="" type="tel" placeholder="763-858-9564" /></label>
<label><span></span><input name="website" value="" type="url" placeholder="https://yourwebsite.com"/></label>
</fieldset>
</section>
<section class="clearfix column" >
<fieldset><legend><i class="fa fa-laptop" aria-hidden="true"></i>
What are your Interests <hr class="style2"></legend>
<section class="clearfix column left" >
<label class="bottom span" ><span ><input name="webdesign" value="web_design" type="checkbox" class="checks"/>Web Design</span>
</label>
<label class="bottom"><span><input name="webdevelopment" value="web_development" type="checkbox" class="checks" />Web Development</span>
</label>
<label class="bottom"><span><input name="computerscience" value="computer_science" type="checkbox"class="checks" />Computer Science</span></label>
</section>
<section class="clearfix column left" >
<label class="bottom"><span><input name="graphicdesign" value="graphic_design" type="checkbox" class="checks"/>Graphic Design</span>
</label>
<label class="bottom"><span><input name="userexperience" value="user_experience" type="checkbox" class="checks" />User Experience</span></label>
<label class="bottom"><span><input class="checks" name="appdevelopment" value="app_development" type="checkbox" />App Development</span>
</label>
</section>
</fieldset>
<fieldset><legend><i class="fa fa-volume-control-phone" aria-hidden="true">
</i>
Continuation <hr class="style2 toosmall"></legend>
<section class="clearfix column left" >
<legend class="smaller">You can contact me by:</legend>
<br>
<div class="squish">
<label class="bottom"><span><input class="checks" name="contact_me" type="radio" value="phone" checked/>Contact me by phone</span></label>
<label class="bottom"><span><input class="checks" name="contact_me" type="radio" value="email" checked/>Contact me by email</span></label>
<label class="bottom"><span><input class="checks" name="contact_me" type="radio" value="text"/>Contact me by text</span></label>
<br>
</div>
</section>
<section class="clearfix column left" >
<legend class="smaller" >I'm interested in:</legend>
<br>
<label class="bottom"><span><input class="checks" name="interest" type="radio" value="text"/>Undergraduate</span></label>
<label class="bottom"><span><input class="checks" name="interest" type="radio" value="text"/>Graduate</span></label>
<label class="bottom"><span><input class="checks" name="interest" type="radio" value="text"/>Online</span></label>
</section>
</fieldset>
</section>
<input class="button" name="submit_to_programmer" type="submit" value="Submit"/>
<input type="hidden" value="Message from Car Website" name="subject">
<input name="redirect" type="hidden" value="thanks.html">
</form>
<br>
<script src="https://use.fontawesome.com/8f5d316ef9.js"></script>
</div>
<footer>
<a id="enroll" href="https://www.mnstate.edu/eservices/"> Enroll Now</a>
<div class="text">
MaKayla McLain-Graning © 2016</div>
<br>
<img class="msum" src="msum copy.png" alt="msum logo" />
</footer>
</body>
Add position: relative to the container, in this case the element with class stayssame. Then position your headline with position: absolute.
.stayssame {
position: relative;
}
#headline{
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
margin: auto;
}
jsfiddle: https://jsfiddle.net/Le0rrzf5/1/
I am new to CSS.
I want to give CSS to checkbox just shown in the image.
i have tried but checkbox is appearing on the screen and when I select one of the category then it background would be yellow.
Thank You.
.radio_toggle {
float:left;
}
.radio_toggle label {
float:left;
width:100px;
overflow:auto;
}
.radio_toggle label span {
text-align:center;
font-size: 15px;
padding:5px 0px;
display:block;
}
.radio_toggle label input {
position:absolute;
}
.radio_toggle .venue {
background-color:#edf1f2;
color: #58666e;
min-height: 100% !important;
border: thin #ced9db solid;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
<div class="categories">
<div class="radio_toggle">
<label class="venue" style="">
<input type="checkbox" name="toggle">
<span>Category</span>
</label>
</div>
</div>
<div class="categories">
<div class="radio_toggle">
<label class="venue" style="">
<input type="checkbox" name="toggle">
<span>Category</span>
</label>
</div>
</div>
<div class="categories">
<div class="radio_toggle">
<label class="venue" style="">
<input type="checkbox" name="toggle">
<span>Category</span>
</label>
</div>
</div>
To hide the input, give it display: none;, updated CSS rule
.radio_toggle label input {
display: none;
}
To give the button a color use the :checked selector, added CSS rule
.radio_toggle label input:checked + span {
color: white;
background: gold;
}
Sample
.radio_toggle {
float:left;
}
.radio_toggle label {
float:left;
width:100px;
overflow:auto;
}
.radio_toggle label span {
text-align:center;
font-size: 15px;
padding:5px 0px;
display:block;
}
.radio_toggle .venue {
background-color:#edf1f2;
color: #58666e;
min-height: 100% !important;
border: thin #ced9db solid;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.radio_toggle label input {
display: none;
}
.radio_toggle label input:checked + span {
color: white;
background: gold;
}
<div class="categories">
<div class="radio_toggle">
<label class="venue" style="">
<input type="checkbox" name="toggle">
<span>Category</span>
</label>
</div>
</div>
<div class="categories">
<div class="radio_toggle">
<label class="venue" style="">
<input type="checkbox" name="toggle">
<span>Category</span>
</label>
</div>
</div>
<div class="categories">
<div class="radio_toggle">
<label class="venue" style="">
<input type="checkbox" name="toggle">
<span>Category</span>
</label>
</div>
</div>
As pointed by #UnknownDeveloper, you have to use javascript for that.
Make a new class .venue_selected and give your desired colors. Then use click event for all elements to add class to label and check respective checkbox.
<style type="text/css">
.radio_toggle {
float:left;
}
.radio_toggle label {
float:left;
width:100px;
overflow:auto;
}
.radio_toggle label span {
text-align:center;
font-size: 15px;
padding:5px 0px;
display:block;
}
.radio_toggle label input {
position:absolute;
}
.radio_toggle .venue {
background-color:#edf1f2;
color: #58666e;
/*min-height: 100% !important;*/
border: thin #ced9db solid;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
cursor: pointer;
}
.radio_toggle .venue_selected{
background: #f9d342 !important;
color: #ffffff !important;
}
.categories input[type="checkbox"] {
display: none;
}
</style>
<div class="categories">
<div class="radio_toggle">
<label class="venue" style=""><input type="checkbox" name="toggle"><span>Category</span></label>
</div>
</div>
<div class="categories">
<div class="radio_toggle">
<label class="venue" style=""><input type="checkbox" name="toggle"><span>Category</span></label>
</div>
</div>
<div class="categories">
<div class="radio_toggle">
<label class="venue" style=""><input type="checkbox" name="toggle"><span>Category</span></label>
</div>
</div>
<script type="text/javascript">
var elms = document.querySelectorAll("label.venue");
elms.forEach(function(el,i) {
el.onclick = function() {
console.log(el);
el.classList.toggle("venue_selected");
el.querySelector("input[type='checkbox']").click();
}
});
</script>
You can accomplish this using 2 methods.
Either using JavaScript or CSS.
For CSS it's very simple. You have to use the :checked attribute.
.radio_toggle[type=checkbox] + label {
// Code on how to look before checked
}
input[type=checkbox]:checked + label {
// Code on how to look after checked
}
For JS you first have to get the radio_toggle element using and then listen for if it's checked which for your case will look something like this
var element = document.getElementsByClassName("radio_toggle").checked = true;
function check(element) {
element.checked = true;
element.style.color = "Color you desire"
}
Good day all. I'm having an issue getting content to render correctly in one panel of my tabbed content area. It looks fine in my fiddle: http://jsfiddle.net/Del087/9yptj2nj/ however, it is not rendering correctly on my site. If you look here http://www.realtimehockey.net/canlan.html and check out the second tab "Youth Classic" you should see what I mean. Ideally I am trying to get the top two elements to align horizontally with the 3rd element below the two. I'm sure this is a fairly easy fix but, I just can't seem to figure it out. Any help would be greatly appreciated. Thanks.
The CSS
<style> td, tr {
border-style: none
}
A {
text-decoration:none
}
a:link {
color: #0000ff;
}
a:visited {
color: #0000ff:
}
a:hover {
color: #ff6600;
}
</style> <style> .tabs input[type=radio] {
display:none;
text-decoration: none;
}
.tabs {
width: 730px;
height: 1100px;
float: none;
list-style: none;
position: relative;
padding: 0px;
margin-right: 5px;
margin: 5px;
margin-top: 2px;
}
.tabs li {
float: left;
}
.tabs label {
display: block;
padding: 10px 20px;
color: #FFFFFF;
font-family: patua one;
font-style: italic;
font-size: 14px;
background: linear-gradient(#151515, #080808);
cursor: pointer;
position: relative;
}
.tabs label:hover {
background: #ff6600;
}
.tab-content {
z-index: 2;
display: none;
left: 0;
font-size: 20px;
line-height: 140%;
padding: 5px;
width: 725px;
margin-right: 5px;
position: absolute;
box-sizing: border-box;
border:3px solid #454545;
border-top: 7px solid #454545;
background-color:#080808;
}
[id^=tab]:checked + label {
background: #ff6600;
color: white;
top: 0;
}
[id^=tab]:checked ~[id^=tab-content] {
display: block;
}
</style> <style> #table-wrapper {
position:relative;
}
#table-scroll {
height:965px;
width: auto;
overflow:auto;
margin-top:2px;
}
#table-wrapper table {
width:auto;
}
#table-wrapper table * {
}
#table-wrapper table thead th .text {
position:absolute;
top:-20px;
z-index:2;
height:20px;
width:auto;
}
</style> <style> .table2 {
margin-top: 10px;
}
</style>
The HTML
<ul class="tabs">
<li>
<input type="radio" checked name="tabs" id="tab1">
<label for="tab1">Tournaments</label>
<div id="tab-content1" class="tab-content">
<div id="OrgsAtoD56_5439" align=center x:publishsource="Excel">
<div id="table-wrapper">
<div id="table-scroll">
<iframe frameborder="0" height="630" scrolling="no" src="https://onedrive.live.com/embed?cid=704B9036DA9EF5A7&resid=704B9036DA9EF5A7%214256&authkey=ADHo6NDfwBXvj5k&em=2&wdAllowInteractivity=False&Item='Sheet1'!A1%3AF36&wdHideGridlines=True" width="695"></iframe>
</div>
</div>
</div>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab2">
<label for="tab2">Youth Classic</label>
<div id="tab-content2" class="tab-content">
<div id="table-wrapper">
<iframe src="https://scorestream.com/widgets/scoreboards/vert?userWidgetId=1317" style="padding:7px;border:0px;width:350px;height:600px;max-height:600px;" title="Realtime sports scoreboard widget" scrolling="no" frameBorder="0"></iframe>
<table border="3" bordercolor="080808" padding="1px" align="right" class="table2">
<tr>
<td><img src="http://i1314.photobucket.com/albums/t563/RTH13/AdsWebsite/Canlan600200_zpszbaycily.jpg" border="0" alt=" photo Canlan600200_zpszbaycily.jpg"/>
</td>
</tr>
</table>
<br>
<iframe width="664" height="300" style="padding-left:10px;" frameborder="0" scrolling="no" src="https://onedrive.live.com/embed?cid=704B9036DA9EF5A7&resid=704B9036DA9EF5A7%214321&authkey=ADVLgs4SS_FHqAY&em=2&wdAllowInteractivity=False&Item='Sheet1'!A1%3AG57&wdHideGridlines=True"></iframe>
</div>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab3">
<label for="tab3">Niagara Falls Youth Challenge</label>
<div id="tab-content3" class="tab-content">
<div id="table-wrapper">
<div id="table-scroll"> <img src="http://i1314.photobucket.com/albums/t563/RTH13/Website%20Art/RTHConstruction_zpsbyvi5c0d.png" width="720px" border="0" alt=" photo RTHConstruction_zpsbyvi5c0d.png"/>
</div>
</div>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab4">
<label for="tab4">King/Rings I</label>
<div id="tab-content4" class="tab-content">
<div id="table-wrapper">
<div id="table-scroll"> <img src="http://i1314.photobucket.com/albums/t563/RTH13/Website%20Art/RTHConstruction_zpsbyvi5c0d.png" width="720px" border="0" alt=" photo RTHConstruction_zpsbyvi5c0d.png"/>
</div>
</div>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab5">
<label for="tab5">King/Rings II</label>
<div id="tab-content5" class="tab-content">
<div id="table-wrapper">
<div id="table-scroll"> <img src="http://i1314.photobucket.com/albums/t563/RTH13/Website%20Art/RTHConstruction_zpsbyvi5c0d.png" width="720px" border="0" alt=" photo RTHConstruction_zpsbyvi5c0d.png"/>
</div>
</div>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab6">
<label for="tab6">CANADA O to Y</label>
<div id="tab-content6" class="tab-content">
<div id="table-wrapper">
<div id="table-scroll"> <img src="http://i1314.photobucket.com/albums/t563/RTH13/Website%20Art/RTHConstruction_zpsbyvi5c0d.png" width="720px" border="0" alt=" photo RTHConstruction_zpsbyvi5c0d.png"/>
</div>
</div>
</div>
</li>
Your table on realtimehockey on tab2 is embedded in extra
<div style="overflow:auto">
<table>....</table>
</div>
element (right after first iframe) in table-wrapper. Browser inserts line break before and after div element by the default. Remove this extra div element and it'll work like on jsfiddle. You can apply styl="display: inline;" to this div and it'll also work.