<div id="site_wrapper">
<div id="top"><?=$top?></div>
<div id="wrapper">
<div id="login_wrapper">
<?=$content?>
</div>
</div>
<div id="footer"><?=$footer?></div>
</div>
Where
$top should be drawn on the very top of the page.
$content should be centered both vertically and horizontally of the page.
$footer should be drawn on the very bottom of the page.
I do not want either of the divs to follow the view, I found two solutions for the problems one by one, but none to combine them, seeing as they both had the height element in css. So first I guess if it even is possible (which I guess it is) second is then of course, how?
Edit: Pretty much like this side, the top bar should always be on the top, that one is fairly straight forward.
Then the #login_wrapper should always be centered in the site with a fixed height.
Last the footer should always be on the bottom (it should be pushed not stickied), because in this case #login_wrapper wont fill out the site.
The #top and #footer both have fixed heights as well.
Edit2: Fixed some clarifications for the problem.
Found solution from this site [link]http://stackoverflow.com/questions/7909587/horizontal-and-vertical-centering-above-a-sticky-footer-in-css
Thanks anyway!
If i understand your question, try with this css
#site_wrapper
{
position: relative;
}
#top
{
position: relative;
top: 0px;
}
#footer
{
position: relative;
bottom: 0px;
}
#wrapper
{
position:relative;
vertical-align: middle;
height: 100%;
}
#login_wrapper
{
/* add some height */
}
Related
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>
I'm designing a pretty simply website for a friend. In the design, he wants a ribbon to stretch out horizontally in the middle of the page.
Like so:
https://i.imgur.com/Hz4SH4Hh.png
My attempt at doing this was to crop the 'ribbon' parts of the right and left and display those images while floating them to the right and left. Then creating a content div, centering it to fill in the middle of the ribbon. This solution is super sloppy and doesn't work well at all. Here's a picture of it
https://i.imgur.com/66C2kj5h.png
The resolution is kinda off, but you can see that the border of the middle div are off, and when stretching or shrinking the page, the percent width of the middle div messes the whole thing up.
Heres my HTML/CSS
<div class='ribbon-container'>
<div id='ribbon-left'>
</div>
<div id='ribbon-right'>
</div>
<div class='clear'></div>
<div id='ribbon-middle'>
</br>
<center>
<span class='ribbon_header'>Food Around Your School</span>
</center>
</div>
</div>
.ribbon-container { width:100%; height:118px; position:relative;}
#ribbon-left { background-image:url('images/ribbon_left.png'); width:117px; height:119px; position:absolute; bottom:0; left:0;}
#ribbon-right { background-image:url('images/ribbon_right.png'); width:117px; height:119px; position:absolute; bottom:0; right:0;}
#ribbon-middle { width:85%; height:81px; background-color:#b5b5b5; border:7px; border-top-style:solid; border-bottom-style:solid; border-color:#61615f;top:0; margin:0 auto;}
You're just gonna have to size everything in the same units. I'd suggest just using pixels unless you're going with a responsive design, and if you're going with a responsive design, I'd suggest using something like foundation.js.
Edit: and +1 to Michael Peterson's SVG idea. That's a good one too.
Perhaps try setting
.ribbon-middle{
width: auto;
padding: 0 120px;
}
where ribbon's padding is the width of the left/right images. then you will have the text always visible.
Since the height of the banner is not changing, you can accomplish this using by using a horizontally-repeating image as the background for the banner and then using absolute positioning for the left and right portions of the banner.
The html becomes:
<div class='ribbon-container'>
<div id='ribbon-left'></div>
<div id='ribbon-right'></div>
</div>
And the css becomes:
.ribbon-container {
width: 100%;
height: 120px;
position: relative;
background: url('http://i.imgur.com/LVXiQ37.jpg') top left repeat-x;
}
#ribbon-left {
position: absolute;
top: 0;
left: 0;
width: 112px;
height: 120px;
background: url('http://i.imgur.com/2MOcrO9.jpg') top left no-repeat;
}
#ribbon-right {
position: absolute;
top: 0;
right: 0;
width: 97px;
height: 120px;
background: url('http://i.imgur.com/Q6NmXR6.jpg') top left no-repeat;
}
I've done a really crude mock-up using the initial image you posted. The problem is that the image itself is not perfectly horizontal, so it looks like the right side does not line up in my fiddle, but if you are more careful in creating the initial image, this will work. And I haven't added text, but this can be done using absolute positioning as well, or another method I'm sure.
You can see the example at: http://jsfiddle.net/M3GmY/
I've been using http://ryanfait.com/sticky-footer/ and it works great until you need a margin/padding at the top of the page. The design I'm working with has a patterned body and all the page content is in a white box that starts 15px from the top. I still need a footer that sticks to the bottom cross browser. Any ideas?
UPDATE:
Thanks for all the ideas but noting works perfectly. Adding a margin to a sub element of the wrapper puts in an un-nessary scrollbar: Working example: http://jsfiddle.net/cronoklee/p2cPD/
If you're open to scrapping the sticky footer you've been using, here's how I would go about making one from scratch.
HTML
<div class="wrapper">
<div class="content">
... Your Content Here ...
</div>
</div>
<div class="footer">
... Your Footer Here ...
</div>
CSS
.wrapper {
background: #eee;
padding: 15px 0 100px;
}
.content {
background: #fff;
}
.footer {
background: #ccc;
bottom: 0;
height: 100px;
left: 0;
position: fixed;
right: 0;
}
That should work cross browser. The only nuance about this to be aware of is that position: fixed doesn't work in IE 6. Any improvements are welcome :)
Could you apply a margin-top to the body?
body{
margin-top:15px;
}
This works with firebug on the page you linked to.
A solution without adding a scrollbar. Make these adjustments:
.header{
height:168px; /*15px + image height*/
image-position:bottom;
margin-bottom:37px;
}
.download{
top:175px;
}
Well, I just found this thread since I have had the same problem ten minutes ago and I'd like to share my solution to the problem with "unnecessary scrollbar caused by vertically-down-shifted footer caused by my header-div with margin-top: 20px, because I just want it to be 20px from the very top of the page", which I came up in the meantime.
Just change your .content{margin-top:15px;} to .content{padding-top:15px;} and it should work. The scrollbar should disappear and the content has it's distance from the top.
As seen here: http://jsfiddle.net/p2cPD/24/
Yes - it will expand the content-div's background, but if you don't want it there it can be solved by using some transparent png of some sort or whatever.
Also, according to the http://ryanfait.com the <div class="push"></div> thing should be at the end inside wrapper-div and after content-div, not inside content-div.
Here is a preview of what I have so far:
The red area is part of the design and should always scroll down with the design. So when the content expands, the footer, and that red bar go with it. This should be at the very bottom of the window.
I tried positioning it absolute and it worked perfectly, except when I re-sized my browser and made it smaller, it would stay at the very bottom but would only work when the browser is in full screen.
What I am doing right now is just positioning it relative with top:-120px; and then as you can see, it gives me the extra whitespace that I want to get rid of.
footer { height:185px; background:url(../images/footer_bg.png) repeat-x; position:relative; z-index: 0; top:-115px; width:100%; }
Not sure what else code to paste, I think that's all everyone needs. The rest is self explanatory. Does anyone have any suggestions on how to approach this?
My goal is to get it just like the image above except without the whitespace, pushed down at the bottom at all times, even when the browser is re-sized.
we use a sticky footer as well - here's the basics:
<div id="container">
<div id="header">Header</div>
<div id="nav">
<ul>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
<div id="content">Content Here.</div>
<div class="clearfooter"></div>
</div>
<div id="footer">Footer Here.</div>
Note the clearfooter before the end of the container. Then with CSS you need something like this:
html, body {
height: 100%;
}
#container {
min-height: 100%;
margin-bottom: -330px;
position: relative;
}
.clearfooter {
height: 330px;
clear: both;
}
#footer {
height: 330px;
position: relative;
}
The only downside is that this is a fixed height footer. Don't forget, too if you add any padding to your footer that increases the height and your height on the footer, clearfooter and negative margin on the container need to be adjusted accordingly.
If you happen to need it to work in IE6 you'll need to target the container however you'd like and use:
#container {
height: 100%;
}
Hope that helps!
Sticky footers can be tricky and adding an over lapping background can be even more tircky. What you might want to try is creating a Sticky footer and applying the background image to the body or container background repeating-x and position bottom.
Are you able to create a jsfiddle and I can show you the technique I mean.
When you are offsetting something with position: relative, the element still "reserves" the space it would have occupied otherwise - in your case, the bottom area where you get the whitespace. Set margin-bottom: -115px on your footer to tell it not to do that.
I have the following HTML and CSS:
<div class="content">
<div class="leftbg"></div>
<div class="innercontent"><p>Some content goes here</p></div>
<div class="rightbg"></div>
</div>
.content {
overflow: hidden;
}
.leftbg {
background: url("./leftbg.png") repeat-y scroll top left transparent;
margin-left: 0;
float: left;
width: 10px;
}
.innercontent {
width: 600px;
float: left;
margin-left: 0;
}
.rightbg { /* similar to left bg except for the right side */ }
The problem that I am having is the leftbg image is only repeating until it reaches the height of the paragraph in the innercontent div. I am accessing a database to grab the content for the innercontent div and hence the content will be of variable height. Is there any way to make it so that it repeats until it reaches the bottom of the leftbg (and rightbg) div? What I mean by that is for it to repeat until it is at the bottom of the innercontent div without setting the height as static (e.g. height: 200px;) because the height will be variable.
This equal height column layout tutorial from smashing magazine might help you. With lot of explanation of all the whys.
I think the problem you are facing is that leftbg and rightbg don't have any content. The height of the <div class="content"> element equals the height of it's "tallest" child (innercontent in this case).
Maybe if you post a mockup of what you want as a final result I can help you further. Also, the markup would be helpful.