Menu
I am doing stuff with ajax progress bars and stuff...
Basically I have a hidden div that says "Loading" in it, and beneath it I have a visible div with my content in.
When it is loading, it fades the content div out, makes the hidden div visible, and moves it via javascript/relative positioning to be in the middle of the content.
It looks quite badass but unfortunately when the div is made visible, even though its relatively positioned, it takes up a line so my content moves down.
Do you know how I can stop it from taking up space when it is made visible?
Edit: Someone removed the tag it seems
The loading div starts off display none, so it takes up no space, and then when it is made visible, it starts taking up space, even though it is positioned relatively.
I could use visible and non-visible, but then it would force my content window down all of the time.
It looks like absolute positioning is the way to go.
What I want to do is combine absolute and relative positioning. I am trying to get the absolute coordinates of the content div and setting its location that way, but without success yet.
Edit: I just re-read your answer and you have done exactly that. Thank you!
860
display:none removes the element from the document. It does not take up any space.
Overflow happens when there is too much content to fit in a box. CSS provides various tools to manage overflow. As you go further with CSS layout and writing CSS, you will encounter more overflow situations.
When you set a particular height and width for a div, it does not matter if it is empty or overflowed, it will only take up the space as given in the code. Example: In the following code, the empty space is achieved by giving a height of 200px and a width of 400px.
To disable focus on a specific element, set the tabIndex property on the element to a value of -1 . The tabIndex property can be used to specify that an element cannot be focused using keyboard navigation.
"Do you know how I can stop it from taking up space when it is made visible?"
Position it absolutely.
div#theParent { position:relative; height:200px; width:640px; top:50px; left:50px; } div#theChild { position:absolute; height:100px; width:400px; top:50px; left:120px; } <div id="theParent"> <div id="theChild"> <p>This div is absolutely positioned to a relatively-positioned parent.</p> </div> </div> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
