Is there a way to force a fixed element to show up at certain height without using javascript? I have a fixed element that should act as a menu but should only be visible after the first 900px of the site are scrolled down and from that point onward right now it's a simple fixed menu:
#actual-menu{
margin-top:50px;
float: left;
border: 1px solid #ccc;
position: fixed;
left:0;
top:20px;
}
however if I leave "top:20px" then I see it before the 900px are scrolled and if I make it 920px then I never see it. Is there a way to get it to "wait" until the user is there and then move? (with only css preferably)
I don't think you can do it with CSS, but jQuery made it very easy:
$(window).scroll(function(){
if ($(this).scrollTop() > 900) {
$('#divmenu').fadeIn('slow');
} else {
$('#divmenu').fadeOut('slow');
}
});
Maybe if you used absolute?
#actual-menu{
margin-top:50px;
border: 1px solid #ccc;
position: absolute;
left:0;
top:920px;
}
Of course this way it will scroll up instead of pop out, and also top:920px should change accordingly to the parent element... Otherwise I recommend using Javascript.
#Luis, Try this
HTML
<div id="main">
<div id="divmenu"></div>
</div>
CSS
#main{
width:100%;
height:1500px;
background:#CCC;
}
#divmenu{
margin-top:50px;
border: 1px solid #ccc;
position:fixed;
left:0;
background:#000;
width:0px;
height:0px;
}
jQuery
$(window).scroll(function(){
if ($(this).scrollTop() > 900) {
$('#divmenu').fadeIn('slow',function(){$(this).css({'width':'100px', 'height':'100px'});});
} else {
$('#divmenu').fadeOut('slow');
}
});
Related
I've seen several similar questions/answers to this problem on SO but none of the answers that I've checked have helped me.
I'm attempting to have a "Side-Bar" extend from 10px less than the top of the page, all the way to the bottom.
However (when using height:100%), the "Side-Bar" only reaches to the bottom of the loaded browser window, if there is content past the browser window that you scroll down to, the "Side-Bar" ends prematurely.
Basically, its height is only 100% of the browser window, I desire it to be 100% of the full page content.
I've created a JSFiddle that shows my problem:
http://jsfiddle.net/qaEzz/1/
My CSS:
#sidebar {
position:absolute;
right:8px;
width:200px;
height:100%;
overflow:hidden;
background-color: yellow;
}
i put the <div id="sidebar"></div>
into the <div id="content">
and added in the css
#topbar {
width:100%; <--this
height:20px;
background-color: red;
}
and this
#sidebar {
position:absolute;
right:16px; <--! extended to 16 px
width:200px;
height:100%;
overflow:hidden;
margin-top:-10px; <--!
background-color: yellow;
}
#content {
position: absolute;<--! and remove the marging: 10px just add a <br> in the html
width:100%
}
Here is the working Fiddle
If you change position:absolute; to position:fixed;, then it would stick to its position on the right.
For a sidebar that might have a longer length than the browser length itself, instead of the position attribute, use the float attribute.
http://jsfiddle.net/wK2Yh/
#sidebar {
float:right;
right:8px;
width:200px;
height:100%;
overflow:hidden;
background-color: yellow;
}
I want to know the best way to achieve the below image in CSS+HTML.
I'm having difficulty explaining in words what I want, so I guess a picture would make it more clear:
While the second and third parts are doable. I'm curious to know the best way to achieve the first one (Blue menu). If i split my page into three parts (based on the menus), in the case of blue, my div items must float out of the horizontal width of the menu, but within the vertical.
Thoughts wise ones?
Working Fiddle
You can see i have used position:relative on parent and position:absolute on child to make it flow out of that li element.
ul {
list-style:none;
width:906px;
height:600px;
}
li {
float:left;
display:inline-block;
border:1px solid #ccc;
width:300px;
height:600px;
text-align:center;
position:relative;
}
.selected {
background:yellow;
}
.div {
position:absolute;
left:-150px;
width:600px;
height:80px;
border:1px solid #000;
background:#fff;
z-index:2;
}
#div-1 {
top:30px;
}
#div-2 {
top:140px;
}
#div-3 {
top:250px;
}
You can do it by position: absolute.
.blueDiv{
position:relative;
}
.innerDiv{
position:absolute;
top: (your choice);
left: 50%;
margin-left: -(innerDivSize / 2);
}
If you don't have the width of the elements inside ... you can try to push them to the left and right by:
.innerDiv{
position:absolute;
top: (your choice);
left: 0;
right: 0;
}
But that will work only if the parent element is not on the very left or very right of the page.
suppose i have a div, i want it to be out of visible area of computer monitor screen, so that when i use CSS transitions to move it to a specific position, an effect of element moving in slowly from outside of screen is created, and i also would like to create its reverse effect.
position: absolute; then do something like left: -100px;
working example(hover over the box and wait): http://jsfiddle.net/fDnPj/
http://jsfiddle.net/DZFtt/
<div id="example"></div>
<div id="example2"></div>
<div id="example3"></div>
#example{
width:50px;
height:50px;
background-color: #386a95;
position:relative; /*Not moved*/
}
#example2{
width:50px;
height:50px;
background-color: rgb(177, 35, 35);
position:relative;
left:-25px; /*Pushed halfway off the screen*/
}
#example3{
width:50px;
height:50px;
background-color: green;
position:relative;
left:-50px; /*This is now totally hidden from view*/
}
IF you know the width of the div you can use the combination of position and left property like this
#my-div {
position:absolute;
left:-100px;
top:0;
width:100px;
background-color:red;
}
<div id="my-div">Hello</div>
Play here by adjusting the left property.
I have a white container on top of the bg but it stops even though min-height is set as 100%, heres the CSS for this container and in bottom I have included image of what happens when I scroll to the bottom:
Container where post is:
Yellow Bg:
.home-body {
background-color:#EAC117;
height: 100%;
.home-main-content {
width:800px;
min-height: 100%;
position:absolute;
overflow:hidden;
margin-left:56.5%;
left:-500px;
top:51px;
border-left:1px solid black;
border-right:1px solid black;
background-color:#fff;
background-repeat:repeat-y;
.home-post-echoed-container {
width:400px;
position:absolute;
margin-left:50%;
left:-200px;
top:200px;
overflow:hidden;
}
.home-echoed-posts {
width:600px;
overflow:hidden;
left:-98px;
position:relative;
background-color:#fff;
margin-bottom:-5px;
border-top:1px solid;color:#0a527e;
border-left:1px solid;color:#0a527e;
border-right:1px solid;color:#0a527e;
}
.home-echoed-posts-post {
margin:10px;
color:black;
}
.home-echoed-posts-email {
margin:10px;
color:black;
}
.home-echoed-posts-date {
margin:10px;
color:black;
}
You are doing it wrong.
To center something you should use (instead of absolute positioning):
.foobar{
margin: 0 auto;
width: 800px;
}
As for "why comments are not expanding the container", it is hard to guess without code, but there are two reasonable possibilities: positioning or floats. There nothing i can do about it. But if they are floated, then easies is to have container with following css:
.container{
overflow: hidden;
}
It is a bit counter-intuitive, but works like charm. You can read more about it here.
Update: and read this article too.
Update 2:
Looks like it is the worts case scenario. You are using positioning .. for everything. YOu really need to learn how to use floats.
.home-post-echoed-container {
width: 600px;
margin: 0 auto;
padding-top: 200px; // im guessing what top:200px was doing
overflow:hidden;
}
.home-echoed-posts {
width:600px;
float: left;
background: #fff;
margin-bottom: -5px;
border: 1px solid #0a527e;
border-bottom: 0;
}
Something like this. But I'm really just guessing.
html, body
{
height:100%;
}
Make sure you include that in the top of your CSS script, else setting .home-main-content to min-height:100%; won't work, because to CSS, if undefined elsewhere, 100% is simply the height of the current div.
Also ensure that you have that same property set if your .home-main-content is surrounded by another div.
I've a div with only a min-width that extends itself like it is 100% width.
Inside it i have a link left floated and I'm going crazy finding a way to center it inside the div.
How can i do this without changin it's float?
Oh and the link hasn't a defined with
EDIT:
I've tried with:
I gave the container a text-align: center,
removed the float nad it gets centerd but not aligned with others element and i've tried using display: inline and vertical-align.
For the code i'm trying to center the "Project name" here http://twitter.github.com/bootstrap/examples/fluid.html
Hope this helps:
http://jsfiddle.net/cU2ff/
EDIT
http://jsfiddle.net/cU2ff/1/
I came up with this, don't know if it's gonna help. The float: left property doesn't do anything but I left it there
<div id='container'>
<a id='projectName' href='#'>Ciaoasdsa da sda sd asd adsa</a>
<ul id='menu'><li>li1</li><li>li2</li></ul>
<p id='login'><a>asd</a></p>
</div>
#container
{
width:100%;
position:relative;
overflow:hidden;
border: 1px solid black;
}
li { float: left; }
#menu, #login { border: 1px solid black; }
#menu{ float:left; }
#login { float:right; }
#projectName
{
text-align: center;
border:1px solid red;
padding:3px;
width: 100%;
position: absolute;
float: left;
}
EDIT
http://jsfiddle.net/cU2ff/2/
wrap it with a div and give it the id projectName
I usually used this too center my links within the div.
div.name a
{
margin-left:auto;
margin-right:auto;
}
Without being able to see the html you are talking about it is a little difficult to give you an answer, but try this if it is just text inside the link.
a{
display:block;
text-align:center;
width:100%;
}
Try to use this
a{
margin:0 auto;
}