Archive for the ‘CSS’ Category

Social Networks Widget for eXtension People Application

In the eXtension People application, you can specify what social networks you participate in, and you can choose to make this information public. By making the information public, the eXtension People application will provide a JSON feed containing your information.

Ying Zhou, a programmer with ISU Extension IT, recently wrote a widget that will read this JSON feed, and display it on your web pages. You can see this widget in action at my ISU Extension staff page or this test blog on Blogger. (I’d put it on my blog, but didn’t see a way to embed the widget in a WordPress.com hosted blog.)

Here is the  basic code to use the widget:

<iframe src="http://www.extension.iastate.edu/Widgets/SocialNetworks/?email=bwebster@iastate.edu&showContact=false"
         width="200px" height="180px" frameborder="0"></iframe>

The web page that drives this widget takes the following query string parameters in the URL:

  • email: (Required – Text) Email address of the person to look up in eXtension’s system. This email address should match the address given in your eXtension profile.
    (In the example: email=bwebster@iastate.edu)
  • showContact: (Optional – true|false) When true, show contact information from eXtension’s system. When false, don’t show it. Default is True.
    (In the example: showContact=false)
  • showSocial: (Optional – true|false) When true, show the social network information from eXtension. When false, don’t show it. Default is True.
  • cssFile: (Optional – Text) Includes the given CSS file in the widget. This way, different sites can give the Widget different looks based on the CSS given.

With these options, especially the cssFile, you can modify the look of the output from the widget. You may need to adjust the height and width of the widget to fit your pages.

Feel free to use this widget on your own web sites. Let me know if you need assistance in using it.

Advertisements

Book Review – CSS Mastery

CSS Mastery (Advanced Web Standards Solutions)” by Andy Budd, Cameron Moll, and Simon Collison, is a good resource for how to use web standards and CSS in designing and laying out web sites. Although it’s by different authors, it is a good followup to the book “Web Standards Solutions“.

This book takes a task, and explains in detail how you might handle it. For example, chapter 5 is on creating navigation bars and chapter 7 is about site layout using CSS. We use many of these techniques in most of the web sites we develop.

Other useful chapters are on troubleshooting problems with your CSS, and hacks to deal with browser incompatibilities. We have Microsoft to thank for many of these hacks. IE 7 is much improved over previous versions. It is still good to be aware of these techniques.

Here is a link to the publisher’s web page for the book.
Advanced Web Standards Solutions Cover Image

The two Web Standards Solutions books give a good starting point for people that want to learn more about CSS. In addition, there are thousands of web sites that offer help with CSS. I also recommend having an expert you can ask questions, thanks again Matt.

Recently, I was asked if I know of any training on using CSS, so I’m looking for recommendations. If you know of any professional development opportunities on learning CSS, either online or traditional, please post a comment.

Using DIV Elements for Formatting a Page

Floyd asked me to post an example showing some formatting on a <div> element. I built a test web page using the code from “Which to Use – div or span?” and some text borrowed from a recent ISU Extension News Release. Without any formatting, the page looked like this.

Unformatted DIV Example

By adding a couple of styles, it was easily changed this to look like this.

Formatted DIV Example

Remember that the <div> element had an id=”message” and the <span> tag had class=”date”. These hooks are used by the styles.

#message {
width:185px;
float:right;
border:solid black 2px;
margin-left:10px;
padding: 0px 10px;
background:red;
}

#message .date {
font-weight:bold;
color:blue;
}

This is just a very simple example that touches on what can be done by styling <div> and <span> elements. I recently worked on a web site using this technique, but can’t show it here because the site is password protected.

Using styles with <div> tags is one of the major factors that allow us to layout pages without the use of <table> tags. It takes a more <div> tags and styles than I wanted to show in this post, but can be fairly easy to accomplish. Let me know if you want to see more about how we do tableless layouts.

BTW – I’m a firm believer that <table> tags should only be used for tabular data, not for laying out web pages.

Which to Use – div or span?

When I’m writing code for web pages, I normally have to stop to think when to use a <div> tag, and when to use a <span> tag. The big difference is that <div> is a block-level element while <span> is an inline element.

Block-level elements usually contain other elements, including text, inline elements, and other block-level elements. You can think of them as boxes. They are normally displayed with space before and after this box, unless you modify this behavior with CSS.

Inline elements usually contain text or other inline elements, and are displayed where they occur. They are usually used to give your document more semantic meaning.

Here is a simple example:

<div id="message">
  <p>The current date is <span class="date">August 28, 2007</span>.
  Labor Day is just around the corner.</p>
</div>

Notice how the <div> tag surrounds a chunk of content that contains a <p> tag, which is another block-level element. The <span> tag simply surrounds text within the content.

With these tags in place, we have plenty of hooks for CSS to use to format this content. By having the date in the <span> tag, we can do special formatting on the date if we choose.

Forms with CSS (3 of 3) – Checkboxes

The first two posts in this series showed a way to markup an HTML form, and apply styles to it. This works well for any field where the label comes before the field.

Typically for checkboxes, we put the checkbox field first, with the label after it. The HTML code is similar to the other form fields. The differences are that the <label> is now after the <input> tag, and we’ve wrapped this pair in a <div> section with a class attribute.

<div class="alignMe">
  <input id="employee" type="checkbox" name="employee" />
  <label for="employee">ISU Employee</label>
</div>

Now we add a couple styles that hook into this new class:

fieldset .alignMe {
display:block;
margin-left:6.9em;
}
fieldset .alignMe input {
width:20px;
}

With these added, we end up with a form that looks like:

Form with Checkbox Included
The extra <div> tags and the corresponding styles allow you to shift the checkbox so it’s in line with the other form fields. You can use this technique on other form elements such as radio buttons as well.

Related Articles:
Forms with CSS (1 of 3) – HTML Markup
Forms with CSS (2 of 3) – Styles

Forms with CSS (2 of 3) – Styles

After doing the semantic HTML code for a form, as shown in “Forms with CSS (1 of 3) – HTML Markup“, your form will look like something like:

Form without Styles Applied

While this is usable, we can improve it by adding some styles. Here are the styles I added:

fieldset
{
display: block;
margin: 0 0 1em 0;
border: 0 solid #FFFFFF;
border-top: 1px solid #000000;
padding: 0 1em 1em 1em;
width:275px;
}

fieldset legend {
font-weight:bold;
}

fieldset label, fieldset input, fieldset select {
display: block;
width: 150px;
float: left;
margin-top: 8px;
}

fieldset label {
width: 6em;
padding-right: 20px;
}

fieldset br {
clear: left;
}

The resulting page looks like:

Form with Styles Applied

As you can see, you can drastically change the look of the form with just a few styles. If you wanted, you could add still more styles for additional formatting.

The styles for this example were adapted from the web pages “CSS2 – Tableless Forms” and “The Man in Blue > Experiments > Form Layout“. I only made a few modifications from these examples.

Related Articles:
Forms with CSS (1 of 3) – HTML Markup
Forms with CSS (3 of 3) – Checkboxes

Forms with CSS (1 of 3) – HTML Markup

When I develop web pages, I try to use web standards complaint HTML code and CSS for layout and design. This gives a lot of flexibility in the design while being usable for people using screen readers and other browsers that don’t use CSS.

This has worked fine with regular web pages, however I’ve always struggled with how to mark up forms to be semantically correct. After doing a little research on the subject, I’ve switched the way I typically write forms. I’m still learning so am open to suggestions to improve my skills.

Some of the forms I used to write would have elements that looked like:

<p>
  First Name:
  <input id="txtFirstName" name="txtFirstName" />
</p>
<p>
  Last Name:
  <input id="txtLastName" name="txtLastName" />
</p>

When I wanted the input boxes to line up vertically with each other, I’d either add the necessary spacing using “ “or build a table with labels in the first column and input fields in the second.

I’ve come to realize that there are better ways to do this markup. The way I typically do this now is:

<fieldset>
  <legend>Name</legend>
  <label for="txtFirstName">First Name:</Label>
  <input id="txtFirstName" name="txtFirstName" />

  <label for="txtLastName">Last Name:</Label>
  <input id="txtLastName" name="txtLastName" />
</fieldset>

This adds a little more HTML code, however provides more semantic information. Once you get used to coding the form like this, it’s pretty easy. A huge advantage of using the <fieldset> and <label> tags, you have a lot of hooks to use with your CSS. This makes it easy to format the form. More information in “Forms with CSS (2 of 3) – Styles

Note for ASP.NET programmers: The third tip in this article from Standards Schmandards shows how to tie your <label> tags to the tags that is generated from <asp:TextBox>.

Related Articles:
Forms with CSS (2 of 3) – Styles
Forms with CSS (3 of 3) – Checkboxes

Adding CSS to a Single Page

The project I’m working on has a page with an input form, and I  want to use CSS to format the form. Options for locating these styles include adding them in the main stylesheet used by the project, adding an embedded stylesheet to the page, creating a new CSS file and adding it to the master page, or creating a new CSS file and adding it to the page with the form.

I decided to create the CSS file and link it only page with the input form. In this project, linking to an additional CSS file is easier to implement than embedded styles, and should be easier to maintain in the long run. Adding styles to the main CSS file or linking from master file would mean that all the pages in the project would get the extra styles, not just the one that has the form.

This project is being developed in .NET, and is taking advantage of master files (a cool feature added in .NET 2.0) The <HEAD> section of the input form is coming from the master file, therefore I can’t simply add the link in .aspx file here. It has to be linked though the backend code. To do this, I added the following code to the Page_Load function:

// Add a CSS file to handle the formatting of the form
HtmlLink cssLink = new HtmlLink();

cssLink.href="/grainstorage/styles/form.css";
cssLink.Attributes.Add("rel", "stylesheet");
cssLink.Attributes.Add("type", "text/css");
Header.Controls.Add(cssLink);

This code builds the link with the proper information, then adds it to the header of the page at runtime. Works like a charm when you have a stylesheet that only affects a few pages in your project.

Book Review – Web Standards Solutions

About two years ago, we were just getting going with web standards and cascading style sheet (CSS) based layout. We were struggling to make some of our pages look and feel the way we wanted them to, and with inconsistencies between different client machines and browsers. It seemed like we were spending a lot of time with the CSS, and I was questioning to myself whether it was worth the trouble. I just didn’t “get it”.

Matt Heerema, our web designer at the time, sensed that I was struggling, so he loaned me his copy of “Web Standards Solutions” by Dan Cederholm. He told me it was an easy read, and that it would help me in understanding why complying with web standards was something we should strive to accomplish. He was right.

Sometimes technical books are somewhat dry, with a lot of theory, and you need to force yourself to read though the tough parts. Not this book. After starting reading, it was hard to put down. The chapters are short, informative, and interesting. I read the book in about 3 sittings.

Each chapter in the book takes a topic, and shows 3 or 4 methods of implementing that functionality in your web page. For example, the chapter on headings shows how you can make text stand out as headings on your page using a span tag with embedded styles, paragraph tags with bold text, or heading (<h1>, <h2>, etc.) tags. It explains the advantages of using the the heading tags, which is the web standards compliant method. It then goes on with some “Extra Credit” of how to apply some styles to your heading tags to make them really stand out.

This book will give you an appreciation for why web standards are important, and will give you an introduction to CSS. It will not give you a complete understanding of CSS, but will hopefully leave you hungry for more. You can then pick up another book that does more advanced CSS techniques, such as the followup book “CSS Mastery, Advanced Web Standards Solutions”.

I liked this book so much, I purchased a copy to have on my book shelf. Whenever someone says they are interested in learning more about web standards or CSS, it’s the first book I recommend. It is a must read for anyone doing web development. More information can be found from the publisher’s web page.

The Markup and Style Handbook Cover Image