Basically I have 2 main containers on the site a main section and right side bar for smaller widgets. My goal is for the backgrounds of those widgets to move infinitely to their respected sides without moving the actual contents within the widgets as well.
This picture shows what should happen instead of what the code shows to happen.
#font-face { font-family: UbuntuG; src: url('ubuntu-fonts/Ubuntu-L.ttf'); }
*{ box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box; margin: 0; padding: 0;}
body { background-color: #fffff; }
h1 {
color: #1d1d1d; font-family: UbuntuG; font-size: 30;
}
h2 {
color: #1d1d1d; font-family: UbuntuG; font-size: 18;
}
p {
color: white; font-family: Arial; font-size: 16;
}
td {
text-align: center;
padding: 0;
height: 48px;
min-width:48px;
}
a {
display: block;
text-decoration: none;
color: #1d1d1d;
font-family: UbuntuG;
font-size: 16;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
li {
float: left;
}
li a {
display: block;
color: #1d1d1d;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #33d6ff; color: white;
}
.active {
background-color: #00BFFF; color: white;
}
.selector {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #1d1d1d;
}
/*Top full width container*/
.FullWidthContainer{ width:100%}
/*Content Container With max-width:1200px for example*/
.MainContainer{max-width:1200px; width:100%; margin: 0px auto; }
/* content containre divided in left-75% and right-25%}*/
.left{ width:70%; padding:2%; float:left;}
.spacer{ width:2%; padding:2%; float:center}
.right{ width:28%; padding:2%; float:right}
.right img{ width:100%}
<html>
<head>
<title>Radio</title>
<meta content="??">
<link rel="stylesheet" type="text/css" href="theme.css">
<style>
table, th, td { border: 5px solid white; border-spacing: 0; color: #1d1d1d; font-family: Arial; font-size: 16; }
h1 { color: white; font-family: UbuntuG; font-size: 30; }
</style>
</head>
<body>
<div class="FullWidthContainer" style=""><ul>
<li><a class="active" href="#home">Home</a></li>
<li>Who are we?</li>
<li>Contact</li>
</ul></div>
<!-- Start cssSlider.com -->
<link rel="stylesheet" href="cssslider_files/csss_engine1/style.css">
<!--[if IE]><link rel="stylesheet" href="cssslider_files/csss_engine1/ie.css"><![endif]-->
<!--[if lte IE 9]><script type="text/javascript" src="cssslider_files/csss_engine1/ie.js"></script><![endif]-->
<div class="csslider1 autoplay ">
<input name="cs_anchor1" id="cs_slide1_0" type="radio" class="cs_anchor slide">
<input name="cs_anchor1" id="cs_slide1_1" type="radio" class="cs_anchor slide">
<input name="cs_anchor1" id="cs_slide1_2" type="radio" class="cs_anchor slide">
<input name="cs_anchor1" id="cs_play1" type="radio" class="cs_anchor" checked="">
<input name="cs_anchor1" id="cs_pause1_0" type="radio" class="cs_anchor pause">
<input name="cs_anchor1" id="cs_pause1_1" type="radio" class="cs_anchor pause">
<input name="cs_anchor1" id="cs_pause1_2" type="radio" class="cs_anchor pause">
<ul>
<li class="cs_skeleton"><img src="cssslider_files/csss_images1/download.jpg" style="width: 100%;"></li>
<li class="num0 img slide"> <img src="cssslider_files/csss_images1/download.jpg" alt="" title=""></li>
<li class="num1 img slide"> <img src="cssslider_files/csss_images1/download_1.jpg" alt="" title=""></li>
<li class="num2 img slide"> <img src="cssslider_files/csss_images1/download_2.jpg" alt="" title=""></li>
<!-- </ul><div class="cs_engine">http://cssslider.com by cssSlider.com v2.1</div> -->
<div class="cs_description">
<label class="num0"></label>
<label class="num1"></label>
<label class="num2"></label>
</div>
<div class="cs_play_pause">
<label class="cs_play" for="cs_play1"><span><i></i><b></b></span></label>
<label class="cs_pause num0" for="cs_pause1_0"><span><i></i><b></b></span></label>
<label class="cs_pause num1" for="cs_pause1_1"><span><i></i><b></b></span></label>
<label class="cs_pause num2" for="cs_pause1_2"><span><i></i><b></b></span></label>
</div>
<div class="cs_arrowprev">
<label class="num0" for="cs_slide1_0"><span><i></i><b></b></span></label>
<label class="num1" for="cs_slide1_1"><span><i></i><b></b></span></label>
<label class="num2" for="cs_slide1_2"><span><i></i><b></b></span></label>
</div>
<div class="cs_arrownext">
<label class="num0" for="cs_slide1_0"><span><i></i><b></b></span></label>
<label class="num1" for="cs_slide1_1"><span><i></i><b></b></span></label>
<label class="num2" for="cs_slide1_2"><span><i></i><b></b></span></label>
</div>
<div class="cs_bullets">
<label class="num0" for="cs_slide1_0"> <span class="cs_point"></span>
<span class="cs_thumb"><img src="cssslider_files/csss_tooltips1/download.jpg" alt="" title=""></span></label>
<label class="num1" for="cs_slide1_1"> <span class="cs_point"></span>
<span class="cs_thumb"><img src="cssslider_files/csss_tooltips1/download_1.jpg" alt="" title=""></span></label>
<label class="num2" for="cs_slide1_2"> <span class="cs_point"></span>
<span class="cs_thumb"><img src="cssslider_files/csss_tooltips1/download_2.jpg" alt="" title=""></span></label>
</div>
</div>
<!-- End cssSlider.com -->
<div class="FullWidthContainer">
<div class="MainContainer">
<span style="background-color: #161616;" class="left"><center>
<iframe height="400px" width="550px" scrolling="yes" frameborder="0" src=https://hellodj.airtime.pro/embed/weekly-program></iframe>
</center></span>
<div style="background-color: #161616;" class="right">
<iframe id="embed_player" frameborder="0" width="280" height="216" src="https://hellodj.airtime.pro/embed/player?stream=auto"></iframe>
</div>
</div>
</div>
</body>
</html>
Related
I have created following html form.
#import url('https://fonts.googleapis.com/css?family=Roboto');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
font-family: 'Roboto', sans-serif;
}
body{
background: url('bg.jpg') no-repeat top center;
background-size: cover;
height: 100vh;
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 550px;
/* #background: rgba(0,0,0,0.8);*/
background:rgb(233, 227, 227);
padding: 30px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.wrapper .title h1{
color: #c5ecfd;
text-align: center;
margin-bottom: 25px;
}
.contact-form{
display: flex;
}
.input-fields{
display: flex;
flex-direction: column;
margin-right: 4%;
}
.input-fields,
.msg{
width: 48%;
}
.input-fields .input,
.msg textarea{
margin: 10px 0;
border: 0px;
/*#border: 2px solid #c5ecfd;*/
border: 1px solid gray;
padding: 10px;
color: black;
width: 100%;
}
.msg textarea{
height: 212px;
}
::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #c5ecfd;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #c5ecfd;
}
:-ms-input-placeholder {
/* IE 10+ */
color: #c5ecfd;
}
.btn {
background: #39b7dd;
text-align: center;
padding: 15px;
border-radius: 5px;
color: #fff;
cursor: pointer;
text-transform: uppercase;
width: 100%;
}
input[type=submit] {padding:15px; background:#ccc; border:0 none;
display: block;
cursor:pointer;
background: #39b7dd;
text-align: center;
border-radius: 5px;
color: #fff;
text-transform: uppercase; }
input[type=file] {
padding-top:15px;
padding-bottom:15px;
/*#display: block;*/
color: black;
width: 100%;
}
input[type=radio] {
padding-top:15px;
padding-bottom:15px;
/*#display: block;*/
float:left;
position:inline;
color: black;
padding-right:15px;
}
.radioOpContainer
{
/*position:inline;*/
padding-top:15px;
padding-bottom:15px;
}
.radioOpContainer input{
/*#padding-right:15px;*/
margin-right:20px;
}
#media screen and (max-width: 600px){
.contact-form{
flex-direction: column;
}
.msg textarea{
height: 80px;
}
.input-fields,
.msg{
width: 100%;
}
}
/*
#fileuploaddiv
{
padding-top:5px;
}
*/
.label
{
padding-top:20px;
font-size: 15px;
}
.error
{
/*font-family: 'Open Sans Regular';*/
font-family: "Helvetica Neue",Roboto,Arial,sans-serif;
/*font-size: 1em;*/
font-size: 14px;
line-height: 1em;
color: #c0392b;
}
/* ---------------------- */
.table_row
{
padding-top:10px;
}
.cell_wrapper
{
background-color: white;
}
.cell
{
display:inline-block;
/*float: left;
width: 50%; */
/*outline: 1px dashed black; */
/*margin-bottom: 20px;*/
word-break:break-all;
font-family: Monospace;
width: 49%;
}
.resultcell
{
display:inline-block;
/*float: left;
width: 50%; */
/*outline: 1px dashed black; */
/*margin-bottom: 20px;*/
word-break:break-all;
font-family: Monospace;
width: 49%;
}
#media only screen and (max-width: 600px) {
.cell, .resultcell
{
background-color: lightblue;
width: 100%;
}
}
.red{
color: red;
}
.magenta{
color: magenta;
}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Responsive Contact us form Using HTML and CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="title">
<h1>contact us form</h1>
</div>
<form th:action="#{/}" th:object="${messageForm}" method="post" enctype="multipart/form-data" id="MqMessageSenderForm">
<div class="contact-form">
<div class="input-fields">
<div class="label"><p>Queue manager Name: </p></div>
<select id="recievedQMname" class="input" th:field="*{recievedQMname}"><option selected="selected" value=""/></select>
<div class="error" th:if="${#fields.hasErrors('recievedQMname')}" th:errors="*{recievedQMname}"></div>
<div class="label"><p>Destination queue Name</p></div>
<input type="text" class="input" th:field="*{recievedQname}" id="recievedQname">
<div class="error" th:if="${#fields.hasErrors('recievedQname')}" th:errors="*{recievedQname}"></div>
<div class="label"><p> Select an input method </p></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="fileradio" checked="checked" > <label for="fileradio">File</label></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="messagetextradio" > <label for="messagetextradio">Message text</label></div>
</div>
<div class="msg">
<div class="label">Upload files </div>
<input type="file" th:field="*{files}" multiple accept=".txt,.xml" id="files" >
<div class="error" th:if="${fileUploadValidationResult != null}" th:text="'' + ${fileUploadValidationResult} + ''"></div>
<textarea class="input" th:field="*{msgText}" id="msgText" disabled="disabled" ></textarea>
<div class="error" th:if="${textMsgValidationResult != null}" th:text="'' + ${textMsgValidationResult} + ''"></div>
<input class="btn" type="submit">
</div>
</div>
</form>
<div class="table" th:if="${result != null}">
<div class="table_row" th:each="mapEntry : ${result}">
<div class="cell_wrapper">
<div class="cell" th:text="${mapEntry.key}" >key</div> <div class="resultcell" th:text="${mapEntry.value}">value</div>
</div>
</div>
</div>
<div class="table" th:if="${UImessageSentresult != null}">
<div class="table_row">
<div class="cell_wrapper">
<div class="resultcell" style="width: 100%;" th:text="${UImessageSentresult}" >UImessageSentresult</div>
</div>
</div>
</div>
</div>
</body>
</html>
when messages sent status results are being added to the bottom of the page, portion from the top is disappearing from the browser( not even able to scroll to the top -I have attached an image as well) I have added the code into jsfiddle https://jsfiddle.net/lmatrix47/nux3h1cd/1/
I'm not a UI expert, Can someone point out the where the problem is
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Responsive Contact us form Using HTML and CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="title">
<h1>contact us form</h1>
</div>
<form th:action="#{/}" th:object="${messageForm}" method="post" enctype="multipart/form-data" id="MqMessageSenderForm">
<div class="contact-form">
<div class="input-fields">
<div class="label"><p>Queue manager Name: </p></div>
<select id="recievedQMname" class="input" th:field="*{recievedQMname}"><option selected="selected" value=""/></select>
<div class="error" th:if="${#fields.hasErrors('recievedQMname')}" th:errors="*{recievedQMname}"></div>
<div class="label"><p>Destination queue Name</p></div>
<input type="text" class="input" th:field="*{recievedQname}" id="recievedQname">
<div class="error" th:if="${#fields.hasErrors('recievedQname')}" th:errors="*{recievedQname}"></div>
<div class="label"><p> Select an input method </p></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="fileradio" checked="checked" > <label for="fileradio">File</label></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="messagetextradio" > <label for="messagetextradio">Message text</label></div>
</div>
<div class="msg">
<div class="label">Upload files </div>
<input type="file" th:field="*{files}" multiple accept=".txt,.xml" id="files" >
<div class="error" th:if="${fileUploadValidationResult != null}" th:text="'' + ${fileUploadValidationResult} + ''"></div>
<textarea class="input" th:field="*{msgText}" id="msgText" disabled="disabled" ></textarea>
<div class="error" th:if="${textMsgValidationResult != null}" th:text="'' + ${textMsgValidationResult} + ''"></div>
<input class="btn" type="submit">
</div>
</div>
</form>
<div class="table" th:if="${result != null}">
<div class="table_row" th:each="mapEntry : ${result}">
<div class="cell_wrapper">
<div class="cell" th:text="${mapEntry.key}" >key</div> <div class="resultcell" th:text="${mapEntry.value}">value</div>
</div>
</div>
</div>
<div class="table" th:if="${UImessageSentresult != null}">
<div class="table_row">
<div class="cell_wrapper">
<div class="resultcell" style="width: 100%;" th:text="${UImessageSentresult}" >UImessageSentresult</div>
</div>
</div>
</div>
</div>
</body>
</html>
wrapper div is given as absolute. when comparing to parent element height is less that's the reason for hiding the content you can
either change .wrapper to relative instead of absolute
or you can add scroll for wrapper.
Try the below code
.wrapper {
position: relative;
top: auto;
left: auto;
transform: initial;
}
I'm having a couple of bugs with my layout and was wondering if anyone could help me out. I need to have the white space removed above the nav bar and below the footer. Secondly, I'd like to have all of the footer elements on the same line, instead of being slightly staggered. I've attached a picture of the site, as well as the HTML and CSS that goes with it. Thanks in advance!
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>21st Century Dad</title>
<link type="text/css" rel="stylesheet" href="css/reset.css" />
<link type="text/css" rel="stylesheet" href="styles.css" />
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#26ADE4; float:right; font:14px 'Kanit',Helvetica,Arial,sans-serif; margin-right: 20px; margin-top: 20px; text-align:center; padding:10px; border-radius:20px;}
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
</head>
<body>
<header>
<div id="header-content">
<img src="../website/images/logo-big.png" alt="21st Century Dad" height="110" style="margin-left:20px; margin-top:20px;" />
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//fb.us15.list-manage.com/subscribe/post?u=48be460d4492dcbdd2828666e&id=f7d2ed069d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
Sign up for our newsletter!
<div class="indicates-required"><span class="asterisk"></span></div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_48be460d4492dcbdd2828666e_f7d2ed069d" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" style="background-color:#D1E751; font:14px 'Kanit',Helvetica,Arial,sans-serif; margin-top:4px; border-radius:5px; border-color:#D1E751;"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
<nav>
<ul>
<li>About</li>
<li>DIY Projects</li>
<li>Dad Tech</li>
<li>Kid Stuff</li>
<li>Ask a Dad</li>
<li>Dad Jokes</li>
</ul>
</nav>
</div>
</header>
<div id="wrapper">
<main>
<div class = "container">
<div class = "blocks">
<h1>What's New with Dad?</h1>
<img src="../website/images/whatsnew.png" alt="About Me Picture" style="border:1px solid #000;">
</div>
<div class = "blocks">
<h1>DIY Project of the Week</h1>
<img src="../website/images/diyproject.jpg" alt="DIY Project Picture" style="border:1px solid #000;">
</div>
<div class = "blocks">
<h1>Dad Gadget of the Week</h1>
<img src="../website/images/dadgadget.jpg" alt="Dad Gadget of the Week Picture" style="border:1px solid #000;">
</div>
<div class = "blocks">
<h1>Activity / Meal of the Week</h1>
<img src="../website/images/dadactivity.jpg" alt="Kid Activity & Meal of the Week" style="border:1px solid #000;">
</div>
<div class = "blocks">
<h1>Dad Q & A of the Week</h1>
<img src="../website/images/askadad.png" alt="Dad Q & A of the Week" style="border:1px solid #000;">
</div>
<div class = "blocks">
<h1>Dad Joke of the Week</h1>
<img src="../website/images/dadjokes.jpg" alt="Dad Joke of the Week" style="border:1px solid #000;">
</div>
</div><!-- end container -->
</main>
<footer>
<div id="footer">
<p class="left">
21stcenturydad#gmail.com
<p class="right">
<a href="https://www.facebook.com/">
<img src="../website/images/Facebook.png" alt="Facebook Logo"/></a>
<a href="https://www.snapchat.com/">
<img src="../website/images/Snapchat.png" alt="Snapchat Logo"/></a>
<a href="https://www.instagram.com/">
<img src="../website/images/Instagram.png" alt="Instagram Logo"/></a>
<p class="centered">
© Copyright 2017 21st Century Dad
</div>
</footer>
</div>
</body>
</html>
CSS:
#charset "UTF-8";
/* CSS Document */
#import url('https://fonts.googleapis.com/css?family=Kanit:200,300,500');
body {
background-color: #FFF;
background-image:url(../website/images/background.png);
font-size: 13px;
font-family: 'Kanit', sans-serif;
font-weight: 200;
color: #363636;
}
p {
line-height: 140%;
}
header {
background-color: #D1E751;
width: 960px;
z-index:1000;
margin-right:auto;
margin-left:auto;
}
#header-content {
width: 960px;
margin-left: auto;
margin-right: auto;
height: 130px;
position:relative;
left:0px;
top:0px;
}
nav {
background-color: #26ADE4;
color: #fff;
width: 100%;
text-align: center;
font-size: 16px;
font-weight:bold;
}
nav ul {
display: block;
padding:14px 0 14px;
}
nav li {
display: inline-block;
}
nav a {
padding: 5px 30px 5px;
}
nav a:link {
color: #fff;
text-decoration: none;
}
nav a:hover {
background-color: #D1E751;
color: #FFF;
}
nav a:visited{color:#FFF;}
#wrapper {
width: 960px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
overflow: hidden;
padding-top:60px;
}
.container{width:960px;
margin-left:auto;
margin-right:auto;
text-align:center;}
.blocks{display:inline-block;
width:300px;
padding-left:5px;
padding-right:5px;
}
h1 {
font-size: 20px;
color: #26ADE4;
font-weight: 500;
margin-bottom: 2px;
}
h2 {
font-weight:500;
font-size: 60px;
color: #fff;
position:absolute;
left:-2px;
bottom:-9px;
}
footer {
background-color: #D1E751;
color: #fff;
font-size: 10px;
padding: 12px;
font-weight:bold;
clear: both;
}
.left{text-align:left;
font-size:14px;
float:left;
padding-top:8px;
padding-bottom:8px;
}
.right{float:right;
text-align:right;
}
.centered{text-align:center;
font-size:14px;
padding-top:8px;
padding-bottom:8px;
max-width:300px;
margin-left:auto;
margin-right:auto;}
Screenshot
take out margin:auto to the body to get rid of surrounding whitespace
For a simple footer, you can position the element fixed to the screen
For elements in the footer, You can use a display flex property on the div with id footer
CSS rules below and pen is here
body {
margin: auto;
}
.left,
right,
.centered {
margin-left: 50px;
margin-right: 50px;
margin-top: 0;
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
Basically, I have a menu bar on top that I want to extend infinitely horizontally. On top of that, I would also like the same properties to apply to the HTML slider as well if possible. Additionally if done correctly the menu bar should horizontally extend forever and the container underneath it should as well. Last but not least the 2 gray boxes I have. I want their gray background to expand outwards horizontally as well but the separator in between the 2 columns should still exist.
This is what I have:
This is what I want:
#font-face { font-family: UbuntuG; src: url('ubuntu-fonts/Ubuntu-L.ttf'); }
*{ box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
body { background-color: #2d2d2d; }
h1 {
color: #1d1d1d; font-family: UbuntuG; font-size: 30;
}
h2 {
color: #1d1d1d; font-family: UbuntuG; font-size: 18;
}
p {
color: #1d1d1d; font-family: Arial; font-size: 16;
}
td {
text-align: center;
padding: 0;
height: 48px;
min-width:48px;
}
a {
display: block;
text-decoration: none;
color: #1d1d1d;
font-family: UbuntuG;
font-size: 16;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
li {
float: left;
}
li a {
display: block;
color: #1d1d1d;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #33d6ff; color: white;
}
.active {
background-color: #00BFFF; color: white;
}
.selector {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #1d1d1d;
}
/*Top full width container*/
.FullWidthContainer{ width:100%}
/*Content Container With max-width:1200px for example*/
.MainContainer{max-width:1200px; width:100%; margin: 0px auto; }
/* content containre divided in left-75% and right-25%}*/
.left{ width:70%; padding:2%; float:left;}
.spacer{ width:2%; padding:2%; float:center}
.right{ width:28%; padding:2%; float:right}
.right img{ width:100%}
<html>
<head>
<title>Radio</title>
<meta content="??">
<link rel="stylesheet" type="text/css" href="theme.css">
<style>
table, th, td { border: 5px solid white; border-spacing: 0; color: #1d1d1d; font-family: Arial; font-size: 16; }
h1 { color: white; font-family: UbuntuG; font-size: 30; }
</style>
</head>
<body>
<div class="FullWidthContainer" style=""><ul>
<li><a class="active" href="#home">Home</a></li>
<li>Who are we?</li>
<li>Contact</li>
</ul></div>
<!-- Start cssSlider.com -->
<link rel="stylesheet" href="cssslider_files/csss_engine1/style.css">
<!--[if IE]><link rel="stylesheet" href="cssslider_files/csss_engine1/ie.css"><![endif]-->
<!--[if lte IE 9]><script type="text/javascript" src="cssslider_files/csss_engine1/ie.js"></script><![endif]-->
<div class="csslider1 autoplay ">
<input name="cs_anchor1" id="cs_slide1_0" type="radio" class="cs_anchor slide">
<input name="cs_anchor1" id="cs_slide1_1" type="radio" class="cs_anchor slide">
<input name="cs_anchor1" id="cs_slide1_2" type="radio" class="cs_anchor slide">
<input name="cs_anchor1" id="cs_play1" type="radio" class="cs_anchor" checked="">
<input name="cs_anchor1" id="cs_pause1_0" type="radio" class="cs_anchor pause">
<input name="cs_anchor1" id="cs_pause1_1" type="radio" class="cs_anchor pause">
<input name="cs_anchor1" id="cs_pause1_2" type="radio" class="cs_anchor pause">
<ul>
<li class="cs_skeleton"><img src="cssslider_files/csss_images1/download.jpg" style="width: 100%;"></li>
<li class="num0 img slide"> <img src="cssslider_files/csss_images1/download.jpg" alt="" title=""></li>
<li class="num1 img slide"> <img src="cssslider_files/csss_images1/download_1.jpg" alt="" title=""></li>
<li class="num2 img slide"> <img src="cssslider_files/csss_images1/download_2.jpg" alt="" title=""></li>
<!-- </ul><div class="cs_engine">http://cssslider.com by cssSlider.com v2.1</div> -->
<div class="cs_description">
<label class="num0"></label>
<label class="num1"></label>
<label class="num2"></label>
</div>
<div class="cs_play_pause">
<label class="cs_play" for="cs_play1"><span><i></i><b></b></span></label>
<label class="cs_pause num0" for="cs_pause1_0"><span><i></i><b></b></span></label>
<label class="cs_pause num1" for="cs_pause1_1"><span><i></i><b></b></span></label>
<label class="cs_pause num2" for="cs_pause1_2"><span><i></i><b></b></span></label>
</div>
<div class="cs_arrowprev">
<label class="num0" for="cs_slide1_0"><span><i></i><b></b></span></label>
<label class="num1" for="cs_slide1_1"><span><i></i><b></b></span></label>
<label class="num2" for="cs_slide1_2"><span><i></i><b></b></span></label>
</div>
<div class="cs_arrownext">
<label class="num0" for="cs_slide1_0"><span><i></i><b></b></span></label>
<label class="num1" for="cs_slide1_1"><span><i></i><b></b></span></label>
<label class="num2" for="cs_slide1_2"><span><i></i><b></b></span></label>
</div>
<div class="cs_bullets">
<label class="num0" for="cs_slide1_0"> <span class="cs_point"></span>
<span class="cs_thumb"><img src="cssslider_files/csss_tooltips1/download.jpg" alt="" title=""></span></label>
<label class="num1" for="cs_slide1_1"> <span class="cs_point"></span>
<span class="cs_thumb"><img src="cssslider_files/csss_tooltips1/download_1.jpg" alt="" title=""></span></label>
<label class="num2" for="cs_slide1_2"> <span class="cs_point"></span>
<span class="cs_thumb"><img src="cssslider_files/csss_tooltips1/download_2.jpg" alt="" title=""></span></label>
</div>
</div>
<!-- End cssSlider.com -->
<br><br>
<div class="FullWidthContainer">
<div class="MainContainer">
<span style="background-color: gray;" class="left"><center>
<iframe height="400px" width="550px" scrolling="yes" frameborder="0" src=https://hellodj.airtime.pro/embed/weekly-program></iframe>
</center></span>
<div style="background-color: gray;" class="right">
<iframe id="embed_player" frameborder="0" width="280" height="216" src="https://hellodj.airtime.pro/embed/player?stream=auto"></iframe>
</div>
</div>
</div>
</body>
</html>
Take out the default padding and margin. Add this to the top of your CSS
* {
padding: 0;
margin: 0;
}
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/
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.