I have positioned a sidebar element at the right side of the visible part of the screen (this part already works!). The sidebar consists of several DIVs. A few of them I don't care about, but the last (lowest) one should not "disappear" when the user scrolls down the page. And here is where I'm stuck. In a way, the top position should not be < 0 of the visible top of the browser window. Is that even possible with CSS and the better browsers?
Here is my definition of the sidebar:
div#sidebar{font-size:95%; float: right;width: 150px; margin-top:20px;}
div#sidebar div{padding: 5px 0;margin-bottom: 5px}
Here is the element I would like to keep inside the visible part of the screen:
div#navtop{background:#B3B3E3 url(/css/blue.jpg); margin-bottom:0px;}
div#navsoc{background:#B3B3E3 url(/css/blue.jpg); margin-bottom:0px; top:!important 0px;}
The second element, "navsoc", should remain in the visible part. But it moves exactly like "navtop" and the others I have defined there.
<div id="sidebar">
<div id="navsoc">
keep me inside the window!
</div>
</div>
I think you need
position:fixed;
So the element will be positioned relatively to the window, so if you scroll it is always visible.
Demo: http://jsfiddle.net/mJubt/
Moreover, if you want to set !important to a value, use top:0!important instead of top:!important 0.
And when you have 0px you don't have to write the unit, you can use just 0.
if you use top in CSS you should make sure that the element's position is not static (default) but absolute, relative or fixed. So, top:0 in this case is not working. And if you do change the position to either of those it would behave in different ways:
if it's fixed the element would be position relative to the window
if it's relative or absolute it would be position zero pixels from the top of the closest element in the DOM with a position different than static.
If the contents of the element above #navsoc has a flexible height you can't make it respect it's position and at the same time not move on scroll.
You need Javascript to achieve that.
The first part is a bit off topic back I think it is good to know it!
Here you have the fiddle.
Related
I learn css and i get confused between those three things.
They are all doing the same thing - moving the block to the right screen position.
Is there any spicial thing in each one?
They're not doing the same thing, they're showing the same thing, based on the code.
right: 0px;
Aligns the item on which the property is specified to the right by forcing the distance between the right and the item to zero pixels, effectively setting it 'right' (requires absolute positioning though).
float: right;
Let's the specified item 'float' to the right, but it is not being forced right. If another element is already there with the same float property, it will not overwrite that position (where solution 1 stacks).
This property listens to the parent element though, if the container of this element isn't touching the right side of document, it will not reach the right side.
See the DOM as the sea, and your element as a ship. It 'floats' with the wind (left/right) 'over' the DOM / water.
margin: auto;
Doesn't even align anything to the right. Margin auto is a trick to align stuff to the center by forcing the margin between the elements to be exactly the same (automatically).
does anybody know a way of positioning an element to be always in the same position, but having different parents that are in another.
Ok to make is clearer here is an example. You have horizontal dropdown navigation, when u hover over one navi element, u see subnavi just under the element you hover over, how can I make it to appear on, for instance, top left corner of the screen, always. Next button will be next to the first one, for about 100px right, and now when u set pos absolute or relative, the subnavi wont be exacty in the same position as the first one, but 100px to the right. And also, I can't use special class or ids, only global classes.
Without your code its hard to answer your question, I however give it a try:
You can make it by applying position: absolute; left: 0px (change left to your wishes, and add a top: 0px if you want to adjust the stating height), to your submenu, check this demo.
Note that the submenu only appears when you hover the parent. On blur, it disappears. When you want it to stay, you'll need some javascript (or jQuery).
position the parent DIV "relative" than you position the child div "absolute".
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
So, I tried doing position:absolute, but whenever I place something new, (eg a div) the other div gets pushed down.
Eg. without other div
Box
With other div
other div
box
Thanks :D
Are you sure the CSS rule is not ovewritten? (Check this with a browser code inspector, such as Firefox's Firebug or Opera's Dragonfly)
Additionally, If you want the div to be put on a place despite srolling,
use
position: fixed
instead. This will keep your object on a fixed place in the page.
You can usually use position:fixed or position:absolute.
If you want the element to be stuck on the screen no matter how to scroll, you can use position:fixed. Make sure that your top & left or bottom & right are set appropriately. Also make sure that the z-index is set appropriately, so no other element is covering it.
position:absolute; DOES depend on the parents of that element. If a parent of that element is positioned, then the absolute positioning will position the element within that element.
do you have examples of your code?
I am trying to make an HTML DOM slideshow creator, that inserts text, images, etc. into slides for presentations. The main browsers in mind are the Nintendo DSi and 3DS browsers, but I would like functionality with computers as well, meaning that I AM using CSS percentages.
But here's the catch: An HTML span element has a relative positioning of top 100% and left:90%.
The left position is fine--the top position is not...I don't understand why, but the span is being displayed COMPLETELY outside the element from the top positioning.
Check this out for yourself here.
"Slide 1" is supposed to be ABOVE the bottom border for the light gray div I have. Why is this outside when the positioning should be relative to that div?
I've always been so confused with CSS positioning...Could someone please figure this out for me? This is getting frustrating. By the way, what your looking for is "Slide 1" outside the HTML div.
It is "being displayed COMPLETELY outside the element" precisely because of the top: 100%. That is telling it to move the span 100% the height of the container, which of course since it started at the top of the container, it puts it just past the bottom of the container. Note that relative positioning is not done "relative to that div" as you stated, it is actually relative to that span (you may want to do some reading on that). However, when using percentage offsets, it does calculate its offsets in relation to the size of the container.
Since your div.slide container is itself position:relative, then I believe what you want is to set your span to position:absolute and instead of doing a top positioning, do a bottom: 0 which will place it directly on the bottom of the div you are trying to place it on the bottom of. You can keep your left: 90%.
I'm working on an interface that utilizes a list of items within a scrollable div, some of which utilize a rollover menu on hover that extends outside of the div. Disabled scripting compatibility is a priority for the site, so I'm trying to see if the interface can be done with only CSS before I start getting into other compromises.
I've got some examples below. The menu in question is on the right side with heading 'select projects'. The third list item from the top in each page contains a rollover menu.
In order to keep the rollovers positioned relative to the their parent when scroll position changes, I positioned the parent li's relative and the child ul's positioned absolute.
EXAMPLE 1
Of course, once overflow:auto is on and the scroll in place, the rollovers are cut off from displaying.
EXAMPLE 2
I tried removing the relative positioning of the parent li's, and retaining the absolute positioning of the rollovers to free them from the div, but then they do not position properly when scroll position is changed.
I can only post two links but if you want an illustration, it's here: eypaedesign.com/markets-rollover-issue-no-relative.htm
With the exception of changing the UI, is there a combination of properties I'm not seeing here that can be used to make this interface work on CSS? I could position the entire div as absolute, and add a large amount of left padding for the rollovers to appear in, but that seems pretty inelegant.
Thanks folks -
With only CSS, you are limited to only one or the other: overflow: auto or overflowing hover-menus. Using separate visible and auto properties for overflow-x and overflow-y doesn't work, so I think your best bet is to go with the padding solution you were considering.
With proper use of absolute positioning and z-index (in case you are concerned about padded menu container hit-blocking any elements under the padding), you should be able to do it without destroying the rest of your layout. You'll have to control the size of all child elements inside the scrollable container of course, so that they don't extend to the full width of their padded parent.
Adding these properties - with no other changes - seems to work on your site, so perhaps you can get away with it easily:
#project_menu {
padding-left: 300px;
margin-left: -300px;
}
.center {
position: relative;
z-index; 10;
}
if you put a height of 293px in your class nav it should be ok.
Or in you project_menu ID, As I can see that ID has a height of 218px and your UL is 293px.
By changing one of those 2 you should be ok. It depends on how you set it affect other element.
But using project_menu ID should be just good.