with Lorelle and Brent VanFossen

Our HTML and CSS Codes – It’s All In The Details

We have a lot of small details that make our page design easy to use and pretty. Some are simple bits and pieces of style code that make things easier, such as spacers, while others are a little more sophisticated. All fill a need.

Background Images – Our Header

Our Website header for Taking Your Camera on the Road

We’ve showed you the code for our header layout and here is a more detailed look. We chose to have a header that would display text for printing and non-graphic viewers while also including a graphic for the visual display.

Within the code below there is a background image. An image placed within a CSS selector sits in the background, so to speak, of a page rather than on the page itself like an embedded graphic. Because the background graphic is within the style sheet code, when the style sheet is absent, such as with software for the blind and visually impaired, the graphic is invisible to the reader.

The background image is positioned relative to the container it resides in. The various declaratons include defining if the graphic is repeated, not repeated, and if repeated, how many times and in which directions; and the relative position (top, bottom, left, right) within the container. The repeating factor is based upon an x-y grid with repeat-x across and repeat-y vertical. We have ours set to not repeat and to sit in the left, bottom corner, fixed in place.

#header {
display:block; padding:0 3px; width:100%; height:100px;
background:url(“images/core/takelogo.jpg”) no-repeat left bottom fixed}

#header p {
position:relative; margin:0; font-style:italic; text-align:right; font-size:65%; color:blue}

The HTML code is very simple, which makes a lean HTML file and makes it easier to change in the future.

<div id=”header”><p><b>Taking Your Camera On The Road:</b><br>
Tips, tricks, and techniques for the traveling nature photographer</p></div>

CSS Backgrounds – Links and Resources

Borders – Images and Image Links

We host a lot of information and articles within our pages and every character of content or code adds up. Therefore, we fuss a bit trying to save every byte by optimizing our site as much as possible, getting rid of stray spaces in the codes and redundant codes. One of the redundant and useless codes put in by our HTML editor (and most others) occurs when an image is embedded within an HTML file. Along with the height and width of the image, a declaration is added which states border="0". This is all fine if we cared about the fact that the image has no border, but it doesn’t. So we don’t need the wasted attribute.

In our HTML pages, we did a multiple file search and replace and removed all references to border="0". Remember to add a space bar before or after to clean up the double space left behind by the attribute’s removal. In our style sheet, we add the following rule:

img {
border:0}

This simple effort removed over 50,000 bytes from our web pages, an average of 5,000 bytes per page file. Instantly, a 25K file becomes 20K, reducing the file size by 5%. If we want a border around an image, we define it as a class selector since it will change only the images we want to have a border and not every image on the site.

Notice the border boxes around the icons which are linked graphics. With the CSS code, the linked graphic loses the box around it, looking clean and simple. There is one small drawback. If you create a link in the form of a graphic, the link creates a border around the graphic to designate it as a link. While this is a good idea, making it clear what is a link and what isn’t, a bright purple border around your white background graphic isn’t very graphically pleasing. To remove the borders from the links from the linked graphics, we added another rule:

a img {
border:0}

The border around the graphic is gone and the design is clean and simple again. If the mouse moves over the graphic, it will still behave with the a:hover link design, you just don’t see the inactive link border highlight. Clean and simple.

Invisible Comments and Code

We sometimes have content we don’t want visible on the screen. One such code is a PHP code which activates a responding email when a search engine’s robot or spider crawls through our web pages. This way I know when and which search engine has visited my page. I don’t want this code to be visible to the audience but it has to be visible to the robot and spider. We have two ways of hiding this text. The first method is to not display it.

.invisible {
position:relative; display:none}

<p class=”invisible”>You can’t see anything because it isn’t really here.</p>

We make a policy of avoiding webpage spam and filling up our try to fool search engines. They know this trick and it can get you banned from their lists. Don’t play any games trying to attract attention. Do it right, meet the web standards validation, and your ability to soar up search engines will happen, done the right way not the sneaky way.

Making content disappear with display:none doesn’t make it go away. Users with screen-reading software may “read” the hidden code or content, so it doesn’t disappear completely. Use this technique sparingly.

Our Web Page Design Empty Spaces

On occasion we need to add blank space or white space between elements to avoid crowding on top of each other. If we can’t set the white space within our style code, we have to use a “spacer” to force the space into place. Our spacer is set up to clear all the containers above it and start on a fresh clean row, so to speak. It uses the declaraton clear:both to set itself below all the containers above it so the new container will not overlap the old.

.spacer {
clear:both}

<div class=”spacer”>&nbsp;</div>

The &nbsp; is the extended character code to represent a space made with the spacebar. Think of the &nbsp; as a space holder within the HTML division.

.emptyspace {
clear:both; height:10px; width:50px; background:transparent}

<div class=”emptyspace”>&nbsp;</div>

Consistent white space should be set up within the style rules for the container divisions through the use of margins and padding.

Our Web Page Design Blockquotes

When we create a pull-quote, a quote highlighted away from the text, we want it to have some character and pizzazz. So we created open and closed graphic quotes and changed the text to be larger, dark blue, and feature the source of the quote in small, italic letters.

This is our blockquote. Notice the alt declaration in the image selector. It is blank. This is because the quote graphics aren’t important to someone blind. The blockquote will be read as a quote without needing the graphic inferences.
Lorelle VanFossen, Web Designer and Braggart Extraordinaire
blockquote {
display:block; position:relative; color:blue; font-style:italic; font-size:105%}

blockquote i {
color:#6633ff; font-style:normal; font-size:70%; text-align:right}

<blockquote>
<img src=”http://cameraontheroad.com/images/core/quotsml.gif” width=”31″ height=”26″ class=”alignleft” alt=””>
This is our blockquote. Notice the alt declaration in the image selector. It is blank. This is because the quote graphics aren’t important to someone blind. The blockquote will be read as a quote without needing the graphic inferences.<br>
<i>Lorelle VanFossen, Web Designer and Braggart Extraordinaire</i>
<img src=”http://cameraontheroad.com/images/core/quotsmr.gif” width=”31″ height=”26″ align=”top” alt=””>
</blockquote>

CSS Blockquotes – Links and Resources

Floats With Text and Images

In the “old days”, just a few years ago, when you wanted a graphic to sit on the right size of the screen, you would include a declaration within the img code that would state align="right" to move the graphic over and the text would wrap around. Align has been replaced by float. Therefore we needed a class selector to align the images within the document. We also needed to replace the align structure for text that we want center, left, or right with the text-align declaration. (Note: We used a shorthand combination of two classes in this example. You can find more about this in our section on CSS shortcuts and shorthand.)

.right {
float:right}

<p> <div class=”right red” style=”width:50%”>The interesting thing about floats vs text-align is that a right float moves the entire container, like this paragraph, over to the right side of the screen within its parent container, allowing the content to flow around it. But the text is still left justified. </div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quam tortor, pulvinar ut, luctus vel, vestibulum id, wisi. Maecenas molestie sollicitudin velit. Duis bibendum elit vitae dui. Fusce feugiat, nunc quis euismod rutrum, neque mauris luctus tortor, ut tempus tortor orci quis mauris. Vestibulum sollicitudin pede vitae erat. Aenean purus velit, posuere non, auctor ut, hendrerit laoreet, wisi. Aliquam erat volutpat. Maecenas tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut pede quam, tincidunt in, scelerisque id, gravida eget, mauris. Vivamus eleifend hendrerit diam. Aenean sagittis, sapien in pellentesque dapibus, justo erat semper augue, porta condimentum lectus purus in justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque gravida neque sollicitudin lorem vulputate gravida. Praesent sollicitudin elementum elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

The interesting thing about floats vs text-align is that a right float moves the entire container, like this paragraph, over to the right side of the screen within its parent container, allowing the content to flow around it. But the text is still left justified.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quam tortor, pulvinar ut, luctus vel, vestibulum id, wisi. Maecenas molestie sollicitudin velit. Duis bibendum elit vitae dui. Fusce feugiat, nunc quis euismod rutrum, neque mauris luctus tortor, ut tempus tortor orci quis mauris. Vestibulum sollicitudin pede vitae erat. Aenean purus velit, posuere non, auctor ut, hendrerit laoreet, wisi. Aliquam erat volutpat. Maecenas tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut pede quam, tincidunt in, scelerisque id, gravida eget, mauris. Vivamus eleifend hendrerit diam. Aenean sagittis, sapien in pellentesque dapibus, justo erat semper augue, porta condimentum lectus purus in justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque gravida neque sollicitudin lorem vulputate gravida. Praesent sollicitudin elementum elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


The float left does the same thing as the right float but puts the content on the left side of the page.

.left {
float:left}
The interesting thing about floats vs text-align is that a right float moves the entire container, like this paragraph, over to the right side of the screen within its parent container, allowing the content to flow around it. But the text is still left justified.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quam tortor, pulvinar ut, luctus vel, vestibulum id, wisi. Maecenas molestie sollicitudin velit. Duis bibendum elit vitae dui. Fusce feugiat, nunc quis euismod rutrum, neque mauris luctus tortor, ut tempus tortor orci quis mauris. Vestibulum sollicitudin pede vitae erat. Aenean purus velit, posuere non, auctor ut, hendrerit laoreet, wisi. Aliquam erat volutpat. Maecenas tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut pede quam, tincidunt in, scelerisque id, gravida eget, mauris. Vivamus eleifend hendrerit diam. Aenean sagittis, sapien in pellentesque dapibus, justo erat semper augue, porta condimentum lectus purus in justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque gravida neque sollicitudin lorem vulputate gravida. Praesent sollicitudin elementum elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


.center {
text-align:center}

<p class=”center”>With a center text-alignment, we are no longer working with floats but actually forcing the text to line up down the center with ragged edges on the right and left. As this is not a float but a text alignment, text doesn’t flow around this container any more.</p>

With a center text-alignment, we are no longer working with floats but actually forcing the text to line up down the center with ragged edges on the right and left. As this is not a float but a text alignment, text doesn’t flow around this container any more.


.righttext {
text-align:right}

<p class=”righttext”>With text-align set to right, the text in this paragraph is now right justified with a ragged left edge.</p>

With text-align set to right, the text in this paragraph is now right justified with a ragged left edge. If you don’t see the justification, narrow the width of the page you are viewing.


.lefttext {
text-align:left}

<p class=”lefttext”>With text-align set to left, we are back where we started and the paragraph text is now left justified with a ragged right edge.</p>

With text-align set to left, we are back where we started and the paragraph text is now left justified with a ragged right edge.

Floats With Images

The same technique can be used with images. Here is an example of the same text with an image floated to the left.

<img src=”http://cameraontheroad.com/photos/mammals/foxcloseup.jpg” class=”alignleft” width=”204″ height=”302″ alt=”Red fox in snow, photograph by Brent VanFossen”>

Red fox in snow, photograph by Brent VanFossenBy placing a class statement that floats the graphic to the left or right, the align element is now gone from the image tag and replaced by class="alignleft" which floats the graphic within the container to the right or left of the container. Using a float declaration, graphics can be placed to move within the container they reside, like this paragraph, for instance, instead of being separate from their container. The more the graphic stays with the content, the better the graphic relates to the content.

Now, notice how we’ve started another paragraph and the photograph of the fox continues to be wrapped around by the text, even though this new paragraph is its own separate container. Floats literally “float” within the content so the content will move around it with the flow of the document, dependent upon other layout charactertics such as column or page width, and the width of the screen or monitor in which the browser window resides. Narrow this window and the content will continue to flow around the photograph. The top of the photograph stays with the paragraph in which the img tag resides, but all the content flows around it.

CSS Floats – Links and Resources

Fixing Browsers: Bugs and Hacks

Example of a Microsoft Internet Explorer bug that causes boxes to overlap list bullets. While the CSS and HTML web standards are in place, they are still a growing and evolving entity. As Internet browsers get more advanced, the codes change with them. Before standards became the norm, a designer would have to design their web pages to accommodate all the different browsers out there and the different ways they handle code. Today, a few designers are still designing for older browsers, but most people have gotten the clue and updated their Internet software. Still, even today’s browsers have some bugs and here are some fixes to deal with the ones in Microsoft Internet Explorer, the most common Internet browser in the world.

Internet Explorer computes the margins and padding differently than other browsers and the web standards convention. This results in a bug involving text, boxes, lists, and images. In the graphic example to the right, notice how the box overlaps the list bullets on the right side. Tom Gilder’s Internet Explorer Bugs page has a good example of how these bugs work. Other bugs include one where the content will be invisible on the page until you scroll down the page and then it magically appears and disappears. Sometimes images and containers will appear to be jumping around. The links below can give you the best fixes for these bugs, but these are ours:

/* Boxes */
html > body .boxleft {
margin-left:12px}

html > body .boxright {
margin-right:12px}

html > body .boxtip {
margin-right:12px}

html > body .boxquote {
margin-right:12px}

html > body .boxblue {
margin-right:12px}

img.left {
margin:1% 2% 1% 0; border:0}

img.right {
margin:1% 0 1% 2%; border:0}

To ensure fewer bug problems, make sure that every container element has a display and position declaration. Most of our selectors feature display:block and position:relative to insure that the blocks of content are grouped together and their positions are not absolute but relative to the flow of the page’s structure.

Links for Information on Bugs

Directional Ploys

International users of the Internet and Web are increasing at rates faster than the US, Canada, and Europe. As more international users come on, the need to pay attention to the impact your page will have on foreign computers and Internet browsers, especially ones with right-to-left languages, the more you need to pay attention to the international standards for web compliance.

Because we live in Israel, we have a lot of web page users who have Hebrew-enabled operating systems, usually Windows 98 though some are slowly changing to WinXP and Linux. Their Internet browsers tend to be old and their operating system forces the software to produce right-to-left content to support right-to-left languages such as Hebrew and Arabic. This tends to override all web coding, but you can throw some code into the mix to help override their directional preference. This works on the newer versions of browsers and is ignored by the older versions. For those, the page ends up with right aligned text and graphics going all over the place. Keeping your browser and operating system updated and the HTML layout as simple as possible, as we have, overcomes those display problems since the oldest browsers won’t recognize the display elements and will produce the page content linear to the code presentation.

Having the right doctype makes a huge difference, too, but many older browsers don’t recognize doctype so this bidirectionality code, such as the below block-level code to influence browsers like Internet Explorer versions 4 and under, will help you enforce the direction of your layout.

Start by stating the direction preference in the appropriate doctype to your web page and then in your HTML and BODY tags:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<html dir=”ltr” lang=”en-US”>

Here are a few of the English language codes for other versions of English.

  • English – lang=”en”
  • English US – lang=”en-US”
  • English Great Britain – lang=”en-GB”
  • English Cockney – “en-cockney”
  • English Scouse – lang=”en-scouse”
  • English Australia – lang=”en-AU”
  • English Canada – lang=”en-CA”

In your style sheet, add the following direction declaration in your HTML and BODY selectors and the bidirectional code below to help align your content appropriately. It’s a bit overkill, but until this problem is easily solved, exagerated code ensures a proper layout when challenged by a foreign language.

html, body {
direction:ltr}

/* begin bidirectionality */
bdo[dir=ltr] {
direction:ltr; unicode-bidi:bidi-override}

bdo[dir=rtl] {
direction:rtl; unicode-bidi:bidi-override}

*[dir=ltr] {
direction:ltr; unicode-bidi:embed}

*[dir=rtl] {
direction:rtl; unicode-bidi:embed}

/* block-level in msie4 */
address, blockquote, body, dd, div, dl, dt, fieldset,
form, frame, frameset, h1, h2, h3, h4, h5, h6, iframe,
noscript, noframes, object, ol, p, ul, applet, center,
dir, hr, menu, pre, li, table, tr, thead, tbody, tfoot,
col, colgroup, td, th, caption

{
unicode-bidi:embed}

Bidirecctionality – Links and Resources

One Comment

  • Posted August 14, 2007 at 15:16 | Permalink

    Lorelle: I hope you will be willing to help me. I’m not a softwear person. I have recently downloaded a new theme I want to use You’re looking at it on my blog page. I wish to make these changes:
    (1) new bolder font in the post area
    (2) Clear the left col & list my posts
    Pretty minor stuff wouldn’t you say? (But I’ve spent 6 hours(!)on the forums and, of course, the wordpress site.

    My host has been helpful, but I’ve reached their limit They say they can’t teach me coding. I agree, but I believe something is very wrong in the WORDPRESS world

Post a Comment

Your email is kept private. Required fields are marked *