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%.
Related
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.
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.
I know that I can hide an element without removing the space it would occupy by using visibility: hidden. What I want to do is the exact opposite: I want to render the rest of the page as if the element wasn't on the page, but keep the element visible.
The reason I'm asking is because I have a centered 950px-wide layout to which I want to add a little box on the left side of the screen. It would look kinda like this:
Right now I have a <div> that holds the side box as the top element in my 950px page wrapper, which is also a <div>. To the side box I've applied position: relative and left: -200px (box width) to move it to the side, but that still leaves me with the main content being pushed down. Am I approaching the problem correctly? Is there a logical way to remove the vertical space that was left behind by the side box?
Just use position: absolute;. The element will no longer be part of the document flow, and you can position it relative to its closest non-statically positioned ancestor.
Position relative will still occupy the space. Try position:absolute; It will place the element absolutely inside its parent but above all of its siblings.
I have a div which I have set to absolute position and z-index above all the other divs on the page. The issue I'm having is where the absolute position div sits is above some divs that are interactive with the users mouse. Is there a way to turn off the interactive state of the absolute positioned div so the divs below are active.
Absolutely positioned elements use the z-index for stacking - which explains why content below is inaccessible. It is, unfortunately, not a case of interactive states, but simply of obstruction.
Any absolutely positioned block elements will obscure elements set below them as far as the dimensions of the uppermost element stretch (set a border on the div to see exactly how far the obstruction is occurring).
Your best bet (within the bounds of css) is to either position the obscuring div below where you need interactivity, or to add the properties of the obscuring div directly to the div being
obscured.
EDIT: i.e. there is no property in CSS to turn an interactive state on or off.
UPDATE 2011/11/11: see https://developer.mozilla.org/en/CSS/pointer-events for a solution to the question. pointer-events: none; is a valid solution to the question.
Maybe easier to the the site in progress - http://www.roadsafetyforchildren.co.uk/
I want to position the yellow text at the bottom of the page over the blue bar (which is an img).
I have a div that has position:relative;, within that is another div that has position:absolute;. I thought by doing that when you assign a top position to the absolute div it will take the top of the relative div as it's starting point? Mine takes the top of the screen as it's starting point, hence the massive top position.
Obviously I want the yellow text to move with the the blue bar depending how tall/wide the page is.
As far as I can see using position absolute is the only way to solve this?
Maybe I'm not understanding the whole notion of putting a absolute positioned div inside a relative one!
Your #footer div is absolutely positioned but it is not within any relatively positioned element. The only relative element I see is #actual-content, which is a sibling of #footer. If you place an absolutely positioned element WITHIN a relative element then it acts as you described.
The absolutely positioned div must be inside the relatively positioned div. That doesn't seem to be the case on the site you've linked.