In brief example I'm trying to do a div chat example to simulate a facebook chat.
I fixed it on the right with z-index 300 to always be showed.
My problem is about height because some pages I have scroll and large height view and my chat div fixed on the same original page height, if I scroll up or scroll down I limit the height of my div.
I wonder it just fixed enough to stay visible on the page in the same original way even I scroll page up or page down.
My sample CSS is:
#chat {
position: absolute;
top: 0;
right: 0;
float: right;
height: 100%;
min-height: 100%;
width: 200px;
background-color: #6e9bfe;
z-index: 300;
}
Any tips would be very helpful, thanks!
If I'm right in thinking you want this div to stay in the same position as you scroll up and down the page you want to use position:fixed; instead of position:absolute; in your CSS.
Use position:fixed; instead of position:absolute;
Related
I'm trying to get rid of the iFrame scrollbar and give this task to the container div. The thing is that I'm using margins so I don't like to have the scrollbar in the middle of the page. I would like to move it o the very right of the screen.
Is there any way to achieve that?
my code is:
div#content {
background: white;
left: 3%;
right: 3%;
bottom: 0;
top: 80px;
position: fixed;
}
On the iFrame I have added
scrollbar = no
but then I cannot see the whole content.
Any help is greatly appreciated.
You need to set the size of the iframe. Then the container div needs to have overflow-y: scroll
Here is an example: https://jsfiddle.net/cj771ry7/1/
I have this site:
http://dl.dg-site.com/functionmentes/
There is a div with color #D9D9D9
Code CSS:
#full_bar{background:#D9D9D9;width:100%;height:100px;}
I want to my div to be the full width site and to be glued to footer.
How can i make this?
I use a theme in Wordpress.
Thanks in advance!
By making the position fixed, this will ensure that it will follow the user as they scroll up and down your website.
#full_bar {
background: #d9d9d9;
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
left: 0;
}
If you add position:absolute; left: 0; to the css, the bar will more or less do what you're trying to do, but it's a dirty hack.
The real problem is that you're adding your 'full_bar' in the wrong place (inside a div which restricts the width). Personally I would opt for placing the full-bar in your <footer> tag.
You should placed your gray bar outside the section, between section and footer or on footer on html.
But if you want a css solution, you need to put your section parent to position relative and set your gray bar on absolute bottom with full width:
section {
position: relative;
padding-bottom: 100px; // Your bar height
}
#full_bar{
background:#D9D9D9;
width:100%;
height:100px;
position: absolute;
bottom: 0;
left: 0;
}
You are putting #full_bar inside class="container". container is the parent of div id #full_bar, that's why its not taking full width.
Do your code outside contaner class and you can see the changes.
See the attachment, i think you want this as per i understand your question.
How would i go about making the div i am using to contain the page stretch all the way to the bottom of the page.
You can see that here: http://csgoshack.com/shop/index.php?page=cats The white div don't go all the way to the bottom of the page this is making it ugly.
Whats the best way to go about making this always stretch to the bottom of the page relative to the browser size?
Thanks.
If you need any code of the website to help me do this please ask.
EDIT Right all i really want is that white bar to stay static over the background and then let the products scroll over the white box so its always in the center of the page how is this possible?
I would move the top bar outside of the whitebg as it might make this easier.
Set your body:
padding: 0;
Set your .whitebg:
position: relative;
left: 50%;
margin-left: -625px;
top: 0;
padding-top: 60;
height: 100%;
You'll probably notice how you have a scroll bar on the right even when it isn't necessary. I think moving the top bar out of the whitebg will remove your need for the padding-top: 60 which should help get rid of the scroll.
** EDIT **
If you move the top nav bar outside of whitebg I think it works well leaving a lot of your css as-is.
.whitebg
position: absoulte;
left: 50%;
margin-left: -625px;
top: 50px;
padding: 10;
height: 100%;
** EDIT #2 **
The key here is to get your background to encompass the area you desire. Then user other inner elements to handle positioning of the contents within. If you try to add a margin or padding onto the outer most background element, you'll find that it will exceed the desired size since those will always add on to the height or width.
.holder
remove the padding-top
.whitebg
remove all padding
.bodycon
add margin-top: 50px;
change margin-bottom to a normal margin
.fotter
add a margin if desired
Try setting height: 100% on .whitebg selector
Just inspected your page..try to set the bottom: 0px; to your whitebg class
.whitebg {
..your existing code..
bottom: 0px;
}
First ill ask why you have all meta tags in body?:)
If the blue bar is fixed position you can try
html, body{
height:100%
}
.whitediv{
height:100%;
}
Or just doo simple jquery:
var docheight = $(document).height();
$('.whitediv').height(docheight);
And make it as function on window.resize
This Code should help you,
.WhiteBag{
height : 100Vh;
}
Ask if you have any doubt
Add these in style
.whitebf
{
height:800px;
width:100%;
}
this one in your footer
footer
{
position:absolute;
bottom:0px;
}
I added the famous "Fork me on Github" ribbon to one of my projects. The tag looks like this:
<a href="https://github.com/Nurdok/htmlify">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"
alt="Fork me on GitHub">
</a>
It looks great, but some of the divs on my webpage have minimum length, so when the window is small, one has to horizontally scroll the screen. When that happens, I want the "Fork me on Github" link to stick to the top-right side of the page, not the window. This is how it looks right now:
Scrolled all the way to the left:
Scrolled all the way to the right:
It seems that the ribbon is placed on the top-right side of the initial window, and stays static.
What I want is for it to be out of sight in the first case and top-right in the second case (when I scroll to the right).
Edit: Thanks for the quick answers, people. However, most of the answers made the ribbon scroll horizontally and vertically with the page. What I want is for it to be fixed on the top-right side of the page (not the browser view), and only be seen if I scroll to where its position is.
You can do a little trick and put your image into a div which has minimal-width.
<div style="position:relative;min-width:960px">
<img src="..." style="position: absolute;right:0;top:0" />
</div>
and put that div at the beginning of <body> section.
position:relative makes that all children of that elements that have position:absolute are positioned absolute according to that div, not whole page. When viewport is bigger than min-width, the div is the same width as the viewport. When the viewport is smaller, the div will have the min-width and the image stays at the corner of the div.
Two alternatives
Sticking to the Viewport: To stick it to the viewport you should position your element "fixed" instead of "absolute"
<img style="position: fixed; top: 0; right: 0; border: 0;"
Sticking to a Container: And if you want it to be sticked to a container (so youn dont see it when you browse left) use absolute but do that container position:relative so its containing block is targeted
If you dont want to see the image when scrolling left then use a explicit width for this container I am talking about
Here is a JSFiddle example.
I used a squared div instead of an image. CSS code as follows:
#container {
width: 700px;
height: 700px;
background: #55ff90;
position: relative;
}
#image {
width: 70px;
height: 60px;
background: #ffff90;
position: absolute;
top: 0px;
right: 0px;
}
In case it's supposed to stick to the right top on horizontal scroll only, you can't accomplish this with basic CSS. Your requirement is stick to the right top for horizontal scroll but not vertical scroll. The first part of the requirement can be accomplished using position: fixed; though this breaks the second part.
How about always sticking to the right top of the website using a relative float: Fiddle
<div id='container'>
<div id='sticky'>x</div>
</div>
#sticky {
width: 100px;
height: 100px;
background: red;
float: right;
}
#container {
width: 100%;
height: 200px;
background: blue;
}
You should use float:right, adjusting margin if you need, e.g.: margin-right: 5px. Cheers :)
If I understand what you want correctly, you'd like for the image to stick to the top corner of the window UNTIL the window gets to a certain size (horizontally) and then stick.
If so, here is a plausible solution:
body{
min-width:1000px; /* or whatever you need it to be */
}
#ribbon{
position:relative;
float:right;
}
DEMO FIDDLE
DEMO FULLSCREEN
You can also use a container div with min-width, your choice.
Change position: absolute; to position: fixed.
As side note, put the style on the a instead of the image and add some z-index to make sure it stays on top of everything else:
<a href="https://github.com/Nurdok/htmlify" style="position: fixed; top: 0; right: 0; border: 0; z-index: 999; display: block;">
<img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"
alt="Fork me on GitHub">
</a>
So, I've been stuck with this problem for a while now and I can't seem to find a solution.
I'm trying to make a layout consisting of (for now) 4 different content areas like so:
What I'm trying to do
I'm trying to do the following things:
Simple explanation: Content should be the only scrollable thing on the page, with the footer following right behind it if content fits on the page, fixed on the bottom otherwise.
Detailed explanation:
Fix banner and mainMenu so that they never move when page is scrolled.
Make the content scroll with a page so that:
If the content (and footer) fit on a page, no scroll is displayed.
If the scroll is needed, content goes behind the banner (not being shown) and does not appear again above it.
If the scroll is needed, content can scroll until the bottom line of it and the footer are in the visible area.
The footer should do two things:
If content and footer fit on the page, footer should stick at the bottom of the content
Otherwise, footer should be fixed on the bottom.
What I have tried
Fixing banner,mainMenu and the footer are fixed using position: fixed (and positioned accordingly). Parent div has overflow: hidden (which doesn't seem to work).
<div id='main'>
<div id='banner'>banner</div>
<div id='mainMenu'>mainMenu</div>
<div id='content'>.. some long content ..</div>
<div id='footer'>footer</div>
</div>
And
#main {
width: 960px;
height: auto;
margin: 40px auto;
overflow: hidden;
}
#main #banner {
width: 960px;
height: 100px;
position: fixed;
}
#main #mainMenu {
width: 230px;
height: auto;
display: inline;
float: left;
position: fixed;
top: 140px;
}
#main #content {
width: 720px;
height: auto;
display: inline;
float: right;
margin-top: 100px;
}
#main #footer {
width: 960px;
height: auto;
clear: both;
position: fixed;
bottom: 0;
}
The Problem
Footer does not follow content if it fits within the area
Content overflows on the top of banner
I would really prefer to do this just in CSS (if possible) and as compatible as possible (IE7+, all other major browsers).
It's really getting frustrating now.. Any help would be appreciated.
There is no conceivable way I can think of that would solve your problem by just using css. Once you have set your elements to a fixed position they are out of the flow and thus your other elements cannot conform around them.
However I did find a solution by doing two different things. For the header issue I simply added another fixed element above the main banner and set it to the color of the background. This way the content will scroll behind it and look as if it is hidden. For the footer, I set up some javascript using jQuery to see if the content overflows or not. If it does then the footer's position is set to fixed, otherwise the position is set to relative.
You can check it all out here in this demo: http://jsfiddle.net/mrQGh/4/
To test out the javascript simply delete the text until there is no more overflow and run it again.