I am trying to create a footer for my page. I have tried to make it stick at the absolute bottom of the page and after some online research it told me to modify the height value of my body. However, once I do that, nothing changes. Here is my code:
*{
margin:0;
padding:0:
}
html{
height:100%;
min-height:100%;
}
#wrapper{
height: 100%;
}
/*****************/
/*****HEADER******/
/*****************/
#header{
width: 100%;
margin-top:0px;
margin-bottom:2.5%;
margin-right:0px;
margin-left:0px;
padding-top:2%;
padding-bottom:0.5%;
padding-left:0%;
padding-right:0%;
border-bottom-style:solid;
border-bottom-color: black;
background: lightgrey;
}
#header>h1{
color:black;
margin: 0px 0px 0px 10px;
}
#header>p{
font-style: italic;
text-align: left;
color:black;
margin: 0px 0px 0px 20px;
}
/*****************/
/*****Body******/
/*****************/
#content{
position: relative;
height:100%;
min-height: 100%;
max-height: 100%;
}
#content>p{
margin-left:2.5%;
}
#intro_text{
font-style: italic;
margin-bottom:2.5%;
}
#main_nav{
margin-top:1%;
margin-left:5%;
}
/*****************/
/******FOOTER*****/
/*****************/
#footer{
font-style: italic;
text-align: center;
position: relative;
bottom: 0;
}
EDIT: Added HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/main.css">
<script src="./js/script.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>My Web Space</h1>
<p> First HTML Page using Sublime Text</p>
</div>
<div id="content">
<p id=intro_text>Hello, my name is Alex and I am an aspiring web designer</p>
<p>Links to various test pages I am working with</p>
<ul id=main_nav>
<li><a href=test_link.html>Linking to another page test</a></li>
</ul>
</div>
<div id="footer">
<p id=footer_text>Me, 2016</p>
</div>
</div>
</body>
</html>
This is the core logic of the solution:
html{
position: relative; /* Allows the footer to notice content height */
min-height: 100vh; /* My page will always take the full screen */
}
main{
margin-bottom: 100px; /* prevents footer overlap (footer height + 20px) */
}
footer{
position: absolute; /* I don't care about other things */
bottom: 0; /* I want to be on the bottom... */
left: 0; /* ...and to the left */
}
JSBin
I tried to keep it as simple as possible.
This answer does not use flexbox its pure ol' css.
Try this just modifying #footer
*{
margin:0;
padding:0:
}
html{
height:100%;
min-height:100%;
}
#wrapper{
height: 100%;
}
/*****************/
/*****HEADER******/
/*****************/
#header{
width: 100%;
margin-top:0px;
margin-bottom:2.5%;
margin-right:0px;
margin-left:0px;
padding-top:2%;
padding-bottom:0.5%;
padding-left:0%;
padding-right:0%;
border-bottom-style:solid;
border-bottom-color: black;
background: lightgrey;
}
#header>h1{
color:black;
margin: 0px 0px 0px 10px;
}
#header>p{
font-style: italic;
text-align: left;
color:black;
margin: 0px 0px 0px 20px;
}
/*****************/
/*****Body******/
/*****************/
#content{
position: relative;
height:100%;
min-height: 100%;
max-height: 100%;
}
#content>p{
margin-left:2.5%;
}
#intro_text{
font-style: italic;
margin-bottom:2.5%;
}
#main_nav{
margin-top:1%;
margin-left:5%;
}
/*****************/
/******FOOTER*****/
/*****************/
#footer{
font-style: italic;
text-align: center;
position: fixed;
background:#f00;
width:100%;
bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/main.css">
<script src="./js/script.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>My Web Space</h1>
<p> First HTML Page using Sublime Text</p>
</div>
<div id="content">
<p id=intro_text>Hello, my name is Alex and I am an aspiring web designer</p>
<p>Links to various test pages I am working with</p>
<ul id=main_nav>
<li><a href=test_link.html>Linking to another page test</a></li>
</ul>
</div>
<div id="footer">
<p id=footer_text>Me, 2016</p>
</div>
</div>
</body>
</html>
Using flexboxes, you can extend the content area to fill the wrapper
JSfiddle: jsfiddle.net/sabgu8r4
body {
height: 100%;
}
/*****************/
* {
margin: 0;
padding: 0:
}
html {
height: 100%;
min-height: 100%;
}
#wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
/*****************/
/*****HEADER******/
/*****************/
#header {
width: 100%;
margin-top: 0px;
margin-bottom: 2.5%;
margin-right: 0px;
margin-left: 0px;
padding-top: 2%;
padding-bottom: 0.5%;
padding-left: 0%;
padding-right: 0%;
border-bottom-style: solid;
border-bottom-color: black;
background: lightgrey;
}
#header>h1 {
color: black;
margin: 0px 0px 0px 10px;
}
#header>p {
font-style: italic;
text-align: left;
color: black;
margin: 0px 0px 0px 20px;
}
/*****************/
/*****Body******/
/*****************/
#content {
/*position: relative;*/
flex-grow: 1;
/*height: 100%;
min-height: 100%;
max-height: 100%;*/
}
#content>p {
margin-left: 2.5%;
}
#intro_text {
font-style: italic;
margin-bottom: 2.5%;
}
#main_nav {
margin-top: 1%;
margin-left: 5%;
}
/*****************/
/******FOOTER*****/
/*****************/
#footer {
font-style: italic;
text-align: center;
/*position: relative;
bottom: 0;*/
}
<div id="wrapper">
<div id="header">
<h1>My Web Space</h1>
<p> First HTML Page using Sublime Text</p>
</div>
<div id="content">
<p id=intro_text>Hello, my name is Alex and I am an aspiring web designer</p>
<p>Links to various test pages I am working with</p>
<ul id=main_nav>
<li><a href=test_link.html>Linking to another page test</a></li>
</ul>
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
</div>
<div id="footer">
<p id=footer_text>Me, 2016</p>
</div>
</div>
First time asking a question. I've looked this up exhaustively and I thiiiink I get what my problem is but I don't know how to fix it. I've tried multiple different things to no avail. I am trying to learn html and css and this is my first time hand-writing a site by myself, though I am doing it inside Dreamweaver.
I cannot get either the location nor the social media font awesome icons to become links. The urls are just generic at the moment and I added a border to the left and right floats so I could check they were in the right spot.
I think that what is happening is that the padding for my contentbox or my container are overlapping the footer, but I have changed the z-index and tried removing the padding all together and they still don't seem to work (and then the page doesn't look the way I wanted it) I have been searching for answers to this but, at this point, I think it might be something I specifically messed up or don't understand that is making this happen, so I wanted to reach out to all of you.
Here is my html (I hope this works!):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
</head>
<body>
<!---outer containers-->
<div id="container">
<div id="header">
<div id="logo">
</div>
<nav>
<ul>
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
<div id="contentbox">
<div id="content">
<div id="frontcontent">
<p>
<img id="sanjapic" src="Images/SanjaPicture.jpg"/>
<h1>Edgy Hair Stylist Serving the Denver Area</h1>
</p>
</div>
</div>
<footer>
<div id="social">
<a href="http://www.facebook.com">
<i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i>
</a>
<a href="http://www.yelp.com">
<i class="fa fa-yelp fa-2x" aria-hidden="true"></i>
</a>
<a href="http://www.instagram.com">
<i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
</a>
</div>
<div id="left">
<p>
<a href="http://www.googlemaps.com"><i class="fa fa-map-marker fa-3x" aria-hidden="true"></i>
Address: 657 Santa Fe Dr, Denver, CO 80204<br>
Phone:(303) 953-9486</a>
</p>
</div>
</footer>
</div>
</div>
</body>
</html>
and here is my css:
#charset "utf-8";
#import url(https://fonts.googleapis.com/css?family=Fjalla+One);
body {
background-image: url(Images/bgLarge.jpg);
background-repeat: no-repeat;
background-size: 100%;
padding: 0;
font-family:'Fjalla One', sans-serif;
font-style: normal;
font-weight: 400;
background-attachment: fixed;
margin:0px;
background-color: #2F2F2F;
}
#container {
width: 100%;
margin: 0 auto;
position: relative;
}
#header {
width: 100%;
height: 100px;
background-image: url(Images/toptent.png);
background-repeat: no-repeat;
position: relative;
background-size: contain;
z-index:50;
}
#logo {
background-image: url(Images/SanjaLogoGray.png);
height: 70px;
background-repeat: no-repeat;
z-index: 100;
width: 100%;
margin: 0 auto;
position:relative;
max-width: 250px;
display:block;
}
#contentbox {
width: 80%;
height:100%;
background-color: #ffffff;
margin: 0 auto;
position: relative;
max-width: 800px;
margin-top: -110px;
padding-top: 100px;
display: block;
z-index: -2000;
-webkit-box-shadow: 0px 5px 15px 10px #2F2F2F;
box-shadow: 0px 5px 15px 10px #2F2F2F;
}
#content {
margin-top: 30px;
padding:2%;
display: block;
}
#about {
position:relative;
margin:0;
left:-70px;
top:-8px;
}
#sanjapic {
height:auto;
width: 80%;
max-width:400px;
margin: 0 auto;
position:relative;
display:block;
padding-top:10px;
}
h1 {
font-size:1.2em;
text-align:center;
margin:0 auto;
}
#frontcontent h1 {
max-width:60%;
height: auto;
width:80%;
}
nav {
width: 80%;
background: #ffffff;
border-right: none;
margin: 0 auto;
max-width:800px;
margin-bottom:10px;
margin-top:10px;
}
nav ul {
overflow: hidden;
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
float: left;
text-align: center;
width: 25%; /* fallback for non-calc() browsers */
width: calc(100% / 4);
box-sizing: border-box;
margin-bottom:20px;
}
nav ul li:first-child {
border-left: none;
}
nav ul li a {
display: block;
text-decoration: none;
color: #000000;
padding:10px;
}
nav ul li a:hover {
display: block;
text-decoration: none;
color: #312847;
border: 2px solid #000000;
border-radius: 5px;
-webkit-box-shadow: 2px 2px 5px #617574;
box-shadow: 2px 2px 5px #617574;
}
nav ul li a:active {
background-color:#7DB4B9
}
footer {
background-color:#333333;
height:80px;
width:100%;
margin:0 auto;
z-index:3000;
position:relative;
height:100%;
}
footer a{
color:#ffffff;
padding:5px;
border:#E9191D thick solid;
display:inline-block;
text-decoration:none;
}
#social {
float:right;
padding:20px;
}
#left {
color:#ffffff;
padding:5px;
border:#E9191D thick solid;
display:inline-block;
font-size:.7em;
}
Your issue is this following statement on #contentbox:
z-index: -2000;
That's definitely something you DON'T want to do. Your bare minimum z-index for visible items should always be 0, and you should work your way up from that.
Also avoid using too big numbers as it's harder to keep tabs.
Update: here's the working version of your code http://jsbin.com/zatogisepo/edit?html,css,output
Here : http://thunderstorm999.byethost9.com/
Oberserve the footer text.It is not the same in IE as in the Chrome and Firefox browser.My font is not displaying as it should in IE. Also due to this the alignment in IE is not the same as it is in Firefox and Chrome.Also the layout appears a bit different in IE and in other browser.Please tell me where am I going wrong.What is the issue I am facing for IE.Please follow the link above.
#font-face {
font-family: 'footerFont';
src: url('UniversLTStd-LightCn.eot'),url('UniversLTStd-LightCn.otf'),url('UniversLTStd-LightCn.ttf');
}
header{
width:1366px;
}
.logo{
padding-left:80px;
margin-left:36px;
margin-bottom:10px;
margin-top:36px;
}
.share{
list-style:none;
float:right;
margin-right:60px;
margin-left:36px;
margin-top: -36px;
}
.share li{
display:inline;
padding-right:20px;
}
aside{
margin-left:-10px;
border-right: 1px dotted red;
height:622px;
width:128px;
margin-top:-7px;
}
aside li{
width:60px;
margin-left:1px;
}
.navigation{
list-style:none;
padding-top:10px;
}
.navigation li{
text-align:center;
margin-bottom:20px;
}
.social_icons{
list-style:none;
padding-top:10px;
margin-top: 88px;
}
.social_icons li{
text-align:center;
margin-bottom:10px;
}
.main-image .image1{
position: absolute;
border-top-style: solid;
border-top-width: 0px;
margin-left: 119px;
top: 78px;
}
footer{
width: 1365px;
font-size:11.333333px;
padding:0;
height: 30px;
border-top: 1px dotted red;
font-family:"footerFont",Times New Roman, Georgia, Serif;
position:relative;
}
.left_footer{
list-style:none;
margin-left:-42px;
margin-bottom:0px;
margin-top:-20px;
}
.left_footer p{
display:inline;
float:left;
}
.footer_p1{
margin-left: 108px;
padding-right:15px;
margin-top:18px;
}
.footer_p2{
margin-top:18px;
margin-left: 2px;
}
.right_footer{
list-style:none;
margin-bottom:0px;
margin-top:-20px;
margin-right:-42px;
}
.right_footer p{
display:inline;
float:right;
position:absolute;
}
.footer_p3
{
right:16px;
margin-top:18px;
}
.footer_p4
{
right:164px;
margin-top:18px;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Speck</title>
<link rel="stylesheet" type="text/css" href="normalize.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<!--[if lt IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$(function(){
$('#play').click(function() { $('#slider').cycle('resume'); return false; });
$('#pause').click(function() { $('#slider').cycle('pause'); return false; });
$('#slider').cycle({
fx: 'scrollHorz',
next: '#next',
prev: '#prev',
pager: '#pager',
timeout: 3000,
speed: 900
});
});
</script>
<style type="text/css">
#hero {
width: 1245px;
height: 622px;
display: block;
position: absolute;
top: 78px;
left: 127px;
}
#slider {
width: 1245px;
height: 622px;
display: block;
position: absolute;
overflow: hidden;
}
.info {
width: 960px;
height: 80px;
display: block;
position: relative;
bottom: 100px;
background: rgba(102,204,204,.2);
z-index: 99;
}
.info h2 {
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
color: #FFF;
padding: 15px 0 0 20px;
}
.info p {
font-family: sans-serif;
font-size: 15px;
font-weight: ligher;
color: #FFF;
padding: 0 0 0 20px;
line-height: 1px;
}
#play {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
display: block;
position: absolute;
top: 0;
right: 44px;
background: rgba(102,204,0,.2);
color: #FFF;
cursor: pointer;
z-index: 999;
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
#pause {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
display: block;
position: absolute;
top: 0;
right: 88px;
background: rgba(102,204,0,.2);
color: #FFF;
cursor: pointer;
z-index: 999;
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
#next {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
display: block;
position: absolute;
top: 0;
right: 0;
background: rgba(102,204,0,.2);
color: #FFF;
cursor: pointer;
z-index: 999;
}
#prev {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
display: block;
position: absolute;
top: 0;
right: 133px;
background: rgba(102,204,0,.2);
color: #FFF;
cursor: pointer;
z-index: 999;
}
#pager {
width: 100%;
text-align: center;
display: block;
position: absolute;
cursor: pointer;
z-index: 999;
}
#pager a {
font-size: .0em;
color: transparent;
width: 10px;
height: 10px;
display: inline-block;
position: relative;
border: 1px solid #FFF;
border-radius: 20px;
background: transparent;
margin: 10px;
}
#pager a.activeSlide { background: #FFF;}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">
<img src="images\logo.png"/>
</div>
<ul class="share">
<li><img class="image1" src="images\fade.png"/></li>
<li><img class="image2" src="images\cart.png"/></li>
<li><img class="image3" src="images\share.png"/></li>
</ul>
</header>
<aside>
<ul class="navigation">
<li><img id="image1" src="images\explore.png"/></li>
<li><img src="images\material.png"/></li>
<li><img src="images\team.png"/></li>
<li><img src="images\contact.png"/></li>
<li><img src="images\merchandise.png"/></li>
</ul>
<ul class="social_icons">
<li><img id="image1" src="images\fb.png"/></li>
<li><img src="images\vimeo.png"/></li>
<li><img src="images\linkedin.png"/></li>
</ul>
</aside>
<div id="hero">
<div id="pager"></div>
<div id="pause">≈</div>
<div id="play">Δ</div>
<div id="next">〉</div>
<div id="prev">〈</div>
<div id="slider">
<div class="items">
<img src="01-secret-gathering.jpg">
<div class="info">
<h2>The Secret Gathering</h2>
<p>This is the moment, captured in time. Learn More</p>
</div><!--End--info-->
</div><!--End--Items-->
<div class="items">
<img src="02-sky-race.jpg">
<div class="info">
<h2>The Sky Race Begins</h2>
<p>This is the moment, captured in time. Learn More</p>
</div><!--End--info-->
</div><!--End--Items-->
<div class="items">
<img src="03-sky-wall.jpg">
<div class="info">
<h2>The Sky Wall Rising</h2>
<p>This is the moment, captured in time. Learn More</p>
</div><!--End--info-->
</div><!--End--Items-->
<div class="items">
<img src="04-sun-ring.jpg">
<div class="info">
<h2>The Sun has Rings</h2>
<p>This is the moment, captured in time. Learn More</p>
</div><!--End--info-->
</div><!--End--Items-->
<div class="items">
<img src="05-moon-duality.jpg">
<div class="info">
<h2>The Moon Duality</h2>
<p>This is the moment, captured in time. Learn More</p>
</div><!--End--info-->
</div><!--End--Items-->
</div><!--End--Slider-->
</div>
</div>
<footer>
<ul class="left_footer">
<li><p class="footer_p1">© COPYRIGHT 2015 SPECK</p></li>
<li><p class="footer_p2">TERMS & CONDITIONS</p></li>
</ul>
<ul class="right_footer">
<li><p class="footer_p3">DEVELOPED BY IDEATE FUSION</p></li>
<li><p class="footer_p4">DESIGNED BY SPECK</p></li>
</ul>
</footer>
</body>
</html>
you should use this method for path .EOT font for IE :
src: url('../font/Yekan.eot?#iefix') format('embedded-opentype')
Check the IE console (after pressing F12). On your page I got:
CSS3114: #font-face failed OpenType embedding permission check.
Permission must be Installable.
UniversLTStd-LightCn.otf
This might required editing the otf font. See for example.
Also at w3schools on fontface:
1 Tip: Use lowercase letters for the font URL. Uppercase letters can give unexpected results in IE!
2 IE: The font format [TTF/OTF] only works when set to be "installable".
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;
}
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;
}