Monday, September 28, 2015

In this article, we're going to learn about absolute positioning in CSS.

What is absolute positioning?
Absolute positioning is a CSS layout technique that allows you to move an element to a precise location by supplying values known as offsets.

For example:

Here, I am using absolute positioning to place the paragraph 53 pixels away from the left edge and 107 pixels away from the top edge of the browser's viewport. This was done by adding a left offset of 53 pixels, and a top offset of 107 pixels.

Let's see how this works by creating our own example. Copy the code below and save it as an HTML document.

What we have here is a basic html page that contains a heading, followed by a paragraph, followed by another heading. And if you take a look at the head element, you will see that there is a style sheet that contains a style rule for the h1 element that sets the margins to 0 and the background color to blue.

So if you view the page in the browser, it will look like this:

NOTE: The existing margins that you see are from the default html, body, and paragraph margins. But the h1 elements themselves have 0 margins.

Now let's go ahead and create a style rule for the paragraph so that we can position it absolutely. To do that, we use the CSS position property and give it a value of absolute. Other values are static, fixed, and relative, but we won't talk about those in this lesson.

So go back to the code and add this new style rule:

p {
position: absolute;
}

We've just specified a position of absolute for the paragraph style rule, but we haven't added any offsets yet. The offsets are what will change the element's position. We'll add that later. For now, save the document and refresh your browser.

Now, even though we haven't added any offsets yet, we should see some changes just by adding the position:absolute property. The browser should display something like this:

You'll notice that the 2 headings no longer have any space in between them. This is why I added the background color and removed the margins for the h1 elements. I wanted you to clearly see the effect once position:absolute was added. It may look strange, but this is exactly what's supposed to happen when you apply a position of absolute to an element - the element will be taken out of the document's normal flow. Before we added an absolute position to the paragraph, the normal flow was:

heading

followed by the paragraph

followed by another heading

But now that the paragraph was taken out of the normal flow, the new normal flow is now:

heading

followed by another heading

Basically, an element that's taken out of the normal flow will still be visible, but will be ignored by the other elements that still flow normally. That's why the headings are now adjacent to each other. We still see the paragraph, but the headings that used to surround it are now ignoring the space that the paragraph is supposed to be taking up, because to them, the paragraph is no longer part of the normal flow.

So remember: absolutely positioned elements are taken out of the normal flow.

Now that we've demonstrated that, let's go ahead and remove the heading elements, as well as the h1 style rule. So now, the style sheet should look like this:

<style type="text/css">
p {
position: absolute;
}
</style>

And the body should look like this:

<body>
<p>This is a paragraph.</p>
</body>

And now let's move on to offsets.

Setting the position property to absolute is not quite useful on its own. We'll also need to specify offset values so that we can move the element to a new location. But before we do that, let's set some more properties for the paragraph style:

Here, I've specified a content area of 200px by 200px, a background color of aqua, and 0 margins and padding. I'm adding these because I want the paragraph to visually stand out more in order to better illustrate the paragraph's position.

Now we're ready to add offsets to our absolutely positioned paragraph. We have the option to add a horizontal offset and a vertical offset. To add a horizontal offset, use either the left or the right property. You'll have to choose just one. You cannot use both on the same element. To add a vertical offset, use either the top or bottom property. You can only choose one as well. You can, however, combine a horizontal and vertical offset. So in those cases, the possible combinations are:

top and left

top and right

bottom and left

bottom and right

Go back to the style sheet, and give the paragraph a top offset of 10px and a left offset of 10px:

The effect here is that the left edge of the paragraph will be 10 pixels away from the left edge of the browser's viewport, and the top edge of the paragraph will be 10 pixels away from the top edge of the browser's viewport.

NOTE: The offset takes into account the BOX edge of the absolutely positioned INNER element. In this case, the inner element is the paragraph. But since the paragraph has no margins, padding, and borders, then the CONTENT edge is the same as the box edge (see CSS Box Model for a review on this).

Now what happens if we change the offset properties to bottom and right.

If we do this, then the BOTTOM edge of the paragraph will be 10 pixels away from the BOTTOM edge of the browser's viewport, while the RIGHT edge of the paragraph will be 10 pixels away from the RIGHT edge of the browser's viewport:

This will result in a 20 pixel space in between the top edge of the viewport and the top edge of the paragraph. Same thing goes for the space in between the left edges:

Now keep in mind that the offset for each side is still 10 pixels each, and that the increase in space is simply a result of the added margins.

It's also important to note that in this example, the paragraph is completely ignoring the html and body elements in terms of how it's positioned. What I mean is that if we changed properties such as the width, height, margins, padding, and borders of the html and body elements, they will NOT affect the position of the paragraph whatsoever. Try adding margins and padding to the html and body elements, and you'll see that the paragraph's position will not change:

Preview your webpage after adding these new style rules, and you'll see that the paragraph stays in the same place. Also try adding width, height, and borders. You'll see that the paragraph's position will remain unchanged.

So right now, we see that the paragraph is positioning itself based only on the viewport's edges. None of its other ancestor elements (html and body) are influencing its position whatsoever. The reason for this is because none of the paragraph's ancestors are positioned. In other words, none of them have a position property in their style rules that says absolute, relative or fixed (note that I am intentionally omitting the value of static). And if it is the case that a positioned element has no other positioned ancestors, then the positioned element positions itself based on the viewport.

NOTE: A static position is the default. It is the normal way in which elements are positioned. Saying that an element's position is static is the same as saying that an element is NOT positioned.

So what happens if a positioned element has ancestors that are also positioned? In those cases, the position of the inner element will NOT be based on the viewport. Instead, its position will be based on the positioned ancestor that is NEAREST to it (nearest in the HTML code, not nearest in terms of layout position). And we'll take a look at some examples of that in a future post.

Monday, September 14, 2015

When you're using CSS to specify margin, padding, border, width and height values for your elements, you might run into some issues where the browser doesn't seem to be calculating the values correctly. Sometimes, there might be some actual errors in your code, but in some cases, your code is correct, but the results displayed in the browser are not quite what you expected. For example, you've specified a width of 400 pixels for your paragraph, but when you measured it, it shows a value of 420 pixels instead. Or you're expecting two elements to have a 20 pixel margin space in between them, but the browser only adds 10 pixels.

In cases like these, it's important that you have an understanding of what is called the CSS Box Model.

So what is the CSS box model? First, lets take a look at an example. Here is a very simple HTML code snippet that defines a paragraph:

When displayed in a browser, this paragraph will look something like this:

Now try to imagine that this paragraph is contained inside a box.

This is something that your browser will do for each element in your web page's document tree. It puts each element inside a box, and this box is used to determine how the element is laid out. The size of the box is based on the content of the element, along with any values specified for the width, height, margins, paddings, and borders. It's important to note that even if you don't put any borders, each element is always going to have its own box - it could be a box made up of just the content or a box that includes margins and paddings. But whatever the case, there will always be a box, even if you don't see it.

Now in order to make sure that these boxes are rendered correctly, there needs to be a set of rules that the browser can follow in order to be consistent. And that is why the CSS box model was created. The CSS box model provides a standard model that browsers should follow when generating these boxes that determine how the elements in your document are laid out. It provides a set of rules as to how the elements of your document will interact with each other based on each element's content width, content height, margins, paddings, and borders.

This image illustrates the basic CSS box model:

We see that the box is made up of different areas.

Inside, we have the CONTENT AREA, whose dimensions are made up of the content width and content height. The content area, as the term implies, is the space for the element's content. In paragraphs, for example, the content area is the space for the words in the paragraph. In section elements, the content area would be the space for the headings, paragraphs, and all other elements that can be placed insides sections.

Surrounding the edges of the content area would be the PADDING AREA, which is made up of the top, bottom, left, and right paddings.

Then around the padding area, we have the BORDER AREA, also consisting of top, bottom, left, and right segments.

And finally, the outermost part is the MARGIN AREA, which can also be found on all sides.

It's important to note that the CSS borders do not always show the exact size of the box. As you can see, the margins are OUTSIDE of the borders. And because margins are transparent, the box can appear smaller than it actually is. Unless you have a margin of 0 on all sides, the actual box is always bigger than the area illustrated by the CSS borders.

I'd also like to point out that the CSS specification uses the terms content BOX, padding BOX, border BOX, and margin BOX. But to avoid confusion in this article, I'll be using the word BOX to refer to the ENTIRE box, and AREA to refer to the different parts inside it - content AREA, padding AREA, border AREA, and margin AREA.

Ok, so let's take a look at an actual example. Below is a style rule for paragraphs:

p {
width: 400px;
margin-left: 15px;
margin-right: 25px;
}

So what would be the total width of the paragraph's box? Will it be 400 pixels INCLUDING the left and right margins? Or do we have to add the margin values to the existing width value? These are the types of questions that the CSS box model tries to address.

So what does the CSS box model say? According to the CSS box model, width and height refer only to content width and content height. So while the width of the content width is 400 pixels, the width of the actual BOX will be: 400 (content width) + 15 (left margin) + 25 (right margin) + any default left and right paddings that the browser may have added.

Here, we're using shorthand declarations for the padding and the border. The padding statement means that there is a 10 pixel margin for each side. So when calculating for the width of the box, we take into account 10 pixels for the left padding and another 10 pixels for the right padding. Same thing goes for the border. The border statement applies a 5 pixel thick border for each side, so we take into account 5 pixels for the left border, and another 5 pixels for the right. So to compute for the width of the box:

In this example, we are explicitly setting both a content width (200 pixels) and a content height (50 pixels). Usually, the paragraph's box will just automatically adjust its height to fit the content. But here, we're constraining it to 50 pixels. If the paragraph only has 15 or so medium-length words, then the 200 by 50 pixel content area should be enough. But if we have too much, then the content begins to flow out of the box.

But clearly, the content of the paragraph is too much to fit inside the box, so we see the overflow spill beyond it. To control the overflow, we can use the overflow property in CSS. By default, this has a value of visible, which means that any overflow will be visible. The other values are hidden (which will hide the overflow) and scroll (which hides the overflow, but adds a scroll bar so we can scroll down to see more).

Here, a scrollbar will be added for any overflow that the paragraph might contain. However, scrolling controls for overflow is probably better handled using JavaScript, because current cross-browser CSS support for scrollbars is not very good.

Collapsing Margins

In this next part of the lesson, we'll talk about collapsing margins in the CSS box model. But before I define what collapsing margins are, let's take a look at an example. Say we have 2 paragraphs, each one with a different class:

<p class="p1">Paragraph 1</p>
<p class="p2">Paragraph 2</p>

So Paragraph 1 with a class of p1 comes first, and then Paragraph 2 with a class of p2 is right below it. This means that the bottom margin of the first paragraph comes in contact with the top margin of the second paragraph.

So what happens to the margins? Let's say that in our style rule, we specify these values:

p.p1 {
margin-bottom: 50px;
padding: 0;
}

p.p2 {
margin-top: 25px;
padding: 0;
}

Note that we do not have paddings and borders, so none of those will contribute to the box size. As for the margins, the first paragraph has a bottom margin of 50 pixels, while the second paragraph has a top margin of 25 pixels. Does this mean that this will add up to a 75 pixel vertical margin space in between these 2 paragraphs? According to the CSS box model, the answer is: NO. Instead, the margins will collapse. Collapsing margins refers to the process of combining the margins of 2 different elements into one. In the CSS box model:

it is only the adjoining VERTICAL margins that have a possibility of collapsing, HORIZONTAL margins NEVER collapse

if both values are the same, then the collapsed margins will combine into a single margin of the same value (i.e. we do NOT add the values, two 10 pixel margins that collapse will combine into 10 pixels, not 20)

if both margins are positive and have different values, the collapsed margins will combine into a single margin that uses the size of the LARGER margin

So in this example, the vertical margin space between the 2 paragraphs will be 50 pixels, because that is the larger margin between the 2.

And in cases where negative margin values are involved:

if there is one negative margin, the absolute value of the negative margin is subtracted from the value of the non-negative margin

if there are 2 negative values, the collapsed margins combine into the lower value

Collapsing Margins of Parent and Child Elements

In HTML, many elements can contain other elements. In these instances, the containing element is said to be the parent element, and the element(s) inside it are its children. Let's take a look at this example:

<div>
<p>This is a paragraph inside a div.</p>
</div>

What we have here is a div element, which is a generic container element that can be used to group other elements together, mostly for CSS styling and layout purposes. Inside this div element is a paragraph element. So in this example, the div is the parent element, and the p is the child element.

There will often be instances when the margins of the parent and the child will come in contact with each other. And when that happens, the CSS box model provides rules on how to handle those instances.

First, we see that I have styled the html and the body element to have margins and paddings of 0. The reason is that some browsers might add non-zero values to these properties, and they can interfere with the outcome of this example. So to avoid that, I am resetting their values back to 0.

Now let's look at the div's style. We see that the div has a content area of 200 by 100 pixels. As for the paragraph, we're NOT specifying width and height values. This means that the paragraph will just conform itself to the size of the div. We don't have to worry about any overflow since our paragraph has very few words, and we're not specifying exceedingly large margins, paddings, and borders.

Next, we see that the div has 0 padding on all sides and no borders. However, it does have a 15 pixel margin on each side. Later on, we'll see how its top margin will interact with the top margin of the paragraph inside it.

As for the paragraph, there are also no paddings and borders, but there is a 15 pixel margin on each side.

And lastly, for both elements, I've added background colors to better illustrate how the margins will interact with each other. Remember that an element's background color area includes the paddings, but not the margins (which are transparent).

Let's take a look at this image to better illustrate the box for each of the elements in this example. I'll show them both separately first:

The div is on the left, and the paragraph is on the right. The margins are denoted using the diagonal lines.

Next, let's show the illustration where the paragraph is inside the div. Here, we'll see that their top, left, and right margins come in contact with each other.

So how would the CSS box model treat cases like this? Well, we know that horizontal margins never collapse, so the left and the right margins for both elements will remain. As for both top margins, however, the rule of collapsing adjoining vertical margins will still apply. So the correct behavior would be to collapse both top margins like so:

This is how it would look like in a compliant browser:

Here's what's happening:

The left edge of the div's content area (which is blue) is 15 pixels away from the left edge of the browser's display window.

The left edge of the paragraph's content area (which is aqua) is 15 pixels away from the left edge of the div's content area.

The right edge of the paragraph's content area is 15 pixels away from the right edge of the div's content area (numbers 1 to 3 behave this way, because horizontal margins do not collapse).

The 15 pixel space in between the div's horizontal edges and the paragraph's horizontal edges shows the divs blue background colour. This is because the space is created by the paragraph's margin, and margins are transparent. Therefore, the div's background color will show through.

Because the paragraph's top margin and the div's top margin are touching, they will collapse. The paragraph's top margin will merge into the div's top margin, so there will be no space in between the top edge of the paragraph's content area and the top edge of the div's content are (you will see that the top edge of the paragraph's aqua background aligns itself with the top edge of the div's blue background)

The collapsed margin in number five will be 15 pixels, because both original top margins are 15 pixels. This collapsed margin will create a space in between the top edge of the div's content area and the top edge of the browser's display window.

The CSS box model is not always intuitive, and can often be quite confusing, so take a moment to analyze what you just read, and then let's move on to another example.

Now that you're ready to move on, let's give our previous example a slight modification. What happens if we add a border to the div element?

Now that the div has a border, this means that there is something that separates the div's top margin and the paragraph's top margin. So these margins no longer come in contact with each other. And when vertical margins do NOT touch, then they will also NOT collapse. The thickness of the border does not matter. As long as the parent element has a border of any thickness, then its margins will not touch the margins of its child. So the outcome will now look like this:

So what changed:

The div now has a border.

There is a 15 pixel margin in between the div's border and the top of the browser's display window.

There is now a 15 pixel making in between the top edge of the paragraph's content area, and the top edge of the div's content area.

This new vertical area results in the div's blue background showing through that new 15 pixel space created by the paragraph's uncollapsed top margin.

I'd also like to point out that if you added a top padding to the div instead of a border, you will have the same effect. Adding padding to the div will also serve as a divider between the div's margins and the paragraph's margins. So in that case, the vertical margins will also NOT collapse. The same can be said even if you added a transparent border instead of a colored one.

At this point, I would like to end this article. There are a lot more complex examples that can illustrate how the CSS box model works, but as an introductory lesson, this will suffice. We may come across more examples in future lessons.

The course is designed by software developer, trainer, and writer Simon Allardice. Topics include: Understanding the structure of JavaScript code, Creating variables, functions, and loops, Writing conditional code, Sending messages to the console, Working with different variable types and objects, Creating and changing DOM objects, Event handling, Working with timers, Debugging JavaScript, Building smarter forms, Working with CSS, HTML5, and JavaScript, Using regular expressions. Below is a sample video:

Introduction to JavaScript

Tuesday, July 7, 2015

For the month of July 2015, Lynda.com is offering their HTML Essential Training course for free. In this training course, senior staff author James Williamson, teaches you the fundamentals of HTML so that you can create properly structured web pages. He then moves on to CSS so that students can learn how to format and design websites. And finally, the course ends with a chapter on basic JavaScript so that students can learn how to add some simple interactivity to their projects. Below is a sample video from the course:

BASIC HTML SYNTAX

I always enjoy training courses taught by James Williamson. He's very engaging, easy to understand, and always up to date with the latest developments in web design.

Saturday, September 7, 2013

The Logitech USB To 3.5mm Jack Audio Adapter allows you to connect an analog headset to your computer via the USB port. Some systems, like older Macs don't have an analog mic-in port, so they'll need a USB adapter in order to connect a microphone.

If anyone has any experience using any of these, share your thoughts in the comments.

UPDATE: Found this one also: the Zoom ZH4N Handy Portable Digital Recorder. It's an audio recorder that also works as an audio USB interface. It has it's own mic, plus a few ports (including XLR ones) for external mics. I'm just not sure if, when used as a USB interface, you can only record from the primary mic, or if it lets you record from any external mic directly to your Mac.

Friday, October 26, 2012

Hello, and welcome to my page - Learning Photoshop - Tutorials for Beginners. If you're new to Photoshop, then this is a good place to start. Here, you'll find a collection of the different Photoshop tutorials I've made to help you get started with this amazing piece of software. So let's go ahead and start learning Photoshop!

Topic 1:Using the Brush Tool
In this lesson, we'll learn how to use the Brush tool so you can start creating your own digital paintings in Photoshop.

Topic 2:Working with Layers in Photoshop
Layers are one of Photoshop's most basic yet useful features. They allow you to make your Photoshop project more organized, and make editing much more efficient. Learning how to work with layers is one of the first things that every Photoshop beginner should start with.

Topic 3:The Rectangular and Elliptical Marquee Tools
In this lesson, we'll get introduced to the rectangular and elliptical marquee tools in Photoshop. These are selection tools. They allow you to select portions of your Photoshop document so that you can isolate those areas and edit them - you can paint over them, apply filters, transfer/move/extract those areas, etc. - without affecting the other areas outside of the selection.

Topic 5:Transferring Images to a New Photoshop Document
In this quick video tutorial, I'll show you how to transfer multiple images into one Photoshop document. This is useful if you want to combine different images together in your Photoshop project.

Topic 7:Creating a Layer Mask in Photoshop
Learn how to create a Photoshop layer mask in this video tutorial. Layer masking is a great feature in Photoshop that lets you hide portions of a layer by making them transparent.

Topic 8:Creating a Clipping Mask in Photoshop
Just like layer masks, clipping masks allow you to hide portions of a layer. Watch this video to learn how to create clipping masks in Photoshop.

Topic 9:Color Correction and Photo Retouching in Photoshop
Photoshop has some great tools and features that allow you to color correct and retouch your photographs. You can remove stains and blemishes, adjust brightness and colors, make skin smoother, and more. The videos in this topic will show you just a few of the color correction and photo retouching magic that Photoshop is capable of.

Thank you for visiting this Learning Photoshop - Tutorials for Beginners page. I hope you were able to learn a few things. I will be updating this page whenever I have new tutorials, links, or videos that I would like to share so please check back with us again in the future by visiting this page.

If you know how layer masks work, then you'll understand how clipping masks work as well. Just like a layer mask, a clipping mask allows you to hide portions of a layer. The difference is that a layer mask is a part of the actual layer that you want to mask, while a clipping mask is a separate layer that is used to mask another layer. Another difference is that a layer mask only applies to one layer, while a clipping mask can be used to mask multiple layers.

To learn more about clipping masks, watch this Photoshop clipping mask tutorial:

Categories

At Tutorials 101, we recognize that privacy of your personal information is important. Here is information on what types of personal information we receive and collect when you use and visit Tutorials 101, and how we safeguard your information. We never sell your personal information to third parties.

Log Files
As with most other websites, we collect and use the data contained in log files. The information in the log files include your IP (internet protocol) address, your ISP (internet service provider, such as AOL or Shaw Cable), the browser you used to visit our site (such as Internet Explorer or Firefox), the time you visited our site and which pages you visited throughout our site.

Cookies and Web Beacons
We do use cookies to store information, such as your personal preferences when you visit our site. This could include only showing you a popup once in your visit, or the ability to login to some of our features, such as forums.

We also use third party advertisements on Tutorials 101 to support our site. Some of these advertisers may use technology such as cookies and web beacons when they advertise on our site, which will also send these advertisers (such as Google through the Google AdSense program) information including your IP address, your ISP , the browser you used to visit our site, and in some cases, whether you have Flash installed. This is generally used for geotargeting purposes (showing New York real estate ads to someone in New York, for example) or showing certain ads based on specific sites visited (such as showing cooking ads to someone who frequents cooking sites).

DoubleClick DART cookies
We also may use DART cookies for ad serving through Google’s DoubleClick, which places a cookie on your computer when you are browsing the web and visit a site using DoubleClick advertising (including some Google AdSense advertisements). This cookie is used to serve ads specific to you and your interests ("interest based targeting"). The ads served will be targeted based on your previous browsing history (For example, if you have been viewing sites about visiting Las Vegas, you may see Las Vegas hotel advertisements when viewing a non-related site, such as on a site about hockey). DART uses “non personally identifiable information". It does NOT track personal information about you, such as your name, email address, physical address, telephone number, social security numbers, bank account numbers or credit card numbers. You can opt-out of this ad serving on all sites using this advertising by visiting http://www.doubleclick.com/privacy/dart_adserving.aspx

You can choose to disable or selectively turn off our cookies or third-party cookies in your browser settings, or by managing preferences in programs such as Norton Internet Security. However, this can affect how you are able to interact with our site as well as other websites. This could include the inability to login to services or programs, such as logging into forums or accounts.

Deleting cookies does not mean you are permanently opted out of any advertising program. Unless you have settings that disallow cookies, the next time you visit a site running the advertisements, a new cookie will be added.