Site id and menu laid out with grid

How to make this site id

Sometimes a logo or site id works best if it is a graphic, not text in the page. However, you must have your h1 tag for proper document outlines and SEO. The solution is to simply put that graphic in the page as an image, but inside the h1 tag. Your document outline will look better if you put the site id text as the value for the alt attribute (required anyway) in the image.

I would probably opt for versions 1 or 2, rather than this version, but if you are smart about markup, it works okay. If you don't put the image in the h1 tag, you don't get a good document outline or good SEO, etc.

The disadvantage to this method is that you can't get a hover style for the site id without javascript. Our hover in image replacement is done with background images (that's how we can do it in CSS without scripting).

Process:

• Start with laying out the grid for your site id 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 (it isn't 50/50)
• You do not need a grid container because the banner will serve. There are only two children of the banner: the site id and the menu
• 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-translucent.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.
• Depending on your design, you could use align-items to center or align to the baseline your menu. But this doesn't work for our design, so we'll use a top margin on the menu to get the text where it looks good.
• 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 filter property to get the site id to change on hover.
• Read more about the filter property here; it can do some cool stuff: developer.mozilla site. Use which ever filter you prefer, and I'll be checking your over to be sure it isn't just using opacity.

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.