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;
Related
Good morning everyone
How can I place the different DIVs on top of each other?
I have a row that contains left and right DIVs.
In the right I have image and in the left text.
I also have a DIV that needs to be placed between the text and the background.
I've tried and gotten a few things, but I can't get the right DIV sticky-top in the right place.
I don't want to use Java but only CSS
.infosite-container {
margin: 0 auto;
width: 100%;
position: relative;
}
.infosite-container .row {
display: table;
}
.infosite-container [class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
.sticky-top {
height: 150px;
width: 150px;
position: absolute;
background: red;
top: 50%;
left: 50%;
z-index: 999;
transform: translate(-50%, -50%);
}
.infosite-left-content {
padding-top: 175px;
padding-bottom: 175px;
padding-left: 120px;
text-align: left;
background-image: url(../../images/img-01.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
min-height: 680px;
/* height: 680px; */
z-index: 99;
}
.infosite-right-content {
padding-top: 175px;
padding-bottom: 175px;
padding-right: 120px;
padding-left: 60px;
text-align: left;
background-color: #bebebe;
min-height: 680px;
/* height: 680px; */
position: relative;
z-index: 99;
}
.uptxt {
position: relative;
z-index: 9999;
}
<section class="infosite" id="infosite-section">
<div class="container-fluid infosite-container">
<div class="row">
<div class="col-md-6 infosite-left-content">
<div class="">
</div>
</div>
<div class="sticky-top">
<p>Sticky Top</p>
</div>
<div class="col-md-6 infosite-right-content">
<div class="uptxt">
</div>
</div>
</div>
</div>
</section>
Can I get some help. I am sorry but I am not an expert.
Thanks
It's not working because you're parent is way larger than it's child. Because the div's could have different widths I suggest you to put the sticky-top div into the infosite-left-content class.
Like this:
<div class="container-fluid infosite-container">
<div class="row">
<div class="col-md-6 infosite-left-content">
<div class="sticky-top">
<p>Sticky Top</p>
</div>
</div>
<div class="col-md-6 infosite-right-content">
<div class="uptxt">
</div>
</div>
</div>
</div>
</section>
Second you need to adjust you css accordingly:
/* InfoSite ---------------------------------- */
.infosite-container {
margin: 0 auto;
width: 100%;
position:relative;
}
.infosite-container .row {
display: table;
}
.infosite-container [class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
.sticky-top {
height: 150px;
width: 150px;
position: absolute;
background:red;
top:50%;
right:-75px;
z-index:999;
transform: translateY(-50%)
}
.infosite-left-content {
position: relative;
background-color: blue;
padding-top: 175px;
padding-bottom: 175px;
padding-left: 120px;
text-align: left;
background-image: url(../../images/img-01.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
min-height: 680px;
/* height: 680px; */
z-index:100;
}
.infosite-right-content {
padding-top: 175px;
padding-bottom: 175px;
padding-right: 120px;
padding-left: 60px;
text-align: left;
background-color: #bebebe;
min-height: 680px;
/* height: 680px; */
position: relative;
z-index:99;
}
.uptxt {
position: relative;
z-index:9999;
}
/* ---------------------------------------------- */
I hope this works for you :D
Thank you for your response and possible solution.
Unfortunately it doesn't work as I would like, the sticky DIV stays on top of everything and not between the two divs.
I attach a picture of the result of how I would like its visualization.
Insert the sticky DIV between the background and the descriptive text that should appear as the last layer.
A possible solution is to use a single background DIV, ok it works, but I would like to have two of them so I can insert two images for example.
Thanks
Your css should be like this:
.infosite-container {
margin: 0 auto;
width: 100%;
position:relative;
}
.infosite-container .row {
display: table;
}
.infosite-container [class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
.sticky-top {
height: 150px;
width: 150px;
position: absolute;
background:red;
top:50%;
right:-75px;
z-index:500;
transform: translateY(-50%)
}
.infosite-left-content {
position: relative;
background-color: blue;
padding-top: 175px;
padding-bottom: 175px;
padding-left: 120px;
text-align: left;
background-image: url(../../images/img-01.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
min-height: 680px;
/* height: 680px; */
z-index:100;
}
.infosite-right-content {
padding-top: 175px;
padding-bottom: 175px;
padding-right: 120px;
padding-left: 60px;
text-align: left;
background-color: #bebebe;
min-height: 680px;
/* height: 680px; */
position: relative;
z-index:900;
}
.uptxt {
position: relative;
z-index:9999;
}
You can change the order in which the elements are stacked on top of each other with z-index - the greater it is, the higher the element will be !
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.
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>
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'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