I found a lot of examples regarding images that didn't work exactly for what I need. I have a simple footer that I use for copyright/social media linking information and I would like it to float to the right so that on screen resize it doesn't interfere with the navigation that is at the upper left.
/* footer */
footer {
position:fixed;
left:20px;
bottom:20px;
z-index:1;
}
footer small {
float:right;
clear:both;
margin:0 0 5px 0;
In the html:
<footer>
<small>© 2003-<script language="javascript" type="text/javascript">
var today = new Date()
var year = today.getFullYear()
document.write(year)
</script> Name of Site | The Site
| Site #2
</small>
</footer>
Its a pretty minimal design and I'm trying to keep it really simple so when its time for me to try to optimize for mobile it will work. Any help is appreciated.
Just add right:0 (or some number) to pull it to the right.
footer {
position:fixed;
left:20px;
bottom:20px;
z-index:1;
right:0;
}
jsFiddle example
You need to set a width on the footer
DEMO
footer {
position:fixed;
left:20px;
bottom:20px;
z-index:1;
width:100%; /*Added*/
}
footer small {
float:right;
clear:both;
margin:0 30px 5px 0;
}
I would try to assign a height and width to your footer. Also make sure you give it a display type of block. Not all browsers respect footer as a block element.
Maybe something like this:
footer {
position: fixed;
display: block;
right: 0;
bottom: 0;
height: 20px;
width: 100px;
}
I've modified your code a little bit to do the job.
footer {
position:fixed;
left:0px;
right: 0px;
bottom:20px;
z-index:1;
text-align: right;
}
footer small {
margin:0 20px 5px 0;
}
Related
I've been trying like crazy to make this happen but I just can't figure it out ( beginner ).
As you can see, when you scroll down, the top head part will stick to the top of the page but also overflow a bit. This is done with stickyjs. I want to do the same thing with the bottom of the head as well, after scrolling a bit for it to "sink" a few pixels while sticking to the bottom of the page, so there's more visibility, but no matter what I try, it just won't work.
If anyone could help, I'd be thankful.
Here's the code on the top part:
#head {
z-index:101;
display: block;
position: absolute;
bottom: 20%;
width:100%;
margin:0 auto;
right:0;
left:0;
height:85px;
background: url(../float.png) #fff 50% 50% no-repeat;
text-indent:-9999px;
overflow:hidden;
}
Here's the code for the bottom part:
#footerhead {
z-index:100;
position:fixed;
left:0px;
bottom:0px;
margin:0 auto;
height:20%;
width:100%;
background:url(../footer.png) #fff 50% 0 no-repeat;
}
And here's the stickyjs that makes it stick:
<script>
$(document).ready(function(){
$("#head").sticky({topSpacing:-70});
});
</script>
Please help me out. :(
You can use the jQuery .scroll() function to achieve what you're trying to do. Here's a little code that I've created which would work perfectly for you:
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$("#footerhead").css("height","5%");
} else if ($(this).scrollTop() < 500) {
$("#footerhead").css("height","20%");
}
});
What happens is that if the user scrolls down 500px on your website, the height of the #footerhead div reduces to 5% thus hiding a larger part of the face and making the content area more visible. Next when the user scrolls back up, the height of the #footerhead div increases back to 20%. You can also set the value of scroll from 500px to any other value of your choice.
This may work for you:
<!doctype html>
<html>
<head>
<title>Sticky Bottom</title>
<style type="text/css">
#head {
z-index:101;
position: relative;
height:85px;
width: 100%;
background: none green;
}
#footerhead {
z-index:100;
position:relative;
height:85px;
width: 100%;
background: none red;
}
.is-sticky #footerhead {
position: fixed;
top: auto !important;
bottom: -10px;
left: 0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://path_to/jquery.sticky.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#head").sticky({topSpacing:-10});
$('#footerhead').sticky();
});
</script>
</head>
<body>
<div id="head">
HEAD
</div>
<div id="footerhead">
FOOTERHEAD
</div>
<div id="content">
<p>Content here..</p>
</div>
</body>
</html>
Could be jsticky error, but I see it adds top: -10px to each sticky element. Please note, the element becomes sticky and gets class is_sticky only after you scroll down the element (it cannot stay in footer).
Issue #1
Trying to make 2 divs align with eachother,
the fist div doesnt have a scrollbar, but the second has one. The scrollbar cause the second div to be offset from the first one.
Is there a way to align those 2 divs?
Issue #2
Why is the second div not scrolling when it has the overflow-y:scroll; ?
body, html {
margin: 0;
padding: 0;
border: 0;
outline: 0;
overflow:hidden;
}
.fixed-top-container {
text-align:center;
top:0px;
height:100px;
min-height:100px;
max-height:100px;
width:100%;
display:inline-block;
margin:0 auto;
padding:0;
background-color:rgba(0, 0, 0, 0.5);
}
.container {
width:100%;
height:100%;
background-color:#F0F0F0;
overflow-y:scroll;
}
.content {
width: 800px;
height:100%;
margin:0 auto;
background-color:#FFFFFF;
}
View JSFiddle for issue: http://jsfiddle.net/Aaeijh/qAh9g/1/
How can we get the bottom div to scroll?
Use the user friendly <textarea> instead of old <div> technique
<textarea rows="10" cols="50" class="container">
//your text here
</textarea>
JSFiddle
remove overflow:hidden; and overflow-y:scroll; ..
The page I have got is like this: .
I wanted to make it centralized but I couldnot do that.
The problems are:
I want to give black div full page.
I want to centralize other two divs without using left property in css.
While hovering the value of z should increase by any value so that the whole div can come up.
I learned about margin: 0 auto o auto; property that it centralizes the element with respect to page.
I want to get the same for yellow and green divs using margin property w.r.t. black divs.
Can I get these results using CSS or i will have to use Javascript etc?
My html code is here:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styling.css"/>
</head>
<body>
<div class="first">
<center> The first link </center>
</div>
<div class="second">
<center> The second link </center>
</div>
<div class="third">
<center> The third link </center>
</div>
</body>
<html>
My css document is:-
.first
{
position: absolute;
width:500px;
color:#fff;
height:200px;
background-color:#000;
z-index: 0;
margin:0 auto 0 auto;
}
.second
{
width:400px;
position: absolute;
height:200px;
background-color: green;
left:60px;
z-index: 1;
margin:50px auto 0 auto;
}
.third
{
position: absolute;
width:300px;
height: 200px;
left:100px;
background-color:yellow;
z-index: 2;
margin:100px auto 0 auto;
}
body div:first-child a:hover
{
font-size:30px;
color:yellow;
z-index:5;
}
body div +div a:hover
{
font-size:40px;
color:red;
z-index: 5;
}
body div+div+div a:hover
{
font-size:50px;
color:#fff;
z-index:5;
}
I apologize for my English.And hope you will get my problems.
I still believe that using left is the best way to solve your problem — not sure why OP wants to avoid it.
Here is the proof-of-concept fiddle: http://jsfiddle.net/teddyrised/YqDL5/
Instead, use the following trick: set their position from the left by 50% of the container's/parent's width. That's half correct. However, we also need to take into account the width of the element itself, which means we have to offset it backwards by half of its own width.
Use this:
.second, .third {
left: 50%;
transform: translateX(-50%);
}
There are also some changes you have to make to your HTML code:
I would suggest wrapping everything around a parent container that is relatively positioned, and instead of using margins to offset the second and third div from the top, use top instead.
Remove <center>. Delegate layout to CSS, and this HTML tag has been deprecated long time ago.
Here is the revised HTML:
<section>
<div class="first">The first link </div>
<div class="second"> The second link </div>
<div class="third"> The third link </div>
</section>
Also, I suggest setting the first div to relative positioning, so it will not cause the parent element's height to collapse. Otherwise, you will have to set an explicit height since absolute positioning takes elements out of the flow, and the parent will not take it into account when calculating its own dimensions.
section {
position: relative;
}
.first {
width:100%;
color:#fff;
height:200px;
background-color:#000;
}
.second, .third {
left: 50%;
transform: translateX(-50%);
}
.second
{
width:400px;
position: absolute;
height:200px;
background-color: green;
top: 50px;
z-index: 1;
}
.third {
position: absolute;
width:300px;
height: 200px;
top: 100px;
background-color:yellow;
z-index: 2;
}
See fiddle at: http://jsfiddle.net/teddyrised/YqDL5/
So, I'm working on this JSFIDDLE (http://jsfiddle.net/dRpWv/248/) and I can't see why botcontainer div is bleeding into the footer. Other pages that I've created on the site don't have this problem.
I think it has to do with a recently JS coded div hide/reveal on the "vertical Expertise" tiles because I've checked all of the divs and made certain they're all closed. Also, tried display and position edits that had no effect.
Here's the basics of the CSS for content containers::
#topcontainer {
margin:75px 0 0 0;
}
#botcontainer {
margin:100px 0 0 0;
}
Here's the basic css for the "vertical expertise" area (which is wrapped in the botcontainer div)::
.vertTiles {
border: none;
margin-right: 3px;
margin-top:3px;
float:left;
}
.vertCont {
border: 1px solid black;
background-color: #ffffff;
display: none;
padding: 5px;
width:800px;
max-width:800px;
height:400px;
max-height:400px;
top:0;
left:0;
}
#xbox {
position:absolute;
width:75px;
height:75px;
bottom:20px;
right:20px;
}
Note that I've left out the MM_imageswap js just keep things clean in JSFIDDLE. ANy help from the community would be helpful!
Your code and CSS styles are Vast. It will take some time to go through it.
This is what i added. Is this what u want? Your question is a bit confusing.
CSS
#botcontainer {
margin:100px 0 0 0;
clear:both;
overflow:auto;
}
FIDDLE
So I've been playing around with web development and I've noticed that in Firefox, my elements are getting pushed to the right versus down, which is what it should be (which happens in Chrome).
I am by no means a Guru. Is there any way to prioritize wrapping versus pushing? I have tried inserting line breaks and setting both to display:block. That does not seem to be the problem.
This is the CSS for the bar:
.tiq-editor-bar
{
z-index:1;
overflow:hidden;
float:left;
width:100%;
border-top: solid 1px #AAA;
text-align:center;
display:none;
position:relative;
color:#AAA;
font-weight:normal;
font-size:14px;
}
This is the CSS for the gallery wrapper (the white out-lined thing)
#tiq-ui-gallery-wrapper
{
min-height: 500px;
background:url(../img/portfolio/empty.png) center no-repeat;
overflow:hidden;
}
And for the gallery itself:
.tiq-theme-gallery
{
width:600px;
height:400px;
resize:vertical;
border:solid 1px #eee;
overflow:auto;
}
Thanks!
EDIT: The gallery is positioned relatively, BTW. I am using Galleria and that gives the container:
.galleria-container {
position: relative;
overflow: hidden;
background: #000;
display:block;
}
EDIT EDIT:
Here is a JSFiddle:
http://jsfiddle.net/RyBz9/2/
Change
.tiq-editor-bar
{
float:left;
}
to
.tiq-editor-bar
{
float:none;
}