I need the images and links that are in the footer to be at the bottom of the footer, and the footer needs to still be at the bottom of the page.
I have tried using position: absolute and bottom properties and played with the margin properties but nothing I do seems to work any help would be much appreciated here.
body {
padding: 0;
margin: 0;
}
.headerBackgroundImage {
/* The image used */
background-image: url("../Images/headerImage.jpg");
min-height: 318px;
/* Center the image */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/* Needed to position the navbar */
position: relative;
}
/* Code that applies only to the logo to position it and make sure it is infront of the background */
#logo {
position: relative;
display: block;
margin-left: 850px;
width: 15%;
top: 20px;
}
/* Position the navigation bar container inside the image */
.container1 {
position: absolute;
bottom: 0px;
}
/* Another container for the second part of the navigation bar */
.container2 {
position: absolute;
bottom: 0px;
right: 0;
}
/* The navigation bar */
.topnav {
overflow: hidden;
}
/* The links/words in the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: underline;
font-size: 50px;
font-weight: bold;
}
/* What happens to the links/words in the navigation bar once it is hovered over */
.topnav a:hover {
text-decoration: none;
}
.ImageColumn {
float: right;
width: 780px;
}
#ImageColumnImages {
width: 100%;
height: 40%;
padding-bottom: 10px;
}
footer {
left: 0;
bottom: 0;
height: 318px;
width: 100%;
overflow: hidden;
position: static;
}
.footerBackgroundImage {
/* The image used */
background-image: url("../Images/FooterImage.png");
min-height: 318px;
/* Center the image */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/* Needed to position the navbar */
position: relative;
}
#footerImages {
height: 100px;
width: 100px;
padding-bottom: 10px;
position: sticky;
bottom: 0;
}
.footerLinks a {
color: #f2f2f2;
font-size: 20px;
padding-right: 10px;
text-decoration: underline;
font-weight: bold;
}
.footerLinks a:hover {
text-decoration: none;
}
.test {
bottom: 0px;
}
<body>
<div class="headerBackgroundImage">
<img src="../Images/logo.png" id="logo">
<div class="container1">
<div class="topnav">
Attractions
Restaurants
</div>
</div>
<div class="container2">
<div class="topnav">
Hotels
Transport
</div>
</div>
</div>
<div class="ImageColumn">
<img src="../Images/indexImage1.png" id="ImageColumnImages">
<img src="../Images/indexImage2.png" id="ImageColumnImages">
<img src="../Images/indexImage3.png" id="ImageColumnImages">
<img src="../Images/indexImage4.png" id="ImageColumnImages">
</div>
<footer>
<div class="test">
<div class="footerBackgroundImage">
<img src="../Images/facebook.png" id="footerImages">
<img src="../Images/instagram.png" id="footerImages">
<img src="../Images/twitter.png" id="footerImages">
<div class="footerLinks">
Contact Us
Refrences
</div>
</div>
</div>
</footer>
</body>
Using display: flex on the footer makes this work. By aligning the content with flex-end it positions itself on the bottom of the page.
Learning grids and flex boxes really makes life easier.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
footer {
/*Added display flex and align-items*/
display: flex;
align-items: flex-end;
height: 318px;
width: 100%;
overflow: hidden;
position: static;
}
.test {
/*Set the div test to 100%*/
width: 100%;
}
.footerBackgroundImage {
...
/*added background color for testing purposes */
background-color: #e3e3e3;
}
body {
padding: 0;
margin: 0;
}
.headerBackgroundImage {
/* The image used */
background-image: url("../Images/headerImage.jpg");
min-height: 318px;
/* Center the image */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/* Needed to position the navbar */
position: relative;
}
/* Code that applies only to the logo to position it and make sure it is infront of the background */
#logo {
position: relative;
display: block;
margin-left: 850px;
width: 15%;
top: 20px;
}
/* Position the navigation bar container inside the image */
.container1 {
position: absolute;
bottom: 0px;
}
/* Another container for the second part of the navigation bar */
.container2 {
position: absolute;
bottom: 0px;
right: 0;
}
/* The navigation bar */
.topnav {
overflow: hidden;
}
/* The links/words in the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: underline;
font-size: 50px;
font-weight: bold;
}
/* What happens to the links/words in the navigation bar once it is hovered over */
.topnav a:hover {
text-decoration: none;
}
.ImageColumn {
float: right;
width: 780px;
}
#ImageColumnImages {
width: 100%;
height: 40%;
padding-bottom: 10px;
}
footer {
display: flex;
height: 318px;
width: 100%;
overflow: hidden;
position: static;
align-items: flex-end;
}
.test {
width: 100%;
}
.footerBackgroundImage {
/* The image used */
background-image: url("../Images/FooterImage.png");
/* Center the image */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/* Needed to position the navbar */
background-color: #e3e3e3;
width: 100%;
}
.footerImages {
height: 100px;
width: 100px;
padding-bottom: 10px;
}
.footerLinks a {
color: #f2f2f2;
font-size: 20px;
padding-right: 10px;
text-decoration: underline;
font-weight: bold;
}
.footerLinks a:hover {
text-decoration: none;
}
.test {
bottom: 0px;
}
<body>
<div class="headerBackgroundImage">
<img src="../Images/logo.png" id="logo">
<div class="container1">
<div class="topnav">
Attractions
Restaurants
</div>
</div>
<div class="container2">
<div class="topnav">
Hotels
Transport
</div>
</div>
</div>
<div class="ImageColumn">
<img src="../Images/indexImage1.png" id="ImageColumnImages">
<img src="../Images/indexImage2.png" id="ImageColumnImages">
<img src="../Images/indexImage3.png" id="ImageColumnImages">
<img src="../Images/indexImage4.png" id="ImageColumnImages">
</div>
<footer>
<div class="test">
<div class="footerBackgroundImage">
<img src="../Images/facebook.png" class="footerImages">
<img src="../Images/instagram.png" class="footerImages">
<img src="../Images/twitter.png" class="footerImages">
<div class="footerLinks">
Contact Us
Refrences
</div>
</div>
</div>
</footer>
</body>
Set the footer to have margin: 100%;. That should put it to the bottom.
Related
I'm learning now CSS and i'm creating a portfolio page as part of it.
I've created this page: link to the codepen
The thing is, the footer is not sticks to the bottom of the page, can some one tell me how can i fix it? so it will be after the <div id="contact">
Iv'e noticed that when I do put it in the <div class="content"> it does work, I tried to figure out why and I didn't got it.
Thanks.
CSS & HTML are here:
html,
body,
main {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: "Alef";
}
header {
position: fixed;
top: 0;
width: 100%;
height: 70px;
background: #fff;
}
nav {
width: 960px;
height: 70px;
margin: 0 auto;
}
nav ul {
margin: 10px 0 0;
}
nav ul li {
display: inline-block;
margin: 0 40px 0 0;
}
a {
color: #4d4d4d;
line-height: 42px;
font-size: 18px;
padding: 10px;
text-decoration: none !important;
}
.active {
color: #004cc6;
font-weight: bold;
font-size: 20px;
background: #f9fafc;
}
.content {
margin-top: 70px;
width: 100%;
height: 100%;
}
.content > div {
width: 80%;
height: 50%;
margin-left: auto;
margin-right: auto;
color: white;
font-size: 25px;
}
#home {
background: #0f5fe0;
}
#portfolio {
background: #129906;
}
#about {
background-color: #a00411;
}
#contact {
background-color: black;
}
:target:before {
content: "";
display: block;
height: 70px; /* fixed header height*/
margin: -70px 0 0; /* negative fixed header height */
}
footer {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: flex-start;
background-color: #dbdbdb;
text-align: center;
height: 70px;
width: 100%;
}
<header>
<nav>
<ul>
<li><a class="active" href="#home">My Page</a></li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<div class="content">
<div id="home">
<p>#home</p>
</div>
<div id="about">
<p>#about</p>
</div>
<div id="portfolio">
<p>#portfolio</p>
</div>
<div id="contact">
<p>#contact</p>
</div>
</div>
</main>
<footer>
Fotter
</footer>
Remove height: 50%; from .content > div if you want to put footer just after contact.
Codepen
If you want to stick footer to the bottom of the browser window, then add this to your css:
footer {
position: fixed;
bottom: 0px;
}
Codepen
Change footer value like below
footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 99;
background-color: #dbdbdb;
text-align: center;
height: 70px;
width: 100%;
}
you can use vh instead of percentage to set the min-height of main, then you need to remove the height
.main {
min-height: 100vh; // Change as per your requirement
}
I am making a personal website with a parallax background which takes 100% of the screen size, however when I change the screen size to the minimum size the text goes out of the div, I use a padding-top percentage. I do know quite a bit of css but I don't want to fiddle around and mess everything up, I've looked everywhere but no answer came close to my problem. Basically I just want to vertically and horizontally center my content even when I resize my screen.
Here's my CSS:
.wrapper {
width: 100%;
/* whatever width you want */
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 52.50%;
/* 16:9 ratio */
display: block;
content: '';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
/* fill parent */
background-image: url('/storage/images/background.jpeg');
/* let's see it! */
color: white;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.text {
margin-top: 15%;
text-align:center;
}
And my HTML:
<div class="row">
<div class="wrapper">
<div class="main">
<div class=text>
<img src="/storage/images/image.jpg" style="border-radius:100%; width:150px; height:auto;">
<h1>My name</h1>
</div>
</div>
</div>
</div>
Use :
.main {
text-align: center;<-----------------------
//More code..........
}
.text {
max-width: 150px;
text-align: center;
display: inline-block;
margin-top: 15%;
}
.text img {
border-radius:100%;
width:70%;
height:auto;
}
.text h1 {
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
/* whatever width you want */
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 52.50%;
/* 16:9 ratio */
display: block;
content: '';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
/* fill parent */
background-image: url('http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg');
/* let's see it! */
color: white;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}
.text {
max-width: 150px;
text-align: center;
display: inline-block;
margin-top: 15%;
}
.text img {
border-radius:100%;
width:70%;
height:auto;
}
.text h1 {
margin: 0;
padding: 0;
}
<div class="row">
<div class="wrapper">
<div class="main">
<div class=text>
<img src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg">
<h1>My name</h1>
</div>
</div>
</div>
</div>
I'm practicing my HTML by making a website, and I'm making a header with buttons.
I'm trying to make the button the full height of the header, but it's going out of the header for some reason, and not going to the top.
#header {
background-color: #1564B3;
color: #fff;
height: 70px;
position: fixed;
width: 100%;
top: 0%;
left: 0%;
}
#header-a {
width: 100px;
background-color: #555555;
display: inline-block;
text-align: center;
margin-top: 0px;
height: 100%;
}
#header-h {
display: inline-block;
margin-top: 20px;
}
<div id="header">
<h2 id="header-h">Header text</h2>
<div id="header-a">
Home
</div>
</div>
You can reset the vertical-align(defaut is baseline) value on inline-block elements whenever needed. here vertical-align:top; will do fine :
#header {
background-color: #1564B3;
color: #fff;
height: 70px;
position: fixed;
width: 100%;
top: 0%;
left: 0%;
}
#header-a {
width: 100px;
background-color: #555555;
display: inline-block;
text-align: center;
margin-top: 0px;
height: 100%;
vertical-align:top;
}
#header-h {
display: inline-block;
margin-top: 20px;
}
<div id="header">
<h2 id="header-h">Header text</h2>
<div id="header-a">
Home
</div>
</div>
For a to cover the div, you may also use height or eventually line-height:
#header {
background-color: #1564B3;
color: #fff;
height: 70px;
position: fixed;
width: 100%;
top: 0%;
left: 0%;
}
#header-a {
width: 100px;
background-color: #555555;
display: inline-block;
text-align: center;
margin-top: 0px;
height: 100%;
vertical-align:top;
}
#header-a a {
display:block;
line-height:70px;/* will size it up to 70px height for each line */
}
#header-h {
display: inline-block;
margin-top: 20px;
}
<div id="header">
<h2 id="header-h">Header text</h2>
<div id="header-a">
Home
</div>
</div>
I changed it to this code. What I did was to change the display to block (in both header-a and header-h) instead of inline-block. I then floated both elements left. Run the snippet to see it in action
#header {
background-color: #1564B3;
color: #fff;
height: 70px;
position: fixed;
width: 100%;
top: 0%;
left: 0%;
}
#header-a {
width: 100px;
background-color: #555555;
text-align: center;
margin-top: 0px;
height: 100%;
}
#header-h {
margin-top: 20px;
}
#header-h,
#header-a {
display: block;
float: left;
}
<div id="header">
<h2 id="header-h">Header text</h2>
<div id="header-a">
Home
</div>
</div>
Rather than setting the height of your menu bar to 70px, you could let the contents within the menu bar size its height. That way you can vertically centre the Home button. JSFiddle
HTML
<div id="header">
<h2 id="header-h">Header text</h2>
<div id="header-a">
Home
</div>
</div>
CSS
#header {
position: fixed;
background-color: #1564B3;
color: #fff;
width: 100%;
top: 0%;
left: 0%;
}
#header-a {
background-color: #555555;
display:inline-block;
padding:30px 50px 30px 50px;
width:10%;
text-align:center;
}
#header-h {
display:inline-block;
width:30%;
text-align:center;
}
Do you see how the padding of #header-a not only vertically centres the Home text but also how the #header sizes to fit it.
I am new to this so please excuse me.
I am working on my first website coding and, I am having so much difficulties with centering my button. I want to place the button on the middle of the window.
I will attach the code below:
/* Hide Scroll */
html, body {
overflow:hidden;
}
/* Home Page - Background Image */
body {
background: url(Image-2.jpg);
background-repeat: no-repeat;
background-size: cover;
position: relative;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
/* Mains */
#Mains-Logo {
margin-top: 42px;
margin-left: 80px;
}
#Mains-Basket {
float: right;
margin-top: 48px;
margin-right: 96px;
}
#Mains-SP {
text-align: center;
margin-top: 785px;
margin-left:810px;
}
/* Button */
.Button-SN {
text-align: center;
min-height: 100%;
min-width: auto;
}
.SN {
border: 5px solid #fcfcfc;
padding: 8px 25px;
margin: auto;
}
<body>
<img id="Mains-Logo" src="Logo.png">
<img id="Mains-Basket" src="Basket.png">
<!-- THIS RIGHT HERE -->
<div class="Button-SN">
<a class="SN" href="#">SHOP NOW</a>
</div>
<!-- END -->
</body>
<footer>
<img id="Mains-SP" src="SP.png">
</footer>
This question has already been answered in stack overflow, here are some useful links to solve your problem.
align text in middle/center of page and button on bottom/center
How to center a button within a div?
trying to align html button at the center of the my page
How to center html element in browser window?
Remove the wrapper .Button-SN.
Add:
.SN{
position:absolute;
display: inline-block;
top:50%;
left:50%;
width:150px;
border: 5px solid #fcfcfc;
line-height: 40px;
margin-top:-20px;
margin-left:-75px;
}
Use clear:both to clear floated direction.
.Button-SN {
clear: both;
min-height: 100%;
min-width: auto;
text-align: center;
}
Try adding this to your button CSS:
display: flex;
justify-content: center; /*centers items on the line (the x-axis by default)*/
align-items: center; /*centers items on the cross-axis (y by default)*/
position:absolute;
Let me know how you get on!
Thanks
Method #01:
Wrap both images in a div and set layout of parent with overflow: hidden.
/* Hide Scroll */
html, body {
overflow:hidden;
}
/* Home Page - Background Image */
body {
background: url(Image-2.jpg);
background-repeat: no-repeat;
background-size: cover;
position: relative;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
/* Mains */
.image-holder {
overflow: hidden;
}
#Mains-Logo {
margin-top: 42px;
margin-left: 80px;
}
#Mains-Basket {
float: right;
margin-top: 48px;
margin-right: 96px;
}
#Mains-SP {
text-align: center;
margin-top: 785px;
margin-left:810px;
}
/* Button */
.Button-SN {
text-align: center;
min-height: 100%;
min-width: auto;
}
.SN {
border: 5px solid #fcfcfc;
display: inline-block;
vertical-align: top;
padding: 8px 25px;
margin: auto;
}
<body>
<div class="image-holder">
<img id="Mains-Logo" src="Logo.png">
<img id="Mains-Basket" src="Basket.png">
</div>
<!-- THIS RIGHT HERE -->
<div class="Button-SN">
<a class="SN" href="#">SHOP NOW</a>
</div>
<!-- END -->
</body>
<footer>
<img id="Mains-SP" src="SP.png">
</footer>
Method #02:
Add clear: both to the styles of .Button-SN.
/* Hide Scroll */
html, body {
overflow:hidden;
}
/* Home Page - Background Image */
body {
background: url(Image-2.jpg);
background-repeat: no-repeat;
background-size: cover;
position: relative;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
/* Mains */
#Mains-Logo {
margin-top: 42px;
margin-left: 80px;
}
#Mains-Basket {
float: right;
margin-top: 48px;
margin-right: 96px;
}
#Mains-SP {
text-align: center;
margin-top: 785px;
margin-left:810px;
}
/* Button */
.Button-SN {
text-align: center;
min-height: 100%;
min-width: auto;
clear: both;
}
.SN {
border: 5px solid #fcfcfc;
display: inline-block;
vertical-align: top;
padding: 8px 25px;
margin: auto;
}
<body>
<img id="Mains-Logo" src="Logo.png">
<img id="Mains-Basket" src="Basket.png">
<!-- THIS RIGHT HERE -->
<div class="Button-SN">
<a class="SN" href="#">SHOP NOW</a>
</div>
<!-- END -->
</body>
<footer>
<img id="Mains-SP" src="SP.png">
</footer>
Try
.Button-SN {
text-align: center;
margin: 0 auto;
}
You can try this:
vertical-align:middle;
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;