I'm trying to create a vertical navigation that drops down to the right when I hover over page names that offer subpages. when I hover over, it appears beside it but the content appears on top of it. I want my navigation to be on top of everything. I tried using z-index. I used 32, 999, 1000, 10000 for my z-index. I tried switching my menu from position:absolute to position:relative but it just adds unwanted space. I tried setting my content to position:absolute with a z-index, lower than the one in my navigation. Here is the link:
http://michellecantin.ca/test/
Your help would be appreciated!
The relative position of your container div a the problem. Float it to the right instead:
#container {
position: relative;
left: 26%;
width: 72%;
}
should be:
#container {
float:right;
width: 72%;
}
Related
I guess it's kinda easy, but I've been stuck here for 3 hours already.
My dropdown menu moves whole content when used. I searched for similar questions on StackOverflow, for questions related to dropdown menus and got the following answer that partly helped:
.menu > ol {
position:absolute;
z-index:100;
}
I've added the snippet above to the original code. It worked out somehow - it doesn't move other content but now I can't centre it horizontally.
Using margin:0 auto; also did not help.
Could you please help me out? I've either placed position + zindex in wrong place, or I'm missing something.
Codepen:
https://codepen.io/graphconcept/pen/MdwQBM
Remove the position: absolute from .menu > ol and add it to .menu. Also add width: 100% to .menu. If you want your menu to be visible regardless of scrolling make the position fixed instead and add top: 0.
.menu {
margin: 15px;
position: fixed;
width: 100%;
top: 0;
}
.menu > ol {
list-style: none;
margin: 0;
padding: 0;
z-index:100;
}
Explanation:
Block elements with position: static (the default value for position) have a default width of 100%; Setting the position to absolute or fixed changes their width to auto; i.e. they shrink to fit their content's width. Your menu list is being horizontally centred within the menu element. This meant that when the menu element was 100% the width of the page, horizontally centring the menu list would also centre it with respect to the page. However when the menu element shrank to fit its width, the menu list couldn't be centred any more than it already was. The width of the menu element needed to be explicitly set to 100% to allow the centring to have a visible effect.
I'm trying to implement a popover for language selection, but encounter two problems:
1) The popover is hidden above the footer when I apply position: absolute; to the footer.
2) The popover sticks to the right side of my page. I would like a margin there, but margin-right doesn't seem to have effect.
Here's a jsfiddle.
Note: this might not be the case with newer versions of bootstrap, but I'm using this one in the rest of my site and migration to a newer version is out of scope for now...
EDIT: I fixed the first problem by adding {container: 'body'} to the tooltip. Second one still open...
EDIT 2: I managed to add a margin on the right by using:
.popover
{
right: 10px !important;
left: auto !important;
}
The only problem now is that the arrow isn't centered with the text beneath the arrow anymore... any tips?
One way to accomplish this is by adding a fixed position position:fixed; right:40px; to your #wrapper. This will allow you to adjust your position to the left and or right. However, if you attempt to adjust top or bottom it will break out of its parent container and be relative to the document. Therefore, if you need to make adjustments to top or bottom use margins.
#wrapper{
min-height: 50px;
max-height: 100px;
display: flex;
align-items: center;
position:fixed;
right:40px;
}
I don't really understand how they are making this sidebar stick to the bottom of the page in this bootstrap template.
http://getbootstrap.com/examples/dashboard/#
If you look at the .sidebar class CSS properties, there is this weird
position: fixed; top: 51px; bottom: 0px;
But really no rule about the height of the column, and since it should automatically adjust to the height of the content, I'm a bit lost here.
I made an attempt with this CodePen :
http://codepen.io/anon/pen/ojQvjj
but really, the only way I found to make the sidebar stick to the bottom was to add a height property.
Thanks a lot for the answers, it will really help me make progress with CSS.
If you make a container or element (.sidebar) with position: fixed; + top: 0; bottom: 0; That container will 'stick' to the top and bottom of the parent element (body).
When you use a 'fixed navbar' in bootstrap, you need to add a margin-top > 50px or, in this case,top: 51px; so the sidebar starts after the navbar and it's not hiding behind it.
At some point it will overflow, that's why they add, overflow-y: hidden or scroll;
To be clearer. If you remove those .col-sm-3 .col-md-2 from that element, and give the .sidebar a left: 0; right: 0; it will take the whole viewport area.
Here if you see the code col-md-2 in first div and col-md-10 in second div and making first div as position: fixed; and when we make a div as position fixed it don't acquire any space in view port. and second div with col-md-10 will acquire that place but it will be hidden behind top position of first div so we use .col-md-offset-2 to move second div to 16.66 % right direction and top:0 and bottom:0 for giving position to a fixed div.
and whatever you want is there: please check you this codepen:
http://codepen.io/Gkakar/pen/KdrzBJ
I'm trying to place an image above the top bar of a div on my website on the left side of where the navigation bar is. My Attempt
It should look Like this
And I would like it to look Like this
I've tried multiple things such as placing the div for the image in different spots in the code, and changing css elements for the div, but everything seems to push the other content images out of place on the website
add this ...
.photo {
position: relative;
top: 4px;
}
and change the margin on #container to...
#container {
margin-top: -1px;
}
Your css isn't in very good shape, but, using your methods here's how to do it:
remove the margin-top from #container
add vertical-align: top to the img inside #photo
change the top in #extraDiv1 to 246px
change the top in .horizontal to 218px
I guess that should do it.
I have this page that i am working on and as you can see there are four images...if you look at the lower left booda...it has two links view Booda dog and view Booda cats. If you click the top one the bottom link moves to the left...i for the life of me cant figure out how to fix this. I am using position relitive. Here is some of my css
.booda a.button_below {
left: 107px;
position: relative;
top: 64px;
}
.entry .booda a.button {
position: relative;
right: 13px;
top: 31px;
}
there is other css if you view it in firebug
any help will be greatly appreciated ...thanks in advance
I'm not sure what exactly is going on, but changing the bottom button class from button_below to button and giving it clear:right fixed it for me.
Hope this gets you closer to a solution!
Don't use position: relative with top and right. Use position: relative on their container and then position: absolute on those spans.
It looks to me like it has to do with the text size changing when the link is highlighted.
When the upper span is selected the span is enlarged and the bottom span is shifted to align properly.
Try aligning the spans on the right instead of the left.
EDIT: To align a span to the right you can add this to your current span tags.
position: absolute;
right: 0;
But you have to switch to an absolute position. To continue using relative positioning you can wrap the spans in a single container that has position: relative