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,161 Responses to “Position”

  1. VSupport technical support

    Position ♥ Design for Information and Interaction on the Internet

  2. vibram five fingers sale uk

    I honestly did not think this situation that way. I feel that there is a point in this. Happy to be able to play a part. Wish you luck.

  3. buy prada online

    Have you ever ever considered including extra movies to your blog posts to keep the readers more entertained? I mean I simply learn by your complete article of yours and it was fairly good but since Im more of a visual learner,I discovered that to be e…

  4. ginekoloski pregled beograd

    Position ♥ Design for Information and Interaction on the Internet

  5. marmot store denver

    This site can be a stroll-by way of for all the info you wanted about this and didn’t know who to ask. Glimpse here, and you’ll definitely uncover it.

  6. balmain dress knock off

    Thank you for the great content. I am glad I have taken the time to see this.

  7. chanel store says:

    chanel store

    I thought it was going to become some boring old publish, however it seriously compensated for my time. Ill post a link to this web page on my blog. Im certain my website visitors will locate that extremely useful.

  8. louis vuitton handbags online

    This is great stuff, its awesome to be in the know.

  9. emporio armani shoes

    Get two plants, and set both of them in two different locations. One plant should be put in a box with a light so it can grow. The other plant should be put in a dark box so it will not grow.

  10. 他媽的 says:

    …Links

    […] What host are you the use of? Can I am getting your associate link for your host? I desire my website loaded up as fast as yours lol[…]

  11. カルティエ 梅田 大丸

    超好評に持った2017ブランドコピー老舗! 2017 新作が満載!皆様を歓迎して当店をご光臨賜ります。 主要取扱商品 :ヴィトン、シャネル、エルメスなどのブランドの美品。 ◆当店の保証: スタイルが多い、品質がよい、価格が低い! 安心、安全にお届けします。 品数豊富、色々な選択があります。 ブランドコピー 代引きの商品が満載! 100%品質保証!到着保障!

Leave a Reply

You must be logged in to post a comment.