Web Design & Development Tips

Aligning Inline Elements Vertically

Monica — Mon, 30 Nov 2009 15:00:52 +0000

The vertical-align property is meant for aligning inline elements to a common element on the same line. For example, you might want to align text to the top, middle, baseline, or bottom of larger text or image on the same line.

These are the valid property-value pairs:

vertical-align:top — Align to the top of the line. If the height of the line is taller than the common element, this location is higher than vertical-align:text-top. If the line height is the same, top and text-top are the same location.

vertical-align:text-top — Align to the top of text characters with accents such as á and Á. This location is the same whether the characters actually have accents or not.

vertical-align:middle — Align to the middle of the letter x.

vertical-align:baseline — Align to the baseline, which is the bottom of characters that do not have descenders such as the letter A.

vertical-align:bottom – Align to the bottom of the line. If the height of the line is lower than the common element, this location is lower than vertical-align:text-bottom. If the line height is the same, top and text-bottom are the same location.

vertical-align:text-bottom — Align to the bottom of the text, which includes the bottom of characters that have descenders such the letter g. This location is the same whether the characters actually have descenders or not.

Example 1

This example aligns text to the text-top, middle, baseline, and text-bottom of the common element, which is a graphic followed by large text in white with a blue background. Characters with accents and descenders are used so you can see how they align. Example 2 shows how they align with top and bottom are used in place of text-top and text-bottom.

CSS

Note that the line height (80px) t is taller than the common element (60px) , and in this e

div{border: 1px solid #00008b; font-size:60px;}
*.main{background-color: #00008b; color:#ffffff; line-height:80px;}
*.text{font-size:18px;}
*.top{vertical-align:text-top;}
*.middle{vertical-align:middle;}
*.baseline{vertical-align:baseline;}
*.bottom{vertical-align:text-bottom;}

HTML




ÁáxXg
áÁ
Top
Middle
Baseline
Bottom

Example 2

This example aligns text to the middle and baseline of the common element, which is a graphic followed by large text in white with a blue background. It also uses top and bottom to align the text to the top and bottom on the line, which is taller and lower than the common element. Characters with accents and descenders are used so you can see how they align. Notice that aligning to top and bottom align higher and lower, respectively, than text-top and text-bottom in Example 1.

CSS

div{border: 1px solid #00008b; font-size:60px;}
*.main{background-color: #00008b; color:#ffffff; line-height:80px;}
*.text{font-size:18px;}
*.top{vertical-align:top;}
*.middle{vertical-align:middle;}
*.baseline{vertical-align:baseline;}
*.bottom{vertical-align:bottom;}

HTML




ÁáxXg
áÁ
Top
Middle
Baseline
Bottom

Source Code


Vertical Centering







ÁáxXg
áÁ
Top
Middle
Baseline
Bottom

Indenting Text

Monica — Mon, 23 Nov 2009 07:00:10 +0000

The text-indent property provides an easy way to indent or outdent the first line of a paragraph, table cell, division, heading, or list item. Combining text-indent and a negative value with left padding creates an outdent.

CSS

/* indents first line */
*.indent{text-indent:60px;} 

/* indents entire paragraph on the left and right */
*.fullparaindent{padding-left:60px; padding-right:60px;}

/* outdents first line */
*.outdent{text-indent:-60px;}

HTML

The word cryptography comes from the Greek words kryptos meaning hidden and graphein meaning writing. Cryptography is the study of hidden writing, or the science of encrypting and decrypting text.

Nineteenth century scholars decrypted ancient Egyptian hieroglyphics when Napoleon’s soldiers found the Rosetta Stone in 1799 near Rosetta, Egypt. Its inscription praising King Ptolemy V was in three ancient languages: Demotic, hieroglyphics, and Greek. The scholars who could read ancient Greek, decrypted the other languages by translating the Greek and comparing the three inscriptions.

In the twentieth century world of computer networks, messages are digitally encrypted on the sending side and decrypted on the receiving side using cryptographic services and algorithms. Algorithms are mathematical techniques or rules that apply a cryptographic service to a message. Cryptographic services include hashing a message, encrypting and decrypting a message, and signing or verifying the signature on a message. A message digest object uses a hashing algorithm to make a hash digest of the original message, key pairs use a key algorithm compatible with the hashing algorithm to encrypt and decrypt the message, and a signature object uses the key pairs to sign and verify the signature on a message.

What it Looks Like

Adding a Spacer

If you want to add a space within inline content, you can do that with a spacer:

CSS

*.spacer{margin-left:10px;}

HTML

→ The Java Cryptography Architecture (JCA) framework in the Java Development Kit (JDK) 1.2 provides a full range of cryptographic services and algorithms to keep messages sent over the network secure. → The framework is extensible and interoperable. → Not only can you add cryptographic service implementations by different vendors to the framework, but, for example, the signature service implementation by one vendor will work seamlessly with the signature service implementation by another vendor as long as both vendors’ implementations use the same signature algorithm. → Given how implementations can vary from vendor to vendor, the flexibility built into the JCA framework lets you choose an implementation that best meets your application requirements.

What it Looks Like

Code

Text Indent

The word cryptography comes from the Greek words kryptos meaning hidden and graphein meaning writing. Cryptography is the study of hidden writing, or the science of encrypting and decrypting text.

Read the full article, monica /articles/crypto/”>Cryptography: The Ancient Art of Secret Messages

Read the full article, Cryptography: The Ancient Art of Secret Messages

Vertical Centering

Monica — Wed, 18 Nov 2009 07:00:12 +0000

It’s possible, although a little tricky, to center text or an image along the vertical axis of the page or within a box. Centering text and images horizontally is easily done with the text-align:center setting, which is used in the examples below for that exact purpose. The discussion focuses on achieving the vertical centering.

On the Page

Centering something on the page uses absolute positioning so you can set values for the parent in relation to the top and left sides of the viewport.

Vertically Centered Text

In this example text is vertically centered on the page inside an absolutely positioned box.

CSS

The text is moved to the middle of the page vertically by setting top:50%, and is moved to the center of the page by setting width:100% and text-align:center. I included the box border so it is easier to see what is happening on the page.

body{font-size:14px;}
*.box{position:absolute; width:100%; border: 1px solid #8b0000;
  top:50%; left:0; text-align:center;}

HTML

The box and positioning settings are applied to the parent div of the text to get the vertical centering.

Vertically Centered Text

What it Looks Like

Vertically Centered Image

An image is done the same way as the text, except that instead of text, you provide an image.

CSS

body{font-size:14px;}
*.box{position:absolute; width:100%;
  border: 1px solid #8b0000;
  top:50%; left:0; right:0; text-align:center;}

HTML

What it Looks Like

Within a Box

Centering something within a box on the page involves a fixed height and width and some calculations to work out the top margin setting to push the text or image down far enough so it is centered vertically.

Vertically Centered Text

To vertically center text within a box requires font-size, box height, box width, and margin-top settings preferably in the same units so you can make calculations to figure out how far down you need to push the text from the top of the box. I used pixels for the example.

The box has a border so you can see how the text centers within it. You can use this method to create buttons, boxes, divisions, and so on.

CSS

The text is nested within a fixed height and width box. The textbox is set to 100% height and width of it’s parent. The margin-top value is calculated for the textbox by halving the fixed height of the parent (200px/2px = 100px) and subtracting half the height of the font-size (100px – 7px = 93 px), and subtracting the border width (93px – 1 px = 92px).

Note: Both box2 and textbox must use absolute positioning to work in Internet Explorer.

body{font-size:14px;}
*.box2{position:absolute; height:200px; width:200px; border:1px solid #8b0000;}
*.textbox{position:absolute; text-align:center;  margin-top:92px;
  height:100%; width:100%;}

HTML

The textbox is nested within the fixed height and width parent box. The margin-top setting of the textbox centers it vertically within its parent box.


Vertically Centered Box Text

What it Looks Like

Vertically Centered Image

An image is done the same way as the text, except that instead of text, you provide an image and the margin-top calculation does not take the border into account because the image sits inside the border.

CSS

The margin-top value is half the parent height (200px/2px = 100px) minus half the height of the image (100px – 19px = 81px).

Note: Both box2 and textbox must use absolute positioning to work in Internet Explorer.

body{font-size:14px;}
*.box2{position:absolute; height:200px; width:200px; border:1px solid #8b0000;}
*.imagebox{position:absolute; text-align:center;  margin-top:81px;
  height:100%; width:100%;}

HTML

What it Looks Like

Code

Source Code


Vertical Centering





Vertically Centered Text
 




Vertically Centered Box Text

Centering

Monica — Tue, 03 Nov 2009 07:00:37 +0000

Have you ever struggled with centering text, elements, or both? It can be a little tricky, but knowing a few basics can help you get the page to look exactly the way you want it to look. This blog explains how.

Centered Body Page Text

If you want all text on the page centered, add text-align:center to the body style.

CSS

The following page body styles centers white text within the left and right margins. The left margin is 100px and the right margin is auto by default because it is not specified.

body{color:#ffffff; font-family:arial; background-color:#969696;
     margin-left:100px; text-align:center;}

HTML

This is what the HTML looks like:

Centering

The pullover and cardigan sweater instructions assume you have an intermediate knowledge of crochet or knitting. This means you know how to work to gauge, increase, decrease, match pieces, and sew pieces together. If you have this background, it is not difficult to design your own pullover sweater to fit the way you want. You will need an old sweater that fits you the way you want, a stitch you like, yarn you like that works with the stitch, and a little know-how.

And it renders like this with headings and text centered within the page margins:

Centered Element Text

You can also use the text-align:center style to center text within a specific element, rather than the whole page.

CSS

The following style settings move the text-align:center style from the body tag to it’s own textbox style. The body page has a left and right margin of 10 pixels in this example.

body{color:#ffffff; font-family:arial; background-color:#969696;
     margin:10px; }
*.textbox{text-align:center;}

HTML

This is what the HTML looks like:

Centering

And it renders like this with a left-aligned heading and text centered within the text box. The text box does not have left and right margin settings so it stretches the width of the page, but sits within the page left and right margins of 10 pixels.

Centered Elements

You can size and center an element on the body page or within another element. There are two basic approaches to centering any element:

1. Specify the width and let the browser calculate the left and right margins:

*.center{border: 1px solid #000000;
  padding:3px; text-align:center;
  width: 200px; margin-left:auto; margin-right:auto;}

2. Specify the margins and let the browser calculate the width:

*.center1{border: 1px solid #000000;
  padding:3px;  text-align:center;
  width: auto; margin-left:100px; margin-right:100px;}

You can center an element within another element. This examples horizontally centers text within a textbox that is horizontally centered within a parent box that is horizontally centered on the page.

CSS

*.center{border: 1px solid #00008b; padding:30px; height:auto; width:50%;
 margin-left:auto; margin-right:auto;}

*.textbox{border: 1px solid #000000; padding:3px;
 height:auto; width:auto; text-align:center;}

HTML

And it looks like this:

If you change the parent box to use absolute or fixed positioning, you can use left, right, top, and/or bottom to position it against the respective border of the view port if you used fixed positioning or of its parent if you used absolute positioning.

CSS

In this example, the parent uses fixed positioning with the bottom:0 property so the concentric elements and text sit on the bottom border of the view port. You can read about positioned elements by browsing the Positioning Elements category of this blog.

*.center{position:fixed; bottom:0; left:0; border: 1px solid #00008b; padding:30px; height:auto; width:50%;
 margin-left:auto; margin-right:auto;}

*.textbox{border: 1px solid #000000; padding:3px;
 height:auto; width:auto; text-align:center;}

HTML

And it looks like this:

Styling Background Images

Monica — Wed, 21 Oct 2009 07:00:34 +0000

Background images are positioned behind elements with the background property. The background property has the following style values that can be specified in one line and in any order like this:

*.image{background:none transparent repeat left top scroll;}

or with property-value pairs in any order, like this:

*.image{background-image:none; background-color:transparent;
background-repeat:repeat; background-position:left top;
background-attachment:scroll;}

Default Settings

The background values all have default settings as described here and covered in more detail below.

none: no image
transparent: no background color
repeat: the background image tiles in the x and y directions
left top: the tiling starts in the top-left corner and goes from left to right one row at a time
scroll: the image scrolls with the element when the viewport has scroll bars.

Background Image

The default is no background image. A background image is specified with a URL as follows:

*.image{background-image:url("theimage.extension");}

CSS

These CSS style declarations create a containing block for an image that tiles the full height and width of the block.

div{height:100%; width:100%;}
*.image{background-image:url("kangarooflowerthumb.gif");}

HTML

How it Looks

This screen capture shows a portion of the page. In reality, the CSS settings have the background image tiling the entire height and width of the page because the height and width of the div are both set to 100%.

Background Color

It’s always a good idea to specify a background color in case the image does not load. The background color should work with the text color so you do not end up with a very-hard-to-read page with something like a very light blue text against a white background. You can also use a background color in place of a background image or to complement the background image. In any case, always keep in mind how the page will look if the image does not load for some reason or another.

This example shows white text against a medium gray background color. I’ll add the image in the next section, but you can see that if the image does not load the text is perfectly readable against the background color.

CSS

Text color is white (#ffffff) and page background color is medium gray (#969696).

body{color:#ffffff; font-family:arial; background-color:#969696;
     margin:0;}
div{height:100%; width:100%; padding:10px;}
*.text{width:80%;}

HTML

Red and green kangaroo paws are native to Perth, Western Australia, where the weather tends to be warm all year round. I remember the first time I saw them. It must have been exactly the right time of year because hundreds were blooming in a Eucalyptus grove in the middle of Kings Park. Their soft, velvety red and green “fur” fascinated me, and when I moved back to the United States and eventually bought a house, I wanted to try to grow them. San Jose, California, has an extreme climate, but I have succeeded in growing them outside in pots placed in a protected area.

How it Looks

Position & Repeat Along Y-Axis

In this section, I’ll add the background image, make it repeat vertically along the y-axis, and position it to the right of the text.

CSS

The repeat-y value tells the browser to repeat the image in a column along the y-axis. The positioning values of top right mean the image rendering starts with the top-right corner of the image flush with the top-right corner of the viewport and repeats down along the y-axis.

body{color:#ffffff; font-family:arial; background-color:#969696;
     margin:0;}
*.art{background-image: url("kangarooflowerthumb.gif");}
*.repeat{background-repeat:repeat-y;}
*.position{background-position:top right;}
div{height:100%; width:100%; padding:10px;}
*.text{width:80%;}

HTML

How it Looks

Attachment

The default value for attachment is scroll, which means the image scrolls with its containing block. That means, if you resize the page so that you get scroll bars along the bottom or the side and scroll, the image and text scroll together. If you change the value to fixed (background-attachment:fixed), the image is attached to the viewport. This means that if you resize the page so that you get scroll bars, the text scrolls over the image.

CSS

body{color:#ffffff; font-family:arial; background-color:#969696;
     margin:0;}
*.art{background-image: url("kangarooflowerthumb.gif");}
*.repeat{background-repeat:repeat-y;}
*.position{background-position:top right; }
*.attach{background-attachment:fixed;}
div{height:100%; width:100%; padding:10px;}
*.text{width:80%;}

HTML

How it Looks

Final Code

See my web site for more information on Kangaroo Paws.

Using Background Images

Styling Attributes

Monica — Thu, 08 Oct 2009 07:00:50 +0000

Have you ever wanted to style a specific attribute? For example, you could make all tables using the border attribute have a border with a given color. This way, each table could have a different border width, but the border would be the same color. Or you could do something like make every image with a title attribute have the same margin and padding settings.

This blog explains two ways to style attributes.

Example 1

This example shows how you could give a number of tables with borders of different widths the same color border with one line of CSS.

CSS

The first line uses square brackets around the border attribute on a table to specify a green border and a light gray background. The next two lines specify styles that apply to all table and table column (td) elements.

table[border] {border-color:#008b00; background-color:#cccccc;}
table{width:30%; height:15%;}
td{text-align:center;}

Table Code

This is what the table code looks like.

Table 1 has a 2px border plus all the table styles specified in the CSS. Because table as the border attribute, the border and background color settings are applied to the table.


Head 1 Head 2
Row 1 Col 1 Row 2 Col 2

Head 1	Head 2
Row 1 Col 1	Row 2 Col 2

Table 2 has a 4px border plus all the table styles specified in the CSS including the border attribute styles:


Head 1 Head 2
Row 1 Col 1 Row 2 Col 2

Head 1	Head 2
Row 1 Col 1	Row 2 Col 2

What it Looks Like

You get two tables with the same style settings that allows for the border width to be set directly on the table, and thereby specific to each table, but styled consistently with one line of CSS.

Example 2

Maybe you have a lot of tables with 2px and 4px borders and you want to style all the 2px borders one way and all the 4px borders another. You can do that by using the syntax that lets you select on a specific word.

This example shows you how to make all 2px borders green with a light gray background and all 4px borders red with a light gray background.

CSS

The first two lines use square brackets around the border attribute on a table to specify the border background colors. They also include the tilde-equals (~=) syntax to say that every border attribute that includes the word, 2px, has the specified set of styles and every border attribute that includes the word, 4px, has a different set of styles.

table[border~="2px"] {border-color:#008b00; background-color:#cccccc;}
table[border~="4px"] {border-color:#8b0000; background-color:#cccccc;}
table{width:30%; height:15%;}
td{text-align:center;}

Table Code

Same as before:


Head 1 Head 2
Row 1 Col 1 Row 2 Col 2



Head 1 Head 2
Row 1 Col 1 Row 2 Col 2

Head 1	Head 2
Row 1 Col 1	Row 2 Col 2

Head 1	Head 2
Row 1 Col 1	Row 2 Col 2

What it Looks Like

The 2px table border is green and the 4px table border is red.

CSS Selectors & Elements

Monica — Thu, 01 Oct 2009 07:00:49 +0000

This blogs explains how to use type, class, and ID to style elements within a document. It also explains how you can select elements according to whether they are descendants, children, or siblings of other elements.

Type

The type is the element itself, such as p or h1. For example, the below CSS declarations states that all elements of type p are indented on the left by 15px and all elements of type h1 are blue.

p{margin-left:15px;
h1{color:#00008b;}

This paragraph is idented by 15px on the left.

This heading is Blue

Class

A class is a CSS style description of a group of elements that might be the same kind or of mixed kinds. For example, the below CSS declaration states that all paragraph elements of in the class green have green text and any element assigned to the class centered has centered text.

p.green{color:#009900;}
*.centered{text-align:center;}


This paragraph has green text

This paragraph has centered text.

This paragraph has green centered text.

ID

An ID uniquely identifies an element. An ID is assigned to one element only, and any element should have zero or one ID, but not two or more IDs. An ID can also be used as an anchor that can be targeted by other links or used to access and manipulate a specific element from JavaScript or a document processor.

#.abstract{margin-left:10px; margin-right:10px;}

This paragraph is identified as the abstract for the document. A JavaScript program can locate it and do something like add this paragraph to a list of abstracts for a series of documents. The paragraph is indented 10px on the left and right.

Cascade Order

When multiple selectors select the same element, the styles from each selector are applied. In the case where the styles conflict, the higher cascade order prevails. IDs prevail over classes and classes prevail over types. If you use multiple style sheets in one document, ID selectors prevail over all classes and types in all style sheets.

*.bluetext{color:#000099;}
#.abstract{margin-left:10px; margin-right:10px; color:#990000;}

In this case the paragraph has both an ID and a class and each specifies a setting for the text color. Class says the color is blue and ID says the color is red. The color specified by the ID takes precedence because it has a higher cascade order.

*.bluetext{color:#000099;}
*.abstract{margin-left:10px; margin-right:10px; color:#990000;}

In this case both abstract and bluetext are classes and have equal cascade order. The text is red because abstract is listed after bluetext in the styles.

Group Selectors

You can apply the same styles to a group of selectors by separating the selectors with a comma. In this example all p, ol, and ul elements use the Arial font.

p, ol, ul, li{font-family:arial;}

Position Selectors

You can apply styles according to whether an element is a descendant, child, or sibling of another element.

Descendant

A descendant can be a child, grandchild, great-grandchild, etc. The following CSS declaration says make all descendants of div that are in the bluetext class, blue.

div *.bluetext{color:#000099;}

In this case the p element is assigned to the class
bluetext, but the text is black, not blue. This is because bluetext has to be assigned
to an element that is a descendent of div.

The text is now blue because element p is in the blue
text class *and* a descendant of div.

Child

To select the direct child only — no grandchildren or any of their descendants — use the greater-than sign. A child element is the immediate or direct descendant of another element. For example, all

elements in an unordered list are children of the

elements are not children of the
- element.
  
  This CSS style declaration says make all hyperllnks that are children of li red with no text decoration:
```
li > a{tect-decoration:none; color:red;}
```
  Note: this does not work in Internet Explorer.
  
  Using the above CSS style, this XHTML:
```
  Item 1
  Item 2
  Item 3
```
  Looks like this:
  - Item 1
  - Item 2
  - Item 3
  First Child
  
  If you want to select and style only the first child and none of its siblings, append first-child to the element like this:
```
li:first-child > a{text-decoration:none; color:red;}
```
  Note: this does not work in Internet Explorer.
  
  Using the above CSS style declaration, this code:
```
  Item 1
  Item 2
  Item 3
```
  looks like this where only the first list item is red with no text decoration:
  - Item 1
  - Item 2
  - Item 3
  Sibling
  
  Siblings are elements that are right next to each other. They are also called adjacent elements. For example, paragraphs typically follow (are sibllings to) headings and bulleted or ordered lists typically follow (are siblings to) paragraphs. So, this CSS style declaration says that any p element that immediately follows an h2 element is blue:
```
h2 + p{color:#00008b;}
```
  Note: this does not work in Internet Explorer.
  
  Using the above CSS style declaration, this code:
```
Styling Siblings
This paragraph is blue because it immediately follows an h2.
```
  Looks like this:
  
  Styling Siblings
  
  This paragraph is blue because it immediately follows an h2.

Search Engine Optimization (SEO)

Monica — Mon, 21 Sep 2009 07:00:25 +0000

Search Engine Optimization (SEO) means building web pages that are readily found by search engines and listed at or near the top of the search results page. Being found by search engines translates to more visits to your site, and if you have an e-commerce site, it translates to more sales, better viral marketing, and more cross-linking from your fans, which leads to higher search rankings, more sales, and on it goes.

There are a number of search engines in common use and few major ones. Not all search engines work alike, but if you learn the best practices described below, the major search engines and many of the smaller ones will readily find and list your pages.

Some articles on SEO list as many as 30 ways to optimize your pages for search. But many of those ways do not carry much weight with the search engines. They might have some influence, but if you focus on the somewhat fewer easy-to-remember suggestions presented here, you will get excellent results.

Keywords

When setting a site up for search engine optimization, it pays to think in terms of keywords. Adept handling of keywords as described below helps search engines find and highly rank the pages. You need to think about what keywords best describe your site and handle them as follows:

Data within the Head Tag

Your HTML pages should all have tags at the top because within the head tag is the </span> tag, which is the single most important data you can provide to the search engines. To boost rankings, the most important keyword should be the first word in the title tag.</p> <p>It’s also a good idea to include the description meta tag within the head tag. It does not influence the search ranking, but many search engines use the description text in the search results page, and providing descriptive text encourages people to choose the link to your site — sometimes over an above pages ranked higher than yours.</p> <h3>Header Tag</h3> <p><html><br /> <head><br /> <title>Monica’s Site – Home

xxxxx

Search Results

Here is how the above comes up on google if you search on Monica Pawlan:

____________________________________________________

Monica’s Site – Home

Personal site with info on professional skills and personal interests.
www.pawlan.com/monica/ – Cached – Similar –

____________________________________________________

URL Constructions

Short, easy-to-remember and spell URLs make communications easier and they also help search rankings. You want to organize your site so that important keywords appear close to the domain name. For example, http://www.pawlan.com/monica puts my sub-site close to pawlan.com. Other areas such as articles or books come next (http://pawlan.com/monica/books) making the URLs easy to remember, spell, and friendly to search engines — as opposed to something like http://pawlan.com/subdomains/monica/itemsofinterest/books.

If you want to separate words for readability, hyphens rank higher than underscores, so separate words with hyphens like this:

http://pawlan.com/sub-domains/monica/items-of-interest/books.

Body Content

The following hints for composing the body content will help boost your search engine ranking:

Repeat your keywords on the page as much as good writing style allows.
Make sure the keywords appear near the top of the page.
Give your graphics alt tags that employ important keywords. Not only are alt tags important for accessibility, but they boost search rankings.
Carefully name image files and other download files to include important keywords.

Intra-Site Linking

The following hints for links will help boost your search engine ranking:

Cross-link within the site
Put important links within the body of the page in addition to in the site navigation
Make sure important links have keywords and are closer to the top of the site

Other Factors

A well-designed, organized, and visually pleasing site with excellent content and targeted marketing encourages visitors, which results in cross-linking from across the web. Such cross-linking not only boosts traffic and search ranking, but combined with all the factors described here will give you a very successful web site. It’s definitely worth your time to optimize your site for search and market it well!

I hope you found this post useful.

Drop Caps: Floating & Marginal

Monica — Fri, 11 Sep 2009 16:12:43 +0000

Floating drop caps are created with a relatively positioned left float. You place the relative float on the first letter of the first paragraph as an inline element like this: F so the drop <

You can use margin-left and margin-right settings to adjust the placement of the drop cap horizontally and the top setting to adjust the placement of the drop cap vertically. The values you use for these settings depend on the font-size and font-weight and the overall look you want to achieve. These are the settings used to get the look for the drop cap at the beginning of the paragraph above:

*.floatdcap{float:left; position:relative; top: -7px;
  margin-left:-3px; margin-right:3px; margin-bottom:-6px;
  font-size:40pt; font-weight:bold; color:#00008b;}

To help you understand how the settings work together, this is how the drop cap looks with a border applied to the paragraph so you can see how it sits inside its parent paragraph with no top or margin settings.

Note that I did this on Mozilla Firefox, v 2.0.0.20 on a SunRay running Solaris 10 and did not test it for other browsers and hw/sw platforms. You might need to adjust the settings shown here to accommodate other platforms.

This is how the drop cap looks with left and right margin settings applied:

And here it is with the top setting applied:

The margin-bottom setting determines how the paragraph text flows to the left below the drop cap. This is how it looks with margin-bottom:-6px followed by how it looks with margin-bottom:6px.

Minus 6 Bottom Margin

Plus 6 Bottom Margin

Styled Float

This drop cap adds styling to the hanging indent so the drop cap has a background and dotted line border. Below are its styling settings, which are similar to the example above with the addition of padding, background-color, and border settings.

*.styledindent{float:left; position:relative; top:-7px;
  margin-left:-3px; margin-right:3px; padding:2px;
  font-size:20pt; font-weight:bold; color:#ffffff;
  background-color:#00008b; border:3px dotted #999999;}

The best way to see how the padding, background-color, and border settings affect the look is to change them and see what happens. Basically, the padding setting adjusts the amount of space around the drop cap. The background-color fills the float area and the border applies a dotted line that sits inside the four edges of the float.

Marginal Drop Cap

A marginal drop cap is used when you do not want the text to wrap to the left and under the drop cap. The styling is applied to the first letter of the first paragraph as an inline element the same way the floating drop cap is applied. This kind of drop cap has styling to indent the paragraph, and styling applied to the letter that moves the drop cap into the left margin. Here are the style settings for the marginal drop cap at the beginning of this paragraph:

*.indented{position:relative; margin-left:40px; margin-top:10px;}
*.margindcap{position:absolute; left:-40px; top:-4px;
  font-size:40pt; font-weight:bold; color:#00008b;}

The indented style creates a relatively positioned margin that is 40px wide with a 10px top margin so it renders 10px below the heading above it. The margin is relatively positioned so its settings do not affect the positioning of the drop cap. The drop cap is absolutely positioned so it appears in its normal position in the flow without affecting the positioning of the paragraph to its right.

This figure showing a border around the drop cap and around the paragraph should help you visualize the relationship of the drop cap to the paragraph:

Source Code

You can get the full source code here.

Drop Caps: Aligned & Hanging

Monica — Tue, 25 Aug 2009 20:42:24 +0000

Drop caps are a way to style the first letter or first word in a document or at the beginning of a major section of a document. There are a few ways to make drop caps by styling paragraphs and text, and this blog entry will walk through how to use the first-letter pseudo class and how to make hanging drop caps. My next blog entry will cover floating and marginal drop caps.

The first-letter Pseudo Class

CSS provides the pseudo-class, first-letter, for styling the first letter or word in a paragraph or document similar to how the first C in the word, CSS, is styled at the beginning of this paragraph. But first-letter works best when you only want to specify simple font and text properties such as font-family, font-size, color, font-style, font-weight, font-variant, or text-transform. It works well for aligned drop caps (used on this paragraph) or floating drop caps (next blog), but cannot be used for a hanging or marginal drop caps (covered below). That is because a pseudo-class does not respond to the positioning styles needed to horizontally and vertically place a hanging or marginal drop cap.

Note: A pseudo-class is a way to format or add special effects to to some HTML elements. The syntax is selector:pseudo-class{property:value}. So for example, p:first-letter{color:#8b0000;} uses the first-letter pseudo class to make the first letter of the p selector red. Pseudo-class styles do not work with span.

CSS:

*.fl:first-letter{font-family:courier; color:#8b0000; font-weight:bold;
  font-size:14pt; font-variant:smallcaps;}

Tagging:

CSS Drop caps are a way . . .

Hanging Drop Caps

Hanging drop caps have two basic styles: 1) a hanging indent with settings to accommodate the height, width, and final position of the drop cap, and 2) a relatively positioned drop cap with settings to specify exactly where it sits within the hanging indent in relation to the paragraph.

The hanging drop cap, H, shown at the beginning of the above paragraph is relatively positioned because you want it to keep its position in the normal flow of elements on the page, but be able to control its horizontal and vertical placement without affecting the placement of the paragraph. Below are the style settings and tagging to get the drop cap followed by a section that adds the styles in steps to make it easier to see what each style setting does.

CSS

*.hangindent{padding-left:30px; text-indent:-30px; margin-top:-25px;}
*.dropcap{position:relative; top:21px; left:-2px; font-size:30pt;
  line-height:35px; font-weight:bold; color:#8b0000;}

Tagging

Hanging drop caps have two basic styles: . . . .

Step 1

Hanging Indent only — no other styles applied and margin-top commented out looks like this:

CSS

*.hangindent{padding-left:30px; text-indent:-30px; /*margin-top:-25px;*/}

Renders:

Paragraph indents by 30px, but the first line out dents (text-indent:-30px) by the same amount to create a hanging indent.

Step 2

Drop cap added, but margin-top still commented out on the hanging indent.

CSS

*.hangindent{padding-left:30px; text-indent:-30px; /*margin-top:-25px;*/}
*.dropcap{position:relative; top:21px; left:-2px; font-size:30pt;
line-height:35px; font-weight:bold; color:#8b0000;}

Renders

Note there is too much space between the end of this paragraph and the beginning of the paragraph with the drop cap.

Step 3

Setting for margin-top added back:

CSS

*.hangindent{padding-left:30px; text-indent:-30px; margin-top:-25px;}
*.dropcap{position:relative; top:21px; left:-2px; font-size:30pt;
  line-height:35px; font-weight:bold; color:#8b0000;}

Renders

With margin-top:-25px; added, the spacing between this paragraph and the paragraph with the hanging drop cap looks good.

Step 4

Make drop cap static and see how the horizontal and vertical offsets no longer work so you end up with an aligned drop cap.

CSS

*.hangindent{padding-left:30px; text-indent:-30px; margin-top:-25px;}
*.dropcap{position:static; top:21px; left:-2px; font-size:30pt;
line-height:35px; font-weight:bold; color:#8b0000;}

Renders

Step 5

Make drop cap relative again and change left property to a value of 20px. Note how the change in the horizontal offset of the drop cap does not affect the position of the paragraph.

CSS

*.hangindent{padding-left:30px; text-indent:-30px; margin-top:-25px;}
*.dropcap{position:static; top:21px; left:-2px; font-size:30pt;
line-height:35px; font-weight:bold; color:#8b0000;}

Renders

View the Full Source Code

dropcapsalignhanging.html