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.
Related
I'm working on a project, I have the layout how my client wants it. I'm rekatively new to responsive layouts. In mobile devices with width 321px Im struggling to get right column to expand over the full width of the screen/device.
I understand this is likely a duplicate question, below is a fiddle but if anyone can take a look and either offer some adive or point me to previous answers I'd be grateful.
#media only screen
and (max-width : 320px) {
.container {
width: 321px ! important;
}
#columnright {
display: block ! important;
float: non ! important;
width: 100% ! important;
clear: right;
margin-left; 10%;
}
}
body {
background-image: url(images/khBG.gif);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
margin: 0;
padding: 0;
font-family: "Century Gothic", Verdana, sans-serif;
color: black;
border: 1px solid black;
}
#banner {
padding-right: 5%;
opacity: 0.7234;
background-color: #ffffff;
border-bottom: 1px solid black;
}
#banner ul {
float: right;
font-size: 0.70em
}
#banner ul li {
display: block;
float: left
}
#columnleft {
padding-left: 1%;
background-color: #ffffff;
border-bottom: 1px solid black;
opacity: 0.7234;
float: left;
width: 15%;
margin-left: 0%;
padding-top: 1%;
}
#columnright {
padding-left: 1%;
background-color: #ffffff;
border-bottom: 1px solid black;
opacity: 0.7234;
padding-top: 2%;
width: 50%;
float: right;
overflow: hidden;
margin-right: 30%;
}
#columnright ul {
overflow: hidden;
}
#footer {
clear: both;
background-color: #ffffff;
filter: alpha(opacity=60);
opacity: 0.7234;
padding-bottom: 1em;
padding-left: 200px;
font-size: .60em;
}
#pic-gallery {
margin-left:17.5%;
width: 400px;
height: 400px;
border: 1px solid black;
align-items: center;
display:flex;
}
#pic-ver {
padding-top: 50px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 100px;
}
#pic-hor {
padding-top: 100px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 50px;
}
#myGallery {
position: relative;
width: 320px;
/* Set your image width */
height: 267px;
/* Set your image height */
}
#myGallery img {
display: none;
position: absolute;
top: 0;
left: 0;
}
#myGallery img.active {
display: block;
}
.titlegrp {
}
.title {
float: right;
margin-right: 17.5%;
margin-top: 7.5%;
}
.subtitle {
font-family: "Segoe Script", Segoe, sans-serif;
font-size: 1.05em;
}
.h1 {
font-family: "Segoe Script", Segoe, sans-serif;
font-size: .9em;
}
.imgleft {
float: left;
margin-right: 5px;
}
.imgright {
float: right;
margin-right: 60px;
}
.contentpara {
padding-left: 15px;
}
.sidelinks {
font-family: "Century Gothic", Verdana, sans-serif;
}
.sidelinks a:link {
text-decoration: none;
color: black;
}
.sidelinks a:hover {
text-decoration: none;
font-family: "Segoe Script", Segoe, sans-serif;
}
.sidelinks a:visited {
text-decoration: none;
color: blue;
}
.tablecont {
padding-left: 15px;
}
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
-webkit-transition: width 2s, height 4s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 4s;
}
div.img:hover {
border: 1px solid #777;
}
div.img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
.image-wrapper {
margin: auto;
align-items: center;
justify-content: center;
}
.gal-butt {
font-size: 2.5em;
margin: auto;
}
<!doctype html>
<html lang="en">
<header>
<meta charset="utf-8">
<title>Katie's House - West Hull Based Childminder</title>
<link rel="ICON" href="images/KH_logo.ico" type="image/ico" />
<meta name="description" content="">
<meta name="author" content="Brian Johnson">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="KHjscript.js"></script>
<link rel="stylesheet" href="kHIndex.css">
</header>
<body>
<div class="container">
<div id="banner">
<ul class="none">
<li class="nav"> <a href="https://www.facebook.com/KatieSummersChildminder/" target="_blank">
<img border="0" alt="Contact us on Facebook" src="images/fBook_Icon_Black.gif" width="30" height="30"></a></li>
<li class="nav"> <a href="mailto:katiesummers789#gmail.com">
<img border="0" alt="Contact via Email" src="images/email_Icon_Black.gif" width="30" height="30"></a></li>
<li class="field"><input type="text" title="Search" text="Search" /></li>
</ul>
<div class="titlegrp">
<img class="title" src="images/kH_title.png" alt="Katies House Title">
<img src="images/KH_logo.jpg" alt="Katies House Logo">
</div>
<div style="clear: both;"></div>
</div>
<div id="columnleft">
<div class="subtitle"><p><u>Site Navigation</u></p></div>
<div class="sidelinks">
Home
<br>
About
<br>
Sample Day
<br>
Gallery
<br>
Testimonials
<br>
Enquiries
<br>
</div>
</div>
<div id="columnright">
<div class="subtitle"><u>Katie's House Services</u></div>
<div class="imgleft"><img border="1" alt="Katie and Mindees" src="images/katie_intro_page.jpg"></a>
</div>
<p>What Katie's house can offer you</p>
<ul>
<li>Early years child care 0-5 years</li>
<li>Funded places for eligible 2,3 and 4 year olds at 15 hours per week free</li>
<li>Long term and short term care</li>
<li>Full time and part time places</li>
<li>Professional and affordable</li>
</ul>
<hr>
<p>My Qualifications</p>
<p>I attend training regularly and have qualifications in:</p>
<ul>
<li>Paediatric First Aid</li>
<li>Child Protection</li>
<li>Special Educational Needs</li>
<li>Food Hygiene</li>
<li>Health and Safety</li>
<li>Equal Opportunities</li>
<li>Home based Childcare</li>
<li>Working with two year olds</li>
<li>schemas</li>
<li>NVQ3 Children's care, Learning and Development</li>
<li>Open University - Understanding Autism</li>
</ul>
<br>
<p>Click below for a little information on Childminding</p>
Pacey's Info on Registered Childminders
<div style="clear: both;"></div>
<br>
</div>
<div id="footer">
<p>Brian Johnson
<br>© Copyright 2016. All Rights Reserved</p>
</div>
</div>
</body>
</html>
https://jsfiddle.net/aw3eb1oa/
You were really close - just need to put your media query at the bottom of the CSS so it can override the other styles. Then add a width:100%; and margin-left: 0;
#columnleft, #columnright {
float: none;
width: 100%;
}
#columnright {
display: block ! important;
clear: right;
margin-left: 0;
}
Updated: Fiddle
You need to over-ride your earlier CSS like this:
#media only screen and (max-width : 320px) {
.container {
width: auto;
}
#columnleft,#columnright {
float: none;
width: 100%;
}
}
I was doing some CSS, and my divs keep piling up underneath each other. I tried using position on them but it didn't work. My work is below. The picture I have in it will not be available to you as it is from my computer, but I hope you can get the idea of what my issue is(The sitelingo and Capture12 are the ones piling up):
#logomain {
font-family: museo-sans-rounded, sans-serif;
font-size: 33px;
color: white;
font-weight: 600;
padding-top: 13px;
padding-left: 470px;
}
#sitelingo {
font-family: museo-sans-rounded, sans-serif;
font-size: 14px;
font-weight: bold;
position: relative;
color: white;
padding-left: 232px;
padding-top: 24px;
}
#barone {
position: fixed;
float: left;
width: 50%;
height: 70px;
background-color: #0A4076;
}
#bartwo {
postition: fixed;
float: right;
width: 50%;
height: 70px;
background-color: #0A4076;
}
#login {
padding-left: 400px;
position: absolute;
}
body {
margin: 0;
}
.bold {
font-weight: bold;
}
<head>
<title>Duolingo</title>
</head>
<body>
<div id="barone">
<div id="logomain"> duolingo </div>
</div>
<div id="bartwo">
<div id="sitelingo"> Site language: English </div>
<div id="login"> <img src="images/Capture12.png" /> </div>
</div>
</body>
</html>
A couple of issues:
You set a position:fixed to #barone. This will position the element relative to the actual screen.
You have elements positioned absolute, when the screen resizes, it will overlap with other elements
A padding left is set on your logo, this makes it out of viewpoint
Maybe you may want something as depicted below
#logomain {
font-family: museo-sans-rounded, sans-serif;
font-size: 33px;
color: white;
font-weight: 600;
padding-top: 13px;
/* padding-left: 470px;*/
}
#sitelingo {
font-family: museo-sans-rounded, sans-serif;
font-size: 14px;
font-weight: bold;
position: relative;
color: white;
/*padding-left: 232px;*/
padding-top: 24px;
}
#bar_container {
background-color: #0A4076;
}
#barone {
/* position: fixed;*/
height: 70px;
background-color: #0A4076;
display: inline-block;
}
#bartwo {
postition: fixed;
float: right;
height: 70px;
background-color: #0A4076;
}
#bartwo *{
display:inline-block;
}
#login {
position:relative;
/*padding-left: 400px;
position: absolute; */
vertical-align: middle;
top:0;
}
#login img{
width:100px;
height:100%;
}
body {
margin: 0;
}
.bold {
font-weight: bold;
}
<head>
<title>Duolingo</title>
</head>
<body>
<div id="bar_container">
<div id="barone">
<div id="logomain"> duolingo </div>
</div>
<div id="bartwo">
<div id="sitelingo"> Site language: English </div>
<div id="login"> <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRgKSOJmOr8tNodELaCLPrI1T2XE7iwrpuxPDGuFeoJwlJC4AVKZw" /> </div>
</div>
</div>
</body>
</html>
I am trying to have a three column section that has three different divs, each containing an h2 and a p element. I want to make the left when align right, the middle one align center and the right one align left. I achieved this using nth-of-type however I can't figure out how to get them in the right position so that everything lines up with each other.
body {
background-color: #EAE8EB;
}
wrap {
margin: auto;
}
#topbar {
width: 105%;
height: 50px;
background-color: #000;
margin-left: -2.5%;
margin-top: -10px;
}
#jumbotron {
width: 105%;
margin-left: -2.5%;
height: 900px;
background-repeat: no-repeat;
background-size: cover;
background-image: url('http://www.arcanemarketing.com/wp-content/uploads/2013/05/placeholder.png');
}
#recent {
margin: auto;
background-color: #3C5F7C;
width: 105%;
margin-left: -2.5%;
height: 250px;
margin-top: -20px;
}
#recent h1 {
text-align: center;
font-family: 'Alegreya Sans SC', sans-serif;
font-size: 38px;
font-weight: 700;
padding-top: 10px;
color: #EEF0F2;
}
#galleries {
width: 105%;
margin-left: -2.5%;
height: 250px;
background-color: #3c5f7c;
}
#galleries h2 {
font-size: 32px;
font-family: 'Alegreya Sans SC', sans-serif;
font-weight: 500;
color: #EEF0F2;
}
#galleries div:nth-of-type(1) h2 {
text-align: right;
}
#galleries div:nth-of-type(2) h2 {
text-align: center;
}
#galleries div:nth-of-type(3) h2 {
text-align: left;
}
#galleries p {
font-size: 18px;
font-family: 'Catamaran', sans-serif;
font-weight: 300;
color: #eef0f2;
max-width: 360px;
}
#galleries div:nth-of-type(1) p {
text-align: right;
margin: auto;
}
#galleries div:nth-of-type(2) p {
text-align: center;
margin: auto;
}
#galleries div:nth-of-type(3) p {
text-align: left;
margin: auto;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,500,700,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Catamaran:400,300,500' rel='stylesheet' type='text/css'>
<div id="wrap">
<div id="topbar">
</div>
<div id="menu">
</div>
<div id="logo">
</div>
<div id="jumbotron">
</div>
<div id="recent">
<h1>Recent Work</h1>
<div id="thumbnail"></div>
</div>
<div id="galleries">
<div class="row">
<div class="col-md-4">
<h2>Website Design</h2>
<p>Extensive experience with image editing software, html and css code, and a unique perspective of an IT major formerly in graphic design.</p>
</div>
<div class="col-md-4">
<h2>Software Engineering</h2>
<p>Information Technology second-semester Sophomore at State University of New York at Cobleskill. Passion for solving problems with logic and code.</p>
</div>
<div class="col-md-4">
<h2>Other Work</h2>
<p>Former graphic artist with a background in a hobbyist form of art known as forum signatures.</p>
</div>
</div>
</div>
<div id="sn">
</div>
</div>
Also I'm not sure how to get bootstrap to work in jsfiddle sorry :(
https://jsfiddle.net/5bep97xw/
The nth-child idea is the good one. but looks like you need to update the mediaqueries too and what is this 105% width ?
body {
background-color: #EAE8EB;
}
wrap {
margin: auto;
}
#topbar {
/* width: 105%; why ? */
height: 50px;
background-color: #000;
margin-left: -2.5%;
margin-top: -10px;
}
#jumbotron {
/* width: 105%;
margin-left: -2.5%;
height: 900px; why ? */
background-repeat: no-repeat;
background-size: cover;
background-image: url('http://www.arcanemarketing.com/wp-content/uploads/2013/05/placeholder.png');
}
#recent {
margin: auto;
background-color: #3C5F7C;
/* width: 105%;
margin-left: -2.5%;
height: 250px; why ? */
margin-top: -20px;
}
#recent h1 {
text-align: center;
font-family: 'Alegreya Sans SC', sans-serif;
font-size: 38px;
font-weight: 700;
padding-top: 10px;
color: #EEF0F2;
}
#galleries {
/* width: 105%;
margin-left: -2.5%;
min-height: 250px; do not fix an height and not too sure about margins and width */
background-color: #3c5f7c;
}
#galleries h2 {
font-size: 32px;
font-family: 'Alegreya Sans SC', sans-serif;
font-weight: 500;
color: #EEF0F2;
}
#galleries div:nth-of-type(1) h2 {
text-align: right;
}
#galleries div:nth-of-type(2) h2 {
text-align: center;
}
#galleries div:nth-of-type(3) h2 {
text-align: left;
}
#galleries p {
font-size: 18px;
font-family: 'Catamaran', sans-serif;
font-weight: 300;
color: #eef0f2;
/* max-width: 360px; better fix a max-width on parents container ? */
padding:1em;/* might be usefull */
margin:0;/* might be usefull */
}
#galleries div:nth-of-type(1) p {
text-align: right;
margin: auto;
}
#galleries div:nth-of-type(2) p {
text-align: center;
margin: auto;
}
#galleries div:nth-of-type(3) p {
text-align: left;
margin: auto;
}
#media (max-width:990px){
div div#galleries div[class] p,
div div#galleries div[class] h2 {
text-align:center; /* or left or right */
}
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,500,700,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Catamaran:400,300,500' rel='stylesheet' type='text/css'>
<div id="wrap">
<div id="topbar">
</div>
<div id="menu">
</div>
<div id="logo">
</div>
<div id="jumbotron">
</div>
<div id="recent">
<h1>Recent Work</h1>
<div id="thumbnail"></div>
</div>
<div id="galleries">
<div class="row">
<div class="col-md-4">
<h2>Website Design</h2>
<p>Extensive experience with image editing software, html and css code, and a unique perspective of an IT major formerly in graphic design.</p>
</div>
<div class="col-md-4">
<h2>Software Engineering</h2>
<p>Information Technology second-semester Sophomore at State University of New York at Cobleskill. Passion for solving problems with logic and code.</p>
</div>
<div class="col-md-4">
<h2>Other Work</h2>
<p>Former graphic artist with a background in a hobbyist form of art known as forum signatures.</p>
</div>
</div>
</div>
<div id="sn">
</div>
</div>
I have this kind of complex set up with divs and links. Anyway, the logo in the top of left of my page is supposed to change when you hover over it, and it does. However, it also changes if your mouse goes anywhere in the top section of the page (outlined in red on the image)
Also when I click on the logo, the link doesn't work. I think it may have to do with the way I have the divs set up, but i'm not sure.
I'm still kind of new at all of this, and I'm a little overwhelmed at figuring out this issue. If you can help, I would appreciate it.
Below is my html, css, and an image to help show you what I'm talking about.
This is my html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Playing with backgrounds</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="topheader">
<a href="index.html">
<div id="logo">
<div id="navigation">
NEWS<br />
ABOUT<br />
VOLUNTEER<br />
DONATE<br />
CONTACT US
</div>
</div>
</a>
</div>
<div id="welcome">
<h1>Welcome</h1>
<h2>
To
<span class="gold"> Promise Land Partners</span></h2>
</div>
<div id="bottom_bar">
<p>COPYRIGHT DAVIDMORRIS © 2014 | NEWSLETTER | FACEBOOK
<span class="right">DESIGN: HANGING OUT</span>
</p>
</div>
</div>
</body>
</html>
This is my CSS
#charset "utf-8";
/* CSS Document */
body {
background-image: url(img/dot.png), url(img/background.jpg);
background-repeat: repeat, no-repeat;
background-position: top left, center center fixed;
background-size: auto, cover;;
margin: 0px;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
#topheader {
height: 135px;
width: 100%;
overflow: hidden;
position: relative;
background-image: url(img/headerbar.png);
background-repeat: repeat-x;
}
#logo {
background-image:url(img/PLP.png);
background-repeat: no-repeat;
background-position: top left;
height: 100px;
width: 100%;
margin: 0;
padding: 0;
}
#logo:hover, #logo:active {
background-image:url(img/PLP_pushed.png);
}
#navigation {
background-image: none;
background-position: top left;
padding-left: 180px;
}
#bottom_bar {
background-image:url(img/bottom_bar.jpg);
position: fixed;
bottom: 0;
height: 27px;
width: 100%;
color: white;
}
#bottom_bar p {
text-align: left;
padding: 4px;
margin: 0;
}
.right {
float:right;
}
#welcome {
background-image: url(img/welcomepanel.png);
background-repeat: no-repeat;
position: relative;
left: 0;
top: 70px;
height: 261px;
width: 100%;
padding-top: 10px;
padding_left: 10px;
margin: 0;
}
h1 {
color:white;
padding-left: 90px;
font-size: 6em;
margin: 0;
margin-top: 8px;
}
h2 {
color: white;
font-size: 4em;
padding-left: 20px;
margin: 0;
line-height: .65em;
}
.gold {
color: #ee9f00;
font-size: .75em;
margin: 0;
}
a {
text-decoration: none;
color: white;
}
a:visited {
color: #c88601;
}
a:focus {
color: #ee9f00;
}
a:hover {
color: #ee9f00;
}
a:active {
color: c88601;
}
#navigation a {
text-decoration: none;
color: white;
}
#navigation a:visited {
color: white;
}
#navigation a:focus {
background-color: #ee9f00;
}
#navigation a:hover {
background-color: #ee9f00;
}
#navigation a:active {
background-color: #ee9f00;
}
You have your CSS set to change the image when you hover over #logo and #logo is set to width: 100%; Try changing the width of #logo or, if that breaks your style, add a child div to #logo in which you can change the background image.
See this fiddle for an example: http://jsfiddle.net/QDgVy/
HTML
<a href="index.html">
<div id="logo_container">
<div id="logo"></div>
<div id="navigation">
NEWS<br />
ABOUT<br />
VOLUNTEER<br />
DONATE<br />
CONTACT US
</div>
</div>
</a>
CSS
#logo_container {
background-repeat: no-repeat;
background-position: top left;
height: 100px;
width: 100%;
margin: 0;
padding: 0;
background-color: black;
}
#logo {
background-image:url(...);
width: 100px;
height: 100px;
display: block;
float: left;
}
#logo:hover, #logo:active {
background-image:url(... );
}
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;
}