I have this template and it works fine, but I need to fix that floating menu to the left side of page (not to the left side of browser window). I need to have it stitched when I change resolution or reduce browser window.
I have one idea with two columns with float: left, but there must be a better solution.
Thank you.
You could do the following:
#content {
width: 960px;
margin: 0 230px; //change from auto to a set margin
}
#floatMenu {
position: absolute;
top: 150px;
left: 0%;
margin-left: 200px; //REMOVE this margin altogether
width: 200px;
}
The simplest solution is to move the #floatmenu div inside the #content div. Also you need to manually change the margin-left in the floatingmenu css file to -220px etc. And in addition you would need to change the position attribute on #content div to relative, to make sure the absolutely positioned menu is positioned relative to the #content div's left side.
All in all, drop the floating menu, using JS to add annoying widgets to your website is so 90s. And, well, annoying.
Related
I've got a cordova app using jquery, jquery-mobile, iscroll and iscrollview
I'm not exactly committed to any of these tools.
I've got the jquery-mobile header/footer stuck to the top and bottom of the screen just fine.
I have a scrollable div between the header and footer. It will contain variable amounts of data. Sometimes the data will be less than the height of the div and sometimes it will be greater (hence the scrolling)
Here's the tricky part. I want to stick the bottom of the scrollable div to the top of the footer. When I add stuff to the div i want the most recently added closest to the top of the footer so the top of the scrollable div looks like its growing upwards towards the bottom of the header as data is added.
Once the top of the scrollable div is fille by its content then i want to be able to scroll it.
Has anyone been able to achieve something like this?
Here's a neat little trick for you.
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
Now the CSS
div {
width: 100%;
}
.header {
position: absolute;
top: 0px;
left: 0px;
height: 50px;
}
.footer {
position: absolute;
bottom: 0px;
left: 0px;
height: 100px;
}
/* the magic */
.content {
position: absolute;
top: 50px; /* matches height of header */
bottom: 100px; /* matches height of footer */
left: 0px;
overflow: scroll;
}
The neat thing about forcing .content to have both a top and a bottom is that it stretches the div so that it's always the proper height. IF you specified height on it, it wouldn't work, but because the height is determined by the top/bottom property, it's dynamic. I think this gets you to where you want to be.
Here's a fiddle
Edit: Here's what it looks like with content
Edit 2 - forcing content to grow from the bottom.
I'm not sure this is a good idea, and I'm not sure I would ever seriously recommend doing things this way. However, using vertical-align it's possible to force content to grow from the bottom. I suspect that it would be better to just set a margin with javascript that shrunk as content grew, but... maybe not. With all that said, here's one way to do things with CSS.
This requires a little bit of restructuring of the content div.
<div class="content">
<span class="margin"></span>
<span class="inner"></span>
</div>
And a little bit more CSS
span.left-margin {
height: 98%;
width: 0px;
display: inline-block;
}
span.inner {
width: 99%;
background-color: white;
display: inline-block;
vertical-align: bottom;
}
It looks like this with a little content
It looks like this with a lot of content
If you want the scroll bar to stick to the bottom as content comes in, you'll need to do some javascript (easy to google it).
I'm not completely happy with doing things this way because if you set height 100% or width 100%, the content div gets a scrollbar automatically from the beginning. However... it looks pretty good and should work in most (if not all) browsers.
http://magician.sdf-eu.org/zee/Click%20This%20One%20To%20View%20What%20I%20Have%20So%20Far.html
Thanks a lot for your help, stack overflow.
CSS is here
http://magician.sdf-eu.org/zee/css/showcss.css
jQuery source code is included in the page.
This is because your ".center" class has position of fixed. Try switching it to absolute:
.center{
//other styles
position: absolute;
}
change the position:fixed to position:absolute at your .center class
.center
{
position:absolute;
left:50%;
margin-left:-490px;
}
Note :at fixed position the element is positioned relative to the browser.
or instead you can use this
.center{
width: 980px;
margin: 0px auto;
}
a bit less code :)
badAdviceGuy is right, it's because your position is fixed. This tells the item to stay on this part of this page no matter what the scroll value is.
However, you shouldn't even need to set an absolute or fixed position here.
A nice fix for you would be to remove all of the styles you currently have set on your center tag.
Then style it like this:
.center{
width: 980px;
margin: 0 auto;
}
We use 980px, because this is the width of your images/image container and most likely always will be, at least on this project.
And margin: 0 auto, basically tells your center container to add 0px on the top and bottom margins, but set the left and right margins to the same px amount so that the element is centered within it's container.
I'm trying to achieve the following:
I have a pop-in menu docked to the left side of the screen.
The menu has only a small tab visible. Upon hover - it pops to accommodate its content.
The problem is, my pages are sometimes a few screens in height.
And sometime, so is my menu.
I wish to be able to dock my menu to a fixed position (so the tab is always visible), and have the menu scrollable, without the ugly scrollbars.
How could this be achieved?
Add to your css:
html,body { height: 100%; }
#menu { height: 100%; overflow: auto; position: absolute; top: 0px; }
Make sure the #menu is a direct child of body.
If this doesn't work, give me a link to a demo, or make one in http://jsfiddle.net/
I'm making a website (http://www.deayoga.ch/), and I'd like to make the menu bar on the left scroll with the page. In other words, it would start on the page as it is, and then, when the user scrolls down, it would stay fixed, relative to the browser window. The idea comes from the links on the right hand side on some StackOverflow pages, like here.
How could I achieve this?
PS: I already know how to make a div stay fixed on the left, using position: fixed; left: 0;, but my question is how to do this in the middle of the page, without knowing the distance from the side of the window (since the page sits in the middle, regardless of window size)
Remy Sharp has a very nice tutorial (with video) on how to do exactly this:
http://jqueryfordesigners.com/fixed-floating-elements/
Sounds like a math problem... use JS to get the window size, divide by two to get the mid-point, subtract half the size of your fixed div from the mid-point value, then set your CSS position "left" value to that.
Add this tto your stylesheet instead of the class you have now for #leftcol
#leftcol {
position: fixed;
top: 50%;
margin-left: 20px;
margin-top: -150px;
text-align: center;
}
Then add the following to your #container class:
position: relative;
Your menu is now in the middle of the page. You might need to reposition the content though... just add a margin.
I'm using jQuery to create a "dialog" that should pop up on top of the page and in the center of the page (vertically and horizontally). How should I go about making it stay in the center of the page (even when the user resizes or scrolls?)
I would use
position: fixed;
top: 50%;
left: 50%;
margin-left: -(dialogwidth/2);
margin-top: -(dialogheight/2);
but with this solution and a browsers viewport-size of less than your dialog is, parts of the dialog will be unreachable on top and left sides because they are outside the viewport.
So you have to decide if it's suitable for your dialogs size.
(CSS doesn't know how to calculate, yet. So the little math over there has to be done by you, right now. Therefore your dialog has to be a fixed size which you have to know.)
Edit:
Oh yes, if you want to serve your dialog for the IE6 too, you should do something like this:
#dialog { position: absolute; }
#dialog[id] { position: fixed; }
Since IE6 is not capable of fixed positions and also not capable of attribute-selectors, the IE6 will be the only one who has the position set to absolute. (This will only affect with scrolling behaviour. absolute stays on its place in page and fixed stays on its place in the browser. The rest is similar.)
Check out Infinity Web Design's piece on this.
#mydiv {
background-color:#F3F3F3;
border:1px solid #CCCCCC;
height:18em;
left:50%;
margin-left:-15em;
margin-top:-9em;
position:absolute;
top:50%;
width:30em;
}
This is the CSS they use, and I've tested it out in multiple browsers.
You'll note that the left margin is negative half the width and the top margin is negative half the height. This takes care of the centering, more or less, with absolutely positioning it at 50% top and left.
To put a div horizontally in the middle I always put margin: 0 auto. But it cannot be a floating element and in IE I always needed to put a div around and then give it the property text-align: center, so that the inside div is centered horizontally.
If you know the element's offset dimensions (width/height + padding), you can use this CSS:
elementContainerSelector {
position: fixed; /* You'll of course need to handle browsers that don't support fixed positioning */
top: 0;
left: 0;
width: 100%;
height: 100%;
}
elementSelector {
position: absolute;
top: 50%;
left: 50%;
margin: -[half of offset height]px 0 0 -[half of offset width]px;
}
Hurix's answer works too, and bear in mind the caveats in that answer as well.
Keep margin-left:auto and margin-right:auto