I'm making a multipage website and I'm including a navbar and a footer on each page, the navbar is in place and works just fine but my footer is all over the place. In some pages it's exactly where it should be, others it's in the middle of the page but it was like that before I even added page content.
I've tried a few things I found online but nothing's worked so far.
HTML:
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/navFooter.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="navbar"></div>
<div class="col-md-12">
<table class="table">
<td style="border: none;"><p>Choose the type of comparison you'd like to make.</p></td>
<td>
<b>Quick Comparison</b><br>
Compare all counties<br>
<b>Custom Comparison</b><br>
Compare selected counties and/or jurisdictions only
</td>
</table>
</div>
<div id="footer"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function(){
$("#navbar").load("navbar.html");
});
$(function(){
$("#footer").load("footer.html");
});
</script>
</body>
CSS:
html, body {
height: 100%;
width: 100%;
}
body {
padding-top: 90px;
position: relative;
overflow: scroll;
}
.footer {
position: absolute;
margin: 0;
width: 100%;
background-color: #19D8FF;
padding: 25px;
border-top: 4px solid #3399CC;
min-height: 150px;
max-height: 250px;
}
Footer HTML:
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-md-3 pull-left">
<img src="img/Wordmark.png" alt="Logo">
</div>
<div class="col-md-5">
Links |
Contact |
A-Z Index |
Site Map |
Disclaimer</li>
</div>
<div class="col-md-4">
<p class="muted pull-right">© 2017 All rights reserved</p>
</div>
</div>
</div>
</footer>
This code should put you in the right direction. I added bottom: 0 and changed the position to fixed. I also removed an uneeded tag you had. This will put it at the absolute bottom of the view and always be fixed at the bottom.
html, body {
height: 100%;
width: 100%;
}
body {
padding-top: 90px;
position: relative;
overflow: scroll;
}
.footer {
position: fixed;
bottom: 0;
margin: 0;
width: 100%;
background-color: #19D8FF;
padding: 25px;
border-top: 4px solid #3399CC;
min-height: 150px;
max-height: 250px;
}
Related
I have some html code and I am trying to get this:
parts are:
.main-wrapper - I need to keep this in absolute so that the elements inside work with percentage sizing. I don't want to use vh or vw.
.main - This needs to always be 100% height and width.
.tbar - needs to be always visible on the left of .main
.side - Will toggle sliding from the left and push .bar and .main when it opens.
I hope I'm explaining it properly.
Here is what I've tried but it's not right:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css">
<title></title>
<style>
.main-wrapper {
position: absolute;
top: 59px;
right: 0;
bottom: 0;
left: 0px;
border-left: 3px solid blue;
background-color: grey;
}
.main-wrapper .side {
width: 300px;
height: 100%;
background-color: blueviolet;
}
.main-wrapper .tbar {
position: relative;
left: 0px;
height: 100%;
width: 50px;
background-color: green;
}
.main-wrapper .main {
width: 100%;
height: 100%;
background-color: red;
}
</style>
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-expand">
<span class="toggle-leftbar navbar-brand"><button id="togglebtn">Toggle</button></span>
<a class="sidebar-toggle mr-3" href="#"><i class="fa fa-bars"></i></a>
<div class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li>Test</li>
</ul>
</div>
</nav>
<div class="main-wrapper">
<div class="side">Side Here</div>
<div class=tbar>TBar</div>
<div class="main">Main Here</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
$( document ).ready(function() {
$('.side').toggle();
});
</script>
</body>
</html>
How can I get this parts to do what I need?
You also define $('.side').toggle(); but when you click Toggle Button that time work $('.side').toggle(); so you try on click function inside add this code like this..
$( document ).ready(function() {
$( "#togglebtn" ).click(function() {
$('.side').toggle();
});
});
.main-wrapper {
position: absolute;
top: 59px;
right: 0;
bottom: 0;
left: 0px;
border-left: 3px solid blue;
background-color: grey;
}
.main-wrapper .side {
width: 300px;
height: 100%;
background-color: blueviolet;
}
.main-wrapper .tbar {
position: relative;
left: 0px;
height: 100%;
width: 50px;
background-color: green;
}
.main-wrapper .main {
width: 100%;
height: 100%;
background-color: red;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css">
<nav class="navbar navbar-dark bg-dark navbar-expand">
<span class="toggle-leftbar navbar-brand"><button id="togglebtn">Toggle</button></span>
<a class="sidebar-toggle mr-3" href="#"><i class="fa fa-bars"></i></a>
<div class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li>Test</li>
</ul>
</div>
</nav>
<div class="main-wrapper">
<div class="side">Side Here</div>
<div class=tbar>TBar</div>
<div class="main">Main Here</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"></script>
I need help with my css code. I don't want my web site to scroll up and down, I want to make it full screen and responsive. I tried css height:100vh, height: 100% and height:1920px but it was still scrolling up and down. This problem is treated in a lot of place, but I could not find a solution that fit my need.
* {
margin: 0px;
padding: 0px;
font-family:sans-serif ;
}
body{
height: 100%;
width: 100%;
}
#sidebar{
margin: 90px 0px;
position: absolute;
width: 300px;
height: 100%;
background:#22356C ;
left: -240px;
transition: all 500ms linear;
}
#sidebar.active{
left:0px;
}
#sidebar ul li {
color:white;
list-style: none;
text-align: center;
padding: 15px 10px;
}
#sidebar .toggle-btn{
position: absolute;
left: 310px;
top: 5px;
}
#sidebar .toggle-btn span{
display: block;
width: 30px;
height: 5px;
background:#22356C ;
margin: 5px 0px ;
}
#menu{
position: absolute;
margin: 40px 220px;
height: 128px;
width: 100%;
}
#menu1{
position: absolute;
margin:0px 100px;
color:white;
list-style: block;
}
#bolock{
height: 100%;
width: 100%;
}
#page{
position: absolute;
margin: 90px 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/stylesheet.css" integrity="" crossorigin="anonymous">
<link rel="stylesheet" href="css/mycss.css" integrity="" crossorigin="anonymous">
<meta charset="UTF-8">
<title>Title</title>
<div id="sidebar">
<ul>
<li></li>
<li></li>
<li>
Admin <img src="icones/admin.png" height="35" width="35" align="right">
</li>
<li>Frigo <img src="icones/frigo.png"height="35" width="35"align="right"></li>
<li><img src="icones/arow%20(1).png" height="10" width="10" onclick="myFunction()"> Paramétrage<img src="icones/Composant%209%20–%201.png"height="35" width="35"align="right"> <ul id="Paramétrage">
<div id="menu1"style="display:none;">
<li>Alerts</li>
<li>Produit</li>
<li>contrainte espace</li>
<li>compte</li>
</div>
</ul>
</li>
</ul>
</div>
<nav class="navbar navbar-light bg-light">
<img src="icones/logo%20bws.png" class="d-inline-block align-top" alt="">
</a>
<div id="menu">
<img src="icones/balise.png"onclick="togglesidebar()">
</div>
<div class="row" id="logs">
<p>
<img src="icones/Groupe%20102.png"height="40" width="40">
</p><p>
<img src="icones/Groupe%20104.png"height="40" width="40">
</p>
</div>
</nav>
</head>
<body>
<div class="page">
<iframe name="bolock" frameborder="0" id="bolock"></iframe>
</div>
<script>
function togglesidebar() {
document.getElementById("sidebar").classList.toggle('active');
}
</script>
<script>
function myFunction() {
var x = document.getElementById("menu1");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<script src="css/popper.min.js.js" integrity="" crossorigin="anonymous"></script>
<script src="css/slim.min.js.js" integrity="" crossorigin="anonymous"></script>
<script src="css/bootstrap.min.js.js" integrity="" crossorigin="anonymous"></script>
</body>
</html>
responsive sidebar
you should add the property
overflow: hidden
to the body tag
What I understood from your question is that you want that there must be no scrolling at all in the web page, then add overflow: hidden;to the body and the your page will never scroll at all until there is no internal link in it. (learn more about overflow)
Now, the next thing, if you want the body to scroll but don't wants the sidebar to scroll along with it as if it is fixed. Then, try the position: fixed; property of CSS to the element which needs to be fixed at its place and should not be scrolling (learn more about positions).
I've used animate property in my jquery file for top property but it's not working. Do you know what the reason is?
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="font awsome/FontAwesome.Pro.5.11.2.Web/css/all.min.css">
<script src="font awsome/FontAwesome.Pro.5.11.2.Web/js/all.min.js"></script>
<!-- Required meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class=" top-back">
<img src="images/Untitled-2.png" alt="">
</div>
<div class=" main-back" >
<div class="container">
<div class="row">
<div class="col-4">
<div class="row">
<div class="col-12 ">
<div class="blue">
<img class="magic" src="images/magic.png" alt="" style="position: absolute; left: 4.5%;">
<ul>
<li style="left: 25%; top: 5px" class="pics1"><img src="images/face1.png" alt="" >Facelift surgery</li>
<li style="left: 25%; top: 200px" class="pics2"><img src="images/face2.png" alt="">Lip Augmentation</li>
<li style="left: 25%; top: 390px" class="pics3"><img src="images/face3.png" alt="">Botox Injections</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-8">
<div class="row white-box">
<div class="col-5">
<div class="">
<h1>Facelift Surgery</h1>
<p>Aromatherapy has a very beneficial effect on the human body and promotes maximum relaxation. The use of aroma oils in the process of massage enhances its effect, relieves fatigue.
</p>
<button>Make an appointment</button>
</div>
</div>
<div class="col-7 face">
<img src="images/face.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottom-back">
<img src="images/Untitled-3.png" alt="">
</div>
<script src="script.js"></script>
</body>
</html>
/* CSS Document */
body{
margin: 0
}
.top-back img{
width: 100%;
padding: 0 !important;
position: relative;
top: 10px
}
.main-back{
background-color: #f3e5d8;
height: 600px
}
.bottom-back img{
position: relative;
top: -10px;
width: 100%
}
.white-box{
background-color: #fff9f3;
border-radius: 30px;
position: relative;
top: 108px;
height: 450px
}
.face img{
width: 94.5%;;
position: absolute;
top: -124px;
right: 23px;
}
.blue{
background-color:#2d3663;
border-radius: 30px;
position: relative;
top: -4px;
width: 78%
}
.blue ul{
text-align: center;
text-decoration: none;
cursor: pointer;
color: white;
list-style-type: none;
padding: 0;
height: 596px
}
.blue li{
padding: 15px 0;
position: absolute
}
.blue img{
display: block;
margin: auto;
width: 90%;
margin-bottom: 10px
}
.white-box h1 {
color: #cd8274;
margin-top: 40px
}
.white-box p{
color: #474e75;
margin: 40px 0;
line-height: 29px;
font-size: 20px;
}
$(document).ready(function(){
$('.pics2').hover(function(){
$('.magic').animate({top: "195px"});
});
$('.pics1').hover(function(){
$('.magic').animate({top: "0"});
});
$('.pics3').hover(function(){
$('.magic').animate({top: "384px"});
})
});// JavaScript Document`
i finally found the reason... the CDN of jquery must not be the first one. i changed the position of that and it worked
Console shows me $(...).animate is not a function
This is the reason
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
Remove it and everything will work. This version of jQuery jquery-3.3.1.slim.min.js is shorter (slim) and doesn't support animate function.
Use the full one instead.
<script
src="https://code.jquery.com/jquery-3.5.0.js"
integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc="
crossorigin="anonymous"></script>
I am having problem with positioning div. I have the following css
.popup{
display: none;
text-align: center;
background: #eee;
max-width: 200px;
font-size: 2em;
color: #ff0000;
position: absolute;
border-radius: 10px;
z-index: 2;
}
Here is the javascript:
$("#main").click(function(event){
$("#popup").css({'left':event.pageX, 'top':event.pageY, 'display':'block'});
});
here goes the HTML
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="shortcut icon" href="img/favicon-ksu.ico" type="image/x-icon">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main2.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="h1">Something Goes arround here <span style="color: red;">Something More here</span></h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="helper" id="helper">
Click Here!
</div>
<div class="popup" id="popup">
oops! You clicked at wrong place. Try again!
</div>
<div class="workspace" id="workspace" contenteditable="true"></div>
<div id="main" class="main">
</div>
</div>
</div>
</div><!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main2.js"></script>
</body>
</html>
everything works fine up to here! But when i specify following,
body {
padding: 0px;
width: 1230px;
margin: 0 auto;
}
the div is not positioned at the place of click, div appears somewhere else. I am wondering what is wrong! If someone could help!!!
changing position to fixed from absolute solves this problem.
Instead of this:
.popup{
display: none;
text-align: center;
background: #eee;
max-width: 200px;
font-size: 2em;
color: #ff0000;
position: absolute;
border-radius: 10px;
z-index: 2;
}
use this:
.popup{
display: none;
text-align: center;
background: #eee;
max-width: 200px;
font-size: 2em;
color: #ff0000;
position: fixed;
border-radius: 10px;
z-index: 2;
}
I've made div with bootstrap class attribute center-block and I want to align it vertically but nothing is working only manually adding margin to the div. Any tips how to accomplish this ?
Css code:
body {
margin-bottom: 31px;
font-family: 'Lato', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 31px;
border-top: 1px solid white;
}
.menu{
width: 642px;
height: 642px;
border: 1px solid white;
}
.menu > p{
width: 300px;
height: 300px;
margin: 10px;
float: left;
color: white;
text-align: center;
font-size: 28px;
text-shadow: 2px 2px 5px black;
}
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<style>
body{
background-image: url(img/landscape1.jpg);
background-size: cover;
}
</style>
<title>Website</title>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1 style="color: white;">Logo</h1>
</div>
<div class="center-block menu">
<p id="">demo1</p>
<p id="">demo2</p>
<p id="">demo3</p>
<p id="">demo4</p>
</div>
</div>
<footer class="footer">
<div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="text-muted">Company all rights reserved © </p>
</div>
</footer>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
The div with the class center-block cant be vertically aligned because its not inside an element that with a greater height. "container-fluid" doesnt have a height, so it will be as high as its content inside (the center-block div). The same goes for container-fluid's parents (body and html tags). So you need to wrap it in a container that is higher. I've made a pen to illustrate.
http://codepen.io/ugreen/pen/GjBWWZ
The magic part is this guy:
.flex {
display: flex;
align-items: center;
height: 100%;
border: 1px solid red;
}
body {
margin-bottom: 31px;
font-family: 'Lato', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 31px;
border-top: 1px solid white;
}
.menu{
width: 640px;
height: 640px;
}
.menu li > p{
width: 200px;
color: white;
text-align: left;
font-size: 28px;
text-shadow: 2px 2px 5px black;
}
ul {
list-style-type: none;
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1 style="color: white;">Text Logo</h1>
</div>
<ul>
<div class="center-block menu">
<li> <p id="1">demo1</p></li>
<li> <p id="2">demo2</p></li>
<li> <p id="3">demo3</p></li>
<li><p id="4">demo4</p><li>
</div>
</ul>
</div>
<footer class="footer">
<div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="text-muted">Company all rights reserved © </p>
</div>
</footer>
</body>
</html>