I have a very simple jQuery mobile page and would like to show a copyright message at the bottom of my page exactly above the footer.
In the page footer, I have several buttons and the copyright message should appear in small plain text on the right cornenr exaclty above the footer... I see it as a kind of dual footer .
When I add the copyright message to the footer, it will inherit the footer data-theme which is not desired. When I add it to the content of my site, it does not show the copyright at the bottom of the page. Any hints on where to inject my copyright message is highly appreciated.
Easy with some CSS magic
create a 'copyright' CSS class:
.copyright {
font-size: 0.75em;
margin-top: -20px;
float:right;
padding-right: 5px;
}
Notes:
a. 'margin-top' makes it render just above your footer
b. 'float:right' puts in on the right of the screen. Use 'float:left' or 'float:center' if desired.
In your footer, use the copyright class.
< div data-role="footer">
< span class='copyright'>© My Company Ltd</span>
< h4>Footer </h4>
< a href="#" data-rel="back" data-icon="home">Home</a>
< /div>
Ideally I'd need to see some html to try to fix your exact problem, but the gist of what you want is something like:
<div style="position: absolute; bottom: 0; width: 100%">
<div style="width: auto; text-align: right">Copyright...</div>
<div style="border: 2px solid red; width: auto">footer</div>
</div>
Related
I'm stuck at some point. I'm trying to do a three-column page layout. The Middle section is for posts, the right section is for some other links and references and so (A bit long). Left is fixed.
My question is;
How can I stop the right div from moving when it reaches its bottom? And if the middle div's content is shorter then the right also has a scrollbar for the page for the right div. Just like Twitter does.
I tried to do some brainstorming. And thought maybe Twitter makes double divs for those sections. One is normal, the other is the fixed bottom it. So normal one stretches the page for scrolling, and the other one sticks on top of it. But I'm not sure if I'm right.
Or is it possible with pure CSS? (Also I'm using TailwindCSS)
Anyway; here is a presentation of my thought. (Or you can simply look at twitter homepage feed)
Also here is a gif;
click
You can use the following CSS code in the element which needs to stop
position: sticky;
bottom: 0
Refer to the following post on Stackoverflow for more information How does the "position: sticky;" property work?
Hope this answers your question!
Edit: [Try this out]
.main {
width: 100%;
height: 1000px;
display: flex;
}
.first {
width: 30%;
background-color: red;
}
.second {
width: 40%;
background-color: green;
}
.third {
width: 30%;
background-color: blue;
height: 500px;
position: sticky;
top: 0px;
}
p {
margin-left: 20px;
}
<div class="main">
<div class="first">
<p>
Left content.
</p>
</div>
<div class="second">
<p>
Main content.
</p>
</div>
<div class="third">
<p>
Right content.
</p>
</div>
</div>
I use vue.js with muse.ui here, and only use javascript and css without jquery library.
Now footer position always on the top of keyboard everytime the input field get focus.
is it do(able) to make footer position behind the keyboard everytime input get focus ?
#foot {
position: absolute;
bottom: 0;
text-align: center;
margin-bottom: 30px;
}
<form>
<div class="wrapper">
<mu-text-field type="text" />
</div>
</form>
<footer>
<mu-col class="foot">blablablablablablabla</mu-col>
</footer>
In your CSS you have defined #foot (which is an ID).
In your html "foot" is set as class:
<mu-col class="foot">blablablablablablabla</mu-col>
Either "foot" has to be defined as class in CSS or referred to as ID in the
HTML
`<mu-col id="foot">blablablablablablabla</mu-col>`
OR
in css define foot as class, that is ,
.foot {
...
}
I'm trying to replicate the effect of the footer from this website:
http://www.terradatbroker.com
In essence what it does is like the image at the top, the image stays fixed while the viewport of the div or section scrolls. I'd like the same with a div or footer block filled with content so that when reaching the footer, the lower part of the footer is revealed first, letting the content div slide upward while scrolling down. I hope this describes it clearly.
Here's what I've got so far:
HTML snippet:
<div class="row content-filler">
Content 1
</div>
<footer>
<div class="footer">
<h1 class="">Footer</h1>
</div>
</footer>
CSS snippet:
footer {
background-color: #444;
min-height: 350px;
color: #fff;
margin: 0px;
padding: 0px;
z-index: 1;
}
.footer {
margin: 0px;
padding: 0px;
background-color: #444;
position:fixed;
top: 800px;
z-index: 1;
}
Here's a jsfiddle with the full source code:
https://jsfiddle.net/DTcHh/39204/
I've searched many bootstrap themes but I couldn't find one that does this effect. I've also looked at the css but I suspect it may be done using javascript, which is minified and unreadable. Can anyone shed some light on how this is done?
Check this https://jsfiddle.net/DTcHh/39205/
Footer is fixed with bottom:0
The last div.row has a margin-bottom, for give space to the footer.
Hope it helps, cheers.
I'm working on a little CSS/HTML project and I'm running into a wall. Hoping I can get some help here. Here is a link to the UI I'm working on: http://imgur.com/a/yKXk9
What I'm trying to do is have that Projects header sticky to the top of that container div, and have all the items scroll beneath it without overlapping with the header.
This is the CSS I have for my container:
.projectContainer {
background-color: rgba(0, 0, 0, 0.15);
width: 30%;
height: 50%;
border-radius: 2em !important;
margin: 1em;
overflow-y: auto;
position: relative;
}
And this is the CSS I have for the header.
.projectHeader {
position: absolute;
padding-left: 35%;
top: 0;
height: 1.5em;
}
EDIT: I also added a bit of the HTML I'm using:
<div class = "projectContainer">
<div class="name projectHeader">Projects</div>
<div class="projectThumbnail">
<a href="http://lunchline.herokuapp.com" target="_blank">
<i class="fa fa-cutlery fa-3x"></i>
<p>LunchLine</p>
</a>
</div>
MORE PROJECT THUMBNAILS HERE
</div>
This obviously doesn't work as the header scrolls just like everything else. I tried using position: sticky on the header, and the problem with that was that all the content scrolled BENEATH the header text instead of neatly ending at the bottom of the header div. If anyone can guide me in the right direction I'd be very grateful.
Also, as a sidenote: is there a way to get rid of that gotdawful scrollbar and just have the thumb appear (and only appear when I'm actually scrolling)?
Thanks everyone.
EDIT:
Here is a JS Fiddle. https://jsfiddle.net/ksy6ahL0/
I tried stripping it down to just the container and stuff so it looks messy but I think it basically shows what I'm trying to do.
I think your biggest problem is that you put the overflow on the main div, not on the content div.
.container{
background:gray;
color:white;
width:400px;
height:400px;
display:flex;
flex-direction:column;
}
.content{
flex:1;
overflow:auto;
}
<div class="container">
<h1 class="header">header</h1>
<div class="content">content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br></div>
</div>
I am using this tutorial to create an overlay on my images with text:
http://codepen.io/pdelsignore/pen/uqenH
It works great, however I have a responsive website and if I try to enter a % as the width / height of the '.box' the image disappears. It appears it can only be a fixed with (i.e. px) which obviously doesn't scale.
.box {
cursor: pointer;
height: 250px;
position: relative;
overflow: hidden;
width: 400px;
font-family: 'Open Sans', sans-serif;
}
Does anyone have any ideas? Thanks in advance!
Try giving min-width and min-height a try.
min-width: 100%;
min-height: 100%;
In live project usually we use any responsive framework. Like bootstrap or foundation. So I think you could ignore as framework will handle this properly. No need to use any % to make it responsive. For Bootstrap we use
<div class="row">
<div class="col-md-4">
<div class="box">
<img src="http://files.room1design.com/oldcity.jpg"/>
<div class="overbox">
<div class="title overtext">
Walk This Way
</div>
<div class="tagline overtext">
Follow the path of stone, a road towards an ancient past
</div>
</div>
</div> <!-- End box -->
</div> <!-- End Col-4 -->
</div> <!-- End row -->
I believe the dimensions of .box as a percentage would be based on the height of the parent. since no height is specified on the body it has no frame of reference. try adding the following to get percentages working on .box.
html, body {
height:100%;
}
here is an updated codepen with a few other changes to illustrate the use of percentages after giving your body dimension.
http://codepen.io/anon/pen/dPREBE