I am trying hard to show a div in the last pages footer section.
But this not working for me. I have tried so many solutions given in
StackOverflow. But none of them are working for me.
Problem link is given below.
Link: https://jsfiddle.net/minhajhasan/qzd8w14b/
I have tried with these codes to take my div in the footer.
<Style>
.print-address{
position: absolute;
bottom: 0px;
left: 0px;
height: 50px;
}
</style>
HTML 5 and CSS3 have no support for printing page header and footers in print media.
And while you might be able to simulate it with:
tables fixed
position blocks
Related
I am working on designing HTML page by looking at the image I have. It should exactly match with what I have in my image (in the link). I have got almost everything designed as that image but few things I am not able to make it work. Here is my image link and I have to design HTML page exactly as it is.
And here is my jsfiddle which I have designed by looking at the image.
It looks like I am having problem with absolute width because of which all my divs are getting messed up.
I can see white space between company-bio div and mission-statements div which I am not able to remove somehow? And I don't understand why it is even coming.
Also northmanwild div is going out of alignment as well.
There is a lot of white space below copy-rights div at the end and that is also not matching with my image.
Also somehow all the alignments of my div looks ok on my browser on my laptop but when I made jsfiddle, it looks weird and it goes haywire. It doesn't matches with what I have in my image link. So maybe what I have won't work with multiple browsers or multiple resolution.
Here is my css for company-bio:
body .company-bio {
position: relative;
top: -42px;
padding-top: 40px;
margin-left: 131px;
/*Added Just now */
padding-bottom: 40px;
max-width: 100%;
background: url("https://s30.postimg.org/l04wudgs1/grey-bar.png");
padding-left: 140px;
padding-right: 155px;
font-size: 20px;
font-family: "Adelle PE";
}
What is wrong I am doing because of which my html is getting messed up here? What I am supposed to do to solve this absolute width problem so that my html works fine anywhere without alignment getting messed up.
Note: I still need to work on left navigation text which I haven't done that yet. As of now I am trying to fix all the alignment issues which I am having because of absolute width I believe is happening.
I'm trying to achieve an effect similar to the one seen here on Dropbox's landing page. Notice that there's a link at the bottom of your browser viewport ('learn more'). This is always at the bottom of the page on first load. However, it's not fixed to the bottom of the window as you can scroll past it.
Any idea how to achieve this? A CSS or jquery solution is fine.
It's a link within a div which has the following CSS (the div's):
position: absolute;
bottom: 50px;
left: 0;
width: 100%;
text-align: center;
cursor: pointer;
The important parts there are position:absolute and bottom:50px
I'm tying to achieve zoom effect which you can see here: http://x3dom.org/x3dom/example/x3dom_x3dElementCSSIntegration.html.
So, I have a simple element (it doesn't matter that this is x3d example, really), which I want to enlarge to full screen size with a click of a button, and then reduce back to it's original size after clicking the button again. I would very much appreciate any help I can get with coding this in JavaScript. I have viewed the page source on this example and tried to get it to work in my project, but I'm very bad with JavaScript and I can't seem to get it to work.
Also, I tried searching with Google, but all the examples I found are far fancier in comparison with what I need.
Something similar to the following should work.
HTML:
<div id="zoomable" class="resizable">
content
</div>
CSS:
.resizable {
position: relative;
}
.resizable.zoomed {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
}
JavaScript:
document.getElementById('zoomable').className = "resizable zoomed";
Can anyone teach me how to create a footer div which is always stay at the bottom of the website regardless of how much information is present in the middle and the most important thing here is that I'm not fixed any height property for the middle content(Please notice that is "website" not "window" because I don't want to fixed the footer that force the user always see the footer whenever they scroll up or scroll down in my website) A specific example is like Facebook that footer always at the end of the page no matter how many times you click older post button. Is there anyway possible in HTML and CSS or even javascript to do that. Please help me and thank you so much in advanced!
I've used stickyfooter in the past. You can learn it here http://ryanfait.com/sticky-footer/
You put the footer content after the other content. That's all.
(Unless you need to deal with earlier content that is positioned out of normal flow, is floating, etc).
One way is to use a master page with the footer div in it. Please take a look at this MSDN article for more info: http://msdn.microsoft.com/en-us/library/wtxbf3hh.aspx
If you want the footer to be pushed down to the bottom of the window if the content isn't high enough to fill the window, use the technique offered in this article.
To summarize the article:
Create a wrapper around the page elements:
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
Using CSS, give the body 100% height and give the container position:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
Again using CSS, give the content (in this example, #body), a padding-bottom with the height of the footer and position the footer absolutely at bottom: 0:
#body {
padding-bottom: 60px; /* Height of the footer */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Height of the footer */
}
It's important that the footer has a fixed height (i.e. in px or em).
You can see a demonstration of this technique here: http://jsfiddle.net/PPvG/F7Fph/
I'm loading an rss feed box and applying jScrollPane to it. Works great on my other sites, but for some reason this one is breaking only in Safari. It loads the page correctly and then suddenly snaps to just the rss box all alone. I've tried .delay() and (window).ready thinking it was the timing, and .css(position), to no avail. Any ideas on why it's doing this?
it's here: miariddle.com/webclient/hundredstories/blog.html
scrollpane script:
<script type="text/javascript">
$(document).ready(function() {
$(".blog").jScrollPane();
});
</script>
CSS:
.blog {
width: 530px;
height: 250px;
position: absolute;
top: 380px;
left: 330px;
margin-left: 20px;
padding-left: 10px;
}
html/script that loads the feed:
I experienced similar issue, and here's what worked for me:
jQuery(window).load(function() {
jQuery('.blog').jScrollPane();
});
That is, use (window).load instead of (window).ready as you indicated in your question.
In my case, I had to use jQuery (not $) because of the WordPress script compatibility issues. But in your case it may work with $ as well.
Hope this helps.
P.S. Another thing I noticed, it seems that the .blog div of your site contains only rss feed. jScrollPane is applied to that div, so naturally it applies itself to the content of the div.