I'm using the Twenty ten theme.
I don't know if it matters, but to make the footer stretch all the way out of the page (100%), I put it outside the wrapper div, so instead of:
<wrapper>
<main>
</main>
<footer>
</footer>
</wrapper>
I've put it this way:
<wrapper>
<main>
</main>
</wrapper>
<footer>
</footer>
The css for the footer looks like this:
#footer {
height: 100px;
background:#393939;
font-size:12px;
color:#777;
margin:0;
padding:20px;
z-index:999;
bottom:0;
clear:both;
}
The footer now lays directly under all the content, so if the content of a page is too short, the footer is not in the bottom of the page, like on this page:
http://skiss.nu/hff/?page_id=10
if I add "position: absolute;" the footer stays at the bottom of this page, but it is laying over the content om pages with more content.
You need to have your position as 'fixed'.
#footer {
height: 100px;
background:#393939;
font-size:12px;
color:#777;
margin:0;
padding:20px;
z-index:999;
bottom:0;
clear:both;
position:fixed;
}
You could add a min-height to your wrapper div like so:
wrapper {
min-height: 600px;
}
That won't look awesome on all screen sizes, but its a quick way to get the job done.
Related
I'm trying to dynamically change the background image on a jumbotron depending on my view content but I am unsure of how to do this. My code so far sticks the image inside the jumbotron as a separate element but as I say, I really want this to be the background image so that it'll scale nicer and I can central valign the image.
<div class="jumbotron" style="padding:0px; max-height: 200px; overflow:hidden; border-radius:0;">
<img src="#Model.Artist.ArtistHeaderImage" alt="#Model.Artist.ArtistAlias" class="img-fluid" />
</div>
This is the sort of thing I'm trying to achieve
.jumbotron {
background-image: url("#Model.Artist.ArtistHeaderImage");
background-size: cover;
}
Ignore the inline styles - I will be moving them to a class once I've finished. Thanks
If the jumbotron is inside a layout and the individual views are inside RenderBody you could do;
Add this to your layout
<head>
...
#RenderSection("Styles", false)
</head>
Add this to your view
#section Styles {
<style>
.jumbotron {
background-image: url("#Model.Artist.ArtistHeaderImage");
background-size: cover;
}
</style>
}
Or if your jumbotron is inside the view, simply add a style tag above that element or on its header.
<style>
.jumbotron {
background-image: url("#Model.Artist.ArtistHeaderImage");
background-size: cover;
}
</style>
<div class="jumbotron" style="padding:0px; max-height: 200px; overflow:hidden; border-radius:0;"></div>
I'm trying to put a div inside another div that stretches to the full height of the screen and center it vertically, like so:
Preview http://f.cl.ly/items/1a3L46453f0D271V1O2w/Schermafbeelding%202013-04-02%20om%2021.37.25.png
The large photo is the full screen div, the white band is the vertically centered div.
The solution below works gracefully on all possible computers and browsers that I tried... except for Mobile Safari.
For some reason, Mobile Safari (at least on iPad) decides to put the nested div 50% down the page instead of 50% down its parent div.
HTML:
<div class="band full">
<div class="band">
*content*
</div>
</div>
SCSS (irrelevant tags removed):
div.band{ //General styling for div.band elements
margin: 0px;
padding: 80px 0px;
width: 100%;
&.full{ //Style the parent div
height: 100%;
}
div.band{ //Style the nested div
position: relative;
top: 50%;
margin-top: -200px;
padding: 20px 0px;
height: 400px;
}
}
I've got a nagging feeling that this is a bug in Mobile Safari. I sure hope it isn't. Does anyone know how to fix this?
I really did my best to solve this in a clean manner, but I ran some more tests and it's clearly a bug in Mobile Safari's rendering engine. I decided to solve it with an admittedly dirty jQuery hack, but at least it works now.
My page had one of these full screen photos with a band in the middle on the very top, and another one on the very bottom of the page. The top one was easy to solve: just use absolute positioning instead of relative (which was positioning relatively to the top of the page anyway). The "top" property of the bottom band, on the other hand, has to be recalculated based on the height of the page after setting its positioning to absolute. I solved this by setting the "top" property to this: vertical offset from the top of the page to the bottom band + (the height of the full screen band to center in / 2).
Or in code form:
$(window).load(function() { //Wait until the page is fully loaded
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) { //If the user is using an iDevice
$('div.band#top div.band').css('position', 'absolute');
$('div.band#bottom div.band').css('position', 'absolute');
$('div.band#bottom div.band').css('top', $('div.band#bottom').offset().top + ($('div.band#bottom').height() / 2));
}
});
check this out. Not tested on mobile but should work
HTML
<div class="panel">
<div class="panelInner">
<div class="box">
<div class="boxInner">hi there</div>
</div>
</div>
</div>
CSS
html {
min-height: 100%;
height: 100%;
}
body {
height: 100%;
margin: 0;
}
.panelInner {
padding: 40px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.box {
height: 200px;
background: #999;
display: table;
width: 100%;
}
.boxInner {
display: table-cell;
vertical-align: middle;
}
And here's a fiddle
I have written this sticky footer template and I want my content div to have a 100% min-height. Problem is, when I do that, it extends under the footer, with an extra height of header height + footer height. How can I fix this? It should support also short content and long content, in the same manner of the sticky footer. Do I need to use jQuery? I'm a beginner so please KISS.
HTML
<body>
<form id="form1" runat="server">
<div class="wrapper">
<div class="header"></div>
<div class="content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="footer"></div>
</div>
</form>
</body>
CSS
html, body {
min-height:100%;
height:100%;
}
#form1 {
min-height:100%;
height:100%;
margin:0;
}
.wrapper {
min-height:100%;
height:100%;
position:relative;
}
.header {
background:#990066;
height:100px;
}
.content {
background:#ffffcc;
padding-bottom:100px; /* Height of the footer */
min-height: 100%;
width: 1120px;
margin: 0 auto;
}
.footer {
position:absolute;
bottom:0;
width:100%;
height:100px; /* Height of the footer */
background:#333;
}
.content {
min-height: calc(100% - 100px - 100px); /* minus header-height minus footer-height */
}
Minimum height of the content element is set to 100% minus 100px (height of the header) and 100px (height of the footer). Using CSS function calc(), the browser calculates the exact height. This would be better in terms of cross browser compatibility:
.content {
min-height: -webkit-calc(100% - 100px - 100px);
min-height: -moz-calc(100% - 100px - 100px);
min-height: calc(100% - 100px - 100px);
}
This can be achieved with just css.
HTML (note the slight change in nesting for the footer div)
<body>
<form id="form1" runat="server">
<div class="wrapper">
<div class="header"></div>
<div class="content">
...
</div>
</div>
<div class="footer"></div>
</form>
</body>
CSS
html, body, #form1 {height: 100%;}
.wrapper {
min-height: 100%;
}
.content {
padding-bottom: 150px; /* must be same height as the footer */
}
.footer {
margin-top: -150px; /* negative value of footer height */
height: 150px;
}
Adapted from here.
http://www.cssstickyfooter.com/using-sticky-footer-code.html
Also a quick fiddle http://jsfiddle.net/Zf8Fh/3/
You just need to fixed postion of .footer class in css like below
.footer {
position:fixed;
bottom:0;
width:100%;
height:100px; /* Height of the footer */
background:#333;
}
I'm having some trouble getting a footer to appear as one frame on the first page of a Pisa document, and as another frame on every other page. I have attempted to adapt the lastPage idea from here, but with no luck.
Is it possible to do this? <pdf:nextpage /> doesn't seem to be the right thing here since the document has a long table that may (or may not) flow over multiple pages. <pdf:nextframe /> plus a first-page-only frame looks promising, though I'm not sure how to use this exactly.
Currently I have (snipped for brevity):
<style type="text/css">
#page {
margin: 1cm;
margin-bottom: 2.5cm;
#frame footer {
-pdf-frame-content: footerFirst;
-pdf-frame-border: 1;
bottom: 2cm;
margin-left: 1cm;
margin-right: 1cm;
height: 1cm;
}
#frame footer {
-pdf-frame-content: footerOther;
bottom: 2cm;
margin-left: 1cm;
margin-right: 1cm;
height: 1cm;
}
</style>
<body>
<table repeat="1">
<!-- extra long table here -->
</table>
<div id="footerContent">This is a footer</div>
<!-- what goes here to switch frames after the first page? -->
<div id="footerOther"></div>
</body>
This places the same footer on each page. I need the same space left on each consecutive pages, but with no content in the frame.
You can define additional layouts by name, then tell xhtml2pdf to switch to them explicitly using the nexttemplate tag. I did exactly this recently to have no header on my first page but to show it on all the subsequent pages.
You should change your #page definition to two different pages, perhaps like this:
<style type="text/css">
#page {
margin: 1cm;
margin-bottom: 2.5cm;
#frame footer {
-pdf-frame-content: footerFirst;
-pdf-frame-border: 1;
bottom: 2cm;
margin-left: 1cm;
margin-right: 1cm;
height: 1cm;
}
}
#page innerpages {
margin: 1cm;
margin-bottom: 2.5cm;
#frame footer {
-pdf-frame-content: footerOther;
bottom: 2cm;
margin-left: 1cm;
margin-right: 1cm;
height: 1cm;
}
}
</style>
Then, in your html where you want to switch to the different layout, use a tag like this:
<pdf:nexttemplate name="innerpages"/>
The next page (and subsequent pages until you change the template again) will use the innerpages layout with your 'other' footer.
My page doesn't contain a lot of information, so footer is displayed somewhere in the middle of the page. How can I have that always at the bottom?
jquery mobile approach - <div data-role="footer" data-position="fixed">
{
potition: absolute;
bottom: 0;
width: 100%;
height: some_height;
}
This isn't a fixed position footer. The footer will be offscreen if the page content is taller than the screen. I think it looks better this way.
The body and .ui-page min-height and height are necessary to prevent the footer from jumping up and down during transitions.
Works with the latest JQM version as of now, 1.4.0
body,
.ui-page {
min-height:100% !important;
height:auto !important;
}
.ui-content {
margin-bottom:42px; /* HEIGHT OF YOUR FOOTER */
}
.ui-footer {
position:absolute !important;
width:100%;
bottom:0;
}
[data-role=page]{height: 100% !important; position:relative !important;}
[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%;}