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;
}
Related
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>
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>
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'm folowing this tutorial for making a footer but the result is not as expected:
My html and css are in this JSFiddle
or below:
<body>
<div class="wrapper">
<div id="container">
<div id="header">
<div class="wrap">
<div id="menuProfile">
<div id="logotext">K-Panel • Kerio Tools Management</div>
</div>
</div>
</div>
<div class="fix"></div>
<div id="subheader">
<div id="submenu" class="wrap">
<div id="logocliente">
<a href="<?php echo $this->baseUrl(); ?>/"><img height="50"
id="logoIscrittoTestata"
src="<?php echo $this->baseUrl(); ?>/KPanel_logo_2014_58x224.png"></a>
</div>
</div>
</div>
<div class="fix separatore"></div>
<div id="page">
<div id="right">
</div>
</div>
<div id="push"></div></div>
<div id="footer">
<strong>Freelands</strong> > Via Emilia Ponente, 479, 40132 Bologna (Italy) > Tel +39 051 7402558 > Fax +39 051 729153 > C.F. e P.IVA 03236491209 > <a
id="footerEmailAzienda" href="mailto:info#freelands.it">info#freelands.it</a>
</div>
CSS:
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,font,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
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: middle;
background: transparent;
}
body {
font-family: Helvetica, Verdana, Arial, Tahoma;
font-size: 11px;
line-height: 1;
text-align: center;
color: #404040;
}
html,body {
height: 100%;
margin: 0px;
}
#container {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
}
#footer {
background-color: #0082C0;
color: #FFFFFF;
padding-top: 15px;
}
* {
margin: 0;
}
body, html {
width: 100%;
height: 100%;
font-size: 16px;
font-family: calibri, gill sans, arial;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -35px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 35px; /* .push must be the same height as .footer */
}
#footer{
font-size: 12px;
font-family: calibri, gill sans, arial;
color: black;
text-align: center;
width: 100%;
}
#header{
display:block;
clear:both;
margin-top:20px;
}
You need to add a position:fixed; to the footer to stay it fixed. To make it stay at the bottom, add a bottom:0;
WORKING DEMO
The Code change:
#footer{
font-size: 12px;
font-family: calibri, gill sans, arial;
color: black;
text-align: center;
width: 100%;
position:fixed;
bottom:0px;
}
Hope this helps.
For stick you footer at the bottom you need to make it position:fixed bottom:0; and add margin-top:(height of your footer);
#footer {
background-color: #0082C0;
color: #FFFFFF;
padding-top: 15px;
position:fixed;
bottom:0;
margin-top:30px; /* height of the footer */
}
JsFiddle
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.