Show footer at the bottom of the page always [duplicate] - html

This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 6 years ago.
I'm developing an ASP.NET MVC 5 app with Visual Studio 2015, C# and .NET Framework 4.6.1.
I have this _Layout.cshtml page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My product</title>
#Styles.Render("~/Content/css")
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<link href="~/css/common.css" rel="stylesheet" type="text/css" media="all" />
#RenderSection("Styles", required: false)
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="header_bg">
<div class="wrap">
<div class="header">
<div class="logo">
<img src="~/images/logo.png" alt="" /><br />
<span>Versión 2.0</span>
</div>
<div class="nav">
¡Hola, #User.Identity.Name!
</div>
<div class="clear"> </div>
</div>
</div>
</div>
<div class="container body-content">
#RenderSection("Body")
<hr />
<footer>
<p style="font-size:20px">© #DateTime.Now.Year - My Company</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
All my pages won't have vertical scrollbar and I want to show <footer> always at the bottom of the page.
How can I do it?

footer{
position:fixed;
bottom:0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My product</title>
#Styles.Render("~/Content/css")
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<link href="~/css/common.css" rel="stylesheet" type="text/css" media="all" />
#RenderSection("Styles", required: false)
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="header_bg">
<div class="wrap">
<div class="header">
<div class="logo">
<img src="~/images/logo.png" alt="" /><br />
<span>Versión 2.0</span>
</div>
<div class="nav">
¡Hola, #User.Identity.Name!
</div>
<div class="clear"> </div>
</div>
</div>
</div>
<div class="container body-content">
#RenderSection("Body")
<hr />
<footer>
<p style="font-size:20px">© #DateTime.Now.Year - My Company</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>

A footer that stays at the bottom of the page or 'sticky footer' can be achieved with some css. You will have to move the footer outside of the .container body-content.
Here is an example - take a look here https://css-tricks.com/snippets/css/sticky-footer/

Related

Reveal.js – Remove globally set footer from single slide

I'm making my first reveal.js presentation and have set a global footer in the body of the html file. I would like to remove the footer for a single slide, however, I cannot figure out how to do that.
Below is my current file, with the footer at the end:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TITLE</title>
<meta
name="description"
content="DESCRIPTION"
/>
<meta name="author" content="MY NAME" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta
name="apple-mobile-web-app-status-bar-style"
content="black-translucent"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="dist/reset.css" />
<link rel="stylesheet" href="dist/reveal.css" />
<link rel="stylesheet" href="dist/theme/black.css" id="theme" />
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="plugin/highlight/monokai.css" />
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<a href="https://example.com/">
<img
src="images/example.png"
alt="Example logo"
style="
height: 360px;
margin: 0 auto 4rem auto;
background: transparent;
"
class="logo"
/>
</a>
<h4>Title of my presentation</h4>
<p style="font-size: 30px">
Subtitle
</p>
</section>
<section>
<section class="center">
<h2>What goes here?</h2>
</section>
<section class="center">
<p>Lorem ipsum dolor sit amet</p>
</section>
<section class="center">
<pre>
<code>
Here is the code
</code>
</pre>
</section>
</section>
</div>
</div>
<!-- Default plugins -->
<script src="dist/reveal.js"></script>
<script src="plugin/zoom/zoom.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/search/search.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script>
// Also available as an ES module, see:
// https://revealjs.com/initialization/
Reveal.initialize({
controls: true,
progress: true,
center: true,
hash: true,
// Learn about plugins: https://revealjs.com/plugins/
plugins: [
RevealZoom,
RevealNotes,
RevealSearch,
RevealMarkdown,
RevealHighlight,
],
});
</script>
<!-- 1. Create hidden footer <div> -->
<div id="hidden" style="display:none;">
<div id="footer">
<div id="footer">Copyright 2022</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
// 2. On Reveal.js ready event, copy footer <div> into each `.slide-background` <div>
var footer = $('#footer').html();
$('div.reveal').append(footer);
</script>
</body>
</html>
Any tips or suggestions would be greatly appreciated!
First, you have a comment that says
On Reveal.js ready event, copy footer
but I can't see that in your code. To me, it seems like a plain append.
Now to your question, you should listen to the slideChanged event and remove the footer when the current slide is the slide you don't want the footer in:
Reveal.on( 'slidechanged', event => {
// event.previousSlide, event.currentSlide, event.indexh, event.indexv
} );
The event.currentSlide is the index of the slide, so you can retrieve the slide you want this way. Yes, it is very brittle since it will break if the slide's index changes, but it is the only way...

bookdown::tufte_html_book with csl fails to place citation in margin

bookdown::tufte_html_book does not place citation in margin for csl with note. For example:
bookdown::render_book(input = "index.rmd",
output_format = "bookdown::tufte_html_book")
with csl from: https://raw.githubusercontent.com/citation-style-language/styles/master/chicago-fullnote-bibliography-short-title-subsequent.csl
For file index.rmd:
---
title: "Test title"
output:
bookdown::tufte_html_book
link-citations: yes
bibliography: [test.bib]
csl: chicago-fullnote-bibliography-short-title-subsequent.csl
---
# First section
The citation for this[#edwinabbottFlatlandRomanceMany2018] should show up in the margin.
and bibliography test.bib:
#book{edwinabbottFlatlandRomanceMany2018,
title = {Flatland: {{A Romance}} of {{Many Dimensions}}},
shorttitle = {Flatland},
author = {{Edwin Abbott}},
year = {2018},
publisher = {{CreateSpace Independent Publishing Platform}},
file = {/Users/ssp3nc3r/Zotero/storage/NZBIJ84R/Edwin Abbott - 2018 - Flatland A Romance of Many Dimensions.pdf},
isbn = {978-1-5239-6216-7}
}
results in this html:
<!DOCTYPE html>
<html lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:title" content="Test title" />
<meta property="og:type" content="book" />
<meta name="description" content="Test title">
<title>Test title</title>
<link href="libs/tufte-css-2015.12.29/tufte-fonts.css" rel="stylesheet" />
<link href="libs/tufte-css-2015.12.29/tufte-background.css" rel="stylesheet" />
<link href="libs/tufte-css-2015.12.29/tufte-italics.css" rel="stylesheet" />
<link href="libs/tufte-css-2015.12.29/tufte.css" rel="stylesheet" />
</head>
<body>
<div class="row">
<div class="col-sm-12">
<div id="TOC">
<ul>
<li><span class="toc-section-number">1</span> First section</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="header">
<h1 class="title">Test title</h1>
</div>
<div id="first-section" class="section level1">
<h1><span class="header-section-number">1</span> First section</h1>
<p>The citation for this<span class="citation"><sup>1</sup></span> should show up in the margin.</p>
<div id="refs" class="references">
<div>
<p>Edwin Abbott. <em>Flatland: A Romance of Many Dimensions</em>. CreateSpace Independent Publishing Platform, 2018.</p>
</div>
</div>
</div>
<p style="text-align: center;">
</p>
</div>
</div>
</body>
</html>
This was due to a bug in the tufte package, which has been fixed. You may install.packages('tufte') and the problem should be gone.

nu validator is ok with unclosed tags

Why this code is valid with https://validator.w3.org/nu/#textarea ?
No </html> and </p> at the end of the code.
Is it new ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>xxxx</title>
</head>
<body>
<div class="xxx">xxxxxxxxx</div><br />
<div class="xx">xxxx</div>
<div class="xx">xxxxx</div>
<div class="xx">xxx</div><br />
<div class="xx">xxxxxx</div>
<div class="xx">xxxx ?</div>
<div class="xx">L'xxx</div> <br />
<div class="xx">xxxxxx</div><br />
<div class="xxx">
<img src="fichiers/images/img.png" alt="xxxx" class="xxx">
</div>
<span class="xxxx">xxxx xxxxx</span>
<p>
<img src="xxx/x/xxx.jpg" alt="xxx" class="xxxxx" />
</p>
<div class="xxxx">
<img src="xxx/x/xxxxx.png" alt="xxxx xx" class="xx">
</div>
<p>
</body>
No, it is not new. End tags for those elements have been optional since the first version of HTML. The nu validator has got that part of the spec right for as long as I have been using it (as has the previous, DTD based, validator).

CSS background-image not showing my image

I have a problem with background-image property in one of my sections. Here is the HTML code:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css" type="text/css">
<link rel="stylesheet" href="css/custom.css" type="text/css">
<title>Elipsis</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
</head>
<body>
<header id="intro">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
</div>
</div>
</div>
</header>
<main>
<section id="about">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
</div>
</div>
</div>
</section>
<section id="services">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
</div>
</div>
</div>
</section>
</main>
<footer id="contact">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
</div>
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
And CSS:
#intro {
background-image: url(.../.../img/intro.png);
background-image: url(intro.png);
background-image: url(".../.../img/intro.png");
background-image: url("intro.png");
}
Index.html is in root folder, css file is in root/css/... and intro.png is in both root/img/... and root folders. Why it's not showing? I've read a couple of topics here on stack and some articles from google but nothing seems to work.
The way you wrote that CSS rule only the very last line will apply, which is
background-image: url("intro.png");
(it overwrites the other lines before it)
So you probably want to change that to
#intro {
background-image: url("../img/intro.png");
height: 300px; /*whatever value, if there is no content */
}
Plus, as someone wrote in the comments: if that element has no content and no defined height, it will have height 0, therefore the background image will not be visible.
Try this.
background-image: url('../img/intro.png');
I usually drag and drop that image to get the proper path. I hope this helps.

I can't apply my layout to GSP page (grails)

I create a layout for my website using grails, but this layout is applied to my default page (the page where i redirect user after authentication) only
My layout :
<title><g:layoutTitle default="An example decorator" /></title>
<!-- css -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/fancybox/jquery.fancybox.css" rel="stylesheet">
<link href="css/jcarousel.css" rel="stylesheet" />
<link href="css/flexslider.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<!-- Theme skin -->
<link href="skins/default.css" rel="stylesheet" />
<g:layoutHead />
</head>
<body>
<div id="wrapper">
<!-- start header -->
<header>
...
</header>
<!-- end header -->
<section id="content">
<div class="container">
<g:layoutBody/>
</div>
</section>
<!-- footer-->
<footer>
<div class="container">
<div id="footer">
...
</div>
</div>
</footer>
<!-- /footer-->
</div>
</body>
</html>
i call this layout in my GSP page like this :
<head>
<meta name="layout" content="application"/>
make sure you put your layout at:
grails-app/views/layouts/
and your layout name is:
application.gsp
OR
if your layout is for a specific controller put at:
grails-app/views/layouts/controllerName/
still with same name:
application.gsp