I need to put a div "propped" to the bottom of the windows browsers.
Like the one with chat on facebook. It must be positioned always at the bottom of the screen, also when I scroll the page.
Fixed? I know IE7 sucks on it...
How can I do it?
#yourdiv {
position: fixed; /* This will be always visible and positioned where you want */
bottom: 0; /* place it to the bottom */
z-index: 9999; /* You may want to be sure no other elements will be displayed on top of it, raise this if it's still being displayed under other elements */
}
http://jsfiddle.net/zQNcu/9/
Position:fixed is the way to go. This is the only way to have a div being displayed at the same position regardless of page scrolling. Otherwise, if this doesn't work (older browsers perhaps), you need JS to keep it at a specific position regardless of page scroll.
use the position: fixed; css property
#somediv {
position: fixed;
bottom: 0px;
}
*html #somediv {
position: absolute;
}
Related
I am using the right and left properties to place tiny images on the edges of my page.
.class img {position:absolute;left:60%}
The above example places the image at the end of the screen on the right and only half of the image is visible but it also triggers a horizontal overflow making the page draggable towards the full width of the image.
I tried setting overflow to hidden but it didn't help.
Any ideas on how I can achieve this?
Any time you want to allow for items off screen, but prevent scrolling, you're going to have to restrict the user's viewport. This can usually be done by setting the overflow-x or overflow-y to hidden on the body.
/* The problem */
.off-screen {
position: absolute;
right: -50px;
width: 100px;
height: 100px;
background-color: red;
}
/* The solution */
body {
overflow-x: hidden;
}
<div class="off-screen"></div>
Note: Depending on your specific situation, this may need to be tweaked, but the concept is the same. I can update this to be more specific if you include more code in your initial post.
It sounds like you want your images to appear at the right edge of the screen. This should work:
.class img {
position: absolute;
right: 0;
}
I'm trying to build a rather complicated header. This is what it should look like:
As you can see, the header needs to be centered on the page, but the elements need to expand the width of the page. The issue I'm running in to is that I can't get the white part to extend properly. This is what I currently have:
I can't figure out any way to extend the white background over the black bar on the left side. I can kind of get it working using :before, but only at certain zoom levels (at certain points, a gap would appear between the logo and the overlapping :before, causing a bit of the black bar to bleed through), and we need this to work at all zoom levels.
My only other thought would be to use an extremely wide background image for the entire navigation, but I don't think that's an acceptable solution either.
Does anyone have any suggestions?
Demo: http://www.weblinxinc.com/beta/header/
Try that, on your current code (I used your current #headerLeft:after pseudo element) :
#headerWrapper header #headerLeft:after {
/* clear: both; */
content: "\0020";
display: block;
/* visibility: hidden; */
/* zoom: 1; */
width: 1000px;
height: 50px;
background: white;
top: 50px;
right: 100%;
position: absolute;
margin-right: -60px;
}
In a word, I just use a pseudo element to cover the left part in white. So I put it a very high width, and I position it relatively to the logo.
Feel free to put it on another element / pseudo element : I guess this one is making a clearfix.
I'm writing a mobile/desktop chat application that is supposed to utilize the entire screen. The bottom <div> shown in yellow can be fixed-height if it needs to be.
presently it's Absolutely positioned to the bottom of the window.
My problem: the top <div>, in cyan, doesn't fit to the rest of the window, regardless of whether I use padding, margin, border, etc. Presently it appears to allow the content to wrap, but that's only because the bottom overwrites the scroll bar.
My only solution so far is to have a final <div> or <br> that pads the end of the scrollable div, but that doesn't make the div smaller, or make the scroll bars properly align.
Here is my source code so far in Fiddle.
Can you edit your CSS and set the DIV with the chat text a class like .break-word and then in CSS declare it with word-wrap:
.break-word {
word-wrap: break-word;
}
Unsure on the covering of scrollbars. You should post your code for others to view and might be able to pick something out.
This style code basically sums up what I'm doing to compensate for my issue. (Instead of, say, using HTML tables.) This may not be the best solution.
#topPart {
position: absolute;
width: 100%;
top: 0;
bottom: 40px; /* or however high the bottom is */
}
#bottomPart {
position: absolute;
width: 100%;
bottom: 0;
height: 40px; /* same as above */
}
I have this design for an HTML book and i am trying to achieve a certain effect which fading the text when scrolling the page which i successfully done using a fixed div with a superior z-index value and a PNG background image.
.book-bg {
background: url(../../img/book-frame-bg.png) no-repeat fixed center top;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 100;}
But now all my links which covered by the ".book-bg" div aren't clickable, how can i solve this?
Sample page here: http://mmahgoub.com/thebook/chapter-01.html
Thanks
In Firefox, Opera and Chrome/Safari you could use pointer-events: none in your CSS rule. If you need IE compatibility as well then try Forwarding Mouse Events Through Layers.
your links will need a higher z-index, for this they will need to be positioned, relative, floated or fixed.
My site, a course catalog tool for universities, has a center pane that contains a dynamically updated list of classes. In Firefox, Opera, and Chrome, the center pane has the intended scrolling behavior: when the class list exceeds the height, the center pane has a scroll bar. IE, however, only shows this bar when the height is explicitly set. Without using JavaScript to reset the center pane height on resize, how can I force Internet Explorer to show the scroll bar?
The center pane:
<div id="middlenav">
<div id="middleheader"></div>
<div id="courselist"></div>
</div>
and its CSS:
div#middlenav {
position: absolute;
left: 250px;
right: 350px;
top: 0px;
bottom: 0px;
}
div#courselist {
overflow: auto;
position: absolute;
top: 55px;
bottom: 0px;
width: 100%;
}
It looks like the center pane isn't obeying the bottom: 0px; statement, and is expanding to the full height of the contained #courselist. I tried body { height: 100% } but that didn't fix it either.
"The top property overrides the bottom property..."
https://developer.mozilla.org/en-US/docs/CSS/bottom
Change top to auto instead of 0px:
div#middlenav
{
position: absolute;
left: 250px;
right: 350px;
top: auto;
bottom: 0px;
}
That should fix the bottom positioning. Remember, if #middlenav is positioned absolutely, it will be relative to whichever parent element has position:absolute; or position:relative;. If #middlenav has no parent elements that are positioned, it will be relative to <body>.
I'm not sure why you have #courselist absolutely positioned; since it is inside of #middlenav I would think you could leave it static or position it relatively. But regardless of what you do, I think you need a height set on #courselist or #middlenav. The default value of height is auto, so there won't be a scrollbar because the element will expand to fit its content.
I know this question was asked 3 years ago, but I'm posting this for other people who may have a problem with CSS positioning. Cheers!
While it is perfectly acceptable to set opposite edges when using absolute positioning in CSS, limitations in Internet Explorer mean that the approach may not work there.
There is no way to avoid the bug in Internet Explorer 6. In Internet Explorer 7 and newer, triggering Standards Mode will resolve the issue.
Faking columns that extend to the bottom of an element is usually achieved using faux columns.
position: absolute; bottom: 0px; sets the element right on the bottom of the element. But it has to know where the bottom of the element is. If you set the height to 100% or have it in another element positioned bottom: 0px; Then it doesn't know where the bottom is, unless one of those elements is inside (taking up the full height of) and element with a fixed size. You can't give the body a height of 100% because it would just sort of go on forever. Try specifying the height of the body or some containing element. :D
Ensure that your doctype is set to HTML strict, otherwise IE will behave quirky and get confused with among others positioning and overflows.
Add this to top of your page:
<!DOCTYPE html>
I am not quite sure if i fully understand but I think you want the center pane to scroll when it reaches past a certain height..this is how I would do it.
#middlenav { position:absolute; left:250px; top:0 }
#courselist { position: absolute;top: 55px; left:0; min-height:400px; _height:400px;
overflow:scroll; overflow-x:hidden; width:500px; }
This sets your course list in all browsers to a minimum height of 400, once that is passed a scrollbar appears. min-height is not supported in IE7 and lower so i used the IE hack _height 400 so it acts as a min height. overflow-x:hidden is hiding the horizontal scroll just in case you only want vertical. I hope this helps you.
Don't use top and bottom positioning in the same class and don't use right and left positioning in the same class, as they are contradictory values to each other.