I'm wondering what's the best way to deal with this: I have two div in document flow (nav + content), positioned as relative.
In some situations, I will need to give the nav a fixed position. As this removes the nav from the flow, the content div is no longer properly located below. I could add the content some top-margin to compensate, but this would have to be computed because the nav doesn't have a set height (in my example, it's 50% of the window height).
Any suggestion?
JSFiddle: http://jsfiddle.net/6gkVS/
The best way to calculate a number and apply somewhere else, is javaScript, because you have to find that number after the DOM is loaded.
I'm going to just say that as of (this date) you shouldn't be using fixed positioning at all without testing for touch with modernizr, and only in the case that it's "no-touch" use fixed, due to the less that adequate browser support on mobile and touch enabled desktop. Try one out at a store and you'll see what I mean. Jumpy weird fixed headers everywhere.
The fact that your divs are relative doesn't really matter.
The best thing to do, is run modernizr. It will spit out a no-touch class on your html that you can use to style with.
.no-touch nav {
position: fixed;
top: 0; left: 0;
}
Then with jQuery, you can do something along these lines - if you are using box-sizing: border-box (which I suggest) than you'll want to use '.outerHeight()' to be sure to include padding and borders. You'll also only want a fixed header when the screen is big enough to accommodate it.
var windowHeight = $(window).height();
var navHeight = $('nav').outerHeight();
if ( windowHeight > 600 ) {
$('nav').addClass('fixed-nav');
$('section').css('margin-top', navHeight);
}
Here is a fiddle. I hope that helps. Sorry there is no way to do it with CSS yet. That would be cool.
Related
I am blocking out a new page for my site that is going to be responsive with a sliding divide separating 2 columns. On the left column I have a couple vertically stacked divs, the bottom of which I want to scroll its contents when it overflows. I want only the div to scroll and not the entire page.
I have already set the overflow-y to scroll and while this does produce the scroll-bar it still expands the entire page rather than recognizing the edge of the window. I have a feeling it has to do with the parent containers size not being fixed and I thought setting it to max-height: 100%; would resolve this but it has not.
here is the jfiddle
jfiddle
It is basically just a grab from my sandbox site wtb.dsdcs.com but it seems to behave the same in the jfiddle so it should suffice.
Just a disclaimer: there is a video the autoplays in both the website and jfiddle that I left intact in-case its container is part of the issue, so may need to turn down speakers.
Clarification: #PlayList is the element I wish to be able to scroll.
You need to give your Playlist class a height - (e.g 400px). Then, as you add more a items you should get a scrollbar. You can remove max-height as that won't be needed.
If you want a dynamic height of the playlist, that always takes up the remainder of the height, you could add a jQuery script:
var h1 = $(window).height();
var h2 = $('.videowrapper').height();
$('.playlist').height(h1-h2);
Since your videoWrapper is set to take up 50% of the height, the other approach could be to set your playlist to have the other 50%. So set it to height: 50%.
.playlist {
padding: 10px;
font-size: 12px;
overflow-y: scroll;
height: 50%;
position: relative;
}
EDIT 17 Oct:
The reason the above might not work with all browsers is probably because of your implementation. Like I said in the comments below, you shouldn't be using table-type display properties because they don't support overflow very well.
The W3C even say that the overflow property only applies to block-type elements LINK.
The MDN suggests the same LINK.
As such, implementing overflow on any table-type element will always be a tricky and risky approach as browser support issues or browser display inconsistencies should be expected. To get a fully supported solution, I'm afraid you'd have to try other display properties such as flex or block.
Unfortunately, there is no way to get a fully supported solution for overflow on table elements, and therefore such answer cannot be provided. The only real "solution" here that would actually solve your problem would be a complete (or partual) overhaul of your entire site.
However, I hope the above gave you hint of direction of what to do next and as such being an acceptable answer for you.
Good luck!
I have a fixed header at the top of the screen, and if I try to put an element after the header, said element ends up ignoring the height of the header.
HTML
<header></header>
<p>Empty text</p>
CSS
header {
display: block;
height: 100px;
width: 100%;
background: #eee;
position: fixed;
top: 0;
z-index: 100;
}
JSFIDDLE
I've searched on StackOverflow and other places for solutions to problems similar to this but with no avail (in part due to me having a hard time verbalizing the specific problem). I tried a clearfix,
<header></header>
<div style="clear:both"></div>
<p>Empty text</p>
But that still doesn't work. I also tried adding a margin-top: 100px to the p element, but I consider that bad practice in the case of me changing the height of the header in the future, and also having to do this for every single element following the header or any other element I might add a position: fixed or position: absolute. Additionally, the header will be a fluid height according to different sized screens.
Right now I'm wireframing so I'd really rather not use JavaScript, just plain CSS, if that's possible. If it's not, minimal vanilla javascript will do. This is a fundamental web design problem and I've always countered it with margin-top but I'm wondering if anyone knows of a cleaner, better way to counter it.
Also, this needs to be at least somewhat cross-browser. Again, only wireframing. My wireframes should be able to work on anything that supports basic CSS.
Sorry if this is a duplicate question, I'm sure it is, but I couldn't find anything that quite matches my situation. Any help is much appreciated!
http://jsfiddle.net/09qL0nzv/3/
var p = document.getElementsByTagName("p")[0],
header = document.getElementsByTagName("header")[0],
h = window.getComputedStyle(header).getPropertyValue("height");
p.style.marginTop=h;
This will set a margin-top to the paragraph equal to the height of fixed header. However, this does not take padding or border into account. There are two possible solutions for this.
Use box-sizing: border-box on the header. This will make sure that the height, including padding and a border, will be the height as defined in the stylesheet. (I highly recommend using border-box on all your elements, like so: *, *:before, *:after {-moz-box-sizing:border-box;box-sizing: border-box;}.)
Another solution is adding the padding and border to the computed value in JavaScript, and include that value in the margin top that you set to p. I don't like this solution, but it works.
When you fix the header, any other element you place disregards its very existence.
Only workaround I've seen is to give a padding (or margin). But, from what I understood you need a more dynamic soln. In which case your best solution would be to use client-side scripting say jquery/js to determine elements present height and then add the same as padding for elements below.
It's the position:fixed that causes the problem here. The header is no longer part of the flow content, so the flow content begins at the top of the page.
There is no ideal solution for this, but an option that might be a little better than changing the <p> margin is to add an empty <div> to the beginning of your content that matches the height of the <header>.
Here's an example JSFiddle:
For a more dynamic solution, this is what I came up with
$('p').css('margin-top', $('header').outerHeight());
$(window).resize(function() {
$('p').css('margin-top', $('header').outerHeight());
});
There might be a better way of doing this, but my reasoning was setting the initial margin of the p tag to be the outer height of the entire header, and then whenever the header might change (in this case, that would be when the window is resized), the margin is then re-evaluated on the p tag.
When I made my HTNL page, it looked perfect, but all of a sudden, I've been getting this huge white space on the bottom of my page. you can see it at http://thomaswd.com/pearinc2. How do I get rid of this?! My stylesheet's at http://thomaswd.com/pearinc2/style.css
If you look at the HTML element with the class back-iphone4s you'll notice it's positioned relatively using CSS.
If you remove the position: relative portion from the CSS rules for .back-iphone4s you'll notice it appears where your white space is.
Using position: relative like this is always horrible, white space appears where the element would have been if it wasn't positioned relatively.
What I would recommend is adding position: relative to the div with devices as its class, then use position: absolute; on .back-iphone4s and set it's position using that method. This way the back-iphone4s element is positioned relatively to it's parent, not relatively to where it would be in the normal document flow.
There are are a number of other ways you could solve this too, at I glance I would be very tempted to just turn those two iphones into one image, less HTML, less CSS and less images to download, but it appears you may have inteneded them to be seperate for a purpose, so maybe that's not a viable solution.
... phew, hope that makes sense, let me know if now.
I just had a quick look at your style, what I saw is technically very ugly.
You set all main elements with position:absolute and made them independent from context and content-flow. And because they are absolute, you have to give them a height - and that causes in things like that ugly white-space.
I would say you have the wrong concept of styling / structuring the page.
Try to use "position:absolute" very rare!
Give a height to the .devices class:
.devices {height: 520px;}
I have an easy task: stick a footer to the bottom (sticky footer).
I searched several threads on stackoverflow and google.
It seems that there are two techniques:
http://ryanfait.com/sticky-footer/layout.css,http://www.cssstickyfooter.com/style.css
( resetting all elements padding and margin, stretching wrapper, clearing both or other additional mods)
Absolute positioning
The first looks for me like some hack (and didn't work either) so I wanted to stick to the absolute positioning (bottom: 0;) but here I mentioned that pages with large content (many paragraphs) the footer hangs in the middle when I scroll down...
However here is the fiddle, hope somebody finds my error:
http://jsfiddle.net/379gr/
Regards
This is FooterStick: http://jsfiddle.net/jAbw4/.
Back to your code. Set the #content_wrapper's property 'position' to relative. Otherwise, the containing block will be the initial containing block. The initial containing block covers the area of the viewport and as a result of that, your footer behaves as described in your question.
By the way: Cameron Adams writes about a more robust method of positioning a footer: FooterStickAlt. He prefers FooterStickAlt since a painting error in older versions of gecko browsers and IE's can be observed (when FooterStick is used): the footer is not positioned correctly when the height of the content varies a lot during the loading process. So therefore if for example pictures with no dimension information are included, the absolute positioned element remains at the position that is determined first time around and doesn't move with the growing content down. FooterStickAlt doesn't have this problem.
Check it out: http://jsfiddle.net/sTW6t/1/
This is what I made a while ago when using a sticky footer with a relative position. Let some jquery do the trick and voila ;-) What it does is calculating the height so the footer knows where he needs to stay, sticky.
$(function() {
function positionFooter() {
var windowHeight = $(window).height();
var documentHeight = $('#pagewrap').height();
if (windowHeight > ($('#content').height() + $('#header').height())) {
var pagewrapHeight = windowHeight - $('#footer').height();
$("#pagewrap").height(pagewrapHeight);
}
}
positionFooter();
$(window).resize(positionFooter)
});
Cheers!
I'm floating a div to the top of the window. However, it's covering the content at the top of the page, that is, it's not pushing down the very top of the page. Yet I see Stack Overflow doing this with their notification bar, because it's not covering the username/rep/links. Is there a way I can replicated this with CSS?
You can set the margin-top of the outer container object to the height of the floating div:
<div id="outerContainer">
... page content goes here ...
</div>
<div id="floatingNotification">
</div>
Then in css:
#floatingNotification
{
...
height: 20px;
}
#outerContainer
{
margin-top: 20px;
}
In the case of Stack Overflow, I think there's a good chance that they're using jQuery to manipulate the page contents. I haven't explored the linked scripts, and I've not got any notifications to check with, but I'd hazard a guess that it's something like:
$(document).ready(
function() {
var element = '<div id="notification"></div>';
var text = '<p>The text to show in the notification thingumabob.</p>';
$('div#wrap').prepend(element).find('#notification').prepend(text).css('display','none');
if ('#notification') {
$('div#notification').slideDown('slow');
}
}
)
Please be aware that I'm incredibly new to jQuery -and, frankly, JavaScript in general- so there's every chance that I've suggested something hideously wrong. But, having tested it, the concept works. Even if the element you want to add is floated or absolutely positioned the slideDown() seems to take care of moving the page contents in order to avoid it covering up other elements.
This may, or may not, be some coincidence in my set-up, though.
The answer to this depends on whether you're using a relative or absolute positioned float. If it's absolute, set your float div to for example {top: 20px;}. If it's relative, use either padding-top, margin-top (or margin-bottom on an element that's above it).
What works best across the common browsers depends on the overall picture.