HTML Magic Edges - Operation
(Page 3 of 4 )
The inner DIV element is made to move relative to the outer DIV element. The inner DIV element is given the value of "relative" for its position property. Its position is relative to the outer DIV element. To make it move, we change this relative position continuously. That is, we change the left or top CSS value continuously.
The background-color of the outer DIV element is transparent. This means you can see through it. In other words, through it you see the body element. This outer DIV element is given fixed dimensions (fixed width and height). Most importantly, it is given the value "hidden" for its overflow property. When any containing element is given that value for its overflow property, then, for any internal element that overlaps the edges of the containing element, the overlapped portion is not seen by the user (it is cut off).
Under this condition, if you now make the inner DIV element move, it will appear as if the inner DIV element is coming from an edge of the containing element and/or entering an edge of the containing element. So, if you want an element to come out of the edge of the web page, have two elements as described above. Align an edge of the outer element to the edge of the web page. Do not give the outer element (DIV) a border. Make the inner element move away from the edge of the outer element that is aligned to the edge of the web page. The inner element will appear to come out of the edge of the web page. To make the inner element appear to enter the edge, just do the reverse.
We shall use the two DIV elements above with their contents for illustration in this part of the series. We shall still use the same elements, with some modification, in the next part of the series.
The Style Sheet
Let us talk about the style sheet for the two DIV elements. The inner DIV element has the ID "Calc." The value for its position property is relative. Its width is 205px and its height is 196px. Its background-color is brown. It is given a border of 2px. For simplicity, it is given a padding value of 0px and margin value of 0px.
The outer DIV element has an ID of "Cont." It has a width of 200px; this is 4px greater than that of the inner DIV element. It has a height of 209px; this is 4px greater than that of the inner DIV element. With this 4px increase, the inner DIV element should just fit into the outer DIV element.
The value of the overflow property of the outer DIV element is hidden (this is very important). Its background color is transparent. Its border is 2px and blue. For simplicity, it is given a padding value of 0px and a margin value of 0px.
Other elements on the page have CSS statements but are not vital to the understanding of this article series.
Next: Scrolling From Left >>
More HTML Articles
More By Chrysanthus Forcha
