Skip to Main Content

Archive for the 'Cascading Style Sheets' Category

Developing Departmental Websites at Indiana University

Learning paths road sign.Congratulations! You made it! If you’re here, that can mean any number of things, but most likely you have inherited a departmental web site and are going to redesign it or you have been newly hired and are responsible for redesigning the department’s site. Where do you begin?

If this sounds overwhelming, then you are in the right place. My goal, by the end of this post, is to help you understand the landscape for departmental and group web pages at the university and describe some resources to help you along your way.

Before we jump into the specifics, let’s get a quick overview of what this post contains.

  1. The IU Brand – find out how to make your site conform to the visual identity that has been established for IU.
  2. Plan Ahead and Prepare – Not just a part of Leave No Trace, but also a crucial phase in web design and development. Understand the problem fully before you begin building a solution.
  3. Build, build, build – Put your planning to good use while putting together all the pieces of your site.
  4. Publish, Document, and Maintain – Once you have a design, it’s time to publish it, create help documentation, and then maintain and grow the site through the future.

The process is not linear, nor does it have a finite ending point. Instead, the process looks something more like this:

Plan, build, maintain, repeat.

After your planning phase, you build. Once built, you maintain. While maintaining, you build new features, etc. There will come a point when you need to break out of the Maintain-Build loop back to the planning phase. As you can see from the diagram above, there really is no end to the web design process, only changes of phase.

Read the rest of “Developing Departmental Websites at Indiana University” »

Using the CSS content property to update text content across your site

You’ve fully completed the home page for a new website you’re working on, and you’re about ready to copy it dozens of times to flesh out the rest of the pages for your website. Right before you start duplicating that index.html page, you remember that you wanted to add copyright information to the footer.
It is also a bit of a wake up call that you could have remembered to put in the copyright information a month later and would have to, at that point, go into each of these of pages individually to fix the footer.
This tutorial is about a handy little css property that allows you to control the content inside of any given element in your xhtml documents. Since this can be handled in an external css stylesheet document, you’d be able to change the content across all the dependent xhtml files while only having to go to one place.
Prerequisite knowledge:
an intermediate understanding of XHTML and CSS
Say we have a page like this:
An example of a web page with a footer at the bottom
Note: this tutorial assumes you would know how to create a page like this, or any basic webpage for that matter.
The footer has a bit of contact information inside of it, but let’s say we also want to add the copyright information to the footer, next to the email address.
The code for the footer may look like this:

<div id="footer">

The css property we will be using to insert the desired additional text is the “content” property. There are a few quirks to get used to when using this property. For one, the property can only be used in a rule whose selector uses the either the “before” or “after” pseudo-selector. The content that you add using css will be placed within the targeted element, but whether the content will appear before or after the pre-existing content of the targeted element depends on which pseudo-selector you choose.
Since we want the copyright information to appear after the e-mail address, we will use the “after” pseudo-selector. Create an additional rule in your stylesheet as follows:

div#footer p:after

This rule will target only paragraphs within the footer, and place whatever the value of the content property is after the existing content within the paragraph. Let’s create this copyright information with the content property now:

div#footer p:after
  content: " - copyright 2011";

If you look at the page in a browser, you should see that the footer now says “contact: – copyright 2011”. Every page on the website should now have the updated footer, and we didn’t have to lay a finger on any of the xhtml documents.
Success, right? Well let’s say that you wanted to use the copyright character entity instead of the text “copyright.” Naturally, you’d think to replace “copyright” with the &copy; character entity. You can go ahead and try it if you’d like.
What you’d see is that the text “&copy;” appears literally on the webpage. The next thing you might do is remember that each character entity name has an entity number value too, that can be used as a character entity reference as well. You could then look up copyright’s character entity value as 169, and try replacing &copy; with &#169; in that content property value.
Well, this would have worked if we were using &#169; in the xhtml content, but unfortunately, it does not work that way in the css. In order to get these character entities to work, we have to convert the entity decimal value to hexadecimal and use css escape syntax. If you don’t understand what is meant by all that, then no worries, the process is really straightforward.
First, do an internet search for “decimal to hex converter”; there are many of these resources on the web. In fact, you can simply type in “169 decimal to hex” to the bing search engine, and the answer should be at the top of the results, without having to go into any pages.
The hexadecimal equivalent of decimal value 169 is hex value A9.
Note: to differentiate hexadecimal numbers from standard [base ten or decimal] numbers, some resources might use the “0x” notation, e.g., 0xA9 for the hexadecimal value A9.
In order to use this in the css content property value, to prevent literally displaying “A9” we need to use the css “escape” syntax to use it as a character entity. We do this with a backslash.
Replace &copy; (or “copyright” if you didn’t attempt to use the xhtml character entity name) with “\A9 “:

content: " - \A9  2011";

Note: there are two spaces between “\A9” and “2011” and that is because the space following the hexadecimal value is part of the escape syntax. The space prevents ambiguity in situations where the designer wants the character entity to appear next to the content without any space, and the first character of that content just so happens to be a hexadecimal digit (i.e. 0-9 and a-f or A-F). If we wanted “©2011” (that is, no space between © and 2011) then we would use “\A9 2011” instead of “\A92011” because the browser can’t tell you don’t mean \A and 92011, or \A92 and 011, \A920 and 11, and so on.
Well, everything works, but before you leave here to try this on your own project, there are a couple important items to consider.
First, the content property and the :before and :after pseudo-selectors do not work in versions of Internet Explorer before IE8, so if this content you will generate with this css technique is pivotal to the accessibility of your site, then it may be a good idea to hold off until more users have migrated away from those earlier versions of IE.
Second, and somewhat related to the previous concern, is the idea of semantics. Css is meant to be used for presentation and style only. All content and structure is intended to be kept in xhtml. This being said, when we use the content property, it is usually to enhance the page, rather than to add essential content.
Along this same vein, you may have already noticed that you cannot drag-select the text generated with the content property, because as far as the actual document goes, that content does not actually exist– it is merely presentational elements from css, and so it most definitely will not be used in any semantic application, like use in “pagerank” for Google’s search engine, accessibility with screen readers, and so forth.
As long as you are aware of these caveats, then go ahead and find clever uses of this unique and powerful css property.

Using JavaScript to create a dynamic tab-based webpage

Have you ever been to a web page where you can click on buttons or tabs that swap content on the page without having to load an entirely separate web page? Have you ever wondered how to make your own page have similar behavior?
Well, there’s good news and bad news. The bad news is that you’re going to need to write a bit of javascript to get this to work, and if you don’t know javascript, I can understand your reflex to just close this tutorial right now– but hold on! The good news is that it’s simple and doesn’t require an in-depth understanding of javascript to get this working.

Prerequisites for this tutorial:
A moderate understanding of XHTML and CSS

Read the rest of “Using JavaScript to create a dynamic tab-based webpage” »

Get Training Tips via RSS Subscribe to Entries feed or Read Comments via RSS Subscribe to Comments feed.