You can see the implementation here: http://jsfiddle.net/DVp4A/
How do I get the div 'quota info' to be situated to the top left of the UL?
I have the positioning of the UL stuff fine, I just don't know how to get the positioning of the 'quota-info' div to be top left and not 'above' the UL.
I'm not sure what you are trying to acomplish, try adding this this:
#quota-info {
position:absolute;
top:0px;
left:0px;
}
#navigation {
position:relative;
}
If it's not what you want to get let me know and try describe it as I'm an idot ;)
I can't understand exactly what is your requirement but check this http://jsfiddle.net/DVp4A/2/
If this is what you needed, I added
position:relative;
top:50px;
for #quota-info. If this is not what you need, please clarify or make visual example to help you.
Related
is it possible to see all the content in the top div before the second div scrolls over.
Check the fiddle
http://jsfiddle.net/KyP8L/91/
many thanks for looking.
.div-top{
height:auto;
min-height:100%;
width:100%;
position:fixed;
top:0;
left:0;
background:#ff0;
z-index:500;
}
.div-bottom {
width:100%;
background:#0ff;
margin-top:100%;
z-index:600;
position:relative;
}
What you want is though not possible with css, you can do it with jquery : http://jsfiddle.net/KyP8L/92/
Just check the scroll, if it reaches top, then assign the z-index(higher) to the .div-bottom
$(window).on('scroll',function(){
$(window).scrollTop() ;
;
if($(window).scrollTop()> parseInt($('.div-bottom').css('margin-top')))
{
$('.div-bottom').css('z-index','600');
}else{
$('.div-bottom').css('z-index','0');
}
console.log('top'+$('.div-bottom').css('margin-top'))
console.log('scroll'+$(window).scrollTop())
});
Edit:
As the OP says in comments what he wants is, to be able to scroll down
the top div and then I want the bottom div to scroll over the top div
here is the fiddle http://jsfiddle.net/KyP8L/108/
I don't actually understand what you mean by scrolls over,
but setting.div-top{ height:100%} will let you entirely visualize div-top befor getting to the second div.
And still setting .div-top to fixed wouldn't have sense.
I ran into this issue trying to implement https://github.com/jmosbech/StickyTableHeaders in an application. In my case, everything worked fine, but the header was visible outside of the container. Once it had position:fixed, it suddenly ignored z-index and overflow properties. I set up the following fiddle to demonstrate the issue:
.scroller{
overflow:scroll;
width:200px;
margin:2em auto;
}
.container{
width:400px;
background:green;
overflow:hidden;
}
.foobar {
width:350px;
height:10px;
position:fixed;
background:yellow;
opacity:0.5;
margin-left:-25px;
}
http://jsfiddle.net/z2x5Q/1/
How can I keep the .foobar div's width and fixed position, without it overlapping the div.container's boundaries?
Why are you trying to use position: fixed?
The problems you state are a standard behavior of a fixed position. The item is moved out of the flow of the DOM and you are required to explicitly state where and how you want it. I'm not sure position: fixed is giving you anything here that you would want. In fact, as soon as you take that property off your .foobar element, it looks like you get the behavior you want.
I'd suggest reading up a bit more on position fixed.
Good article here from CSS Tricks
I've been implementing Mega Menu Reloaded On to my website, and I am unable to properly align the div tags on different screen resolutions!
Here's: what it should look like
Here's: what it looks like after I've rewritten parts of the css of Mega Menu.
I've tried for a few hours to fix this issue, but as a beginner to css I can not seem to manage to fix it.
I believe this is the css needed pertaining to its placement
.megamenu_fixed {
width:960px;
height:44px;
position:fixed;
right:0;
margin:0 auto 0 -480px;
z-index:2;
background-image:url("../img/bg.png");
background-color: #3d3d3d;
padding-left:12px;
}
.megamenu {
position:absolute;
margin:0;
width:960px;
font-size:0.982em;
list-style:none;
padding:0px;
line-height:38px;
font-weight: bold;
display:block;
list-style:none;
top:41px;
padding-left:42%;
}
and here's the code of it's position with the correct placement
#nav-main { right:0; top:55px; list-style: none;}
#nav-main li {list-style: none; float:left; position:relative; padding-left:20px; }
Thanks in advance for any help, or pointing me in any right directions. :)
try using relative instead of absolute positioning.
also, failing that, try specifying left as a percentage (i.e. approx 50% is where the menu starts), and width also as a percentage (100% should make it use only from the left-most point of the div to the right-most side of the screen. if not, try 50% width).
The problem is in your HTML, not your CSS (I think. Well, I fixed the part where 'Adults' was hiding, that was a syntax error)
the span where Adults is declared is mistyped. I replaced <span class="drop"><adults< span=""> (problem code) with <span class="drop">adults</span> and 'Adults' displays properly. However, it is a little squashed to the right, but I believe that would be because of the images top left of the page of 'bad' version, which are not there on the 'good' version
PS: I've left the old answer there as people may have similar issues, where it is in fact the CSS at fault. If you think it's considered "off-topic" let me know, I'll remove it
UPDATE: Oh, and something I forgot to mention, to fix the squashed megamenu, just edit the location in the CSS, that should bring it back to normal
Alternatively, you can scrap div (almost) entirely and use tables instead. can be confusing sometimes, but in my opinion it's totally worth it. You just can't merge/split cells (to split just create a table within a table). Use microsoft word or openoffice writer or something like that and create tables within tables for graphical "base layout" to help you figure out the necessary code. Here's a starting point: Formatting layout with tables on gitHub
Can someone help me out with some css image positioning?
I am trying to make a column where the top and bottom are separate images. I am
doing this so I will have a nice curve but when the images are placed in, the right column
goes underneath the left div instead of floating right. I have tried absolute positioning but seems to do nothing. Any help will be much appreciated, thanks.
CSS:
#column-top{
width:735px;
height:40px;
float:left;
background-image:url(images/opactop.png);
}
#column_left_content{
width:735px;
min-height:500px;
margin-right:0px;
float:left;
background-image:url(images/opaccontent.png);
background-repeat:repeat-y;
}
#column_bottom{
width:735px;
height:40px;
float:left;
background-image:url(images/opacbottom.png);
}
#column_right{
width:160px;
height:900px;
float:right;
background-image:url(images/opac.png);
background-repeat:repeat-y;
}
Here is my fiddle for you. You don't need to float the top and bottom. left float the two middle ones and place them inside a container div. jsfiddle
I'm actually working on a website that should have a div in position fixed on the top of my page.
But it doesn't work fine : my div on the top is covering a part of my page. I don't understand how to get a solution for this.
The div fixed on the top is ".menutop" :
.menutop {
width:100%;
background-color:white;
top:0;
position:fixed;
margin-bottom:10px;
border-bottom:1px solid black;
color: #428CB7;
}
Should I add something in my body configuration ?
Thank you !
When an element has position:absolute or position:fixed, it is removed from the flow, so any other elements will act as if it's not there. In order to prevent this causing problems, in your case, add a margin-top to your content so that the menu no longer covers it.
You will probably need to add a margin-top to the body for whatever height the menutop is.