I'm trying to make a website for my photography hobby. And I want to embed my profile (if possible, but I couldn't find a way.). And now I am trying to embed a few pictures. But when I use the embed code from the Instagram picture itself it won't show, and I only see a gray/white background with the gray Instagram logo.
After edit the website doesn't show up as it does on my computer, the placement is different.
/*Topbar styling*/
div.navbar {
position: absolute;
width: 100%;
height: 40px;
background-color: #cc0000;
}
div.navbar p {
font-family: Trebuchet MS;
font-size: 20px;
margin-top: 5px;
margin-left: 10px;
}
div.menu {
position: absolute;
height: 20px;
width: 20px;
margin-left: 100px;
margin-top: 5px;
color: #fff;
}
div.menu img {
height: 20px;
width: 20px;
}
div.content {
position: absolute;
margin-top: 30px;
margin-left: 20px;
}
/* Body styling for browser */
/* HTML position/height/width */
html {
position: relative;
height: 100%;
width: 100%;
}
/* Body height/margin/width/position thing */
body {
position: absolute;
min-width: 100%;
min-height: 100%;
margin: 0px;
}
<!DOCTYPE html>
<html>
<title>Lodewijks Photography</title>
<head>
<link rel="stylesheet" type="text/css" href="styles/style.css">
</head>
<body>
<div class="navbar">
<p>Logo komt hier ergens</p>
</div>
<div class="menu">
<button class="menu"><img src="images/hamburger.png"></button>
</div>
<div class="content">
<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/BfWMLw2B-P3/" data-instgrm-version="8" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);">
<div style="padding:8px;">
<div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:45.83333333333333% 0; text-align:center; width:100%;">
<div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div>
</div>
<p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">A post shared by Ritchie Lodewijks (#rlodewijksphotography) on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2018-02-18T17:39:13+00:00">Feb 18, 2018 at 9:39am PST</time></p>
</div>
</blockquote>
<script async defer src="//www.instagram.com/embed.js"></script>
</div>
</body>
</html>
The problem is caused by the path to the script. Replace
<script async defer src="//www.instagram.com/embed.js"></script>
with
<script async defer src="http://www.instagram.com/embed.js"></script>
P.S: below I have an answer with code how I would like to have it look like, but I do not think this is valid code?
I would like to have an interface(HTML5/CSS) that looks like MIRC fullscreen(see image below) and have searched all day even at stackoverflow
What I want is that the interface(GUI only) is fullscreen and that user(right) and chat window(left) have a scrollbar, but that the bottom bar where you type your message stays at the bottom.
Preferable it would only use CSS(but if javascript is needed I will allow it, but rather not) and it does not have to support any old browsers. I think this should be possible because mibbit
also has something that looks a lot like this.
I am wondering if there is any framework/library to help me create these kind of apps.
I have been toying around all day with CSS but can not get it to work and I think it is very easy for a CSS guru.
It was a lot of work(because I am junior CSS level), but this is what I could came up with:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
*, html, body {
height: 100%;
margin: 0;
}
body {
overflow: hidden;
}
#wrapper {
min-height: 100%;
overflow: none;
}
#left {
float: left;
width: calc(100% - 200px);
height: calc(100% - 20px);
overflow-y: scroll;
}
#navigation {
float: top;
border-style: inset;
background: lightgrey;
padding: 5px;
height: 16px;
}
.img {
width: 16px;
height: 16px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAK3RFWHRDcmVhdGlvbiBUaW1lAM/tIDE5IOj+6yAyMDA0IDIwOjE2OjQzICswMzAwn4mdcgAAAAd0SU1FB9UFGg8uEROIcVQAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAEZ0FNQQAAsY8L/GEFAAAAKlBMVEX/AAC4jSzPr0yncQG8jA7+/qz9+JDKqTfGjgHvuQD66Wb6xwb7+NT+/v2CyXEoAAAAAXRSTlMAQObYZgAAAIVJREFUKM99zUERhFAMA9BawAIWagELsRALWPgWaiEWYgELeNkL7DDL7+bUvpmmEdt4JuIFQ3iE2wSA4zwPgLJLOYe7sdzA1Ue5AeJ7UnOQAJKS3ML9tBqwJUly9WDbrqoqzoAAZIsAoAnEyEwW18zMzJhARCS5X2MH2Jb4Dz/7G5Y1evgAaj7AUSA5oLUAAAAASUVORK5CYII=);
no-repeat;
vertical-align: middle; /* http://stackoverflow.com/a/489394/11926 */
background-size:contain; /* http://stackoverflow.com/a/20708979/11926 */
}
#navigation li {
height: 32px;
margin-right: 5px;
float: left;
list-style-type: none;
margin-right: 5px;
}
#navigation a {
text-decoration: none;
text-align: center;
height: 16px;
}
.selected {
font-size: 14px;
padding-left: 5px;
display: inline-block;
vertical-align: center;
}
#messages {
height: calc(100% - 50px);
float: bottom;
list-style-type: none;
font-family: "verdana";
}
#users {
float: right;
width: 200px;
height: calc(100% - 20px);
overflow-y: scroll;
font-family: "monospace";
list-style-type: none;
}
#users li {
padding: 5px 10px;
height: 16px;
font-size: 16px;
cursor: pointer;
}
#messages li {
padding: 5px 10px;
height: auto;
font-size: 16px;
}
#bottom {
position: fixed;
bottom: 0;
width: 100%;
height: 20px;
}
#message {
border-top: 1px inset;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left">
<div id="navigation">
<li>
<img class="img" src="" />
<span class="selected">
#Main
</span>
</li>
<li>
<img class="img" src="" />
<span>
#Linus Torvalds
</span>
</li>
<li>
<img class="img" src="" />
<span>
#Bill Gates
</span>
</li>
</div>
<div id="messages"></div>
</div>
<div id="users">
Alfred<br />
Linus Torvald<br />
Bill Gates<br />
Steve Jobs<br />
</div>
<div id="bottom">
<form action="">
<input id="message" autocomplete="off" /><button>Send</button>
</form>
</div>
</div>
</body>
</html>
Jsfiddle:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
*, html, body {
height: 100%;
margin: 0;
}
body {
overflow: hidden;
}
#wrapper {
min-height: 100%;
overflow: none;
}
#left {
float: left;
width: calc(100% - 200px);
height: calc(100% - 20px);
overflow-y: scroll;
}
#navigation {
float: top;
border-style: inset;
background: lightgrey;
padding: 5px;
height: 16px;
}
.img {
width: 16px;
height: 16px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAK3RFWHRDcmVhdGlvbiBUaW1lAM/tIDE5IOj+6yAyMDA0IDIwOjE2OjQzICswMzAwn4mdcgAAAAd0SU1FB9UFGg8uEROIcVQAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAEZ0FNQQAAsY8L/GEFAAAAKlBMVEX/AAC4jSzPr0yncQG8jA7+/qz9+JDKqTfGjgHvuQD66Wb6xwb7+NT+/v2CyXEoAAAAAXRSTlMAQObYZgAAAIVJREFUKM99zUERhFAMA9BawAIWagELsRALWPgWaiEWYgELeNkL7DDL7+bUvpmmEdt4JuIFQ3iE2wSA4zwPgLJLOYe7sdzA1Ue5AeJ7UnOQAJKS3ML9tBqwJUly9WDbrqoqzoAAZIsAoAnEyEwW18zMzJhARCS5X2MH2Jb4Dz/7G5Y1evgAaj7AUSA5oLUAAAAASUVORK5CYII=);
no-repeat;
vertical-align: middle; /* http://stackoverflow.com/a/489394/11926 */
background-size:contain; /* http://stackoverflow.com/a/20708979/11926 */
}
#navigation li {
height: 32px;
margin-right: 5px;
float: left;
list-style-type: none;
margin-right: 5px;
}
#navigation a {
text-decoration: none;
text-align: center;
height: 16px;
}
.selected {
font-size: 14px;
padding-left: 5px;
display: inline-block;
vertical-align: center;
}
#messages {
height: calc(100% - 50px);
float: bottom;
list-style-type: none;
font-family: "verdana";
}
#users {
float: right;
width: 200px;
height: calc(100% - 20px);
overflow-y: scroll;
font-family: "monospace";
list-style-type: none;
}
#users li {
padding: 5px 10px;
height: 16px;
font-size: 16px;
cursor: pointer;
}
#messages li {
padding: 5px 10px;
height: auto;
font-size: 16px;
}
#bottom {
position: fixed;
bottom: 0;
width: 100%;
height: 20px;
}
#message {
border-top: 1px inset;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left">
<div id="navigation">
<li>
<img class="img" src="" />
<span class="selected">
#Main
</span>
</li>
<li>
<img class="img" src="" />
<span>
#Linus Torvalds
</span>
</li>
<li>
<img class="img" src="" />
<span>
#Bill Gates
</span>
</li>
</div>
<div id="messages"></div>
</div>
<div id="users">
Alfred<br />
Linus Torvald<br />
Bill Gates<br />
Steve Jobs<br />
</div>
<div id="bottom">
<form action="">
<input id="message" autocomplete="off" /><button>Send</button>
</form>
</div>
</div>
</body>
</html>
Also available on jsfiddle
P.S: Only tested thoroughly tested on Google Chrome(Version 47.0.2526.106 (64-bit Linux))
I've read countless threads here now and I have been having no luck so far. I am trying to remove space between the divs on this page.
The divs called "postarea" and "rightsidebar" should have the same distance between "postadvert" as "postadvert" has on it's top between it and the menu. Can anyone help?
here is the jsfiddle
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>DTR html</title>
</head>
<body>
<div class="pageWrapper">
<div class="header">
<img src="images/banner_gundam_space.jpg" width="600" height="150" alt="Banner" class="banner"/>
<div id="rssline">
<img src="images/register.gif" width="70" height="40" alt="Register" class="rssline"/>
<img src="images/commentsrss.gif" width="160" height="40" alt="CommentsRSS" class="rssline"/>
<img src="images/entriesrss.gif" width="137" height="40" alt="EntriesRSS" class="rssline"/>
</div>
<div id="topadvert">
<img src="images/adunit_234x60.gif" width="234" height="60" alt="Advert" />
</div>
<div id="welcome"><img src="images/welcome.jpg" width="250" height="60" alt="Welcome to Dubtopia" /></div>
<div id="menu">
<ul>
<li>Home</li>
<li>Anime Reviews</li>
<li>Activity</li>
<li>Forums</li>
<li>Group Forums</li>
<li>Groups</li>
<li>Members</li>
</ul>
</div>
</div><!-- End header -->
<div id="contentWrapper">
<div id="postadvert"><img src="images/advert_example_728x90.png" width="729" height="90" alt="Advert" /></div>
<div id="rightsidebar">
<div class="rightcontainer">
<div id="searchBox"><input type="text" name="search" size="25" /><input type="submit" value="Search" /></div>
<div class="sidebaradvert"><img src="images/advert_example_300x250.png" width="300" height="250" alt="Advert" /></div>
<div class="sidebarTitle1"><img src="images/recentseries.jpg" width="200" height="40" alt="Recent Series" /></div>
<ol>
<li><a class="widgetlink" href="#">Fullmetal Alchemist Brotherhood</a></li>
<li><a class="widgetlink" href="#">Aquarion Age</a></li>
<li><a class="widgetlink" href="#">Gurren Lagann</a></li>
<li><a class="widgetlink" href="#">Black Lagoon</a></li>
<li><a class="widgetlink" href="#">Chrome Shelled Regios</a></li>
<li><a class="widgetlink" href="#">Ergo Proxy</a></li>
<li><a class="widgetlink" href="#">Ghost Hunt</a></li>
<li><a class="widgetlink" href="#">Kurau Phantom Memory</a></li>
<li><a class="widgetlink" href="#">When They Cry</a></li>
</ol>
</div> <!-- END top series -->
</div><!-- End rightsidebar -->
<div id="postarea">
<div class="post">
<div class="postdate">5th Feb</div>
<img src="images/anime_images/fullmetal_alchemist_brotherhood.jpg" width="225" height="329" alt="Fullmetal Alchemist Brotherhood" />
<p class="postcontent"><h2><a class="postlink" href="#">Fullmetal Alchemist Brotherhood</a></h2><br />In this world there exist alchemists, people who study and perform the art of alchemical transmutation—to manipulate objects and transform one object into another. They are bounded by the basic law of alchemy: in order to gain something you have to sacrifice something of the same value. The main character is the famous alchemist Edward Elric—also known as the Fullmetal Alchemist—who almost lost his little brother, Alphonse, in an alchemical accident. Edward managed to attach his brother's soul to a large suit of armor. While he did manage to save his brother's life, he paid the terrible price of his limbs. To get back what they've lost, the brothers embark on a journey to find the Philosopher's Stone that is said to amplify the powers of an alchemist enormously. Fullmetal Alchemist: Brotherhood is a re-telling of the story from the manga point of view.</p>
<a class="postcomments" href="#">comments</a>
</div><!-- End post -->
</div><!-- End postarea -->
<div id="footer">
© 2013 Dubtopian Review. "Dubtopian" - A fan of English dubbed anime.
</div><!-- End footer -->
</div><!-- End contentWrapper -->
</div><!-- End pageWrapper -->
</body>
</html>
And here is the CSS
/* Typograhpy */
#charset "utf-8";
#font-face {
font-family: Roboto;
src: url('./webfonts/Roboto/Roboto-Black.eot'); /* EOT file for IE */
}
#font-face {
font-family: Roboto;
src: url('Roboto-Black.ttf') /* TTF file for CSS3 browsers */
}
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
body {
background-image: url(images/bg.png);
background-repeat: no-repeat;
background-color: #666666;
margin-top: 50px;
}
.pageWrapper {
font-family: 'Roboto', sans-serif;
color: #FFFFFF;
width: 1040px;
background-color: #42413c;
margin-left: auto;
margin-right: auto;
font-size: 14px;
line-height: 1.4;
overflow: hidden;
}
h2 {
font-size:16px;
color:#E15122;
}
a {
color:#FFF;
}
a:hover {
color:#CCC;
}
/* Start of header */
.header {
height: 211px;
width: 1040px;
}
.banner {
border:0px;
position:relative;
}
.rssline {
position: relative;
bottom: 151px;
left: 628px;
}
#rssline img {
border:0px;
border-bottom: solid 1px transparent;
}
#rssline img:hover {
border-color: white;
}
#topadvert {
border: 0px;
position: relative;
bottom: 140px;
left: 703px;
}
#welcome {
position: relative;
bottom: 113px;
}
#menu {
position: relative;
bottom: 177px;
right: 10px;
}
.header #menu {
float: right;
height: 60px;
display: inline;
}
.header #menu ul {
font-family: 'Roboto', sans-serif;
color: #FFFFFF;
font-size:14px;
list-style-type:none;
margin:0;
padding:0;
padding-top:18px;
padding-bottom:6px;
}
.header #menu li {
display:inline;
}
.header #menu li a:link,a:visited {
font-size: 18px;
background-color:#2c2c2c;
text-align:center;
padding:15px;
text-decoration:none;
}
.header #menu li a:hover,a:active {
background-color:#191919;
}
/* END header */
/* START slider area */
#slider {
margin-right:10px;
margin-left:10px;
width: 1020px;
height: 250px;
background-color: #2c2c2c;
}
/* END slider area */
/* START posts and sidebar */
#contentWrapper {
width: 1040px;
height: 100%;
}
#postadvert {
width: 1000px;
background-color: #2C2C2C;
margin-top: 10px;
height: 100%;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 10px;
padding: 10px;
}
#postadvert img{
position: relative;
left: 140px;
}
/* START sidebar */
#searchBox {
width:350px;
height:40px;
background-color: #1f1f1f;
}
.rightcontainer #searchBox input {
position:relative;
left:50px;
top:6px;
}
#rightsidebar {
width: 350px;
background-color: #2C2C2C;
float: right;
margin-top: 10px;
height: 100%;
margin-bottom: 10px;
margin-right: 10px;
padding: 10px;
}
#rightsidebar .rightcontainer .sidebarTitle1 img{
position:relative;
left:74px;
}
.number, .widgetlink {
display:inline;
margin-top:1px;
}
.rightcontainer ol {
position:relative;
background-color: #1f1f1f;
padding: 10px;
list-style-type: decimal;
margin:0px;
}
.rightcontainer ol li {
position:relative;
left:20px;
margin-top: 1px;
}
.commentdate {
background-color: #E15122;
width:50px;
padding-right: 5px;
padding-left: 5px;
}
.sidebaradvert {
margin-top: 10px;
background-color:#1f1f1f;
padding:10px 10px 10px 10px;
}
.sidebaradvert img {
position:relative;
left: 15px;
}
/* END sidebar */
/* START post area */
#postarea {
Float:left;
width: 620px;
background-color: #2C2C2C;
margin-top: 10px;
height: 100%;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 10px;
padding: 10px;
}
.post {
background-color: #1f1f1f;
padding: 5px;
text-align: justify;
clear: both;
}
.postdate {
position:absolute;
background-color: #E15122;
width:50px;
padding-right: 5px;
padding-left: 5px;
margin-top: 10px;
margin-left: 10px;
}
#postarea img {
float:left;
padding: 5px;
}
#postarea h2, #postarea p {
padding: 5px;
}
#postarea h2 a {
text-decoration:none;
color:#E15122;
}
#postarea .post .postcomments {
position:relative;
left:500px;
padding: 10px;
}
/* END post area */
/* START footer */
#footer {
float: left;
width: 1010px;
background-color: #2C2C2C;
padding: 5px;
text-align: center;
margin-top: 10px;
height: 100%;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 10px;
}
/* END footer */
Float the other elements too, besides postarea and rightsidebar.
Something like this: http://jsfiddle.net/ePySF/5/
.header #postadvert #contentwrapper {
float: left;
}
http://i.imgur.com/mFtXm.jpg here is a screenshot.
The areas marked in red are where the problems are. When I view the page in firefox it looks fine, in chrome there are tiny gaps, I don't deal with ie.
What is the correct way to size these divs such that each div will "connect" with other divs without leaving any gaps whenever the browser changes? something with jquery or js?
html:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<div id="header">
<h1>New York Tech Map</h1>
</div>
<div id="navlinks">
<div class="topnav">
About Us
</div>
<div class="topnav">
Contact Us
</div>
<div class="topnav">
Sign Up
</div>
<div class="topnav">
Help
</div>
</div>
<div id="sidebar">
</div>
<div id="map">
</div>
<div id="footer">
© 2012 NYC Tech Map
</div>
</body>
</html>
css:
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #F0F0F0;
}
a { text-decoration: none; color: grey; }
a:hover{ color: red; }
#header {
width: 100%;
height: 75px;
background: red;
margin-top: -21px;
}
#navlinks { float: right; width: 80%;}
.topnav {
width: 25%;
height: 25px;
float: left;
padding-top: 5px;
background: #2D2D2D;
text-align: center;
font-family: arial, sans serif;
font-size: 15px;
font-weight: bold;
}
#sidebar {
width: 20%;
height: 500px;
float: left;
background: blue;
}
#map {
height: 80.8%;
width: 80%;
float: right;
}
.
.popa:hover {
background: #D6D6D6;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 25px;
background: #2D2D2D;
text-align: center;
font-family: arial, sans serif;
font-weight: bold;
padding-top: 5px;
color: grey;
}
it is better just resize dynamically, use js to get the window size then have that element adjust accordingly.
Ok so as you all will see I am very new to this and am really struggling to get what I want here. I would like to know how to push the youtube video down inside of that div a bit farther. Anyways I'm sure this is a simple fix that I will get reamed for but I have searched and tried to understand what I have been doing wrong but it just isn't working out. Here is what I have so far.
<html>
<head>
<meta charset="UTF-8">
<title>James Photo Tab</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
aside, article, section, header, footer, nav {
display: block;
}
article, div, h1, p {
margin: 0;
padding:0;
}
html {
background: url(images/grid.gif);
}
body {
width: 520px;
margin: auto;
background:white;
}
.one {
background:grey;
width:520px;
height:75px;
border-radius:15px;
position:relative;
}
.two {
background:#0000FF;
width: 50px;
height: 30px;
position: absolute;
font-size: 1em;
font-weight: normal;
text-align: center;
border-radius:5px;
top:78px;
left:px;
}
.three {
background: rgba(227,208,123,.6);
width: 50px;
height: 30px;
position: absolute;
font-size: 1em;
font-weight: normal;
text-align: center;
border-radius:5px;
top:78px;
left: 424px;
}
div {
clear: both;
}
p{ height: 50px;
line-height: 50px;
}
.three { background:#33FFFF;
}
.four { width:520px;
height:auto;
background:grey;
border-radius:0px 10px 10px 10px;
position: absolute;
top:160px;
}
.five {width: 400px;
height:233px;
background:black;
top:250px;
}
.six {width:450px;
height:75px;
background:#0000FF;
top:750px;
border-radius:15px;
position:static;
margin:10px;
bottom: 10px;
}
.like {width: 200px;
height: 45px;
background:#33FFFF;
border-radius: 5px;
position:absolute;
top: 15px;
right: 40px;
text-align: center;
font-size: 2em;
}
.tab1 {
width: 75px;
height: 45px;
float: left;
font-size: 1em;
font-weight: normal;
text-align: center;
border-radius:8px 8px 0px 0px;
background:grey;
position: absolute;
top:115px;
left:368px;
}
.tab2 {
width: 75px;
height: 45px;
float: left;
font-size: 1em;
font-weight: normal;
text-align: center;
border-radius:8px 8px 0px 0px;
background:grey;
position:absolute;
top:115px;
left: 445px;
}
/*add styles here*/
</style>
</head>
<body>
<article>
<div class="one">
<p>
<font size="10em" color="white">
BANNER IMG
</font>
</p>
<div class="like">
<p>
Like Counter
</p>
</div>
</div>
<h1 class="two">Share!</h1>
<h1 class="three">Like!</h1>
</article>
</body>
<body>
<article>
<h1 class="tab1"> Tab 1</h1>
<h1 class="tab2"> Tab 2</h1>
<div class="four" align="center">
<div class="five" align="center">
<div class="eight"><iframe width="400" height="233" top="50px" margin="40px" src="http://www.youtube.com/embed/ErkaM9IvZ7U" frameborder="0" allowfullscreen></iframe></div>
</div>
<div class="six" align="center" onclick="location.href='http://www.facebook.com';" style="cursor:pointer;">
<p><font size="30em" color="white">Share Button</font></p>
</div>
<div class="six" align="center" onclick="location.href='http://www.facebook.com';" style="cursor:pointer;">
<p><font size="30em" color="white">Share Button</font></p>
</div>
</div>
</article>
</body>
</html>
Adding some top margin to the div containing the youtube video would move it down. Not sure how far you wanted it but you can play around with the pixels.
.eight{
margin-top: 10px;
}