I would like to make a div that is fixed vertically but after a point (a coordinate for instance) he stops following and stays where he is.
thanks for answers!!
Based on your edited question and question tags, I assume you want to make a fixed position div to stay at a particular position even when you are scrolling.
(And maybe you have done it already but it does not work, if that's the case please provide some related code)
This can be done by setting the div's position and the top/right/bottom/left in css.
#my_div{
position: fixed;
top: 0px;
left: 0px;
}
This will set your div fixed on the window's top-left corner no matter what.
Here's a short but clear tutorial on css positioning, have a look if you have some time :)
Learn CSS Positioning in Ten Steps
Related
I'm working on an enjin site for a friend and cannot for the life of me understand how to make the page here stretch to fill the whole screen vertically if the content does not have enough in it to do it on it's own. I've tried scripts and CSS of a dozen or more solutions and cannot understand how to make it do this because it's not my code, its Enjin's, and I have to work around it.
There are 2 pages in question, one is a standard format page so anything done to it can be done to all pages except the custom one and there will be no problems, and the other is a custom coded page using their HTML module. The key is the same solution is necessary for both but they have different code.
Custom Page: X |
Standard Page: X
Simply put I'm asking for a solution here. I tried the flex solution, height 100% with block display, javascript to find the distance between the bottom of the bottom div and the bottom of the monitor and adjust height accordingly, and more. Nothing seems to work. Any help is very gratefully appreciated.
I can provide any more details necessary, just ask.
What you are trying to accomplish is 2 things. First you want to make the div #memberContainer always be at least as tall as the users screen minus the height of your footer.
This can be acomplished with css using the "vh" unit. The vh unit is defined like this:
Relative to 1% of the height of the viewport*
And the calc function, as you will need to subtract 100vh (the screen height) from the height of your footer (180px).
So you need to add this code to your #memberContainer.
#memberContainer{min-height: calc(100vh - 180px)}
The second thing you need to do is make sure the background image of #memberBlock always covers the entire visible portion of the screen.
The image itself is 1920*1080, which is a standard 16:9 resolution. Assuming you only wanted to target 16:9 screens this would work fine. However to cover mobile phones and all other screens I would recommend you use:
#memberBlock{background-size:cover}
This makes sure the image will always cover the screen.
You can't have no gap and no content to fill it. There will have to be a gap somewhere.. Your gap is appearing in the middle because the footer is absolutely positioned. If you stop positioning your footer absolutely, the footer will cling to the body-wrap, however, you will still have a gap at the bottom, it just won't look as bad.
.myfooter {
display: none;
width: 100%;
position: relative;
background-color: RGB(20, 20, 20);
height: 180px;
bottom: 0;
}
If you really wanted to make it fit the screen, you could give a min-height with a calc of 100vh-FooterHeight
position: absolute;
height: 100%;
There may be other issues with this as i have no idea how mobile or responsive stuff would work for your site specifically but this is one way. You are coupling the BG div to the content div - that is why you are seeing that behavior - you need to make the BG a sibling div of content instead of a parent child relationship then you can have more flexibility on how it works - but for now my option seems to work
I've got your stereotypical two column (1 content, 1 sidebar) layout with each column floated opposites and all that. But I need my sidebar to scroll with the page. My first instinct was to use position:fixed, not realizing it would mess up my floats. So I'm not really sure what to do. I'd rather not absolute position the two columns if I can avoid it. This website is more or less completely coded and I only found out about the need for the sidebar to scroll in the last leg of the process. So it's kind of a PITA to do too much to it.
So essentially I need a way to make a floated DIV to act as though it's under the affects of position:fixed
My thought was ideally maybe a javascript/jQuery solution that just latches onto the div and makes magic happen? But I'm open to a CSS solution if it's a quick/easy one.
I'm guessing that your problem with making the sidebar position: fixed is that it takes it out of the flow, so your main content shifts over to the left, under the sidebar. If that's a correct interpretation, then add margin-left to the main content with the same width as the sidebar, e.g.:
.sidebar {
position: fixed;
width: 200px;
}
.content {
margin-left: 200px;
}
With only two columns, there's no need to float the main content. Adjust as needed for your particular situation (e.g. change units to em or whatever).
What I'm saying is, I have some extremely long pages on my website, which can make it annoying if my visitors need to scroll to the top of the page to be able to navigate to another page.
I'm not quite sure what I would call this but any Google search that contains the words 'DIV' and 'float' come up with completely unrelated results...
What I'm looking to do is create a DIV that stays at the top of the Screen (not to be confused with the page) so that if the user is at the bottom of the page, they can still see the navigation bar just floating at the top of the screen. What I can think of is to position the DIV relative to the position of the screen but I don't know how to code this.
I'm happy to use JavaScript (preferably in the form of jQuery), but if you know how to do this using CSS, I would favour your response.
This might help: I know a little bit of jQuery and JavaScript and I know a good deal of CSS and HTML.
Thanks in advance.
fixed position has exactly this purpose and this is pure CSS:
div {
position: fixed;
top: 0;
}
Try this:
<div style="position: fixed;"></div>
You should be able to use CSS Fixed Positioning
#eleID {
position: fixed;
top: 0;
}
I can't figure this out for the life of me. On this page, if the browser height is too small, you won't be able to see the full form. How do I add a scroll bar to the popup so that people with small screen sizes will still be able to see the entire form from top to bottom?
http://kinkarso.com/rayku/profile.html
Thanks!
You change position: fixed; to position: relative; (or absolute if you want it to be overlaid something else) on the .filter-popup class
Your problem is the CSS position attribute for your popup (using filter_popup class). If you used position: fixed, the containing element will not grow to accommodate it. Change it to position: absolute instead and the scroll bar will appear.
To solve this you should use overflow:scroll which is the css way of creating scroll bars.
http://www.w3schools.com/cssref/pr_pos_overflow.asp
On many sites now, say you have a toolbar/table-header that is midway in the page.
Once you start scrolling, you can't see the header or toolbar anymore so you can't perform actions on any rows you may have selected, or you can't see the name's of the headers of the columns.
Many sites do this now, which is great, when you start to scroll the toolbar/header is fixed at the top of the browser. This doesn't happend right away, only when you scroll down to the point where the header/toolbar would normally not be visible.
How can I do this? Is there a name for this functionality?
Gmail has this, if you scroll down when reading an email, the toolbar at the top is fixed at the top so you can label/move/spam the email.
Take a look at jQuery Waypoints - Sticky elements, should be what you're looking for.
Use this css:
.static{
position:fixed;
}
And then, put a class="static" to your header element.
Hope this helps. Cheers
You don't need Javascript to solve this problem — don't make it harder on yourself. Using fixed positioning forces the header to "hover" above your content, and when you scroll, remain at the top of your screen, not at the top of the page. You can use this CSS to make your header fixed.
.header {
position: fixed;
}
Make sure you assign the class "header" to your div. For design reasons, I'd suggest keeping your header at the very top of the screen and stretching all the way across. You can use this CSS to do so.
.header {
top: 0px;
left: 0px;
width: 100%;
}
Technically, you don't need to specify "top" or "left" positioning, but it ensures you don't have anything to go wrong if you do decide to change something like that later. You can take a look at other types of positioning at this site.