I have the following CSS
.bloodparam > .highvalue { bottom: 12px; right: 25%; }
and
.bloodparam > .highvalue { bottom: 12px; left: 75%; }
ideally the position of the element must be the same regardless of which one I use, but I see different positions. Any ideas why?
Please see this fiddle http://jsfiddle.net/956y5/1/ - You'll see the right indicator is different for the first and the second line
left position values are calculated starting at the specified left value given and puts the width to the right of the location
right position values are calculated starting at the specified right value given and puts the width to the left of the location
Visually you can see this in your example, the right part of the top 100 matches up with the left part of the bottom one.
This is for good reason. Take for example the comparison of left:0 and right:0. If they were to be equivalent, the left version would be positioned at the far left of the screen with the full width showing, but the right version would be positioned at the very far right of the screen and not be visible. As it is, though, it positions the element where the full width is shown but it is at the right most value possible
And technically speaking, both of your values are wrong because left and right take into account the width of the element it is positioning. To be perfectly accurate you would need to also have a negative margin on one side of half the width of the element being positioned. The error can be easily seen by giving the left value 100%, the marker then moves outside of the range entirely
Of course it's different, you have an element with an arbitrary width, and the left and right is being calculated from either the left or the ride side of that. 75% calculated from the left edge is different from the 25% calculated from the right edge that is how ever many pixels away from the left.
The 25% and the 75% are the distance between the right element border and the right page borden / the left element border and the left page border. Adding some backgrounds to your fiddle may clarify this (I just added background-color: blue to the two elements):
http://jsfiddle.net/956y5/3/
Related
Why does CSS position: relative; use bottom to shift up, use top to shift down, left to shift right, and right to shift left?
Fiddle: click me
Am I using position: relative; incorrectly, or is this some sort of terminology I was not aware of?
The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position
find out more about the position property here (w3schools)
Also, you can use negative numbers as well so to shift the element left 20px you could use:
left:-20px
It's some "terminology I was not aware of", to put it in your own words. When you specify one of those values, you're specifying how far you should move it away from that side. So, when you specify a top:10px, for example, you're saying "move it 10px away from the top". I think you just had the misunderstanding that you thought it moved towards that side, but it's not exactly how it works. And this isn't just for position:relative either, it is also the same in absolute, fixed, and whatever other position values there are
Its working properly. Please read this article http://www.webdevdoor.com/html-css/css-position-child-div-parent but please try to change position value ex 20,30,40 instead of 10
To understand this, first let's look at the position: relative property/value.
Taken straight from w3schools:
An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
One way to understand this is, when you set a property like left to an element with relative positioning, the value you set is how far away from it's normal position it will be. So, setting left to have a value of 20px moves it 20px away from it's normal left position. A positive integer will move it to the right and a negative will move to the left. Fiddle
Or, better put by w3schools:
For relatively positioned elements, the left property sets the left edge of an element to a unit to the left/right to its normal position.
My above description is probably not vernacularly correct, but it helped me understand it in the beginning.
To put it simply it positions the element x amount of pixels from the direction specified.
A rough sketch is on a fiddle here. Is there a way to make that happen without hardcoded values for the height and width of the div's?
This is what transform-origin is supposed to help with.
I've looked at your fiddle. Do you need the div's to be absolutely positioned? If not, then setting transform-origin to 0 0 is enough to make it work. (I'm supposing this is how you want it: http://jsfiddle.net/Actss/17/ )
Removing the position: absolute from the divs guarantees the second div's top-left corner is touching the first div's bottom-left corner. Make the rotation on the second div happen at that same point (by using transform-origin) and you'll get the effect you want.
You can define the point you are rotating around by using transform-origin.
-webkit-transform-origin: 0% 100%;
This will rotate the element around the bottom left point. By default this is set to the centre of the element (50% 50%).
Demo
I'm following In Search of the Holy Grail, but am having trouble understanding what's actually going on in step 3.
To break the problem down, I disabled the margins/offsets of the "left" and "right" divs. This gives you the content at the top, and then the two other elements sitting side by side under it as I would expect [see P1].
I then gradually decreased the margin-left of the "left" div from 0px to -199px which again does what I expect [see P2].
But at -200px (the width of the left element itself), it shoots up to the top [see P3], with the left edge against the right edge of the content. I would have expected it to just keep going off the edge.
Why does it jump up? And if there's no conceptual explanation as to why, where does it describe that functionality in the spec?
Images:
P1
P2
P3
Remember that both #content and #left (as well as #right) are floated.
Due to the nature of floats, they (or their contents) may overlap. This is well described in this section of the spec, and is fairly easy to understand. If you apply negative margins to a floated element that's adjacent to another float, it will simply move to its left (similar to having a left relative offset), over its sibling.
In the section on the float property, you'll find a list of "the precise rules that govern the behavior of floats." Now, I'm not 100% familiar with the float model, but these points are what I believe to be relevant:
2. If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.1
7. A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block's right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.
8. A floating box must be placed as high as possible.
9. A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.
So my guess is: a margin of -200px, which is as you say the negative equivalent of the width of the #left element itself, causes it to float all the way up and to the right (rather than to the left) and to hug the edge of the #center element which itself is also floated. The right edge of both elements touch each other because of this full, equal negative margin. Consequently, as you continue to increase (or decrease?) the negative margin, you'll see that the #left element continues to move to its left.
Note that the padding applied to the #container element doesn't interact with the margins; even if you remove the padding on either side or both sides, the margins will interact in the same way.
1 Note also that there's a statement in the section on collapsing margins in the linked section of the spec, that describes the behavior of negative margins, but that is irrelevant as the margins we are concerned with here are horizontal and belong to floated elements, and so are never affected by collapsing.
you are using <h2> tag for left and right heading but in center you are using <h1> that's why you have this problem if you want to solve this problem do one thing 1 use all <h2> tag for heading and if you want to use then apply below class on
h1
{
margin-top:10px;
}
I'm putting together a sprite and have two questions.
Something I've always wondered whether possible is negatively positioning a background picture to the right or bottom. A negative position is bread and butter stuff on the left of an element or top but what about the right and bottom?
If I have a 500px by 500px div can I then position the left edge of a background image to appear 5px in from the right using a negative value rahter than 495px to push it over?
The second question is whether I can use just a small portion of an image and repeat it without the rest of the image showing.
For example, I may have a sprite thats 300px square and filled with all kinds of things. Is it possible to take a 50px square portion of that image and repeat it in the background of an element?
I very much doubt either is possible but must put the monkey to sleep!
To "negatively positioning a background picture to the right or bottom", you can use percentages less than 0%. e.g.:
background-position: -11% -7%;
...positions the image cropped on the bottom right if the image is of similar size to the element. You might need more negative percentages if they aren't the same size.
To "negatively positioning a background picture to the left or top", you can use percentages greater than 100%. e.g.:
background-position: 105% 110%;
...positions the image cropped on the top and left assuming again that they are of similar sizes. You might need larger percentages if they aren't the same size.
Finding the exact percentages you need is not very intuitive, however. CSS uses percentages a little differently with background-position. The value is the percentage along both the image and element (aka viewport) where they are the same. This is why 0% is equal to left, 50% is equal to center, and 100% is equal to right. Outside of this range it is even less intuitive as "less than zero" matches a point before the top/left edge on both the image and the element (effectively shifting the image away from the top/left), and "greater than 100%" matches a point greater than the far bottom/right edge which has the effect of moving the image away from the bottom/right.
These equation helps to determine where you want the image to sit. Simple algebra will get you the variable you want to know (e.g., solve for percentage).
effectiveLeft = (elementWidth - imageWidth) * percentageLeft;
effectiveTop = (elementHeight - imageHeight) * percentageTop;
As for your second question (repeating part of an image), I don't believe this is possible unless you were to repeat multiple cropping elements, which is different than what you were wanting.
If you use percentage based background positions you can. So you would want something like:
background-position: 190% 0;
They've already answer that you can't use negative values, but maybe you could try:
Give the element background-position:right bottom
and the image for the background should have only the part you want to show.
The background-position property has a few different values:
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
You can also specify X and Y positions for it. For more information on it, take a look at this link:
https://developer.mozilla.org/docs/CSS/background-position
As for your second question, that's not possible using simple CSS.
For negative right bottom position to work right, this DIV must necessarily be property background-repeat: no-repeat;
For your first question, no you cannot.
For your second question, no you cannot.
Here is a snippet of CSS that I need explained:
#section {
width: 860px;
background: url(/blah.png);
position: absolute;
top: 0;
left: 50%;
margin-left: -445px;
}
Ok so it's absolute positioning of an image, obviously.
top is like padding from the top, right?
what does left 50% do?
why is the left margin at -445px?
Update:
width is 860px.
The actual image is 100x100 if that makes a difference??
Top is the distance from the top of the html element or, if this is within another element with absolute position, from the top of that.
& 3. It depends on the width of the image but it might be for centering the image horizontally (if the width of the image is 890px). There are other ways to center an image horizontally though. More commonly, this is used to center a block of known height vertically (this is the easiest way to center something of known height vertically):
top: 50%
margin-top: -(height/2)px;
This has probably been done in order to center the element on the page (using the "dead center" technique).
It works like this: Assuming the element is 890px wide, it's set to position:absolute and left:50%, which places its left-hand edge in the center of the browser (well, it could be the center of some other element with position:relative).
Then the negative margin is used to move the left hand edge to the left a distance equal to half the element's width, thus centering it.
of course, this may not be centering it exactly (it depends how wide the element actually is, there's no width in the code you pasted, so it's impossible to be sure) but it's certainly placing the element in relation to the center of the page
top is like padding from the top right?
Yes, the top of the page.
what does left 50% do?
It moves the content to the center of the screen (100% would be all the way to the right.)
why is the left margin at -445px?
After moving it with "left: 50%", this moves it 445 pixels back to the left.
The snippet above relates to an element (could be a div, span, image or otherwise) with an id of section.
The element has a background image of blah.png which will repeat in both x and y directions.
The top edge of the element will be positioned 0px (or any other units) from the top of it's parent element if the parent is also absolutely positioned. If the parent is the window, it will be at the top edge of the browser window.
The element will have it's left edge positioned 50% from the left of it's parent element's left edge.
The element will then be "moved" 445px left from that 50% point.
You'll find out every thing you need to know by reading up on the CSS box model
When position is absolute, top is vertical distance from the parent (probably the body tag, so 0 is the top edge of the browser window). Left 50% is distance from the left edge. The negative margin moves it back left 445px. As to why, your guess is as good as mine.
At the risk of sounding like Captain Obvious, I'll try explaining it as simply as possible.
Top is a number that determines the number of pixels you want it to be FROM the top of whatever html element is above it... so not necessarily the top of your page. Be wary of your html formatting as you design your css.
Your left to 50% should move it to the center of your screen, given that it's 50. Keep in mind people have different screen sizes and is allocated to the (0,0) top left of your image, not the center of the image, so it will not be perfectly allocated to the center of one's screen like you may expect it to.
THIS is why the margin-left to -445 pixels is used-- to move it further over, fixed.
Good luck, I hope that this made sense. I was trying to word my explanation differently in case other answers were still giving you a hard time. They were great answers as well.
(If you have two different sized monitors, I suggest toying around the with the code to see how each modification affects different sized screens!)