http://axol.de/HTML/Projects.html
On this page you can see that "Impressum" is in the middle of the page, instead of the bottom right. Can anyone tell me why this happens?
I dont want to add "height:100%" to my body, because then there is a scrollbar on the y axis for no reason...
How can I put it on the bottom page without having to give body any height?
This happens because you did not set the position of the <div>-Tag. And by default it is directly under the previous element.
Set as a footer (div):
position: fixed;
bottom: 0px;
for your right alignment (div)
width: 100%;
text-align: right;
And for a little distance to the rigth border (a)
margin-right: 10px;
And by the way: you can hide scrollbars with overflow:hidden (body)
Edit:
<div ... style="position:fixed; bottom:0px; width:100%; text-align:right">
...
<a ... style="margin-right:10px"></a>
...
</div>
Related
I'm trying to publish my portfolio site and I'm almost done, but I'm having a problem with my sticky footer covering content when there's enough content to need to scroll down. I've tried messing with padding and margins all afternoon but I still can't seem to get it the way I want it.
Basic HTML skeleton:
<body>
<header>
<nav>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
</li>
</ul>
</section>
</div>
<footer>
</footer>
</body>
Footer:
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
font-size: 0.425em;
text-align: center;
clear: both;
padding-top: 10px;
color: #ccc;
border-top: 5px solid #cc7a00;
}
Any help would be appreciated!
After inspecting the HTML on the page you mentioned above, it looks like you might have some un-cleared floats. You can read more about floats and why they need to be cleared here: https://css-tricks.com/the-how-and-why-of-clearing-floats/.
The short answer is the wrapper isn't increasing its dimensions to encompass its children because of those floats. If you inspect your page using dev tools, you can see the wrapper essentially has no height. That means adding a margin to it isn't really going to do anything.
If you were trying to add margin and padding to the footer itself, that won't work either since you're using position:fixed. You've told it to stick to the bottom of the page and not affect the other content on the page. It wouldn't make sense to let content scroll underneath the footer and still let it have a margin that pushes away other content, right?
There are a bunch of ways to solve this problem. Here's one-
To solve your float problem, you can use the overflow:auto trick:
#wrapper {
overflow:auto;
}
Read more about overflow:auto and floats here: Why does 'overflow: auto' clear floats? And why are clear floats needed? Please note this doesn't really clear the floats but the effect is that the wrapper height will respond to its children which is what we really need here.
Then adding some extra margin on the bottom of the wrapper div to account for the height of the footer should work:
#wrapper {
overflow:auto;
margin: 0 auto 100px auto;
}
The margin property above sets the margin-top to 0px, margin-right to auto, margin-bottom to 100px, and margin -left to auto. I suggested this becuase the page you linked to already had margin: 0 auto; (margin top and bottom 0, and margin left and right auto) to center the wrapper in the page. Otherwise, if you only needed to adjust the space at the bottom you would use margin-bottom: 100px;
Try adding
padding-bottom: 97px;
to your HTML element
EDIT
html { padding-bottom: 97px; }
97px is the height of your footer.
On your <div id="wrapper"> add to the CSS: bottom : someValueMatchingTheFooterHeight;
This problem arises when you are using a position:fixed top nav bar: Since the nav bar is out of the document flow, the initial content that you put after it will be hidden by the nav bar itself. This fiddle shows my solution which uses an extra spacer div and padding-top:
http://jsfiddle.net/MFwJT/
html
<div class="fixednav">some nav stuff</div>
<div class="navspacer"></div>
main content which should not be covered by nav
css
.fixednav { position:fixed; width: 100%; height: 30px; background: #999 }
.navspacer { padding-top: 30px; } /* This works */
2 questions
Is there a better solution?
If you change padding-top to margin-top, the nav bar behaves as if the spacer came before it rather than after it. I'd like to know why this happens.
To clarify question 2, margin-top produces this:
whereas padding-top produces this (the correct behavior):
Is there a better solution
IMHO, better solution would be to avoid a fake spacer div navspacer and instead, go with the span as you can easily achieve your target with a single div, using line-height and without a fake div
Example Fiddle
CSS
.fixednav {
width: 100%;
height: 30px;
background: #999;
line-height:90px; /*this is the key here*/
}
.fixednav > span {
position:fixed;
display:block;
width:100%;
line-height:30px;/*this is the key here*/
}
HTML
<div class="fixednav">
<span>some nav stuff</span>
main content which should not be covered by nav
</div>
Question 2
If you change padding-top to margin-top, the nav bar behaves as if the spacer came before it rather than after it. I'd like to know why this happens.
when you give the padding-top: 30px;, it is applied to the inside of the content area, making the whole div height (30px + if anything is in content), check this demo to see it
when you give margin-top: 30px;, it is applied to the outside of the content, demo and the contents overlap as FIXED position divs do not follow the document flow but the viewport flow!!
The problem here is that you fixed the position of the fixednav but not the navspacer. When you do this, the fixednav and navspacer are on the same line since one is fixed and not the other. When you add padding to the navspacer, it pushes away the fixednav from it. When you add margin-top:30px; it moves the fixednav and navspacer together. To fix this, add a fixed position to the navspacer and add the content to the fixed navspacer:
/*html*/
<div class="fixednav">some nav stuff</div>
<div class="navspacer">main content which should not be covered by nav</div>
/*css*/
.fixednav { position:fixed; width: 100%; height: 30px; background: #999 }
.navspacer { position:fixed; margin-top: 30px; }
This will give you the correct behavior you are looking for.
Here is a link: http://jsfiddle.net/4vAgZ/
Also, this picture should help you with the padding vs. margin thing.
http://s3.amazonaws.com/codecademy-blog/assets/ae09140c.png
Hope this helps.
You can use a div for spacing like youtube does.
Here i made an example wich uses javascript to listen on window resizes and adjusts the spacer if necessary.
But you can also use this jQuery plugin for every single div.
//initial adjustment
$(function () { $('#topSpacer').height($('#fixedtop').height()); });
//adjustment on every resize event
$(window).resize(function () {
$('#topSpacer').height($('#fixedtop').height());
console.log("<div>" +$('#topSpacer').height() + "</div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="topSpacer"></div>
<div>
Does anyone overlay me?
</div>
<div id="fixedtop" style="position:fixed; top: 0px;">
Top navbar elements Page0000000000000 Page11111111111111 Page2222222222222
</div>
<div>
Another relative element
</div>
When ever I develop HTML pages, I get problem with window resize. The page alignment gets disturbed. One element or tag overlaps with the other.I want my page that when I resize,
my page it should remain the same & srollbars should appear.Someone Pls suggest solution.Which style attribute (position, overflow) is good to use for this?
Set a width on the body (or, more preferably, a min-width)
Not sure if this is what you need, but probably:
overflow:auto;
is what you are looking for
i understand i think, the issue is that you place your elements in a relative position(the default for position on any element), so relative to your current screen size. you can change the position to absolute and they will not move, this can cause you to loose control if your not an css ninja. ill show some cool techniques now how to control elements.
hint 1:
wrap your tags! a wrapped element will stay put!
example:
html =>
<div id="box_wrapper">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
css =>
#box_wrapper {
margin: /*top and bottom*/5px /*left and right*/ auto; /*this will center your wrapper*/
height: 300px; /*what ever height you want*/
width: 1200px; /*what ever width you want*/
}
.box {
/*what dimensions you want*/
}
this a good way of keeping objects in place, they will never leave the wrapper element if you specify a overflow.
hint 2:
position: absolute; caution this can get messy.
i use position absolute when positioning logos to the corner of a screen so that if you change the size of the screen the logo will still remain in the corner. this is cool cause you dont need a specified width for the parent elements.
html
<div class="header">
<img src="/images/logo.png" alt="page_logo">
<div id="login_button">
/*......*/
</div>
</div>
css
.header {
width: 100%
height: 150px;
border: 1px solid #ccc;
}
.header img{
position: absolute;
margin: 0px; /*position: absolute must have a margin even if its 0*/
float: left;
height: 150px;
}
#login_buttons {
float:left;
position: absolute right;
margin-right: 5px;
}
this example puts a logo on the top left hand side and the login buttons on the right and if you then change the screen size it will keep them where they need to be.
i dont want to write a whole tutorial here but these tips should help in designing solid pages that adapt to multiple screen sizes.
its hard to kinda guess what the issue could be if i cant see the code but i hope this helps.
<body id="page" onload=" pageHeight = document.getElementById('page').offsetHeight;
pageWidth = document.getElementById('page').offsetWidth;
pageHeight=1000 px ;
pageWidth=600 px ;
"> </body>
you got to fix the width of the body on page load to pixels instead of % based on the resized browser window size.
Ok so basically I have:
<div style="overflow-x:scroll">
<div class="content">
<div class="text"></div>
<div class="seperator"></div>
</div>
</div>
I want to position the bottom div (its basically a sort of horizontal line) on the bottom of the content div
I've tried the position: absolute embedding a position: relative div tag, but because the top div is scrollable the seperators remain fixed when I scroll
How would I go abouts getting this done (I have to use the seperator in the class=content div so it doesnt ruin the background I have set for it
Edit: Ok so my seperator has some shadows and stuff so I need it to overlay with the content, so I need some kind of absolute positioning, but not to the page, to the 'top div'
Is there a way to relatively position it so it'll always be at the bottom of the parent div?
#top-div { position:relative; /* fixed height or width */ }
#bot-div { position:absolute; bottom:0 }
Change this:
.sep {
border-bottom: 4px solid rgba(0,0,0,0.5)
position: absolute;
bottom: 0;
}
To this:
.sep {
border-bottom: 4px solid rgba(0,0,0,0.5);
}
If I am not understanding your question please feel free to correct me.
This should be rather simple but position: fixed and position absolute do not work!
code:
<div id="parent">
<div id="jqueryUIProgressBar"></div>
<!-- dynamic content -->
<div></div>
... ... ...
<div></div>
</div>
this div is about 300px in height, and the content inside is vertically scrollable. The progress bar appears at the top of the div when scrolled right to the top as expected.
But when scrolling down, I would still like the progress bar to appear at the top of the div!
When i scroll down the progress bar scrolls with the rest of the content!
I want it to stay where it is at the top!
ive tried:
#jQueryProgressBar {
position: fixed
}
along with position:absolute, left:0, top:0, float:left ALL SORTS
Just some quick help please
You need to set position: fixed and then set top and left as well, like this: (untested, should work)
#jQueryProgressBar {
position: fixed;
top: 200px; /*change*/
left: 100px; /*change*/
}