I've got a small problem, I want my footer to stay at the bottom of the screen with position: absolute. But my margin: auto to put it in the middle of the screen isn't working anymore.
html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>
<link rel="shortcut icon" href="../IMAGES/favicon.ico">
<title>TEST</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../css/stylesheet.css">
</head>
<body>
<div id="header">
<div id="logo">
<img src="../IMAGES/logo.png" />
</div>
<div id="logotitel">
Den Allerstrafste "Ful-Ambi" Live-Band van groot Antwerpen en omstreken!
</div>
</div>
<div id="nav">
<div id="links">
<div class="link">Home</div>
<div class="link">Wie is wie</div>
<div class="link">Foto's</div>
<div class="link">Repertoire</div>
<div class="link">Links</div>
<div class="link">Contact</div>
</div>
</div>
<div class="clear"></div>
<div id="content">
TEST
</div>
<div class="clear"></div>
<div id="footer">
<div id="copy">
Developed by Yoshi © vAntstAd
</div>
</div>
</body>
</html>
CSS:
/* PAGE LAYOUT */
html
{
padding: 0px;
margin: 0px;
}
body
{
background-image: url(../IMAGES/background.png);
padding: 0px;
margin: 0px;
color: white;
font-family: 'Source Sans Pro', serif, sans-serif;
}
.clear
{
clear: both;
}
/* HEADER */
#header
{
width: 1100px;
height: 150px;
background-color: #282828;
margin: auto;
border-bottom: solid;
border-color: red;
}
#logo
{
width: 283px;
height: 100px;
margin: auto;
}
#logotitel
{
width: 1100px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: x-large;
}
/* NAV */
#nav
{
width: 1100px;
height: 50px;
margin-top: 25px;
margin-right: auto;
margin-left: auto;
margin-bottom: 25px;
background-color: red;
}
#links
{
width: 600px;
height: 50px;
margin: auto;
}
.link
{
width: 100px;
height: 50px;
line-height: 50px;
float: left;
text-align: center;
color: white;
text-decoration: none;
}
.link:hover
{
color: #282828;
text-decoration: underline;
}
/* CONTENT */
#content
{
width: 1100px;
height: auto;
margin: auto;
color: #282828;
position: relative;
}
/* FOOTER */
#footer
{
width: 1100PX;
height: 50px;
position: absolute;
bottom: 0;
margin: auto;
background-color: #282828;
}
#copy
{
width: auto;
float: right;
margin-right: 5px;
height: 50px;
line-height: 50px;
}
Since you know the width of the footer (1100px), you can just do a left:50%;margin-left:-550px to center it.
Example: Centering an absolutely positioned element
http://jsfiddle.net/vdWQG/
Therefore, footer would become:
#footer
{
width: 1100PX;
height: 50px;
position: absolute;
bottom: 0;
left:50%; /* Add this */
margin-left:-550px; /* Add this (this is half of #footers width) */
background-color: #282828;
}
If you want the element to stick on the bottom of the page as the user scrolls down, use position: fixed instead of position:absolute
To have a footer at the bottom, centered horizontally, you can apply the following CSS:
footer{
width: 100%;
max-width: 600px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
}
This will center the fixed element, but will also keep it responsive, as it will shrink when the browser has become less wide than the footer.
See this Fiddle for an example
Related
I used the below codes to create a HTML page where I kept header and footer tags in body tag. The height of header is 16% and footer is 5%. Now I inserted a div tag in body and gave a height of 79%(100-16-5%) but when I ran the code the height of the div tag is zero, why is it and how to align the div tag between header and footer.
Code:
body{
margin: 0 0 0 0;
background-color: #E6E6FA;
}
header{
position: absolute;
background-color: red;
height: 16%;
width: 100%;
margin-bottom: 5px;
top: 0;
}
.logo{
position:absolute;
background-color:#4CD4CB;
height:100%;
width: 10%;
}
#head_img{
width: 120px;
height: 120px;
display: block;
margin-left: auto;
margin-right: auto;
}
.hd_div{
position:absolute;
height:40px;
width: 90%;
right:0;
overflow: hidden;
}
#hd_div1{
background-color: red;
top: 0;
}
#hd_div2{
background-color: white;
top: 33.3333%;
text-align: center;
}
#hd_div3{
background-color: red;
top: 66.6666%;
}
.body_1{
background-color:blueviolet;
height: 79%
}
footer{
background-color: red;
position: absolute;
height:5%;
width: 100%;
bottom: 0;
}
<header>
<div id='hd_div1' class='hd_div'></div>
<div id='hd_div2' class='hd_div'>Hello This a test text </div>
<div id='hd_div3' class='hd_div'></div>
<div class='logo'>
<img id='head_img' src='.\search-logos.jpeg' alt='comp_logo' >
</div>
</header>
<div class='body_1'></div>
<footer>
<div id='foot1'></div>
</footer>
Image:
.body_1 has hight 0 because you body has height 0.
Both header and footer are positioned absolutely which ignores body in this case.
Simple solution will be to tell body to have a height of 100vh (whole window height) but you will have to apply margin from top to .body_1 so it will not be placed under header
Using position: absolute when it is not necessary is overall a bad approach to problem.
A god solution will be to set body to display: grid which has been created for this type of job.
more about grid
In this snipper I have added grid to body element and removed heights from header, .body_1 and footer (their height is now set with grid-template-rows so there is no point to set them in those elements).
body{
margin: 0 0 0 0;
background-color: #E6E6FA;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 16% auto 5%;
height: 100vh;
}
header{
background-color: red;
width: 100%;
position: relative;
}
.body_1{
background-color:blueviolet;
}
footer{
background-color: red;
width: 100%;
}
.logo{
position:absolute;
background-color:#4CD4CB;
height:100%;
width: 10%;
}
#head_img{
width: 120px;
height: 120px;
display: block;
margin-left: auto;
margin-right: auto;
}
.hd_div{
position:absolute;
height:40px;
width: 90%;
right:0;
overflow: hidden;
}
#hd_div1{
background-color: red;
top: 0;
}
#hd_div2{
background-color: white;
top: 33.3333%;
text-align: center;
}
#hd_div3{
background-color: red;
top: 66.6666%;
}
<header>
<div id='hd_div1' class='hd_div'> </div>
<div id='hd_div2' class='hd_div'>Hello This a test text </div>
<div id='hd_div3' class='hd_div'></div>
<div class='logo'>
<img id='head_img' src='.\search-logos.jpeg' alt='comp_logo' >
</div>
</header>
<div class='body_1'></div>
<footer>
<div id='foot1'></div>
</footer>
This is exactly your code, and the body_0 is blueviolet:
body{
margin: 0 0 0 0;
background-color: #E6E6FA;
}
header{
position: absolute;
background-color: red;
height: 16%;
width: 100%;
margin-bottom: 5px;
top: 0;
}
.logo{
position:absolute;
background-color:#4CD4CB;
height:100%;
width: 10%;
}
#head_img{
width: 120px;
height: 120px;
display: block;
margin-left: auto;
margin-right: auto;
}
.hd_div{
position:absolute;
height:40px;
width: 90%;
right:0;
overflow: hidden;
}
#hd_div1{
background-color: red;
top: 0;
}
#hd_div2{
background-color: white;
top: 33.3333%;
text-align: center;
}
#hd_div3{
background-color: red;
top: 66.6666%;
}
.body_1{
background-color:blueviolet;
height: 79%
}
footer{
background-color: red;
position: absolute;
height:5%;
width: 100%;
bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css">
<link rel='shortcut icon' type='image/x-icon' href='data:image/png;base64,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' />
<title>Search</title>
</head>
<body>
<header>
<div id='hd_div1' class='hd_div'> </div>
<div id='hd_div2' class = 'hd_div'>Hello This a test text </div>
<div id='hd_div3' class = 'hd_div'></div>
<div class ='logo'>
<img id='head_img' src ='.\search-logos.jpeg' alt='comp_logo' >
</div>
</header>
<div class='body_1'> </div>
<footer>
<div id='foot1'></div>
</footer>
</body>
</html>
html * {
box-sizing: border-box;
padding:0;
margin:0;
}
html,
body {
height: 100%;
font-family: 'Roboto', sans-serif;
color:#666666;
line-height: 1.7em;
}
body {
/* Location of the image */
background-image: url(1.jpg);
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
background-color: #464646;
}
#full_2, #full_3, #full_4{
position: relative;
height: 100vh;
width: 100%;
}
#full_1 {
position: relative;
height: 100vh;
width: 100%;
}
#full_1 {
background: black;
opacity: 0.36;
}
#full_4 {
background: magenta;
}
#full_2 {
background: white;
}
#full_3 {
background: lightgray;
}
.arrow-down {
position: absolute;
bottom: 10px;
width: 45px;
height: 45px;
left: calc(50% - 16px);
}
.arrow-down a img {
width: 100%;
}
.logo{float: left; width: 30%;height: 100%;padding-top: 25px;padding-left: 25px;}
.main-nav {float: right; width: 60%; height: 100%;}
.menu {
background-color: #373737;
left: -285px;
height: 100%;
position: fixed;
width: 285px;
z-index: 5;
}
#main-header a{
text-decoration: none;
color: #ffffff;
font-size:2.0em;
z-index: 10;
opacity: 1;
}
#main-header a:hover{
color: #585858;
}
#main-header {
position: absolute;
width:100%;
height:70px;
top:0;
background-color: rgba(0,0,0,0);
z-index: 100;
}
#main-header ul li {
display:inline;
padding:20px 20px;
}
#main-header ul {
float: right;
margin-top:0px;
padding:0;
padding-top: 25px;
padding-right: 25px;
text-align: right;
}
#container{
width: 90%;
}
#lupa{
float: right;
width: 40%;
height: 100%;
}
#lupa img{516 918
width: 90px;
height: 492px;
float: right;
padding-top: 90px;
}
#content_1{
float: left;
height: 100%;
width: 60%;
}
#content_container{
padding-top: 125px;
height: 100%;
width: 100%;
padding-left: 35%;
}
#nadpis1{
margin-bottom: 45px;
}
#nadpis1 img{
width: 231px;
height: 44px;
}
#content_1_1 a{
color: #014FC4;
text-decoration: none;
font-weight: 800;
font-size: 25px;
}
#content_1_1 h2, p{
color: #2F2F2F;
font-size: 25px;
text-decoration: none;
}
#footer_left{
height: 90%;
float: left;
width: 40%;
}
.footer_1, .footer_2{
height: 100%;
width: 50%;
}
.footer_1{
float: left;
}
.footer_2{
float:right;
}
.footer_3{
}
#full_5{
height:100vh;
background-color: #0F032D;
bottom: 0;
}
.footer_bottom{
color: white;
height: 10%;
width: 100%;
text-align: center;
clear: both;
bottom: 0;
padding-bottom: 10px;
z-index: 10;
}
#full_5 ul{
padding-right: 25px;
padding-top: 25px;
}
#full_5 ul li{
padding-top: 25px;
}
#full_5 ul li a{
color: white;
text-decoration: none;
font-size: 16px;
}
#media only screen and (min-width: 320px) and (max-width: 768px) {
html * {
box-sizing: border-box;
padding:0;
margin:0;
}
html,
body {
height: 100%;
font-family: 'Roboto', sans-serif;
color:#666666;
line-height: 1.7em;
}
body {
/* Location of the image */
background-image: url(1.jpg);
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
background-color: #464646;
}
#full_2, #full_3, #full_4{
position: relative;
height: 100vh;
width: 100%;
}
#full_1 {
position: relative;
height: 100vh;
width: 100%;
}
#full_1 {
background: black;
opacity: 0.36;
}
#full_4 {
background: magenta;
}
#full_2 {
background: white;
}
#full_3 {
background: lightgray;
}
.arrow-down {
position: absolute;
bottom: 10px;
width: 45px;
height: 45px;
left: calc(50% - 16px);
}
.arrow-down a img {
width: 100%;
}
#full_2 .arrow-down a img {
width: 100%;
display: none;
}
.logo{float: left; width: 30%;height: 100%;padding-top: 25px;padding-left: 25px;}
.main-nav {float: right; width: 60%; height: 100%;}
.menu {
background-color: #373737;
left: -285px;
height: 100%;
position: fixed;
width: 285px;
z-index: 5;
}
#main-header a{
text-decoration: none;
color: #ffffff;
font-size:2.0em;
z-index: 10;
opacity: 1;
}
#main-header a:hover{
color: #585858;
}
#main-header {
position: absolute;
width:100%;
height:70px;
top:0;
background-color: rgba(0,0,0,0);
z-index: 100;
}
#main-header ul li {
display:inline;
padding:20px 20px;
}
#main-header ul {
float: right;
margin-top:0px;
padding:0;
padding-top: 25px;
padding-right: 25px;
text-align: right;
}
#container{
width: 95%;
margin-right: auto;
margin-left: auto;
}
#lupa{
text-align: center;
width: 100%;
height: 100%;
float: none;
}
#lupa img{516 918
width: 90px;
height: 492px;
float: none;
padding-top: 0px;
}
#content_1{
height: 100%;
width: 100%;
text-align: center;
}
#content_container{
padding-top: 100px;
height: 100%;
width: 100%;
padding-left: 0px;
margin-bottom: 20px;
}
#nadpis1{
margin-bottom: 45px;
}
#nadpis1 img{
width: 231px;
height: 44px;
}
#content_1_1 a{
color: #014FC4;
text-decoration: none;
font-weight: 800;
font-size: 25px;
}
#content_1_1 h2, p{
color: #2F2F2F;
font-size: 25px;
text-decoration: none;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Add gospel Přerov</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link
href='http://fonts.googleapis.com/css?family=Roboto:300&subset=latin,cyrillic-ext'
rel='stylesheet' type='text/css'>
</head>
<div class="menu" >
</div>
<div id="wrapper">
<div id="main-header">
<div class="logo">
<a href="http://david.addagio.cz/gospel"><img src=""
style="max-width: 90%; height: auto;" alt="gospel logo" /></a>
</div>
<!--/.logo-->
<div class="main-nav">
<nav class="nav">
<ul>
<li class="nav-item">Aktuálně</li>
<li class="nav-item">O nás</li>
<li class="nav-item">Kontakt
<li class="nav-item">Foto/Video
</ul>
</nav>
</div>
</div>
<div id="full_1">
<div class="arrow-down">
<img src="arrow_down.png" alt="arrow-down">
</div>
</div>
<div id="full_2">
<div id="container">
<div id="content_1">
<div id="content_container">
<div id="nadpis1">
<img src="where.png" alt="where">
</div>
<div id="content_1_1">
<p>Už z našeho jména vyplívá, že se nacházíme
ve městě Přerov. Klikněte na lupu a získáte
přesnou navigaci.
Jsme od Vás příliš daleko?
kontaktujte nás zde</p>
</div>
</div>
</div>
<div id="lupa">
<img src="lupa.png">
</div>
</div>
<div class="arrow-down">
<img src="arrow_down_black.png" alt="arrow-down">
</div>
</div>
<div id="full_3">
<div class="arrow-down">
<img src="arrow_down.png" alt="arrow-down">
</div>
</div>
<div id="full_4">
<div class="arrow-down">
<img src="arrow_down.png" alt="arrow-down">
</div>
</div>
<div id="full_5">
<div id="footer_left">
<div class="footer_1">
<ul>
<li>Podmínky použití</li>
<li>Kontakty</li>
<li>Novinky</li>
<li>Fotky</li>
</ul>
</div>
<div class="footer_2">
</div>
</div>
<div class="footer_3">
</div>
<div class="footer_bottom">
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="main.js">
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('body').animate({
left: "285px"
}, 200);
});
/* Then push them back */
$('.icon-close').click(function() {
$('.menu').animate({
left: "-285px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
});
};
</script>
</body>
</html>
Hi,
Well, i am making a website.. it contains 5 divs, (full_1, full_2, full_3, full_4, full_5), all those divs are height:100vh; and width:100%;
there is a
body {
/* Location of the image */
background-image: url(1.jpg);
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
background-color: #464646;
}
now, everything just works great, but the last div has a little line below it, like 1px line (this line looks like there is a space at the bottom, below the div, cause the line looks like the background image mentioned before...)
This problem I have seen only in Microsoft Edge, but I only tried Edge and Chrome(Chrome displays it really great)
Here are photos from a) Edge , b) Chrome.
Hope, you can see it...
Also... the code snippet is maybe wrong... but it could help.
PS: Site is optimized for phones and tablets.
PPS: for clear look at the website, visit: http://david.addagio.cz/gospel
Just give boxshadow of 1px with same color on bottom
box-shadow: #0f032d 0px 1px 0;
I would like to float two divs on html page like that: http://5toneface.eu/temp/
(ignore php-warnings). But between ruutLeft and ruutRight div there is a small gap or white border-like stripe. How to get rid of it? so the ruutLeft and ruutRight divs sides would be side-to-side exactly?
html is:
<!DOCTYPE html>
<html lang="et">
<head>
<title>Dynamint</title>
<link rel="stylesheet" href="style.css" type="text/css" >
<link rel="stylesheet" href="navistyle.css" type="text/css" >
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<div id="wrp">
<div id="header"><?php include("includes/header.php"); ?></div>
<div id="container">
<div class="ruutLeft">ruutLeft</div>
<div class="ruutRight">ruutRight</div>
<div class="contentLeft"><?php include("includes/contentleft.php"); ?></div>
</div> <!-- end container -->
<footer id="footerTop"><?php include("includes/footer.php"); ?></footer>
<!-- siia tuleb veel footerbottom -->
<footer id="footerBottom">
<p id="bottomp">© 2015 by WAHT? mööbel. All rights reserved</p>
</div>
</div> <!--end wrp -->
</body>
</html>
and css for this is also pretty simple:
* {
margin: 0;
padding: 0;
}
body {
font-family: Calibri light, Georgia, Verdana, arial;
background-color: #edeff0;
font-size: 105%;
color: #303030;
line-height: 1.4;
margin: 0;
}
#wrp {
width: 100%;
margin-left: auto;
margin-right: auto;
}
#header {
width: 100%;
height: 96px;
position: fixed;
top: 0px;
background-color: #fff;
}
#logo {
float: left;
margin: 2% 0 0 5%;
}
#container{
width: 100%;
height: auto;
margin-top: 0;
background-color: #edeff0;
}
.ruutLeft {
width: 40%;
height: 320px;
margin-left: 10%;
margin-top: 145px;
background-color: #8AC0CA;
float: left;
}
.ruutRight {
width: 40%;
height: 320px;
margin-right: 10%;
margin-top: 145px;
background-color: #CCCBC9;
float: right;
}
.contentLeft {
width: 80%;
margin-left: auto;
margin-right: auto;
min-height: 400px;
padding: 1% 1% 4% 1%;
font-size: 95%;
height: auto;
}
Float both your elements left.
Change .ruutRight to float:left - This will fix the issue.
So my website is www.jacobweyer.com
When the window becomes a certain small size, it creates a large gray area on the right side, where the header and footer wont expand to cover. How do I get rid of the large content less area while still leaving a small buffer area? I'm also having an issue where I want to have my social media buttons as far right as possible, however I want it to still stay as far right as possible until it would possibly overlap the title.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alpha Tau Omega | Theta Omega</title>
<link rel="stylesheet" type="text/css" href="ATOStyle.css" />
<link href='http://fonts.googleapis.com/css?family=Quattrocento+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="innerheader">
<div id="banner">
</div><!-- End banner-->
<div id="title">
</div> <!--End title -->
<div id="navbar">
<ul>
<li>Home</li>
<li>Rush</li>
<li>History</li>
<li>Alumni</li>
<li>Calendar</li>
<li>Media</li>
</ul>
</div> <!--End navbar -->
</div><!-- End innerheader -->
<div id="outersocial">
<div id="social">
<ul>
<li>
<img src="./pieces/socialmedia/facebook.png" />
</li>
<li>
<img src="./pieces/socialmedia/twitter.png" />
</li>
<li>
<img src="./pieces/socialmedia/youtube.png" />
</li>
</ul>
</div> <!-- End social-->
</div> <!--End outersocial -->
</div> <!-- End header -->
<div id="pagecenter">
</div> <!-- End pagecenter -->
<div id="footer">
<div id="footercontent">
<div id="footerbanner1">
</div> <!--end footerbanner1-->
<div id="footernav">
<p> Alpha Tau Omega Fraternity | Theta Omega Chapter | Northern Kentucky University | Contact Us!</p>
</div> <!-- End footernav-->
<div id="footerbanner2">
</div> <!-- End footerbanner2-->
</div> <!--end footercontent -->
</div> <!--end footer-->
</body>
</html>
CSS
body {
height: 100%;
width: 100%;
margin: 0px 0px 0px 0px;
background-color: #808080
}
/* Header Container */
#header {
background:url(./pieces/headerBar.png);
position: static;
width:100%;
height:139px;
padding:0;
z-index: 10000;
}
/* Container inside the header for sorting elements */
#innerheader {
height: 139px;
width: 750px;
margin-right: auto;
margin-left: auto;
position: relative;
}
/* The following is the Nav Bar */
#navbar {
position: relative;
top: 76px;
left: 210px;
margin-left: inherit;
}
#navbar ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#navbar ul li {
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
display: inline-block;
width: 50px;
height: 20px;
margin: 10px;
}
#navbar ul li a {
text-decoration: none;
color: black;
}
#navbar ul li a:hover {
color: white;
}
/*The following is the Intertwine Banner */
#banner {
background:url(./pieces/banner.png);
position: absolute;
margin-left: 0px;
min-height: 193px;
min-width: 183px;
background-repeat: no-repeat;
}
/* Alpha Tau Omega - Theta Omega Title */
#title {
position: absolute;
background: url(./pieces/name.png);
margin-left: 190px;
min-height: 75px;
min-width: 285px;
}
/* The following are the social media icons */
#outersocial{
position:;
left:50%;
height: 139px;
width:50%;
}
#social {
position: absolute;
top: 2px;
right: 10px;
}
#social ul {
list-style-type: none;
}
#social li{
display: inline-block;
width: 36px;
height: auto;
margin: 5px;
}
#social img {
width: 36px;
height: auto;
}
/* Pagecenter is where the content will be on the web page*/
#pagecenter {
position: static;
margin-right: auto;
margin-left: auto;
height: 50px;
width: 750px;
min-height: 1000px;
background:url(./pieces/mainBG.png);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
margin-top: -19px;
z-index:50
}
/* The following is the footer and its content */
#footer {
margin-top: 20px;
padding-top: 30px;
background: url(./pieces/footerbar.png);
height: 77px;
width: 100%;
margin-right: auto;
margin-left: auto;
clear: both;
bottom: 0px;
position: static;
}
#footerbanner1 {
background: url(./pieces/footerbanner.png);
position: absolute;
min-height: 95px;
min-width: 90px;
background-repeat: no-repeat;
margin-top: -30px;
left: 10px;
}
#footerbanner2 {
background: url(./pieces/footerbanner.png);
position: absolute;
min-height: 95px;
min-width: 90px;
background-repeat: no-repeat;
margin-top: -30px;
right: 10px;
}
#footercontent {
width: 100%;
height: 100%;
right: 5px;
left: 5px;
}
#footernav {
font-family: 'Quattrocento Sans', sans-serif;
position: absolute;
text-align: center;
right: 15%;
left: 15%;
}
#footernav p {
margin: 0px;
padding-right: 25%;
padding-left: 25%;
font-family: 'Quattrocento Sans', sans-serif;
color: white;
position: relative;
}
#footernav a {
font-family: 'Quattrocento Sans', sans-serif;
color: white;
}
#footernav a:hover {
color: orange;
}
An object is just a special kind of data, with properties and methods.
Object properties can be any of the three primitive data types, or any of the abstract data types, such as another object. Object properties are usually variables that are used internally in the object's methods, but can also be globally visible variables that are used throughout the page.
The syntax for adding a property to an object is:
objectName.objectProperty = propertyValue;
Example1. :
person=new Object();
person.firstname="stack";
person.lastname="overflow";
person.age=50;
person.color="black";
Example2 :
var message="Hello India!";
var x=message.length;
here .length is the property of object message.
I hope it will be helpful to you.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
background-color: #f2f2f2;
}
#content{
background-color: white;
border: 1px solid gray;
width: 60%;
height: auto;
display: block;
position: relative;
left: 50%;
margin-left: -30%;
padding: 10px;
z-index: 100;
margin-top: 20px;
}
html, body {
height: auto;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom: 150px;
} /* must be same height as the footer */
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
}
.instructions{
margin-top: 50px;
font-family: serif;
font-size: medium;
width: 50%;
left: 50%;
margin-left: -25%;
position: relative;
margin-bottom: 60px;
}
.repbanner{
background-color: red;
width: 108%;
height: auto;
left: 50%;
margin-left: -54.5%;
margin-top: 40px;
position: relative;
z-index: 200;
border: 1px #a70000 solid;
text-align: center;
color: white;
font-size: smaller;
text-transform: uppercase;
padding-top: 3px;
padding-bottom: 3px;
}
.dembanner{
background-color: blue;
width: 108%;
height: auto;
left: 50%;
margin-left: -54.5%;
margin-top: 40px;
position: relative;
z-index: 200;
border: 1px navy solid;
text-align: center;
color: white;
font-size: smaller;
text-transform: uppercase;
padding-top: 3px;
padding-bottom: 3px;
}
.introbanner{
background-color: white;
width: 108%;
height: auto;
left: 50%;
margin-left: -54.5%;
margin-top: 40px;
position: relative;
z-index: 199;
border: 1px gray solid;
text-align: center;
color: black;
font-size: smaller;
text-transform: uppercase;
margin-bottom: 10px;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
#animals{
width: 100%;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
text-align: center;
position: relative;
display: block;
height: auto;
}
.animalmugshot{
width: 150px;
height: 150px;
float: left;
position: relative;
}
img{
position: relative
}
</style>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="main">
<div id="content">
<div class="repbanner">
INTRODUCTION
</div>
<div class="instructions">
Hello and thanks for using the Chrome extension Political Animals. Below are the instructions on how the piece works. Enjoy!
<br/>
<br/>
</div>
<div class="dembanner">
Instructions
</div>
<div class="instructions">
Here's how the project works!
1. Surf the Web. Try any website you would like.
2. You should be redirected to a news site. Do not be alarmed!
3. Enjoy!
</div>
<div class="introbanner">
Meet the Cast
</div>
<div id="animals">
<div class="animalmugshot">
<img src="animalshots/thumbnails/PoliticalAnimal.png" alt="Charlie the CEO"/><br/><p>Charlie the CEO</p>
</div>
<div class="animalmugshot">
<img src="animalshots/thumbnails/PoliticalFox.png" alt="Freddy the Financial Agent"/>
<br/>
<p> Freddy the Financial Agent</p>
</div>
<div class="animalmugshot">
<img src="animalshots/thumbnails/PoliticalGiraffe.png" alt="Geoffry the Graphic Designer"/>
<br/>
<p>Geoffry the
<br/>Graphic Designer</p>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
</div>
</body>
The div " animals" and "animalmugshots" should be in the "wrapper" and "content" but for some reason, the animals spill over the white "content" body part. I am confused as to why? Hopefully someone can help me out!
The element, #animals, was collapsing upon itself as the children element were being floated.
Floated and absolutely positioned elements are taken out of the flow of the document, therefore causing the parent element(s) to collapse with undefined dimensions.
Adding a defined height to the parent element, or overflow:hidden will solve this collapsing issue.
Working example - made the footer black for visibility purposes.
#animals {
width: 100%;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
text-align: center;
position: relative;
display: block;
height: auto;
overflow: hidden; /* Added this.. */
}
Need to clear your floats in #animals or all divs
div:after //OR
#animals:after {
display: table;
content: '';
clear: both;
}