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.
Related
I am working on my laptop in VSCode, after I make my site, I go to stylizing him and after I make this after my pleasure, when I minimize Google, it doesn't keep his resolution.
This is full screen on google chrome.
And this is google chrome minimized.
What could I do for websites keep his style as I put him in full screen?
HTML:
<!--HTML SOURCE--!>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title> </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
</head>
<header>
<div class="navbar">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Proiecte</li>
<li>Staff</li>
<li>Contact</li>
</ul>
<img class="background" src="casey-horner-O0R5XZfKUGQ-unsplash.jpg">
</div>
</header>
<body>
<h1 class="titlu"> Titlu </h1>
<div>
<img class="h" src="Other-html-5-icon.png">
<img class="c" src="CSS.png">
</div>
<div class="cards">
<img class="x" src="pngegg.png">
<img class="y" src="pngegg.png">
<img class="z" src="pngegg.png">
</div>
<div class="faicon">
<i class="fa fa-line-chart" aria-hidden="true"></i>
</div>
<div class="textfaicon">
<h1> Economisire </h1>
<p><b>Economisesti timp si mai ales,<br>
economisesti bani! Cat astepti sa<br>
cauti o echipa care sa iti poata <br>
crea site-ul dorit, noi iti suntem<br>
aproape. Cerem foarte putin pentru<br>
serviciile pe care le oferim!</b>
</p>
</div>
</body>
</html>
CSS:
/* CSS */
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap');
body{
margin: 0px;
padding: 0px;
font-family: 'Roboto', sans-serif;
}
* {
box-sizing:
border-box;
}
.background {
position: absolute;
width: 100%;
height: 120%;
padding-left: 0%;
padding-bottom: 10%;
-webkit-filter: brightness(50%);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.titlu{
position: relative;
color: white;
padding-left: 45%;
padding-top: 15%;
font-size: 50px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(31, 37, 77);
opacity: 100%;
letter-spacing: 2px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
display: block;
}
li a:hover {
background-color: #111;
}
.active {
background-color: #0c3a55;
}
.h{
position: relative;
height: 300px;
width: 300px;
bottom: -270px;
margin-bottom: 10%;
padding: 0%;
left: 8%;
}
.c{
position: relative;
height: 300px;
width: 220px;
bottom: -100px;
margin-bottom: 0%;
padding: 0%;
left: 50%;
}
.x{
position: relative;
height: 500px;
width: 250px;
left: 10%;
}
.y{
position: relative;
height: 500px;
width: 250px;
left: 10%;
}
.z{
position: relative;
height: 500px;
width: 250px;
left: 10%;
}
.cards{
position: relative;
bottom: -150px;
left: 13%;
padding: 0%;
margin: 0%;
width: 200;
}
.faicon{
position: relative;
text-align: center;
right: 2%;
bottom: 290px;
font-size: 40px;
}
.textfaicon{
text-align: center;
position:relative;
color:#0c3a55;
font-size: 10px;
bottom: 280px;
right: 2%;
letter-spacing: 2px;
}
I suggest you to try bootstrap, it will make your page responsive to all types of devices and you will write less CSS. Good luck.
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'm trying to put together a page that has a Header, navigation tabs that float over the bottom of the header, body content and then a footer. This should be fairly easy, but I'm running into a strange result.
The menu has to float over the header image, as that image may be static, or it may be a slider... or it may be an embedded Google map.
I've mocked up the code below and essentially the CSS for it. The problem is that even though I have the footer set to the bottom, when I view the page and the body has enough content, the footer seems to be floating over the body content and the body content extends past the bottom of the footer.
Here is my code.
Would appreciate someone smarter than me looking at this and making any suggestions.
<style>
#header{
width: 100%;
height: 350px;
position: absolute;
top: 0;
left: 0;
padding:0;
margin: 0;
}
#header > img{
width: 100%;
}
.mynavigation{
margin-left: auto;
margin-right: auto;
color: #fff;
}
.mynavigation li {
display: inline-block;
text-decoration: none;
padding: 15px 25px 30px 25px;
z-index: 100;
color: #fff;
margin-top: 310px;
font-family: avenirltstd-black;
text-transform: uppercase;
letter-spacing: 5px;
}
.mynavigation li.is-active {
color: #474747;
background-color: #fff;
}
.mynavigation li a{
color: #fff;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #474747;
text-align: center;
}
</style>
<div id="header">
<img src="/images/myimage" />
</div>
<div id="mynavigation">
<!-- css makes this a tab menu and it needs to position at the bottom of the image <div> -->
<!-- so it looks like a white tab that is merged wit the whit body to look as if they are whole/together -->
<ul>
<li>Home</li>
<li>Examples</li>
<li>Other</li>
<li>Last</li>
</ul>
</div>
<div id="bodycontent">
<!-- page content goes here and has a white background -->
</div>
<div id="footer">
<!-- footer content here -->
</div>
Working Fiddle http://jsfiddle.net/u2qL4j8a/2/ You had wrongly mentioned the CSS selector for navigation and footer as classes whereas in the HTML you have mentioned these as IDs.
#header{
width: 100%;
height: 350px;
position: absolute;
top: 0;
left: 0;
padding:0;
margin: 0;
}
#header > img{
width: 100%;
}
#mynavigation{
margin-left: auto;
margin-right: auto;
color: #fff;
position: fixed;
top: 0;
left: 0;
}
#mynavigation li {
display: inline-block;
text-decoration: none;
padding: 15px 25px 30px 25px;
/*z-index: 100;
color: #fff;
margin-top: 310px;*/
font-family: avenirltstd-black;
text-transform: uppercase;
letter-spacing: 5px;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #474747;
text-align: center;
}
Make your HTML structure like so:
<html>
<head>
</head>
<body>
<div id="header"></div>
<div id="mynavigation"></div>
<div id="content">
<!-- CONTENT STUFF -->
</div>
<div id="footer"><!-- FOOTER STUFF --></div>
</body>
</html>
...And your CSS like so:
html{
padding: 0;
margin: 0;
}
body{
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
#header{
width: 100%;
height: 350px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
#mynavigation{
position: absolute;
top: 350px;
height: 50px;
width: 100%;
}
#content{
position: absolute;
top: 350px;
bottom: 100px;
width: 100%;
overflow: auto;
}
#footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
}
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
I'm trying to make this template, which I'm going to later be converting into a WordPress theme. The problem I'm having is similar to this post: Make div stay at bottom of page's content all the time even when there are scrollbars But when I tried the solutions off of that post, but didn't work for me.
What I want to have is the footer be at the very bottom of the page (hidden from view if the content is longer than the viewer's browser window) and not have it fixed on the bottom of the window.
All of the top content (the navigation, bars, logo, etc.) is positioned where I would like it to be. But the link above the footer and the footer aren't positioned at the very bottom of the page. Instead, when it first loads up, it positions itself at the bottom of the page. The more content it has, it stays in the area where it first loaded. See the screenshot below:
Here is the following HTML/CSS for the page:
HTML
<div id="blackbar"></div>
<div id="wrapper">
<div id="redbar">
<img src="images/logo_broeren_03.png" alt="" title="" />
</div>
<div id="navigationWrapper">
<ul>
<li>Contact Us</li>
<li>Who We Are</li>
<li>Our Portfolio</li>
<li>Home</li>
</ul>
<div id="whitebar">
<img src="images/logo_broeren_04.png" alt="" title="" />
</div>
</div>
<div id="newsbar">
</div>
<div id="contentWrapper">
<div id="secondaryNavigation">
</div>
<div id="slider-headline">
</div>
<div id="content">
<div class="post">
<p>Contains post content</p>
</div>
</div>
</div>
</div>
<div id="footer">
<span id="studioLink">designed by Two Eleven Studios</span>
<ul>
<li>602 N. Country Fair Drive, P.O. Box 6537 • Champaign, Illinois 61826–6537</li>
<li>217–352–4232</li>
<li>example#broerenrusso.com</li>
<li>© 2012 Broeren Russo Inc.</li>
</ul>
</div>
CSS
/*General Implementations*/
body {
background: #6CF;
width: 100%;
}
/*Main Elements*/
/*Black bar on the far left side*/
#blackbar {
background: #000;
height: 55px;
position: absolute;
top: 25px;
/*width: 155px;*/
width: 15%;
}
/*Red bar containing red part image of logo*/
#redbar {
background: #C0272D;
width: 114px;
height: 80px;
float: left;
}
#redbar img {
float: right;
position: relative;
top: 24px;
}
/*Wrapper containing main content, navigation, white bar w/ logo, news feed, and main content*/
#wrapper {
width: 798px;
height: 100%;
float: left;
position: absolute;
left: 15%;
/*left: 155px;*/
}
/*Navigation wrapper containing white bar w/ logo and main navigation*/
#navigationWrapper {
width: 570px;
height: 130px;
position: relative;
top: 0;
float: left;
font-size: 12px;
font-family: 'RobotoLight', Arial, sans-serif;
text-transform: uppercase;
}
/*Main navigation settings*/
#navigationWrapper ul {
/*position: relative;
top: 0;
float: right;*/
height: 24px;
width: 570px;
}
#navigationWrapper ul li {
display: inline-block;
width: 114px;
/*height: 22px;*/
text-align: right;
float: right;
padding: 3px 0 0 0;
}
#navigationWrapper ul li:hover {
border-top: 2px #C0272D solid;
padding: 1px 0 0 0;
}
#navigationWrapper ul li a {
position: relative;
top: 10px;
color: #000;
text-decoration: none;
}
/*White bar w/ white logo*/
#whitebar {
background: #FFF;
height: 56px;
width: 570px;
position: relative;
top: 0px;
}
#whitebar img {
float: left;
position: absolute;
}
/*News feed on the side*/
#newsbar {
width: 114px;
height: 179px;
background: #FFF;
margin: 80px 0 0 0;
}
/*Slider/Headline Block and content block*/
#slider-headline, #content {
width: 684px;
}
/*Slider/Headline Block*/
#slider-headline {
background: #000;
height: 302px;
}
/*content block*/
#content {
background: #FFF;
padding: 6.5em 0 1em 0;
margin: 0 0 1.5em 0;
}
/*wrapper containing slider/headline block and content block*/
#contentWrapper {
width: 684px;
margin: -179px 0 24px 114px;
}
/*Company tagline (only on index page)*/
#companyTagline {
float: right;
font-family: 'RobotoMedium', Arial, sans-serif;
margin: 5px 0 0 0;
}
/*Secondary navigation within contentWrapper*/
#secondaryNavigation {
width: 611px;
height: 110px;
margin: 0 auto;
position: absolute;
background: #666;
z-index: 10;
top: 320px;
right: 44px;
}
/*Post settings*/
.post {
width: 89%;
margin: 0 auto;
}
/*Studio link*/
#studioLink {
position: absolute;
bottom: 27px;
left: 3px;
font: 8px 'RobotoLight', Arial, sans-serif;
}
/*Main footer*/
#footer {
position: absolute;
bottom: 0;
width: 100%;
background: #CCC;
height: 24px;
}
#footer ul {
width: 684px;
margin: 0 auto;
}
#footer ul li {
list-style-image: none;
display: inline-block;
font: 9px/11px 'RobotoLight', Arial, sans-serif;
margin: 0 23px 0 0;
}
#footer ul li:last { margin: 0; }
I know part of the problem is all of the top content (navigation, white bar on top, etc.) have the position: absolute; CSS within them. But I wanted to keep this CSS declaration. How do I have it so the link above the footer and the footer itself positioned at the bottom of the page/content and not positioned at the bottom of the window?
So here it is. It took a long time because of absolute positioning
<body>
<div style="width:100%; min-height: 100%; position: relative; display:inline-block;">
<div id="blackbar">
</div>
<div id="wrapper">
<div id="redbar">
<img src="images/logo_broeren_03.png" alt="" title="" />
</div>
<div id="navigationWrapper">
<ul>
<li>Contact Us</li>
<li>Who We Are</li>
<li>Our Portfolio</li>
<li>Home</li>
</ul>
<div id="whitebar">
<img src="images/logo_broeren_04.png" alt="" title="" />
</div>
</div>
<div id="newsbar">
</div>
<div id="contentWrapper">
<div id="secondaryNavigation">
</div>
<div id="slider-headline">
</div>
<div id="content">
<div class="post">
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
</div>
</div>
</div>
</div>
<div id="footer">
<span id="studioLink">designed by Two Eleven Studios</span>
<ul>
<li>602 N. Country Fair Drive, P.O. Box 6537 Champaign, Illinois 618266537</li>
<li>2173524232</li>
<li>example#broerenrusso.com</li>
<li> 2012 Broeren Russo Inc.</li>
</ul>
</div>
</div>
</body>
css
<style type="text/css">
/*General Implementations*/
html, body
{
background: #6CF;
width: 100%;
height: 100%;
}
/*Main Elements*/
/*Black bar on the far left side*/
#blackbar
{
background: #000;
height: 55px;
position: absolute;
top: 25px; /*width: 155px;*/
width: 15%;
}
/*Red bar containing red part image of logo*/
#redbar
{
background: #C0272D;
width: 114px;
height: 80px;
float: left;
}
#redbar img
{
float: right;
position: relative;
top: 24px;
}
/*Wrapper containing main content, navigation, white bar w/ logo, news feed, and main content*/
#wrapper
{
width: 798px;
min-height: 100%;
float: left;
position: relative;
left: 15%; /*left: 155px;*/
}
/*Navigation wrapper containing white bar w/ logo and main navigation*/
#navigationWrapper
{
width: 570px;
height: 130px;
position: relative;
top: 0;
float: left;
font-size: 12px;
font-family: 'RobotoLight' , Arial, sans-serif;
text-transform: uppercase;
}
/*Main navigation settings*/
#navigationWrapper ul
{
/*position: relative;
top: 0;
float: right;*/
height: 24px;
width: 570px;
}
#navigationWrapper ul li
{
display: inline-block;
width: 114px; /*height: 22px;*/
text-align: right;
float: right;
padding: 3px 0 0 0;
}
#navigationWrapper ul li:hover
{
border-top: 2px #C0272D solid;
padding: 1px 0 0 0;
}
#navigationWrapper ul li a
{
position: relative;
top: 10px;
color: #000;
text-decoration: none;
}
/*White bar w/ white logo*/
#whitebar
{
background: #FFF;
height: 56px;
width: 570px;
position: relative;
top: 0px;
}
#whitebar img
{
float: left;
position: absolute;
}
/*News feed on the side*/
#newsbar
{
width: 114px;
height: 179px;
background: #FFF;
margin: 80px 0 0 0;
}
/*Slider/Headline Block and content block*/
#slider-headline, #content
{
width: 684px;
}
/*Slider/Headline Block*/
#slider-headline
{
background: #000;
height: 302px;
}
/*content block*/
#content
{
background: #FFF;
padding: 6.5em 0 1em 0;
margin: 0 0 1.5em 0;
}
/*wrapper containing slider/headline block and content block*/
#contentWrapper
{
width: 684px;
margin: -179px 0 24px 114px;
}
/*Company tagline (only on index page)*/
#companyTagline
{
float: right;
font-family: 'RobotoMedium' , Arial, sans-serif;
margin: 5px 0 0 0;
}
/*Secondary navigation within contentWrapper*/
#secondaryNavigation
{
width: 611px;
height: 110px;
margin: 0 auto;
position: absolute;
background: #666;
z-index: 10;
top: 320px;
right: 44px;
}
/*Post settings*/
.post
{
width: 89%;
margin: 0 auto;
}
/*Studio link*/
#studioLink
{
position: absolute;
bottom: 27px;
left: 3px;
font: 8px 'RobotoLight' , Arial, sans-serif;
}
/*Main footer*/
#footer
{
position: absolute;
bottom: 0;
left: 0px;
width: 100%;
background: #CCC;
height: 24px;
}
#footer ul
{
width: 684px;
margin: 0 auto;
}
#footer ul li
{
list-style-image: none;
display: inline-block;
font: 9px/11px 'RobotoLight' , Arial, sans-serif;
margin: 0 23px 0 0;
}
#footer ul li:last
{
margin: 0;
}
</style>
Here is the fiddle. Working perfect for me. Checked in Chrome and Firefox.
Try this formula. in hurry
<div class="header">
</div>
<div id="Content">
<div class="con"></div>
</div>
<div class="header">
</div>
css
html, body
{
height: 99%;
background-color:Black;
}
.header ,.footer
{
width: 960px;
height: 15%;
background-color:Gray;
}
#Content
{
min-height: 85%;
width: 960px;
background-color:Navy;
}
.con
{
min-height:900px;
width:960px;
background-color:Aqua;
}
fiddle here
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
HTML
<div class="wrapper">
<p>http://ryanfait.com/resources/footer-stick-to-bottom-of-page/</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright © 2008</p>
</div>
CSS
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em; /*!*/
}
.footer, .push {
height: 4em; /*!*/
clear: both;
}
Set the body to height: 100%; and overflow: auto;
Set the footer to position: fixed;, bottom: 0; and left: 0;
Then you must only set the margin-bottom of your content to the height of your footer.
Change the position of the footer from absolute to fixed:
#footer {
position: fixed;
...
}