Cascading Style Sheets Tutorial
Lesson 5
This is lesson 5, the final lesson is this tutorial. This lesson covers:
- position
- left
- top
- width
- height
- overflow
- visibility
- clip
- z-index
Absolute Positioning:
position:
H4 { position: absolute; left: 100px; top: 43px }
This section of code tells the browser that the position of any H4 header will be exactly 100 pixels from the left and 43 pixels from the top. One should note, however, that the text will flow normally down the page and to the right of the page. Note that EVERYTHING can be absolutely positioned and the element is positioned independently from every other element on the page. The element doesn't know what else is on the page, but it DOES inherit other properties.
Relative Positioning:
Relative positioning is where one positions an element relative to its original position within the document.
H4 { position: relative; left: 40px; top: 10px }
One should also note that other than absolute and relative, a value of STATIC makes the element act as though it were inside the HTML document without any CSS properties applied.
Controlling Positioned Elements:
width-- controlls how wide the element's box will. Width only works with absolutely positioned elements.
height-- works with the same attributes as width, but in the vertical direction.
overflow-- controlls how data flows when it is too big for the given element box. The possible attributes are:
visible--let it continue as though there was no
hidden-- hides any text that flows over
The MAJOR power of Invisibility:
Using CSS, one can make any element invisible on the page.
H4 { visibility: *** }
*** can be: visible-- makes the element visible, hidden-- makes it invisible, inherit-- element inherits its invisibility from the parent element. Even though the element will be invisible, it will still take up space on the page. Text will appear to wrap around an empty space. NOTE: Not supported by Communicator!
Clip:
Controls which parts of an element are visible and which are not.
H4 { clip: rect(10px 200px 100px 40px)}
This just affects the display of an element, not the space it takes up. Clip only works on absolutely positioned elements. This particular snippit of code makes a clipped region in the shape of a rectangle (which is the only shape supported so far) 10 pixels from the top, 200 right, 100 left, and 40 bottom. Length values and percentages are supported. Use of "auto" does not allow any clipping. Clipping is also very handy with dHTML, which allows the temporary hiding or exposing of elements such as those in a pulldown menu.
Layering Text and Images:
This is the best way to overlap elements. Using a combination of position and ...
z-index:-- when positioning multiple elements and they overlap, use z-index to specify which one should appear on top.
H6 { position: relative; left: 10px; top: 0px; z-index: 10 }
H4 { position: relative; left: 33px; top: -45px; z-index: 1}
Whatever element has the highest value of Z-INDEX is the one on top. Images can also use Z-INDEX NOTE: IE 4 and 5 can be buggy with this element.
Degrade with Dignity!
Use these tricks to make your web pages designed for one browser not look like crap in an older or different version.--
#1-- Use styles on similar tags: say you want to control the level of boldness using "font-weight." Well, why not use the bold tag to apply the style so that the text remains bold in a no-CSS browser.
#2-- Double up styles w/ HTML tags: make things redundant by using both HTML and CSS tags to control elements.
#3-- Make unwanted elements invisible: If you have a really decorative font symbol that looks tiny and silly in other browsers, use "FONT COLOR" to give it the same color as the background, which makes it vanish in order browsers. But, the CSS property will overrule and make the color red or something for those with newer browsers.
END LESSON 5