I want to place a footer at the bottom of the page. It is contained inside a div. The problem is that if I use fixed positioning, the footer sticks at the bottom but does not disappear if I scroll up the page. If I use absolute or relative positioning the footer shows up at the middle of the page.
I want it to stay at the bottom but it should not be sticky i.e when scroll up, the footer must disappear. It must shows when I scroll down to bottom and reached end of the page.
PS: The page contains an iframe.
html
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Help</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header">
<img id="logo" src="images/logo.png" alt="Logo">
</div>
<div id="menu">
<ul>
<li>About</li>
<li>Support</li><br>
<li>Student Operation
<ul>
<li>Logging In</li>
<li>Creating Enquiry</li>
<li>Issuing Prospectus</li>
<li>Making Admission</li>
<li>Collecting Fees</li>
<li>Issuing Kit</li>
</ul>
</li><br>
<li>
Batch Operation
<ul>
<li>Creating Batch</li>
<li>Marking Attendance</li>
<li>Transferring Batch</li>
</ul>
</li><br>
<li>
Resource Operation
<ul>
<li>Center Resource Allocation</li>
<li>Student Resource Allocation</li>
</ul>
</li><br>
<li>
Course Operation
<ul>
<li>Course Type</li>
<li>Course List</li>
<li>Course Module</li>
<li>Course Price List</li>
<li>Distance University List</li>
</ul>
</li><br>
<li>
Inventory Operation
<ul>
<li>Kit Management</li>
<li>Item Category</li>
<li>Item Stock</li>
<li>Item Purchase</li>
</ul>
</li><br>
<li>
Admin Operation
<ul>
<li>Kit Validation</li>
<li>Users & Groups</li>
<li>Employee Management</li>
</ul>
</li>
</ul>
</div>
<div id="frame">
<iframe id="content" name="content"></iframe>
</div>
<div id="footer">
<p>Footer text</p>
</div>
</body>
</html>
css
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 80%;
}
#header {
background-color: #f8651c;
padding-bottom: 5%;
margin: 0;
border: 0;
}
#logo {
position: relative;
left: 20px;
top: 20px;
}
#menu {
width: 25%;
float: left;
border-right: 2px solid #a2a2a2;
margin: 0;
padding: 0;
}
#content {
position: absolute;
height: 93%;
width: 74%;
padding: 0;
margin: 0;
border: 0;
}
#footer{
position: fixed;
left: 0;
bottom:0;
background-color:#000;
width:100%;
height: 10px;
}
Like this
DEMO
CSS
#footer{
position: relative;
left: 0;
bottom:0;
background-color:#000;
width:100%;
bottom:0;
padding:5px 0;
}
.clearfix{
clear:both;
}
#footer p{
color:white;
}
its very simple. just add modify your footer css
#footer{
background-color:#000;
width:100%;
color:#fff;
float:left
}
You can do one thing, After page is scrolled for some height or on scroll event you can hide that div.
$(window).scroll(function(e){
$('#log').hide();
});
Related
when i realized through Firefox inspector showing overflow in body element," is present in the page.I removed it(from inspector) but problem remains after refreshing the page.I tried using min-max h,w,still no changes.I am not able to catch the keyword i need solution.
code:
#navbar {
display: flex;
align-items: center;
position: relative;
top:0px;
margin-top: -18px;
}
#navbar::before {
content: "";
background-color: black;
height: 100%;
width: 100%;
position: absolute;
top:0px;
left:0px;
z-index: -1;
opacity: 1;
}
/* Nav Bar:Logo And Image */
#logo {
margin: 11px 30px;
}
<nav id="navbar">
<div class="logo">
<img src="logo1.png" alt="w8.com" id="img1">
</div>
<ul>
<li class="item">Home</li>
<li class="item">Top Searches</li>
<li class="item">About Us</li>
<li class="item">Places</li>
</ul>
</nav>
This is the portion where it is showing inverted commas in the top left corner.
**>**And this is the code from the inspector:
<body>"
<!-- <style>
#img1{
height: 66px;
margin: 8px 12px;
border-radius: 36px;
}
</style> -->
<nav id="navbar">
<div class="logo">
<img src="logo1.png" alt="w8.com" id="img1">
</div>
<ul>
<li class="item">Home</li>
<li class="item">Top Searches</li>
<li class="item">About Us</li>
<li class="item">Places</li>
</ul>
</nav>
i tried removing and rewriting the code but it didn't help.And about overflow i am not able do fix overflow.
Problem
How to show second menu in center of page ?
Details
I have two menus.
The first menu show at the top of the page.
The second menu not show on center of page (this is my problem).
As fiddle below second menu display above first menu
actually i need to show second menu in center of page
my fiddle
second menu code
<div>
<nav class="main-nav">
<!--This in case we have more navs-->
<ul class="nav-list">
<li>Home</li>
<li>About</li>
<li>
Services
<ul class="dropdown">
<li>Web Design</li>
<li>Graphic Design</li>
<li>Video Production</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="con">
<div>
<nav class="main-nav">
<!--This in case we have more navs-->
<ul class="nav-list">
<li>Home</li>
<li>About</li>
<li>
Services
<ul class="dropdown">
<li>Web Design</li>
<li>Graphic Design</li>
<li>Video Production</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="container second-menu">
<ul>
<li>الرئيسيه</li>
<li>نبذه عن<i></i></li>
<li>اتصل بنا</li>
<li>اللغه</li>
<li> تسجيل دخول</li>
</ul>
</div>
</div>
$(function() {
var heightOfPage = $(window).height();
console.log(heightOfPage);
$(".con").css("height", heightOfPage);
$("li").has(".dropdown").hover(
function() {
$(this).find(".dropdown").slideDown();
},
function() {
$(this).find(".dropdown").slideUp();
}
);
.con{
position: relative;
}
.main-nav ul li{
display: inline-block;
position: relative;
background: #000;
}
.main-nav ul li a{
color: #fff;
text-decoration: none;
padding: 10px;
display: inline-block;
}
.dropdown ul{
padding: 0;
margin: 0;
}
.dropdown{
display: none;
position: absolute;
top: 40px;
left: -30px;
width: 200px;
}
dropdown ul li{
width: 200px;
}
.second-menu ul li{
display: inline-block;
background: red;
padding: 10px;
}
.second-menu ul li a{
color: #fff;
}
.second-menu{
position: absolute;
top: 50%;
}
JsFiddle Link
https://jsfiddle.net/y97coxjo/2/
All you need is to calculate the height of Document and set that height to a container making its position relative and the secondary menu position absolute with top 50%
To have element in the center of page, make it absolute (or static if You want it to stay in center even when scrolling) and position it vertically in center:
#block{
position: absolute;
width: 100%;
left: 0;
height: 50px; //example
top: 50%;
margin-top: -25px; //half of height
}
Then You can put the menu inside that #block.
I'm trying to make a navbar using CSS. The nav links need to be spaced evenly from the picture in the middle of the bar. At the moment it looks like this:
The Code:
body {
background-image: url("../img/bg.jpg");
margin-left: 0px;
margin-right: 0px;
}
div.menucontainer {
margin-top: 50px;
background-image: url("http://www.thevincentcollection.com/img/menubg.jpg");
height: 35px;
box-shadow: 0px 5px 10px #000;
text-align: center;
}
IMG.vcmenulogo {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
top: 10px;
}
.menulinks {
position: relative;
right: 0px;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
.menulinks li {
display:inline;
}
.menulinks a {
display:inline-block;
padding:10px;
}
#footer {
position: fixed;
background-image: url("http://www.thevincentcollection.com/img/menubg.jpg");
box-shadow: 0px -6px 5px 0px rgba(0,0,0,0.75);
width:100%;
height:20;
bottom:0;
}
P.footer {
text-align: center;
color: white;
font-size: 11px;
font-family: Arial;
}
<!DOCTYPE html>
<html>
<head>
<title>The Vincent Collection: Luxury in Haircare</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="menucontainer">
<img class="vcmenulogo" src="http://www.thevincentcollection.com/img/vc-logo-menu.png" />
<ul class="menulinks">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Contact</li>
</ul>
</div>
<div id="footer"> <p class="footer">Copyright © 2016 Salon on Wheels, LLC. All rights reserved.</p> </div>
</body>
</html>
you can change your HTML, insert the img as li and then remove the position:absolute from it and with a few other tweaks regarding position value and vertical-align, you have what you want.
body {
background-image: url("../img/bg.jpg");
margin: 0
}
.menucontainer {
margin-top: 50px;
background-image: url("http://www.thevincentcollection.com/img/menubg.jpg");
height: 35px;
box-shadow: 0px 5px 10px #000;
text-align: center;
}
.menulinks {
position: relative;
top: -90px;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.menulinks li {
display: inline-block;
padding: 10px;
vertical-align: middle
}
<div class="menucontainer">
<ul class="menulinks">
<li>Home
</li>
<li>About
</li>
<li>
<img class="vcmenulogo" src="http://www.thevincentcollection.com/img/vc-logo-menu.png" />
</li>
<li>Products
</li>
<li>Contact
</li>
</ul>
If you are trying to add some space between 2nd and 3rd button as I understood
just give class to 2nd and 3rd li element and give margin. Or maybe you can just add 2 ul elements and margin between
#joshua, its a gud approach to do as #ryuk said as well, and if i was to do this i would just make a dummy li between 2nd and 3rd child then margin it appropriately.
U can either do this,
<ul class="menulinks">
<li>Home</li>
<li>About</li>
<li class="third">Products</li>
<li>Contact</li>
</ul>
.third{ margin-left: 10% }
or make a dummy between 2nd and 3rd li
<ul class="menulinks">
<li>Home</li>
<li>About</li>
<li class="dummy"></li>
<li>Products</li>
<li>Contact</li>
</ul>
.dummy{
padding-left:10%
}
I used text-align right in my footer to position my text and unordered list all the way to the bottom right of my page. I would like to have a little bit of space between the text on the bottom right and the edge of my page. After using text align-right, whatever I do, the last part of my text always pushes right up to the edge of my window in the bottom right. I tried playing with the right and left margin but so far this hasn't solved the problem, here is a jsfiddle with my code: http://jsfiddle.net/sdaless/PM5Na/ If anyone can help I'd appreciate it, thanks!
Here is my footer css and html:
html:
<footer>
<div id="footer-container">
<ul id="footerlist">
<hr>
<li>Advertising Programs</li>
<li>Business Solutions</li>
<li>Privacy & Terms</li>
<li>+Google</li>
<li>About Google</li>
</footer>
css:
#footer-container {
padding: 5px 5px;
position: fixed;
bottom: 2px;
width: 100%;
text-align: right;
}
#footer-container ul li a {
color:#656565;
text-decoration: none;
font-size: 13px;
padding: 0 7px;
font-family: Arial;
}
#footerlist li {
display: inline;
list-style-type: none;
}
Change your html to this:
<footer>
<div id="footer-container">
<ul id="footerlist">
<hr>
<li>Advertising Programs</li>
<li>Business Solutions</li>
<li>Privacy & Terms</li>
<li>+Google</li>
<li style='margin-right: 10px'>About Google</li>
</footer>
Or use this css:
#footerlist li:last-child {
margin-right: 10px;
}
use folllowing code:
<footer>
<div id="footer-container">
<ul id="footerlist" style="padding-right:10px">
<hr>
<li>Advertising Programs</li>
<li>Business Solutions</li>
<li>Privacy & Terms</li>
<li>+Google</li>
<li>About Google</li>
</footer>
Either do this:
#footer-container {
padding: 5px 5px;
position: fixed;
bottom: 2px;
left:0; right:0; /* width:100%; */
text-align: right;
}
or this
#footer-container {
padding: 5px 5px;
position: fixed;
bottom: 2px;
width:100%;
box-sizing: border-box; /* so width:100% defines border box */
text-align: right;
}
I am trying to implement a horizontal navigation menu with a horizontal dropdown menu. I am trying to figure out how to center the horizontal dropdown text so it sits in the center of the navigation container so the user doesn't have to move the mouse far left to reach the links.
<style type="text/css">
#nav-container {
padding: 4px;
width: 900px;
height: 60px;
background: #CCC;
}
#navbar {
margin:0;
padding:0;
}
#navbar li {
padding: 6px;
display: inline;
list-style: none;
}
#navbar li ul {
display: none;
position: absolute;
margin:0;
padding:0;
width: 900px;
}
#navbar li:hover ul {
display: block;
}
</style>
</head>
<body>
<div id="nav-container">
<ul id="navbar">
<li>Link
<ul>
<li>Hello</li>
<li>World</li>
</ul>
</li>
<li>Link
<ul>
<li>Peace</li>
<li>Love</li>
</ul>
</li>
<li>Link
<ul>
<li>Smiles</li>
<li>Cries</li>
</ul>
</li>
<li>Link
<ul>
<li>Homer</li>
<li>Peter</li>
</ul>
</li>
<li>Link
<ul>
<li>Giggity</li>
<li>Fapping</li>
</ul>
</li>
<li>Link
<ul>
<li>Napster</li>
<li>Myspace</li>
</ul>
</li>
</ul>
</div>
This is rough code just to show an example, here is a live example of the code.
Thanks
A combination of relative-absolute positioning should do the trick. I tried adding these two rules and that seemed to work:
#navbar li {
position: relative;
}
#navbar li ul {
position: absolute;
left: 0;
top: 24px; /* must me same as the height of parent li +/- a couple of pixels */
}
That seems to do the trick.