Using image for a site id

How to make this site id

This design uses an image with the name of the site as part of the side id. The image will go into the page. It is important to mark up the page so that the image is hyperlinked and inside the h1 tag, and that the alt text for the image is the actual name of the site (not a description of the image itself).

This design also has a tagline and a menu below the site id, which is laid out using grid.

There is a little bit of font styling, which you do not need to edit. We will learn fonts soon.

Process:

  • Start with laying out the grid for your tagline and menu. The menu will use the inline display method to get the list items horizontal. There is no need for a column gap, so the columns themselves can add up to 100%. Experiment with the percentages so the menu fits - 50/50 probably works for this short menu
  • You need a grid container to group the tagline and menu. You can give it a class of "banner-columns" or something similar that describes the function.
  • You will want to use text-align to align the list items to the right, and use margin on the left of the list items to spread them out. This is pretty similar to work we've done in menu mania
  • Now work on the site id graphic by putting an image tag inside the h1's anchor tag, and delete the text! Use this file: site-id-illustration.png.
  • You'll need to put the text "Viburnums" as the alt text for the image.
  • We'll resize the image so it looks good; a descendant selector is fine; we don't need a class in the image.
  • Remember the h1 has margin on its top and bottom. You'll need to zero this out.
  • Because we're using an image, we can't create a hover style that changes the graphic, but we can create a hover that changes how the image displays. We'll use the opacity property to get the site id to change on hover.

Viburnum filler text

Viburnums have long been one of the most popular flowering landscape shrubs. There are over 150 species of Viburnum. You can find a variety to suit any garden need: wet or dry, sun or shade, natural or formal, shrub or tree, native or exotic, USDA Zones 2-9. Bloom times span early spring through June and are followed by attractive fruit and outstanding fall foliage.

Most viburnums prefer full sun but will adjust to partial shade. They like a moderately fertile soil with a pH between 5.6 - 6.6., although many do just fine in alkaline soils. In general, viburnums are not terrible particular about where they grow.

That few pests will bother viburnums is one of the reasons they have become so popular in the landscape. Recently the Viburnum Leaf Beetle (VLB) has been introduced into North America trough Canada and has begun making its way south.