Expression Web Tutorial A Plac

July 9, 2009

Sorry I am behind a few weeks...ok an entire month!! But here it is, this weeks CSS Tip!

CSS Tip of the Week: How to insert a background slice and repeat it across a div using the
CSS background-image property.

CSS does what HTML alone cannot. One of the things I like best about CSS is inserting background images. We can type text right on top of a CSS background image. Plus, we do not have to write an alt tag (alternate text) for an image inserted with CSS. Why is that, you ask? Well..... an image inserted with CSS is stored on a style sheet (ideally an external style sheet). It is not a part of the HTML. Only images that are inserted into the HTML require an alt tag.

This week we will insert a slice and repeat it across the background of a div. A Slice is a sliver taken from a larger graphic using the Slice Tool in a graphics program.

The slice I have is taken from a graphic with a linear color gradient. (if you have a graphics program you can look up how to make a gradient in the help section. Likewise, look up how to use the slice tool. Or you can watch a video that shows you how to use the slice tool.)

Here are three slices you can practice with:

Right-click on each slice --> and Save the image to your computer.

You will need to place each image inside the Folder List of of your open web site in EW. Do this by clicking and dragging the saved slice and dropping it directly inside the Folder LIst, or from within EW click File --> Choose Import file and then click Add File to locate the slices on your computer.

Let's use the long horizontal slice you see above. This horizontal slice will be placed in the background of a column and repeated vertically along the y-axis. modify style

Assuming you have a layout already made, you will Right-click on the CSS style in the Manage Styles Task Pane (or Panel) that represents the Right Column (or left column) and choose "Modify Style". See the image to the right.
For the sake of this tutorial let's just assume the selector is #right-col.
Once the Style Builder opens, choose the Background Category
Next to the background-image property, Click 'Browse' and locate the slice that you placed in the Folder List.
Choose the slice file and click open.
Now you are back to the Style Builder and still working in the Background Category.
By default, the slice will repeat both horizontally (x) and vertically (y). We only need it to repeat vertically, so choose repeat-y for the background-repeat property. Click 'Apply' to see the repeated slice.
Next, assign a background color that is similar to the color of the background-image (or slice). It's a good idea to always add a color behind a background image in case the image takes a few extra seconds to load into the browser.
Next, we need to discuss the width of the slice versus the width of the right column. The slice from above that we are using in this tutorial is around 220 pixels wide. If your right column is less than 200 pixels, that's ok. We can work with that. But, if the right column was wider than 220px then we have a problem. (note: in reality we plan our layout when we make our graphics so that we do not run into this issue) So we really need to keep the right column at about 200px wide.
When the slice is wider than the column, we have room to spare. We can reposition the slice (image) within the the column by specifying a background position along the x (horizontal) axis and y axis (vertical). For instance, if you do not want the right and left edges of the slice to be visible in the column, set the x position to center and the y position to center. Or you can specify pixel values for the background-image position. My point here is just to encourage you to toy around with yet another css option.

The Style we created would look like this:

#right-col {
background-image: url('right_colslice.jpg');
background-color: blue;
background-repeat: repeat-x;
background-position: center, center;
}

July 2, 2009

CSS Tip of the Week: How to make text wrap (flow) around an image using CSS

To wrap text around the image, we will use the <img> tag to insert the image into the HTML of a web page.
We would not use a CSS background image in this situation. BUT, we will create a CSS Style to Control
the image that we insert.

Summary of Steps to Follow:

Insert text by typing or pasting text inside the page-content div (for instance)
Insert an image
Create a CSS Style using a Class Selector
Apply the Style to the image

A key CSS property that our style must include is the float property. In order to wrap text around an image,
the image must be floated to the right or to the left.

As you likely already know, we can not always place 2 page elements side by side on our pages. But, if we float one of those elements, then we can make them sit side by side (left to right).

For Instance, To achieve the effect you see in Figure 1, we float the image to the left and apply a margin to the image.

Figure 1: Wrapping text Around an image.

Here is another example.

Click on the image to see it larger. ---->

In both situations, the image is floated to the left. But remember,
we can float the image to the right if we want. I guess I just have
a tendency to want to float left!

Ok, so how is it done:
1. After entering your text in the page-content div, for instance, the
next thing to do is place your cursor in front of the very fist letter
of the very first line of text.
2. Click Insert --> Picture --> From File
3. A dialog box opens, this is where you will navigate for your image,
click on it to choose it.
4. Click open.
5. You will be prompted to enter alternate text. This is text that
describes the image, and is necessary for people with screen readers
and for search engines. (neither can read an image)
6. click ok

The image will appear on your page.

By default, the image will place itself off to the left and it will take up the entire horizontal space. In other words, you cannot place another page element to the right of the image. Not yet, anyway. We will fix that shortly.

Next, we need to make a CSS Style Rule:

1. Click "New Style" <-- (watch the videos to learn more)
2. Make a class selector:   .image-style
3. Define in the Existing Style sheet
4. Choose the style sheet next to URL:
5. Do not check the little box
6. Click on the Layout Category
7. Choose "left" for the float property
8. Click on the Box Category to set margins. This is very important!
9. The margins will create some white space between the image and the text that is wrapping around the image:
     Start With the following and tweak it as necessary:
     margin-top: 10px
     margin-bottom: 10px
     margin-right: 20px
     margin-left: 20px

.image-style {
float: left;
margin: 10px 20px 10px 20px;
}

Add Borders to achieve different effects as well. There are quite a few border styles, so try out the inset border, outset border, and all the others just to see how a border alone can change the presentation and 'mood'.

CHECK the different borders in different browsers, like Firefox and IE8. Take notice how each browser displays certain border styles differently.

This is just something you have to practice with. So go ahead and practice. Then modify the margins around the image
in order to achieve the effect you are looking for. And be sure to float an image to the right just for grins and giggles.

REMEMBER: In order to wrap text around an image, that image must be inserted in the html and not as a CSS background.

What other situation can you think of in which using an html image is more appropriate than a css background image?
HINT---> how bout when you want an image to be clickable?

June 5, 2009

CSS TIP OF THE WEEK: Get rid of that ugly outline that shows up around your hyperlinks when they are clicked on.

Every hyperlink creates an outline that only rears its ugly head when someone clicks on a link. Type the following style directly into your style sheet and get rid of this unwanted eyesore.

* {
outline: none;
}

That's all there is to it! The asterisk is how we indicate a Universal Selector. The Universal Selector applies the style to all page elements. This way, we only need to write the one style for the entire web site.

June 11th 2009

CSS TIP OF THE WEEK: How to Avoid Margin Collapse in a CSS Layout

What is margin collapse and what can we do to fix it? Margin collapse is a term used to described gaps that can occur between <div>s that are stacked vertically in the normal flow, such as the header and top nav, or the top nav and the container. I'm sure some of you have seen these gaps in your layouts, especially if you have used the premade layouts in Expression Web.

Note: When I say in the "normal flow", I am referring to static divs that are not floated and are not positioned as absolute. Floated or Absolute divs are removed from the normal flow. Therefore, you will not see margin collapse with floated elements, nor with absolute and relative css positioning.

Likewise, margin collapse only occurs with block level elements such as the div element. In addition, sometimes the margin collapse is not noticeable until you insert headings (in the header or page content) and the unordered list (as in the top nav). See Figure 1 for an example.

Fig. 1

The gap in Figure 1 is located between the header and the top nav. I should also tell you that none of the default margins have been removed. Even if they were, we would still see the gap. But if we also remove the default margins from the heading 1 in the header and the unordered list in the top nav, this would take care of the gap. If a new gap occurs between the top nav and the page content divs, then remove the margins from the h1 in the page content div, in addition to the default margins on the container and page content.

Solution: How do we fix Margin Collapse?

In addition to the vertically stacked divs, these other page elements (h1 and ul) play a role in contributing to margin collapse. The solution, as mentioned above , is to remove the default margins from the divs as well as from the h1 and ul elements.

Another solution is to add a border the header and/or the top nav. For instance, a bottom border for the header and a top border for the top nav would remove the gap and fix margin collapse.

June 18, 2009

CSS Tip of the Week: How to Style the First Line of Every Paragraph With One Style

Recently, I was working on a client's web site and one of the web pages had 10 paragraphs which required the first line to be bold. Instead of highlighting each first line so as to apply a class style called .bold, I decided to try the :first-line selector.

The :first-line Style: Below is the style I created and placed on the internal style sheet of the particular page the style was needed.

p:first-line {
font-weight: bold;
}

The selector, p:first-line, will target the first line of each paragraph. I defined the style in the Current Page, meaning this is an Internal Style and will affect only the current page.

This worked great, except for the two paragraphs that did not require the first line to be bold. So how did I handle this?? Easy! I inserted a line break at the beginning of the two paragraphs so that the first line was left blank, and therefore, the "real" first line of the paragraph did not appear bold in a browser.

Hint: You will not see the :first-line style applied within Expression Web. You have to view it in a browser to see if it has been applied.

You can use :first-line with other Elements, such as <blockquote> <ul> etc. Just Experiment and see what you come up with.

June 25, 2009

CSS Tip of the Week: How to Make a Drop-Cap Using the :first-letter selector

This is similar to the :first-line selector from last week. In this case, we are styling the first letter of an element, for instance, an <h1> heading or a <p>.

Here is one example:

h1:first-letter {
font-size: 50px;
}

This style will cause all h1 headings to have a large first letter. You can even change the font family for this first letter. Just toy with it and see what you come up with.

Expression Web Tutorial

A Place For Beginners

Expression Web Tutorials

Archives: CSS Tips n' Tricks

The Style we created would look like this:

Summary of Steps to Follow:

Solution: How do we fix Margin Collapse?