I have some issue with .main background. I'm trying to get full width of background but I can't. I've looked some similar questions about this but I couldn't fix my issue. Here's my code. Here's my fonts so you can see better my point. Fonts
<!DOCYPE html>
<html>
<head>
<title>MaxSkins-Home</title>
<style type="text/css">
body {
background-color: white;
background-attachment: fixed;
margin: 0;
padding: 0;
width: 100%;
height: auto;
min-width: 1000px;
}
#font-face {
font-family: "Jocker";
src: url("JockeyOne-Regular.ttf") format("truetype");
}
#font-face {
font-family: "Pacifica";
src: url("PacificaCondensed-Regular.ttf") format("truetype");
}
#font-face {
font-family: "ReklameScript";
src:url("ReklameScript.ttf") format("truetype");
}
h1 {
font-size: 120px;
text-align: left;
font-family: "Jocker";
margin-left: 45;
color: rgb(200,101, 103);
}
h2 {
font-size: 70;
margin-left: 224;
font-family: "Jocker";
color: rgb(200,101, 103);
}
#header {
width: 100%;
height: 50px;
margin: auto;
}
#navigacija {
width: 100%;
margin-left: 0px;
padding: 0px;
height: 50px;
overflow: hidden;
text-align: right;
position: fixed;
background-color: #089DE3;
z-index: 9999;
}
#navigacija a {
color: white;
text-decoration: none;
line-height: 50px;
font-size: 30px;
font-family: "Pacifica";
display: inline-block;
padding-left: 50px;
padding-right: 50px;
padding-top: 0px;
padding-bottom: 0px;
}
#navigacija a:hover {
background: #00C5CD;
}
.main1 {
margin-top: 50px;
font-family: "ReklameScript";
font-size: 50;
background: #089DE3;
text-align: left;
margin-left: 194;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
height: 0;
overflow: hidden;
bottom: 930;
right: 0px;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-wrapper {
width: 640px;
float: right;
margin-left:auto;
margin-right:auto;
max-width: 100%;
}
</style>
</head>
<body>
<div id="header">
<div id="navigacija">
<b>HOME</b>
<b>SHOP</b>
<b>GET POINTS</b>
<b>INFO</b>
</div>
</div>
<h1><b>EARN POINTS,<br> GET SKINS!</b></h1>
<h2><b>How does it work?</b></h2>
<div class="main1">
<p><b>It's simple!<br> Watch videos, do tasks and have fun!<br>After earning large amount of coins,<br> contact us to get your skins!<b></p>
</div>
<div class="video-wrapper">
<div class="video-container">
<iframe width="640" height="360" src="https://www.youtube.com/embed/lwItL2NXwDw" frameborder="5" allowfullscreen></iframe>
</div>
<!-- /video -->
</div>
<!-- /video-wrapper -->
</body>
</html>
It seems that your problem was some invalid CSS. You had a <style></style> tag in your CSS, but that is only needed when the CSS is inside your mark-up (HTML).
I removed the HTML tag from your CSS, and - at least for me - .main1 has a full-width background now. I'm assuming that was your problem..?
Related
I tried to use text-align property with display block but that didn't work either. I wanted a div that covered the entire webpage with the mountain image center aligned at its bottom. I managed to move the mountain image to bottom by setting bottom:0; but then I was unable to center align the image. Thank you very much.
<!-- following is the html code: -->
<body>
<div class="topcontainer">
<img class="topcloud" src="images/newcloud.png" alt="cloud-image">
<h1>I'm Mohit</h1>
<p class="occupation">A <span>pro</span>grammer</p>
<img class="bottomcloud" src="images/newcloud.png" alt="cloud-image">
<img class="mountain" src="http://seanhalpin.io/assets/img/content/home/masthead/land.svg" alt="">
</div>
</body>
<!-- and this is the css: -->
body {
margin: 0;
text-align: center;
font-family: 'Merriweather', serif;
}
h1 {
margin: 0;
font-family: 'Sacramento', cursive;
font-size: 70px;
color: #30e3ca;
}
h2 {
font-family: 'Montserrat', sans-serif;
}
h3 {
font-family: 'Montserrat', sans-serif;
}
span {
text-decoration: underline;
}
.mountain {
display: inline-block;
position: absolute;
bottom: 0;
}
.topcontainer {
display: inline-block;
background-color: #e4f9f5;
margin-bottom: 20px;
height: 100vh;
width: 100%;
position: relative;
}
.bottomcloud {
position: absolute;
left:300px;
height: 94.28px;
width: 177.3333px;
}
.topcloud {
position: relative;
left: 290px;
height: 94.28px;
width: 177.3333px;
}
I edit the code a little bit to achieve what you want just add a parent div to the image tag and styled it. So here is the my solution and I hope it is helpful for you.
HTML:
<body>
<div class="topcontainer">
<img class="topcloud" src="images/newcloud.png" alt="cloud-image">
<h1>I'm Mohit</h1>
<p class="occupation">A <span>pro</span>grammer</p>
<img class="bottomcloud" src="images/newcloud.png" alt="cloud-image">
<div class="mountain">
<img class="mountain" src="http://seanhalpin.io/assets/img/content/home/masthead/land.svg" alt="">
<div>
</div>
</body>
CSS:
body {
margin: 0;
text-align: center;
font-family: 'Merriweather', serif;
}
h1 {
margin: 0;
font-family: 'Sacramento', cursive;
font-size: 70px;
color: #30e3ca;
}
h2 {
font-family: 'Montserrat', sans-serif;
}
h3 {
font-family: 'Montserrat', sans-serif;
}
span {
text-decoration: underline;
}
.mountain {
display: flex;
justify-content: flex-end;
align-items: center;
position: absolute;
bottom: 0;
}
.topcontainer {
display: inline-block;
background-color: #e4f9f5;
margin-bottom: 20px;
height: 100vh;
width: 100%;
position: relative;
}
.bottomcloud {
position: absolute;
left:300px;
height: 94.28px;
width: 177.3333px;
}
.topcloud {
position: relative;
left: 290px;
height: 94.28px;
width: 177.3333px;
}
The easiest solve here would be to make the divs background image in CSS rather than using the image tag. Something like this:
<div class="topcontainer">
//other stuff in here
</div>
.topcontainer {
height: 100vh;
width: 100vw;
background-image: url('http://seanhalpin.io/assets/img/content/home/masthead/land.svg');
background-repeat: no-repeat;
background-position: bottom;
}
Hope this helps!
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 am trying to make a div a clickable link and was told it is better to put the link inside the div rather than around the div. I noticed that whenever I mouseover one of the divs the webpage suddenly gains an extra 500 or so pixels on the right.
The page isn't supposed to be scrollable, and you can only scroll by holding the middle mouse button and dragging. This happens in Chrome 41.0.2272.101 and Opera 28, but NOT in Firefox 36.0.4.
Here is my code.
HTML5:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>John Doe</title>
<link type='text/css' rel='stylesheet' href='stylesheet.css'/>
<script type='text/javascript' src='jquery-1.11.2.js'></script>
<script type='text/javascript' src='scripts.js'></script>
<meta charset='utf-8'>
<meta name='description' content='Portfolio website displaying projects by John Doe.'>
<meta name='keywords' content='Portfolio, John Doe, Projects, Software'>
<meta name='author' content='John Doe'>
</head>
<body>
<!-- Top welcome bar. Holds name and description of profession(s). -->
<div id='welcome_bar'>
<div id='welcome_bar_name'>John Doe</div>
<p id='welcome_bar_description'>Software Engineer</p>
</div>
<!-- Holds all the navigation "blocks" leading to the about, portfolio,
contact, and [unused page] pages. -->
<div id='nav_block'>
<div id='block_list'>
<div class='block_container'>
<div id='left_out' class='block'>
<a href='webpages/about/about.html'>
<!-- Short description of page this block leads to "who I am". -->
<div id='about_description' class='block_description'>
<p>who I am</p>
</div>
<p class='block_title'>About Me</p>
<div class='block_icon_container'>
<img class='block_icon' src='images/about_icon.png' alt='about_icon.png'/>
</div>
</a>
</div>
</div>
<div class='block_container'>
<div id='left_in' class='block'>
<a href='#'>
<!-- Short description of the page this block leads to "what I am proud of". -->
<div id='portfolio_description' class='block_description'>
<p>what I am proud of</p>
</div>
<p class='block_title'>Portfolio</p>
<div class='block_icon_container'>
<img class='block_icon' src='images/portfolio_icon.png' alt='portfolio_icon.png'/>
</div>
</a>
</div>
</div>
<div class='block_container'>
<div id='right_in' class='block'>
<a href='#'>
<div id='sparepage_description' class='block_description'>
<p>stuff stuffs</p>
</div>
<p class='block_title'>Stuff Stuff</p>
<div class='block_icon_container'>
<img class='block_icon' src='images/stuffstuff_icon.png' alt='stuffstuff_icon.png'/>
</div>
</a>
</div>
</div>
<div class='block_container'>
<div id='right_out'class='block'>
<a href='#'>
<div id='contact_description' class='block_description'>
<p>let's chat</p>
</div>
<p class='block_title'>Contact</p>
<div class='block_icon_container'>
<img class='block_icon' src='images/contact_icon.png' alt='contact_icon.png'/>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS3:
html {
margin: 0;
padding: 0;
max-width: 100%;
height: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
max-width: 100%;
height: 100%;
background-color: white;
}
#welcome_bar {
position: relative;
top: 10%;
left: 12.5%;
padding: 0;
width: 75%;
height: 10%;
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.5);
}
#font-face {
font-family: "Roboto Regular";
src: url("fonts/Roboto-Regular.ttf");
}
#welcome_bar_name {
position: relative;
left: 5px;
top: 5px;
padding-left: 10px;
width: 75%;
height: 50%;
font-family: Roboto Regular;
color: rgba(0, 0, 0, 0.65);
font-size: 3em;
}
#welcome_bar_description {
position: relative;
left: 8px;
top: -15px;
padding-left: 10px;
width: 35%;
height: 20%;
font-family: Roboto Regular;
color: rgba(0, 0, 0, 0.5);
font-size: 1.5em;
}
#nav_block {
position: relative;
top: 12%;
left: 12.5%;
padding: 0;
width: 75%;
height: 68%;
}
#block_list {
display: table;
position: relative;
top: 5%;
padding: 0;
width: 100%;
height: 90%;
}
.block_container {
display: table-cell;
width: 22%;
height: 100%;
}
.block {
height: 100%;
position: relative;
}
.block a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none;
z-index: 10;
}
#left_out {
width: 99%;
background-color: #00AE93;
}
#left_in {
width: 98%;
margin-left: 1%;
margin-right: 1%;
background-color: #9CA645;
}
#right_in {
width: 98.5%;
margin-left: 1%;
margin-right: 1%;
background-color: #EDB613;
}
#right_out {
width: 99%;
margin-left: 1.2%;
background-color: #D55435;
}
#about_description {
position: relative;
top: 10%;
width: 90%;
height: 5%;
background-color: white;
}
#portfolio_description {
position: relative;
top: 20%;
width: 90%;
height: 5%;
background-color: white;
}
#sparepage_description {
position: relative;
top: 10%;
width: 90%;
height: 5%;
background-color: white;
}
#contact_description {
position: relative;
top: 25%;
width: 90%;
height: 5%;
background-color: white;
}
#font-face {
font-family: "Ubuntu M";
src: url("fonts/Ubuntu-M.ttf");
}
#about_description p {
text-align: center;
vertical-align: middle;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Ubuntu M;
font-size: 1.25em;
color: #00AE93;
}
#portfolio_description p {
text-align: center;
vertical-align: middle;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Ubuntu M;
font-size: 1.25em;
color: #9CA645;
}
#sparepage_description p {
text-align: center;
vertical-align: middle;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Ubuntu M;
font-size: 1.25em;
color: #EDB613;
}
#contact_description p {
text-align: center;
vertical-align: middle;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Ubuntu M;
font-size: 1.25em;
color: #D55435;
}
.block_icon_container {
top: 48%;
position: relative;
margin: 0 auto;
padding: 3px;
}
#font-face {
font-family: "Ubuntu L";
src: url("fonts/Ubuntu-L.ttf");
}
.block_title {
position: relative;
max-width: 100%;
top: 45%;
height: auto;
color: white;
font-size: 1.5em;
font-family: Ubuntu L;
text-align: center;
}
.block_icon {
margin: 0;
padding: 0;
max-width: 100%;
opacity: 0.6;
}
Under .block a, I noticed that if you remove the width, the page doesn't expand when you mouse over the block. The size of the percentage seems to effect how far the page is expanded as well.
This bug probably wouldn't be noticed unless visitors randomly scrolled using the middle mouse button, but it bugs me.
my code is all jumbled up I believe. I have a ton of white space down at the bottom of my page and I don't know why. I've basically just been going with whatever works thus far but I also want my page to be responsive and it scales really weird atm. This is probably a really hard question to help with but if anyone can I would be super grateful. Any suggestions on what to do are extremely appreciated.
Heres the code:
http://jsbin.com/rugidepebe/1/edit?html,css,output
HTML
<!Doctype html>
<html>
<head>
<title>Application</title>
<link rel="stylesheet" type="text/css" href="standard.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="margin-right">
</div>
<div id="margin-left">
</div>
<div id="navbar">
</div>
<div id="contenthead">
<h1 id="AppHead">Application</h1>
</div>
<div id="appbike">
<h2>Walk/Bike</h2>
<img src="images/bike.png" id="bike"/>
</div>
<div id="appmotor">
<h2>Motor</h2>
<img src="images/car.png" id="car"/>
</div>
</body>
</html>
CSS
body {
margin: 0px;
}
#navbar {
position: fixed;
width: 100%;
height: 50px;
background-color: #0C4564;
z-index: 3;
}
#margin-right {
position: absolute;
height: 150%;
width: 7.8125%;
background-color: #6FE3C2;
right: 0;
z-index: 1;
}
#margin-left {
position: absolute;
height: 150%;
width: 7.8125%;
background-color: #6FE3C2;
z-index: 2;
}
#AppHead {
text-align: center;
text-decoration: underline;
font-family: 'Open Sans', sans-serif;
font-size: 3.5em;
font-weight: 600;
color: #575757;
}
#contenthead {
display: inline-block;
width: 100%;
margin-top: 50px;
margin-bottom: 10px;
}
#appbike {
position: relative;
width: 15%;
height: 500px;
background-color: #53A78F;
text-align: center;
margin-left: 25%;
margin-top: 5%;
}
#bike {
width: 70%;
position: relative;
margin-top: 50%;
}
#appmotor {
position: relative;
bottom: 10;
float: right;
width: 15%;
height: 500px;
background-color: #53A78F;
bottom: 498px;
margin-right: 25%;
}
h2 {
text-align: center;
text-decoration: underline;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: 2 em;
}
#car {
width: 70%;
position: relative;
margin-top: 50%;
text-align: center;
margin-left: 15%;
}
You still have to treat the hmtl & body as wrappers sometimes, you're setting the height to 150%, of which it's parent height is auto so it is a bit confused. Just change your first rule to the following:
body, html {
margin: 0px;
padding:0;
height:100%;
}
Adding in height 100% should fix your issue, also added in padding:0; and the html doc to the css selector.
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