To move the position of an image to a certain part of my website, ive put the image in a div tag and used relative position to get it to the place i want it. This works fine for where i want the image to be positioned however there is a downside that it leaves white space behind where it previously use to be and in that space nothing is occupied and it makes the website look ugly. Is there a way to remove that space that it left behind?
as stated above, you should position the element absolute instead. When positioning relative, the element is still within the document flow and therefore occupies its original place in the document. Positioning absolute will remove the element from the flow and make the space available for other elements.
Use absolute positioning instead.
Related
I have two elements (images)
imgA is 2000px high
imgB is 1000px high
I place them one after the other and then move imgB up (I use relative positioning) to overlap the imgA.
Thus, the window in the browser should be 2000px high.
However, it seems, that when placing imgA and then imgB, the browser allocates the place for both of them i.e. 3000px hig, and after I move imgB up to overlap imgA, I have a blank space =1000px left at the bottom of the page.
How can this blank space be prevented?
Thanks
Ignore this
This is because the images are block level elements. To stop the
browser from allocating space you can just add: display:inline-block
to the second image. This will bring the image out of block structure
and so the browser will not allocate it whitespace.
Also have a look at Relatively Absolute positioning, it is very handy for the sort of thing you are doing.
EDITED
As commented below, this does not work. Use instead the Relatively Absolute positioning.
Here is a jsFiddle that shows the code needed to position an image over another
Use display: block on your images, then use position: absolute instead of position: relative to position imgB over imgA.
Don't forget to assign the parent element to anything other than position: static to make the positioning of your image relative to the parent element.
for further clarification you can see the examples of "css block" here
http://www.tutorialswire.com/css/css-display
Absolute positioning is only a specific solution to your case. It may not work in some similar case (For example if you have other elements on top of those two images inside the general containing div).
I believe best solution would be using
margin-top: -1000px;
for the second image.
Please look at this example http://jsfiddle.net/xcYum/1/
I want to know why is the div tag (with class=progress) the content is broken into two lines instead of just one line (i.e. your progress vs your\nprogress). I should NOT need to specify the width for the 'div class=progress'. can you please give me an explanation that has all the css and/or html element types (or boxing whatever reason) this happens? I just want to know exactly how the rules actually work, rather than memorizing cases it works or doesn't work.
it seems if i change the .container css to the following:
.container {
position: relative;
}
then the div tag (with class=progress) now displays in single line, why is relative and absolute make such difference? or is it because it is nested?
how do we avoid nested absolute positioned div tags?? is it wrong or bad practice to have such structure. i am using it in this example is because i want
'100%' and 'your progress' to be positioned based on 'div class=container' tag, then i can just move the 'div class=container' tag around. in other words, doing this way, i can just move one thing ('div class=container' tag) to make 2 things move (100% and 'your progress'), the other way around is more work. What is wrong with my thought process here?
Because an absolutely positioned element shrink-wraps, in other words, it becomes as small as possible. You can force text to never wrap using white-space: nowrap
Not sure why this happens
You don't need absolute positioning for an elements children to move with the parent
Absolute element establishes a new containing block for normal flow children, and for descendants whose position property is set to absolute.
Reference: http://reference.sitepoint.com/css/absolutepositioning
Same as first answer
Absolute element is positioned with respect to its containing block. So, you just need a parent 'div class=container' to have relative position and then all its elements with absolute position will move with it.
Reference: http://reference.sitepoint.com/css/absolutepositioning
so what I'm trying to do basically is have the HTML document extend vertically as I add more text, and at the moment it's just giving me some really weird problems, such as:
The body won't extend downward as I add more text
The footer isn't displaying at all at this point
There are some weird symbols being inserted into the document
The only way I know how to position things is absolute, and I don't know if this is causing some problems (such as getting text under the "Home" image?)
Here's the jFiddle: http://jsfiddle.net/9nYgb/
Any help is appreciated greatly, thank you!
Absolute positioning does tend to cause problems like that. Relative positioning is simple ... instead of using the top-left corner of the document as the origin for reference, the top-left corner of where the element was supposed to be is used as a reference. So <div style="position:relative;top:10px;"> will result in the element being 10px below where it would have been had no style information been provided.
When you position elements absolutely, you take them out of the document flow. This means that other elements will act as if they aren't there. It's good for placing a modal popup div on top of a page, but it's not good for laying out a whole page.
In general, when it comes to laying out a page, I try to stick to a series of divs with height and width set. You can use margin and padding to adjust layout, and float to make items stack up horizontally to one side or the other. Sometimes I also need to set a div's display to inline or inline-block to get them to appear next to one another and act like inline elements. You can also place divs within divs to group elements together and treat them as one by manipulating the outer container(s).
In general I don't find much need for absolute positioning in a page layout.
Basically, I have a form, outside of that form in this random space on my page I want to position a div (containing two buttons). I've looked at using absolute positioning. However, it is positioning it outside of the page wrapper.
How can I get the positioning to be specified from the corner point of the actual page and not the window?
How can I get the positioning to be
specified from the corner point of the
actual page and not the window?
You need to add position: relative to the element you would like the top and left values to be offset from.
That might be your form, or it might be your #container/#wrapper element.
See here for details and a visual: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Looks like you have your answer by now. But ill post this anyways.
A simple and short example which shows how relative positioning to parent is done.
http://jsfiddle.net/EadXw/
If you want it positioned top:0;left:0 on the page, place it immediately after the <body> tag.
If it is wrapped in anything the containers may change it's position. Make sure it is independant and not influenced by any containers.
Sounds like you should read up a bit on the flow of the DOM.
Positioning with CSS and HTML
Make sure your <form> element wraps your whole "page" and that the <div> with the buttons is the first child of <form>.
When you do this you can add the rule position:relative to the form and position:absolute to the <div> and move it around with top and left.
Another option is to have no position rule on the form and have position:relative on the <div>. This is more compatible with iPad and iPhone devices, which don't like absolute positioning. When you go for this approach be sure to have a fixed height for the <div> and a negative margin-bottom of the same size.
I have a CSS tooltip, with CSS3 fade in, with z-indexes set to 999. When I hover over the link, the tooltip itself pushes my other content down, it's meant to be above, not inline, although I've used a span and converted it to block..
Here is an example of what I'm going for, how can I stop it from pushing the content down?
Thanks.
Display:block doesn't take an element out of the page flow, it simply pushes it onto its own new line. Using position:absolute - as recommended by other posters - should work for you. Position:absolute will set a position (such as top:0px; left:20px;) to the browser window overall unless there is a parent with position:relative set (which would then become the point of reference). An example of this second type would be positioning a link exactly 30px from the right within a given content div - regardless of where that div is placed on the page.
Position:relative can be used to position an element relative to its original position in the natural page flow, and it leaves a space where the element would have been. Position:fixed can be used for elements that should not move when the page is scrolled (such as a fixed navigation bar, page branding, or footer). Position:static is the default position setting, and should be used when you need to override another position type.
If you're using a span for the tooltip text within another element - you'll likely want to set the parent element to position:relative, and set the inner span to position:absolute. You'll need to set a top and left value to adjust where exactly your tooltip text falls (ie. above or below the parent element, to the left or the right).
I hope this is helpful.
Absolute position the tooltip (set the container's position to relative and the absolute position will be relative to the container).
Did you make sure the tooltip css position value it absolute? (or at least not static).