Position

Border, width, height, z-index, position (absolute only), top, bottom, left, right, and for background see Images. Complete Borders assignment with this new knowledge.

Vanguard of the property parade

Now that you know a few HTML element types, it’s time to start styling them. We have a lot of properties to go through, and for many I will just give the property type and a list of possible values. But here is our adopted property index. Get comfortable with it. A bit confusing at first, but once you’ve consulted it a few times, you’ll know it’s invaluable. The link includes all properties in an overwhelming list. But note the affinity sets near the top, starting with Fonts, Text, and ending with Extensions (which we’ll ignore, by the way). I will often link to subpages within this most appreciated resource.

Ready? Don’t be nervous; I strongly suggest you play with all new properties immediately in a dummy web page. You know how. Here we go…

How to position an element in the window

div.species { position: absolute;
              left: 15%;
              bottom: 0;
              }

Absolute is the only value I’m revealing for the position property at this point. This link won’t work for long, but Will used position for his ❝Hello World!❞: the HTML, the CSS. The other properties here will only work if you explicitly declare the position. So that first declaration is critical here. In general practice, you will use left or right for your x-axis, and top or bottom for your y-axis. Those are properties, and the values are just whatever units of measure you specify. New properties in summary:

  1. position: we will use only absolute for now; without this property, those below will do nothing at all
  2. top: distance from top boundary of browser window
  3. bottom
  4. left
  5. right

Oh, what was that?: ❝What happens if I position one element on top of another?❞ Then you’re dealing with the 3rd dimension, the z-axis. Something has to be on top. By default, the lower in the code an element is, the higher it will be in the z-axis. However, as with almost everything, you can override this.

div.genus   { z-index: 12; }
div.family  { z-index: 6; }

The z-index property accepts any non-negative integer. It’s all relative. You can use however big a value you want. In this example, the “genus” div will overlap, or be on top of, the “family” div, because 12 is bigger than 6. I believe the default for all elements is 1, but it could be 0. If two elements have the same z-index value, then the one later in the code will be on top.

How to size an element

div.order   { width: 80%; height: 48px; }

We are now in the realm of the box model, but we’re only partially covering it here. If you specify a smaller dimension than is needed, that is, if the content of the element in question doesn’t fit in the space you’ve given it, the element will become bigger than you want, as it grows to fit the content. These properties only affect block elements.

How to assign borders to an element

div.class   { border: 1px solid #f00; }

This is the simplest way to specify a border. It’s actually a shorthand property, meant to save you time. As a shorthand property, border takes multiple values in one declaration. They are separated by spaces. Breaking this down into its components, you could get the exact same results with:

div.phylum  { border-width: 1px;
              border-style: solid;
              border-color: #f00;
              }

You can also specify different borders for different edges of an element. You can use shorthand for this:

div.kingdom { border-right: 4px dotted gray; }

The four edges you can append to border- are top, right, bottom, and left. Here is the long version, which just gets unwieldy:

div.domain  { border-right-width: 2px;
              border-right-style: dotted;
              border-right-color: gray;
              }

But, yuck. By the way, border-bottom is a common way to make customizable underlines in CSS. Later on you will find out how to change the default, ugly underline for links and replace with your own special border-based underline.

Border-weight and border-color are straightforward. Following are the possible values for border-style. It all comes from our property index.

  1. solid
  2. dotted
  3. dashed
  4. groove
  5. ridge
  6. inset
  7. outset
  8. double
  9. none

No, you absolutely do not have to memorize those values for any quiz!

Summary of new properties

  1. position
  2. top, right, bottom, left: only work when paired with position
  3. width, height: only work with block elements
  4. border
  5. background: is next
 

7,301 Responses to “Position”

  1. Boliden says:

    … [Trackback]

    […] Read More here|Read More|Read More Infos here|There you will find 47786 more Infos|Infos to that Topic: termsconditions.com/diii/?p=70

Leave a Reply

You must be logged in to post a comment.