I want to push the footer to the bottom of the page and since the page doesn't have much content the footer floats up and doesn't move to the bottom.
I tried positioning my footer as a fixed element as a workaround and it works but it doesn't in this condition:
In this dimension the footer behaves like you see and it is perfectly expected, hence showing a loophole in my workaround.
This is the website's address: https://n-ii-ma.github.io/Portfolio-Website/contact.html
These are the codes for that part:
/* Contact Footer */
.contact-footer {
position: fixed;
bottom: 10px;
left: 0;
right: 0;
}
<body>
<header>
<h1 class="main-title">Nima's Portfolio</h1>
<nav class="navigation">
<ul>
<li>
Home
</li>
<li>
Projects
</li>
<li>
Contact Me
</li>
</ul>
</nav>
</header>
<main>
<section class="contact-section">
<h2>Contact Me</h2>
<p>Use the links below to contact me and I'll reach out to you as soon as possible</p>
<div class="links">
<a href="https://github.com/n-ii-ma" target="_blank">
<i class="fab fa-github fa-3x"></i>
</a>
<a href="#">
<i class="fas fa-envelope-square fa-3x"></i>
</a>
</div>
</section>
</main>
<footer class="contact-footer">© All Rights Reserved</footer>
</body>
Is there a way for my footer to always stay at the bottom of the page?
Simple solution that is fully supported is to use Flexbox.
We give the body a min-height: 100vh so it spans at least the entire viewports height.
The default margin of the body will make the page overflow by default. To counter that, we need to reset the margin with: margin: 0
We re-add a padding. The default margin of most browsers is 8px. SO I chose that. You can take what ever you like.
The padding will also cause an overflow because of the box-modell. To counter that we use: box-sizing: border-box
Then we use flexbox: display: flex.
To maintain the normal block-level behavior we use: flex-direction: column
To push the footer at the bottom we use: margin-top: auto;. That will push the footer to the bottom of the page if the page content is less then the viewport height.
body {
margin: 0;
padding: 8px;
box-sizing: border-box;
min-height: 100vh;
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}
<body>
<header>
<h1 class="main-title">Nima's Portfolio</h1>
<nav class="navigation">
<ul>
<li>
Home
</li>
<li>
Projects
</li>
<li>
Contact Me
</li>
</ul>
</nav>
</header>
<main>
<section class="contact-section">
<h2>Contact Me</h2>
<p>Use the links below to contact me and I'll reach out to you as soon as possible</p>
<div class="links">
<a href="https://github.com/n-ii-ma" target="_blank">
<i class="fab fa-github fa-3x"></i>
</a>
<a href="#">
<i class="fas fa-envelope-square fa-3x"></i>
</a>
</div>
</section>
</main>
<footer class="contact-footer">© All Rights Reserved</footer>
</body>
Related
So I have a header with a navbar and some links like this.
When I hover on a link I have a border around it that looks like this.
Now only the HOME and CONTACT links are working and showing the cursors as a pointer and displaying the borders on hover but the other four aren't working or even showing a cursor to indicate that it's a link. How to fix this? Thanks.
Here's my header code:
<header>
<div class="navbar" id="navbar">
<div class="link" id="link">
HOME
</div>
<div class="link" id="link">
ABOUT
</div>
<div class="link" id="link">
OUR SERVICES
</div>
<div class="link" id="link">
PORTFOLIO
</div>
<div class="link" id="link">
CLIENT ALBUMS
</div>
<div class="link" id="link">
CONTACT
</div>
</div>
<div class="burger-menu">
<a href="javascript:void(0);" class="burger-style" id="showNavs">
<i class="fa fa-bars" style="color: black;"></i>
</a>
</div>
</header>
And here's my CSS:
#media screen and (min-width: 600px) {
header > .navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1em;
padding-top: 1.2em;
margin-left: 3em;
margin-right: 3em;
}
#link {
text-align: center;
margin-left: calc(5px + 1vw);
padding: .5em;
border: 2px solid white;
}
#link:hover {
transition: .5s;
border: 2px solid black;
padding-top: .5em;
padding-bottom: .5em;
padding-left: 2.5em;
padding-right: 2.5em;
}
}
It doesn't work even though I already changed from classes to ids.
Here's my Jquery code but I don't think this is really relevant for this problem.
$(document).ready(function() {
var navbar = $("#navbar")
var showNavs = $("#showNavs")
$("#showNavs").click(function() {
navbar.toggle("slow")
})
var form = $("#contact-form")
var firstName = form.find("#firstName")
var lastName = form.find("#lastName")
var textarea = form.find("#textarea")
form.submit(function(e) {
e.preventDefault();
firstName.val('')
lastName.val('')
textarea.val('')
})
var newsletterForm = $("#newsletter-form")
newsletterForm.submit(function(e) {
e.preventDefault();
$(this).find("#email").val('')
})
})
Here's a full demo of my site.
Wedding Planner Website
The links are working fine when the browser isn't resized.
To Change the cursor to a pointer when you hover over something element add The Following In Your Styles:
cursor: pointer;
this will work regardless of the element when a user hovers over the element.
If It Works Please Mark As Correct!
Kamestart
(If It Does Not Work Please Share Your Code And Write In The Comments. It Will Help A lot.)
Edit: It Wont Work. If You Want To Stay On The Same Fir Testing Purposes Use # in the href attr. if it is empty it will not be recognised as a link.
I suggest you wrap your div's with anchor tag so the whole box will be clickable and also I looked at your site, there's a class="text-container" which is overlapping your Navbar when the window is resized, hope you'll know the reason now.
.navbar{
display:flex;
justify-content: space-evenly;
}
<header>
<div class="navbar" id="navbar">
<a href="">
<div class="link" id="link">
HOME
</div>
</a>
<a href="#about">
<div class="link" id="link">
ABOUT
</div>
</a>
<a href="">
<div class="link" id="link">
OUR SERVICES
</div>
</a>
<a href="#gallery">
<div class="link" id="link">
PORTFOLIO
</div>
</a>
<a href="">
<div class="link" id="link">
CLIENT ALBUMS
</div>
</a>
<a href="#contact">
<div class="link" id="link">
CONTACT
</div>
</a>
</div>
<div class="burger-menu">
<a href="javascript:void(0);" class="burger-style" id="showNavs">
<i class="fa fa-bars" style="color: black;"></i>
</a>
</div>
heres the image of the error I tried several methods on how to align the footer at the bottom but I haven't found any solution what method should I use to solve the problem?
<footer>
<div class="container">
<nav class="footer-nav">
<ul>
<li>About us</li>
<li>Contact</li>
</ul>
</nav>
<nav class="footer-nav">
<ul>
<li>
<a href="#" class="social-link">
<img src="/img/iconmonstr-facebook-2.svg" alt="" />
Facebook
</a>
</li>
<li>
<a href="#" class="social-link">
<img src="/img/iconmonstr-instagram-11.svg" />
Instagram
</a>
</li>
</ul>
</nav>
</div>
</footer>
Add style to the footer element:
style="position:absolute; bottom:0px"
You can use position: absolute as recommended by avi,
But I generally recommend against absolute where possible.
This can be also solved using flexbox.
set the flex-direction to column,
and set flex: 1 on the main part which you want to take all space (generally you don't want the header and footer to expand)
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
header {
background-color: red;
}
main {
flex: 1;
background-color: green;
}
footer {
background-color: blue;
}
<header>Header<</header>
<main>Main</main>
<footer>Footer</footer>
NOTE: you must set the body and html height to 100% in order for that to work.
https://jsfiddle.net/jszht5xp/19/
I have a webpage I am working on for a school project. Here is the jsfiddle.
https://jsfiddle.net/adamkerik/6c17ajqa/
<footer>
<div class="social-container">
<ul class="social-icons">
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin"></i></li>
</ul>
</div>
<!--text-->
<h1>Follow Us</h1>
<div class="uzex">
<div class="vr"></div>
<ul>
<li><strong>Contact Us</strong></li>
<li>3678 Poe Road</li>
<li>Mount Pleasant, South Carolina 29464</li>
<li>843-216-9434</li>
</ul>
</div>
</footer>
The problem is that on the footer of the page, I want the content to be centered with the "div class va" in the middle of the buttons and the list. I just cant seem to get the content centered. Thanks for any help!
ps the css is in the jsfiddle page, cause i know that will probably be needed
Add this to your footer element CSS:
margin: 0 auto;
display: block;
text-align:center;
Fiddle: https://jsfiddle.net/6c17ajqa/6/
You need to make this container to be center.
.social-container {
width: 400px;
position: absolute;
z-index: 6;
margin: 0 auto;
left:50%;
top: 60%;
transform:translate(-50%, -50%)
}
Follow the link of fiddle https://jsfiddle.net/jb7f2mwy/
I have nowhere indent from the header, but I don't know how to fix it?
<header class="page-header">
<section class="logo">
<i class="logo-img"> </i>
</section>
<section class="menu">
<ul class="main-menu">
<li>Главная</li>
<li>Правила</li>
<li>Тест</li>
<li>Список смотрителей</li>
</ul>
</section>
<section class="profile-avatar">
<img height="50px" width="50px" src="img/ava.png">
<ul class="profile-menu">
<li>
Профиль
</li>
<li>
Выйти
</li>
</ul>
</section>
</header>
If I add clearfix to the header it gives to him more height..
Code is here https://jsfiddle.net/tLtkmcy9/
Right solution is to add height to class with the float: right;
It is your class="profile-avatar" if you take him float right of it is not anymore like that you have to play with the height and it will be ok! try height: 50px;
Please try with the below code for the HTML mentioned below
style="position: relative;top: -4px;left: -4px;"
<section class="page-desc" style="
position: relative;
top: -4px;
left: -4px; ">
<p class="caution">Перед тем как подавать заявку на смотрителя, Вы должны пройти тест!</p>
</section>
QUESTION: I am trying to get my {{TEXT}} or ".acton" section to remain centered in the body of the page and between the footer and header at all times.
I'm using this template to build out landing pages in a marketing automation software called ACT-ON. So hopefully whatever fix we can put in for the body content to remain centered will take.
Here is my jsfiddle:
http://jsfiddle.net/misterizzo/dMu79/
<body>
<div id="bg">
<img style="display:block;" src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0015/1/-/-/-/-/Background_Gradient.png">
</div>
<div id="main">
<div id="header">
<div id="top-left"><img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" alt="Visit Medata Home Page" class="logo" title="Medata.com" atl="Logo">
</div>
<div id="nav">
<ul>
<li><span class="button">NewsWorthy
</span>
</li>
<li><span class="button">Solutions
</span>
</li>
<li><span class="button">About Us
</span>
</li>
<li><span class="button">Home
</span>
</li>
</ul>
</div>
<div class="acton">
{{TEXT}}
</div>
<div id="footer">
<ul>
<li><span class="button">NewsWorthy
</span>
</li>
<li><span class="button">Solutions
</span>
</li>
<li><span class="button">About Us
</span>
</li>
<li><span class="button">Home
</span>
</li>
</ul>
</div>
</div>
</div>
</body>
Hopefully this is my last questions on this template i've been building.
I sincerely appreciate all the help from everyone so far!
you can easely use the display : table,table-row/table-cell properies along with : vertical-align:middle; if your HTML is valid and with the structure needed.
Reset CSS should be loaded in front of your own CSS, it will, as well, avoid to use !important.
// comment // is not a valid comment in CSS, but /* comment */ is.
http://jsfiddle.net/dMu79/7/
basicly the structure is :
<body or wrapper><!-- as heigh/width:100%; and display:table -->
<header> as table-row</header>
<main> as table-cell and height:100% , it will shrink to leave space to header and footer</main>
<footer> as table-row</footer>
</body or wrapper>
Here is one solution that may work for you:
Demo Fiddle
CSS:
.acton {
width: 900px;
position: relative;
margin-left: auto;
margin-right: auto;
height: auto;
top: 106px;
}
You're HTML is broken in places and is missing a closing div. I've fixed it in this Fiddle and the updated code is below:
<div id="header">
<div id="top-left">
<img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" alt="Visit Medata Home Page" class="logo" title="Medata.com" atl="Logo">
</div>
<div id="nav">
<ul>
<li>
<span class="button">NewsWorthy</span>
</li>
<!-- the closing span's were after the closing A -->
...
</ul>
</div>
</div> <!-- this div was missing -->
I fixed it by setting a margin top in the .action section.
Also I removed the position-right and position-left
Notice that the margin-top is set to 40%. This is because it takes in to account the nav and the footer. You can play with the margin depending on the other content that is added above it or below it.
working jsfiddle
http://jsfiddle.net/dMu79/9/
.acton {
width: 900px;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: 40%;
text-align: center;
}