CSS Advanced

Advanced CSS - Part #4

0

In this tutorial we're going to talk about the float property. For this tutorial you will need to be familiar with the Basics of CSS and you should be familiar with the Advanced CSS tutorials until this point.

Float Property

The float property allows for an element to be pushed to the left or the right so other elements can wrap around it. Floated elements can only be moves horizontally (left or right). All floated elements will move as far right or as far left as it possibly can; this is dependent upon the nature of the container that the element is in.

Values

  1. left - floats element to the left
  2. right - floats element to the right
  3. none - specifies no floating

Consider the following code:

body {
     margin:auto;
     width:1000px;
     background-color:#4c4c4c;
     font:verdana, "Times New Roman", san-serif;
     font-size:11px;
     color:#fff;
}

#container {
     width:300px;
     background:transparent url('image/img.jpg') repeat-x;
     min-height:125px;
     float:right;
}

We have made the body element have a width of 1000px (the rest of the styles are irrelevant) and then we defined an ID selector that has a width of 300px and a min-height of 125px (it has to be at least 125px tall) and this element will be pushed to the edge of the right side of the container.

Since floated elements allow other elements to wrap around the floated element. All elements before the float property will not be affected, however, all element thereafter the float property will be affected. Consider the following code:

body { /*...*/ }
#container {
     width:300px;
     background:transparent url('image/img.jpg') repeat-x;
     min-height:125px;
     float:right;
}

.float-right {float:right;}
<html>
<body>
<div id="container">
     <p>This element will be on the right edge of the page that is
1000px across.</p>
</div>
<p>This is some text</p>
<img src="image/img.gif" height="100" width="100" alt="img" 
class="float-right" />
<p>This is some text</p>
</body>
</html>

This example would allow for the text to wrap around "img.gif" no matter what size the image is (in the case of the example it is 100px by 100px).

Floating Elements

As we mentioned before, floating an element will push the element to the right or left side of the container if possible. Consider the following code:

.fancy {
     width:500px;
     float:left;
}
<h2>Title here</h2>
<div class="fancy">
<img src="img.gif" height="64" width="64" alt="img" />
<p>Description here</p>
</div>

This will put the image inside of an area of 500 px wide and infinitely tall (depending the amount of content in that class selector).

Clear Property

How do we "turn off" floated elements? The clear property specifies which sides of a floated element you want to keep clear of other floating elements.

Values

  1. left - clears the left side of the element
  2. right - clears the right side of the element
  3. both - clears both the left and right side of the element
  4. none - does not clear either side of the element

Consider the following code:

<html>
<head>
<style type="text/css">
.clearfix {clear:both;}
.fancy {
     width:500px;
     float:left;
     margin:5px;
}
</style>
</head>
<body>
<div class="fancy">
<h2>Fancy Pictures</h2>
<img src="img.gif" height="64" width="64" alt="img" />
<img src="img2.gif" height="64" width="64" alt="img" />
<img src="img3.gif" height="64" width="64" alt="img" />
<img src="img4.gif" height="64" width="64" alt="img" />
<img src="img5.gif" height="64" width="64" alt="img" />
<p class="clearfix">Some explanatory text here</p>
<img src="img6.gif" height="64" width="64" alt="img" />
<img src="img7.gif" height="64" width="64" alt="img" />
</div>
</body>
</html>

In the code above, you would have all of the styles we defined in the fancy class and then a break of text where no floated element is allowed (neither left or right). This will clear a space for the explanatory text where no floated element will exist. This can be useful for adding more titles or text to the "fancy" class we created.

It is recommended that you click on the download button below to see this property and its many values in action!

float.zip
float.zip
Size: 41.47 KB

Advanced CSS - Part #3

0

Today we're going to talk about advanced positioning techniques. This is a widely used property in CSS and it very useful! Positioning allows you to position an element, place one element behind another, and determine what happens when an element is too big.

The position of an element is controlled by top, right, bottom, and left properties. The stacking order of these elements is called the z-index property.

Position

As mentioned above, the position property allows us to specifically position an element on a web page, place one element behind or above another, and to determine what happens when an element is too big.

Properties to Know

  1. position
    • top
    • right
    • bottom
    • left

Note: the top, right, bottom, and left properties will NOT work unless a position property is defined first!

Values

  1. static
  2. fixed
  3. absolute
  4. relative

Static

All elements are positioned static by default. These are positioned by the normal flow of the web page and it is NOT changed by using the top, right, bottom, or left properties.

p.static {
     position:static;
     top:30px; /*This will not work*/
     right:25px; /*This will not work*/
}

Fixed

A fixed position is relative to the browser window. Its place is literally locked in place and if you scroll, the element will remain exactly where it is.

p.fixed {
     position:fixed;
     top:30px;
     right:25px;
}

The above code will place the element 30 px from the top of the browser window and 25 px to the right of the browser window while the position of the element is fixed. This means you can scroll the browser window and the element will literally be fixed on the page (it will not move). No matter where you are on the page, the element will always be visible.

If you use this fixed property, all other elements on the page will not know that it exists. The fixed element is removed from the normal flow of the web page so it does not impact any other elements. This also means that the fixed elements can overlap any other elements on the page.

Relative

A relative positioned element is relative to its "normal position" on the page. The relative positioned elements can be moved to overlap other elements; however, it is different in that the space for the normal flow of the page, is preserved. Even if two elements are over lapping the space for the elements is still preserved.

p.relative {
     position:relative;
     top:-50px;
     right:10px;
}

Note: this will be made clearer via example in a small downloadable zip archive at the end of this tutorial. I strongly recommend downloading this tutorial!!

Absolute

Elements that are absolutely positioned are removed from the normal flow of the web page. Like the fixed value, all other elements on the web page don't know this element exists. This means elements can easily overlap one another.

p.absolute {
     position:absolute;
     top:50px;
     left:350px;
}

This element would be positioned in accordance to the html element of the web page. This would be exactly 50px from the top of the web page and 350px to the left of the web page as well.

If you wish to see these examples in action and read more about this material please click on the download button below.
position.zip
position.zip
Size: 57.02 KB

Advanced CSS - Part #2

2

Today we're going to talk about the display and visibility properties of CSS. This is the second advanced tutorial and is intended for those of us that already understand the Basics of CSS.

Visibility

The Visibility of an element can be adjusted by using this visibility property. Let us say that we want to make a certain element invisible on a web page or that we want a certain to definitely be visible, we would use this visibility property.

Values

We can have three possible values for this visibility property.

  1. hidden - hides the element (these elements still take up space)
  2. visible - makes the element visible (default)
  3. collapse - this removes a table row or table column without affecting the table layout. If this is used on non-table elements they will render as "hidden".

Note: no version of IE 8 or less supports the collapse value for this property. Consider the following code:

.hidden {visibility:hidden;}

This class would make the element "hidden" but the space for it would still exist, but it would show nothing. This might be a little confusing at first, however, it is very easy! This is some visible text that we can see. This is some invisible text that we cannot see but still takes up space inside of the element. This is more text that we will write for the sake of this example. The more and more we write we see that there is this void in this paragraph and it feels as if something is missing, doesn't it? You can actually look in the source code of this page and you will see this:

<span style="visibility:hidden;">This is some invisible text that 
we cannot see but still takes up space inside 
of the element.</span>

This was the code that was actually used to create this effect. We can see that visibility property makes the desired element invisible (hidden) but it still takes up space.

We won't go into great detail about the collapse property and the visible value is default so this is not needed in order for an element to show. For example:

p.fancy {
     color:#ff9300;
     text-decoration:underline;
     font-size:x-small;
     visibility:visible; /*This is default, therefore not needed*/
}

Display

The display property defines how an element is displayed on the web page. The display property is very useful and particularly powerful. If you've ever wondered how to make those fancy top navigation menus like on this blog, we would use a certain value for the display property.

Values

  1. none - hides element completely (no box)
  2. block - creates a box (line breaks above and below)
  3. inline - creates inline element (no line breaks at all)
  4. inline-block - creates block but it is laid out as an inline box
  5. compact - basically this box will nest against another box is there is enough space
  6. inline-table - element will create a box with no breaks before or after the <table>
  7. list-item - creates list (like a ul) in a block but the li are inline elements
  8. run-in - your browser will create a block or inline box depending on how it is used 1
  9. table - this will behave like a table (a CSS alternative to th, td, and tr elements!)
  10. table-caption - behaves like a table caption
  11. table-header-group - behaves like a table header group
  12. table-row - behaves like a table row
  13. table-row-group - behaves like a table row group
  14. table-cell - behaves like a table cell
  15. table-column - behaves like a table column
  16. table-column-group - behaves like table column (like <colgroup>)
  17. table-footer - behaves like a table footer
  18. table-footer-group - behaves like a footer row group

As we can see there are many values we can have for the display property and each does something unique. These will take time to explain so I highly recommend you click on the download button below.
You may also want to check out Quirksmode for a very comprehensive overview of the display property.

display.zip
display.zip
Size: 67.97 KB

1. This is only supported in the latest version of IE and Opera 9.2 and Opera 10. All other browsers don't necessarily support this value. You can read all about the run-in value from W3C if you want to learn more about it.

Advanced CSS - Part #1

0

Now that we have all of the Basics of CSS down pat, we can move onto more advanced methods of writing and implementing style sheets!

Today we're going to talk about grouping and nesting selectors and dimensions.

Grouping and Nesting

You might find yourself with selectors having the same values inside of your internal or external style sheet. Maybe it is about a specific link within a certain area of your web site, heading elements, or just about anything else you would want to group.

Grouping

Grouping allows us to apply multiple properties and values to multiple selectors but in a condensed fashion.

Let us assume we have some code:

h1 {color: #ff9300;}
h3 {color: #ff9300;}
span {color: #ff9300;}
p {color: #ff9300;}

So we have everything within the h1, h3, span, and p elements is the color #ff9300. Since all of these elements have a common property we can group these elements like this:

h1, h3, span, p {color: #ff9300;}

This space saver will have the same effect but on multiple selectors. The single color property will be applied to all of these html elements. Note: grouping elements will apply all properties and values to the grouped elements. Example:

html, body, p, span, a:link, {
     margin: 0;
     padding: 0;
     font:verdana, "Times New Roman", sans serif;
     color: #ff9300;
}

This means margin:0; padding:0; font:verdana, "Times New Roman", sans serif; and color#ff9300; will be applied to all of those selectors.

Nesting

Nesting will allow you to apply styles to a selector within a selector. Consider the following:

#fancy p {
     background-color:#000;
     font-weight:700;
     text-decoration:none;
     color:#ff9300;
}

So we have our ID selector with an extra selector after it. So if we have something with the ID selector such as:

<div id="fancy">
     <p>Some fancy text here</p>
</div>

It is saying everything within the fancy ID that is inside of any p element will have all of those properties and values. We have used this type of nesting in earlier CSS tutorials.

Dimensions

We covered the width and height properties in the box model tutorial. We going to introduce a few new properties that we can use to further control how tall/wide an element is.

The Height property will set the height of the element and the Width property will set the width of the element. Consider the following code:

h2, h3 {
     height:100px;
     width:300px;
}

This will set all h2 and/or h3 elements to w height of 100px by 300px regardless of how much space it is taking up on the page. These two elements will always be this height. What if we wanted those two elements to be within a certain area of space?

Properties

  1. width - defines width (will always be)
  2. height - defines height (will always be)
  3. max-width - defines max width (cannot be bigger than)
  4. min-width - defines min width (will not be smaller than)
  5. max-height - defines max height (cannot be taller than)
  6. min-height - defines min height (will not be shorter than)

The last four properties are new to us. So let us improve on the previous code!

h2, h3 {
     max-height:100px;
     max-width:300px;
}

Given the code above, this will set the h2 and h3 elements to be no larger than 100px by 300px but can also be 0px by 0px if the element is empty (has no content).

Although it seems like this property would be somewhat useless, there has been situation where something a web page wasn't working the way I wanted it to. Perhaps the top navigation menu was wrapping when I resized the browser windows and I wanted the entire page to keep its consistency. I would use a max-width and min-width property to define the space, lo and behold it worked!

For a very comprehensive overview of the above tutorial, please click on the download button below.

advanced-part1.zip
advanced-part1.zip
Size: 66.72 KB
Go to Top