CSS Display and Visibility
The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden.
Hiding an Element - display:none or visibility:hidden
Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". However, notice that these two methods produce different results:
visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.
display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as the element is not there:
CSS Display - Block and Inline Elements
A block element is an element that takes up the full width available, and has a line break before and after it.Examples of block elements:
- <h1>
- <p>
- <div>
An inline element only takes up as much width as necessary, and does not force line breaks.Examples of inline elements:
- <span>
- <a>
Changing How an Element is Displayed
Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow web standards.The following example displays list items as inline elements:
li {display:inline;}Note: Changing the display type of an element changes only how the element is displayed, NOT what kind of element it is. For example: An inline element set to display:block is not allowed to have a block element nested inside of it.
CSS Positioning
Positioning
The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big.
Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.
There are four different positioning methods.
Static Positioning
HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.
Static positioned elements are not affected by the top, bottom, left, and right properties.
Fixed Positioning
An element with fixed position is positioned relative to the browser window.
It will not move even if the window is scrolled:
Example
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
Note: Internet Explorer supports the fixed value only if a !DOCTYPE is specified.
Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist.
Fixed positioned elements can overlap other elements.
Relative Positioning
A relative positioned element is positioned relative to its normal position.
Example
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
</style>
</head>
<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_left">This heading is moved left according to its normal position</h2>
<h2 class="pos_right">This heading is moved right according to its normal position</h2>
<p>Relative positioning moves an element RELATIVE to its original position.</p>
<p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p>
<p>The style "left:20px" adds 20 pixels to the element's original left position.</p>
</body>
</html>
The content of a relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.
Example
h2.pos_top
{
position:relative;
top:-50px;
}
The most basic things you can add to an element are margins. These create extra blank space around an element. "Blankspace" generally refers to the area in which other elements cannot also exist and in which the parent element'sbackground is visible.
TIP
In practice, browsers come with pre-assigned styles for many elements, and margins are no exception. Forexample, in CSS-enabled browsers, the "blank line" above and below each paragraph element is generatedusing margins. Therefore, if you don't declare margins for the P element, the browser may apply somemargins on its own -- which is to say that just because you don't declare margins for an element doesn'tmean that there won't be any.
Visual formatting
Only three of these seven properties can be set to auto: the width of the element's content, and the left and rightmargins. The left and right padding and borders must be set to specific values, or else they default to a width of zero(again, assuming no border-style is declared; if one has been set, then the width of the borders is set to be thevaguely defined value medium ). Figure 8-10 provides a handy illustration for remembering which parts of the box cantake a value of auto, and which cannot.
width must be set to either auto or a non-negative value of some type. CSS also allows browsers to set a minimum
value for width, below which a block-level element's width cannot drop. The value of this minimum can vary between
browsers, as it is not defined in the specification.
8.2.2.2. Using auto
If only one of width , margin-left, or margin-right is set to a value of auto, while the others are given
specific values, then the property set to be auto will evaluate to whatever length is required to make the element box's
width equal the parent element's width. Thus, if the sum of the seven properties must equal 400 pixels, and no padding
or borders are set, and the right margin and width are set to 100px while the left margin is set to auto, then the left
margin will be 200 pixels wide:
P {margin-left: auto; margin-right: 100px; width: 100px;}
In a sense, auto can be used to say, "make up the difference between everything else and the required total." However,
what if all three of these properties are set to 100px , and none of them to auto ?
In the case where all three properties are set to something other than auto -- or, to borrow a term from the CSS
specification, when these formatting properties have been over-constrained -- then margin-right is always forced to
be auto. This means that if both margins and the width are set to 100px , then the right margin will be set by the user
agent to auto:
file:///G¦/css/ch08_02.htm (6 of 16) [2/6/2002 10:41:11 ]
Block-Level Elements (Cascading Style Sheets: The Definitive Guide)
P {margin-left: 100px; margin-right: 100px; width: 100px;}
It will then evaluate to 200px
Now let us consider the cases where two of these three properties are set to auto. If both the margins are set to auto,
then they are set to equal lengths, thus centering the element within its parent.
P {width: 100px; margin-left: auto; margin-right: auto;}
This is the correct way to center block-level elements, as a matter of fact. text-align is supposed to apply to only the
inline content of a block-level element, so setting an element to have a text-align of center shouldn't center it.
Instead, you should declare:
P {margin-left: auto; margin-right: auto; width: 50%;}
This will center all paragraphs within their parent elements.
The other possibility is when one of the margins and the width are set to be auto. In this case, then the margin set to be
auto is reduced to zero:
P {width: auto; margin-left: auto; margin-right: 100px;}
The width is then set to the value necessary to reach the required total,
FLOATING
The furthest floating:
The left (or right) outer edge of a floated element must be to the right (or left) of the right (left) outer edge of a leftfloating
(or right-floating) element that occurs earlier in the document's source, unless the top of the latter element is
below the bottom of the former.
This rule prevents floated elements from overwriting each other. If an element is floated to the left, and there is already a
floated element there due to its earlier position in the document source, then the latter element is placed against the outer
right edge of the previously floated element. If, however, a floated element's top is below the bottom of all earlier floated
images, then it can float all the way to the inner left edge of the parent.
The advantage of this rule is that, since you don't have to worry about one floated element obscuring another, you can be
assured that all of your floated content will be visible. This makes floating a fairly safe thing to do. The situation is
markedly different when using positioning, where it is very easy to cause elements to overwrite one another.
3. The right outer edge of a left-floating element may not be to the right of the left outer edge of any right-floating
element to its right. The left outer edge of a right-floating element may not be to the left of the right outer edge of any leftfloating
element to its left.
This rule also prevents floated elements from overlapping each other. Let's say you have a BODY that is 500 pixels wide,
and its sole content is two images that are 300 pixels wide. The first is floated to the left, and the second to the right. This
rule prevents the second image from overlapping the first by 100 pixels. Instead, the second image is forced down until
its top is below the bottom of the left-floated image, as depicted in Figure 8-32.
A floating element must be placed as high as possible.
A left-floating element must be put as far to the left as possible, a right-floating element as far to the right as possible.
A higher position is preferred to one that is further to the right or left.
Negative margins
As was discussed in the previous chapter, negative margins can cause floated elements to move outside of their parent
elements. This seems to be in direct contradiction to the rules explained earlier, but it isn't. In the same way that elements
can appear to be wider than their parents through negative margins, floated elements can appear to protrude out of their
parents.
There is one important question here, which is this: what happens to the document display when an element is floated out
of its parent element by using negative margins? For example, an image could be floated so far up that it intrudes into a
paragraph that has already been displayed by the user agent. In this case, it's up to the user agent to decide whether or not
the document should be reflowed. The CSS specifications explicitly state that user agents are not required to reflow
previous content to accommodate things which happen later in the document. In other words, if an image is floated up
into a previous paragraph, it may simply overwrite whatever was already there. On the other hand, the user agent may
handle the situation by flowing content around the float, even though doing so isn't required behavior. Either way, it's
probably a bad idea to count on a particular behavior, which makes the utility of negative margins on floats somewhat
limited. Hanging floats are probably fairly safe, but attempting to push an element upward on the page is a generally bad idea.